/* Custom Asura Scans style overrides */

/* Outer #comments container background overrides */
body.dark-mode:not(.theme-frost):not(.theme-silver):not(.theme-sepia):not(.theme-light) #comments,
body.theme-dark #comments,
body.theme-night #comments,
body.theme-onyx #comments,
body.theme-dusk #comments {
    background-color: #1c1c1e !important;
    border-color: #27272a !important;
    color: #e4e4e7 !important;
}

body.theme-sepia #comments {
    background-color: #f4ecd8 !important;
    border-color: #d7cbb1 !important;
    color: #5b4636 !important;
}

body.theme-silver #comments {
    background-color: #e2e8f0 !important;
    border-color: #b8c5d6 !important;
    color: #18181b !important;
}

body.theme-frost #comments,
body.theme-light #comments {
    background-color: #ffffff !important;
    border-color: #e2e8f0 !important;
    color: #09090b !important;
}

/* Header Nav spacing & wrapping on mobile */
#comments .comment-header-nav {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    flex-wrap: nowrap !important; /* Prevent wrapping */
    gap: 10px !important;
}

#comments .comments-title {
    font-size: 1.1rem !important; /* Smaller count title */
    white-space: nowrap !important;
}

/* Sorting tabs container */
#comments .comment-sorting-tabs,
.chapter-comments-section #comments .comment-sorting-tabs {
    display: inline-flex !important;
    background-color: #f1f5f9 !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 8px !important;
    padding: 3px !important;
    gap: 2px !important;
}

body.dark-mode:not(.theme-frost):not(.theme-silver):not(.theme-sepia):not(.theme-light) #comments .comment-sorting-tabs,
body.theme-dark #comments .comment-sorting-tabs,
body.theme-night #comments .comment-sorting-tabs,
body.theme-onyx #comments .comment-sorting-tabs,
body.theme-dusk #comments .comment-sorting-tabs {
    background-color: #1e2026 !important;
    border-color: #2d3139 !important;
}/* Duplicated in interactions.css removed */
/* Duplicated in interactions.css removed */


body.theme-frost #comments .comment-sorting-tabs,
body.theme-light #comments .comment-sorting-tabs {
    background-color: #f1f5f9 !important;
    border-color: #e2e8f0 !important;
}

/* Sorting Buttons */
#comments .comment-sorting-tabs .gdwp-comment-sort-btn,
.chapter-comments-section #comments .comment-sorting-tabs .gdwp-comment-sort-btn {
    background-color: transparent !important;
    border: none !important;
    border-radius: 6px !important;
    color: #64748b !important;
    font-size: 12px !important; /* Smaller text */
    font-weight: 600 !important;
    padding: 5px 10px !important; /* Smaller padding */
    box-shadow: none !important;
    transition: all 0.2s ease !important;
}/* Duplicated in interactions.css removed */


body.dark-mode:not(.theme-frost):not(.theme-silver):not(.theme-sepia):not(.theme-light) #comments .comment-sorting-tabs .gdwp-comment-sort-btn:hover,
body.theme-dark #comments .comment-sorting-tabs .gdwp-comment-sort-btn:hover,
body.theme-night #comments .comment-sorting-tabs .gdwp-comment-sort-btn:hover,
body.theme-onyx #comments .comment-sorting-tabs .gdwp-comment-sort-btn:hover,
body.theme-dusk #comments .comment-sorting-tabs .gdwp-comment-sort-btn:hover {
    color: #fff !important;
}/* Duplicated in interactions.css removed */
/* Duplicated in interactions.css removed */

body.theme-frost #comments .comment-sorting-tabs .gdwp-comment-sort-btn,
body.theme-light #comments .comment-sorting-tabs .gdwp-comment-sort-btn {
    color: #64748b !important;
}

#comments .comment-sorting-tabs .gdwp-comment-sort-btn.active,
.chapter-comments-section #comments .comment-sorting-tabs .gdwp-comment-sort-btn.active {
    background-color: #7f3be9 !important;
    border-color: #7f3be9 !important;
    color: #fff !important;
}

/* Editor Wrapper & Container */
#comments .gdwp-comment-editor-wrapper {
    border-radius: 12px !important;
    overflow: visible !important;
    border: 1px solid #e2e8f0 !important;
    background-color: #fff !important;
}

#comments .gdwp-comment-editor-wrapper.focus-within {
    border-color: #7f3be9 !important;
    box-shadow: 0 0 0 3px rgba(127, 59, 233, 0.15) !important;
}

body.dark-mode:not(.theme-frost):not(.theme-silver):not(.theme-sepia):not(.theme-light) #comments .gdwp-comment-editor-wrapper,
body.theme-dark #comments .gdwp-comment-editor-wrapper,
body.theme-night #comments .gdwp-comment-editor-wrapper,
body.theme-onyx #comments .gdwp-comment-editor-wrapper,
body.theme-dusk #comments .gdwp-comment-editor-wrapper {
    border-color: #2d3139 !important;
    background-color: #15171c !important;
}

body.theme-sepia #comments .gdwp-comment-editor-wrapper {
    border-color: #d7cbb1 !important;
    background-color: #dfd3b9 !important;
}

body.theme-silver #comments .gdwp-comment-editor-wrapper {
    border-color: #b8c5d6 !important;
    background-color: #cbd5e1 !important;
}

body.theme-frost #comments .gdwp-comment-editor-wrapper,
body.theme-light #comments .gdwp-comment-editor-wrapper {
    border-color: #e2e8f0 !important;
    background-color: #ffffff !important;
}

#comments .gdwp-comment-textarea-container {
    background-color: transparent !important;
    padding: 12px 14px !important;
}

body.theme-sepia #comments .gdwp-comment-textarea-container {
    background-color: #dfd3b9 !important;
}
body.theme-silver #comments .gdwp-comment-textarea-container {
    background-color: #cbd5e1 !important;
}
body.theme-frost #comments .gdwp-comment-textarea-container,
body.theme-light #comments .gdwp-comment-textarea-container {
    background-color: #ffffff !important;
}

#comments .comment-textarea-field {
    background-color: transparent !important;
    color: #1f2937 !important;
    font-size: 14px !important;
}

body.dark-mode:not(.theme-frost):not(.theme-silver):not(.theme-sepia):not(.theme-light) #comments .comment-textarea-field,
body.theme-dark #comments .comment-textarea-field,
body.theme-night #comments .comment-textarea-field,
body.theme-onyx #comments .comment-textarea-field,
body.theme-dusk #comments .comment-textarea-field {
    color: #f3f4f6 !important;
}

body.theme-sepia #comments .comment-textarea-field {
    color: #5b4636 !important;
}
body.theme-silver #comments .comment-textarea-field {
    color: #1e293b !important;
}
body.theme-frost #comments .comment-textarea-field,
body.theme-light #comments .comment-textarea-field {
    color: #09090b !important;
}

/* Footer & Toolbar on a SINGLE ROW */
#comments .gdwp-comment-editor-footer,
.chapter-comments-section #comments .gdwp-comment-editor-footer {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: space-between !important;
    background-color: #f8fafc !important;
    border-top: 1px solid #e2e8f0 !important;
    padding: 8px 14px !important; /* Spacing from right/left edge */
    border-bottom-left-radius: 11px !important;
    border-bottom-right-radius: 11px !important;
    gap: 4px !important;
}

body.dark-mode:not(.theme-frost):not(.theme-silver):not(.theme-sepia):not(.theme-light) #comments .gdwp-comment-editor-footer,
body.theme-dark #comments .gdwp-comment-editor-footer,
body.theme-night #comments .gdwp-comment-editor-footer,
body.theme-onyx #comments .gdwp-comment-editor-footer,
body.theme-dusk #comments .gdwp-comment-editor-footer {
    background-color: #1e2026 !important;
    border-top: 1px solid #2d3139 !important;
}

body.theme-sepia #comments .gdwp-comment-editor-footer {
    background-color: #f4ecd8 !important;
    border-top: 1px solid #d7cbb1 !important;
}

body.theme-silver #comments .gdwp-comment-editor-footer {
    background-color: #e2e8f0 !important;
    border-top: 1px solid #b8c5d6 !important;
}

body.theme-frost #comments .gdwp-comment-editor-footer,
body.theme-light #comments .gdwp-comment-editor-footer {
    background-color: #f8fafc !important;
    border-top: 1px solid #e2e8f0 !important;
}

#comments .gdwp-comment-editor-footer > div,
.chapter-comments-section #comments .gdwp-comment-editor-footer > div {
    width: auto !important;
    display: flex !important;
    align-items: center !important;
}

/* Toolbar Left Items */
#comments .gdwp-comment-toolbar-left,
.chapter-comments-section #comments .gdwp-comment-toolbar-left {
    display: flex !important;
    align-items: center !important;
    gap: 4px !important; /* Tighten gap */
    width: auto !important;
    justify-content: flex-start !important;
}/* Duplicated in interactions.css removed */


#comments .gdwp-comment-toolbar-left button:hover,
#comments .gdwp-comment-toolbar-left .gdwp-editor-tool-btn:hover,
#comments .gdwp-comment-toolbar-left .gdwp-editor-sticker-btn:hover {
    background-color: #f1f5f9 !important;
    color: #7f3be9 !important;
}

body.dark-mode:not(.theme-frost):not(.theme-silver):not(.theme-sepia):not(.theme-light) #comments .gdwp-comment-toolbar-left button,
body.theme-dark #comments .gdwp-comment-toolbar-left button,
body.theme-night #comments .gdwp-comment-toolbar-left button,
body.theme-onyx #comments .gdwp-comment-toolbar-left button,
body.theme-dusk #comments .gdwp-comment-toolbar-left button,
body.dark-mode:not(.theme-frost):not(.theme-silver):not(.theme-sepia):not(.theme-light) #comments .gdwp-comment-toolbar-left .gdwp-editor-tool-btn,
body.theme-dark #comments .gdwp-comment-toolbar-left .gdwp-editor-tool-btn,
body.theme-night #comments .gdwp-comment-toolbar-left .gdwp-editor-tool-btn,
body.theme-onyx #comments .gdwp-comment-toolbar-left .gdwp-editor-tool-btn,
body.theme-dusk #comments .gdwp-comment-toolbar-left .gdwp-editor-tool-btn {
    color: #9ca3af !important;
}

body.dark-mode:not(.theme-frost):not(.theme-silver):not(.theme-sepia):not(.theme-light) #comments .gdwp-comment-toolbar-left button:hover,
body.theme-dark #comments .gdwp-comment-toolbar-left button:hover,
body.theme-night #comments .gdwp-comment-toolbar-left button:hover,
body.theme-onyx #comments .gdwp-comment-toolbar-left button:hover,
body.theme-dusk #comments .gdwp-comment-toolbar-left button:hover,
body.dark-mode:not(.theme-frost):not(.theme-silver):not(.theme-sepia):not(.theme-light) #comments .gdwp-comment-toolbar-left .gdwp-editor-tool-btn:hover,
body.theme-dark #comments .gdwp-comment-toolbar-left .gdwp-editor-tool-btn:hover,
body.theme-night #comments .gdwp-comment-toolbar-left .gdwp-editor-tool-btn:hover,
body.theme-onyx #comments .gdwp-comment-toolbar-left .gdwp-editor-tool-btn:hover,
body.theme-dusk #comments .gdwp-comment-toolbar-left .gdwp-editor-tool-btn:hover {
    background-color: #2d3139 !important;
    color: #a78bfa !important;
}

body.theme-sepia #comments .gdwp-comment-toolbar-left button,
body.theme-sepia #comments .gdwp-comment-toolbar-left .gdwp-editor-tool-btn,
body.theme-sepia #comments .gdwp-comment-toolbar-left .gdwp-editor-sticker-btn {
    color: #8c7b6e !important;
}
body.theme-sepia #comments .gdwp-comment-toolbar-left button:hover,
body.theme-sepia #comments .gdwp-comment-toolbar-left .gdwp-editor-tool-btn:hover,
body.theme-sepia #comments .gdwp-comment-toolbar-left .gdwp-editor-sticker-btn:hover {
    background-color: #dfd3b9 !important;
    color: #7f3be9 !important;
}

body.theme-silver #comments .gdwp-comment-toolbar-left button,
body.theme-silver #comments .gdwp-comment-toolbar-left .gdwp-editor-tool-btn,
body.theme-silver #comments .gdwp-comment-toolbar-left .gdwp-editor-sticker-btn {
    color: #475569 !important;
}
body.theme-silver #comments .gdwp-comment-toolbar-left button:hover,
body.theme-silver #comments .gdwp-comment-toolbar-left .gdwp-editor-tool-btn:hover,
body.theme-silver #comments .gdwp-comment-toolbar-left .gdwp-editor-sticker-btn:hover {
    background-color: #cbd5e1 !important;
    color: #7f3be9 !important;
}

body.theme-frost #comments .gdwp-comment-toolbar-left button,
body.theme-frost #comments .gdwp-comment-toolbar-left .gdwp-editor-tool-btn,
body.theme-frost #comments .gdwp-comment-toolbar-left .gdwp-editor-sticker-btn,
body.theme-light #comments .gdwp-comment-toolbar-left button,
body.theme-light #comments .gdwp-comment-toolbar-left .gdwp-editor-tool-btn,
body.theme-light #comments .gdwp-comment-toolbar-left .gdwp-editor-sticker-btn {
    color: #64748b !important;
}
body.theme-frost #comments .gdwp-comment-toolbar-left button:hover,
body.theme-frost #comments .gdwp-comment-toolbar-left .gdwp-editor-tool-btn:hover,
body.theme-frost #comments .gdwp-comment-toolbar-left .gdwp-editor-sticker-btn:hover,
body.theme-light #comments .gdwp-comment-toolbar-left button:hover,
body.theme-light #comments .gdwp-comment-toolbar-left .gdwp-editor-tool-btn:hover,
body.theme-light #comments .gdwp-comment-toolbar-left .gdwp-editor-sticker-btn:hover {
    background-color: #f1f5f9 !important;
    color: #7f3be9 !important;
}

/* Post Button */
#comments .gdwp-post-comment-btn,
.chapter-comments-section #comments .gdwp-post-comment-btn {
    background-color: #7f3be9 !important;
    border-color: #7f3be9 !important;
    color: #fff !important;
    font-weight: 700 !important;
    font-size: 13px !important;
    padding: 5px 16px !important; /* Smaller padding */
    border-radius: 6px !important;
    width: auto !important;
}

#comments .gdwp-post-comment-btn:hover {
    background-color: #6d30cc !important;
    border-color: #6d30cc !important;
}

/* Mobile specific styling overrides to guarantee single row and small sizes */
@media (max-width: 576px) {
    #comments .comment-header-nav {
        flex-direction: row !important; /* Force inline */
        flex-wrap: nowrap !important;
    }
    #comments .comments-title {
        font-size: 12px !important; /* Nhỏ chữ comment xuống */
        display: inline-flex !important;
        align-items: center !important;
        flex-wrap: wrap !important; /* Cho phép xuống dòng */
        word-break: normal !important; /* Không cắt đôi chữ */
        overflow-wrap: break-word !important;
    }
    #comments .comments-title i {
        display: none !important; /* Ẩn icon trên di động */
    }
    #comments .comments-title span.comments-count {
        font-size: 13px !important;
    }/* Duplicated in interactions.css removed */

    
    /* Giảm khoảng cách giữa các icon công cụ */
    #comments .gdwp-comment-toolbar-left,
    .chapter-comments-section #comments .gdwp-comment-toolbar-left {
        gap: 2px !important;
    }/* Duplicated in interactions.css removed */

    
    /* Ẩn chữ gạch chân (U) trên di động */
    #comments .gdwp-editor-tool-btn[data-tag="u"],
    .chapter-comments-section #comments .gdwp-editor-tool-btn[data-tag="u"] {
        display: none !important;
    }
    
    /* Ẩn đếm ký tự trên di động */
    #comments .comment-char-counter,
    .chapter-comments-section #comments .comment-char-counter {
        display: none !important;
    }
    
    #comments .gdwp-post-comment-btn {
        padding: 4px 10px !important; /* Tiny post button */
        font-size: 11px !important;
    }
}

/* Cancel reply button styling */
#reply-title.reply-title-container {
    display: flex !important;
    justify-content: flex-end !important; /* Align to the right above textarea */
    font-size: 0 !important; /* Hide "Reply" text */
    margin: 0 0 8px 0 !important;
    line-height: 0 !important;
}
#reply-title.reply-title-container #cancel-comment-reply-link {
    font-size: 0 !important; /* Hide text completely */
    display: inline-flex;
    align-items: center !important;
    justify-content: center !important;
    width: 24px !important;
    height: 24px !important;
    border-radius: 50% !important;
    background-color: #f1f5f9 !important; /* Light grey circle background */
    color: #64748b !important;
    text-decoration: none !important;
    transition: all 0.2s ease !important;
    border: none !important;
    box-shadow: none !important;
    padding: 0 !important;
}
body.dark-mode:not(.theme-frost):not(.theme-silver):not(.theme-sepia):not(.theme-light) #reply-title.reply-title-container #cancel-comment-reply-link,
body.theme-dark #reply-title.reply-title-container #cancel-comment-reply-link,
body.theme-night #reply-title.reply-title-container #cancel-comment-reply-link,
body.theme-onyx #reply-title.reply-title-container #cancel-comment-reply-link,
body.theme-dusk #reply-title.reply-title-container #cancel-comment-reply-link {
    background-color: #1e2026 !important;
    color: #9ca3af !important;
}
body.theme-sepia #reply-title.reply-title-container #cancel-comment-reply-link {
    background-color: #dfd3b9 !important;
    color: #5b4636 !important;
}
body.theme-silver #reply-title.reply-title-container #cancel-comment-reply-link {
    background-color: #cbd5e1 !important;
    color: #475569 !important;
}
body.theme-frost #reply-title.reply-title-container #cancel-comment-reply-link,
body.theme-light #reply-title.reply-title-container #cancel-comment-reply-link {
    background-color: #f1f5f9 !important;
    color: #64748b !important;
}
#reply-title.reply-title-container #cancel-comment-reply-link::before {
    content: "\f00d" !important; /* FontAwesome close X icon */
    font-family: "Font Awesome 6 Free" !important;
    font-weight: 900 !important;
    font-size: 11px !important;
}
#reply-title.reply-title-container #cancel-comment-reply-link:hover {
    background-color: #ef4444 !important; /* Turns red circle on hover */
    color: #ffffff !important;
}
#reply-title.reply-title-container #cancel-comment-reply-link:hover::before {
    color: #ffffff !important;
}

/* Custom Sticker picker popup alignment */
.gdwp-comment-editor-wrapper .gdwp-sticker-picker-popup {
    left: 10px !important;
    right: auto !important;
    width: 320px !important;
    bottom: 42px !important;
    transform: none !important;
}
body.dark-mode:not(.theme-frost):not(.theme-silver):not(.theme-sepia):not(.theme-light) .gdwp-comment-editor-wrapper .gdwp-sticker-picker-popup,
body.theme-dark .gdwp-comment-editor-wrapper .gdwp-sticker-picker-popup,
body.theme-night .gdwp-comment-editor-wrapper .gdwp-sticker-picker-popup,
body.theme-onyx .gdwp-comment-editor-wrapper .gdwp-sticker-picker-popup,
body.theme-dusk .gdwp-comment-editor-wrapper .gdwp-sticker-picker-popup {
    background-color: #1a1c22 !important;
    border-color: #2d3139 !important;
}
body.theme-sepia .gdwp-comment-editor-wrapper .gdwp-sticker-picker-popup {
    background-color: #dfd3b9 !important;
    border-color: #d7cbb1 !important;
}
body.theme-silver .gdwp-comment-editor-wrapper .gdwp-sticker-picker-popup {
    background-color: #cbd5e1 !important;
    border-color: #b8c5d6 !important;
}
body.theme-frost .gdwp-comment-editor-wrapper .gdwp-sticker-picker-popup,
body.theme-light .gdwp-comment-editor-wrapper .gdwp-sticker-picker-popup {
    background-color: #ffffff !important;
    border-color: #e2e8f0 !important;
}

@media (max-width: 576px) {
    .gdwp-comment-editor-wrapper .gdwp-sticker-picker-popup {
        left: 5px !important;
        right: 5px !important;
        width: auto !important; /* Stretch to fill wrapper width */
        max-width: calc(100% - 10px) !important;
        bottom: 38px !important;
    }
    div#comments,
    .chapter-comments-section #comments {
        padding-left: 14px !important;
        padding-right: 14px !important;
    }
}

/* Style for comment inline editor */
#comments .gdwp-comment-edit-textarea {
    background-color: transparent !important;
    color: #1f2937 !important;
    border-color: #e2e8f0 !important;
}
body.dark-mode #comments .gdwp-comment-edit-textarea,
body.theme-dark #comments .gdwp-comment-edit-textarea,
body.theme-night #comments .gdwp-comment-edit-textarea,
body.theme-onyx #comments .gdwp-comment-edit-textarea,
body.theme-dusk #comments .gdwp-comment-edit-textarea {
    color: #f3f4f6 !important;
    border-color: #2d3139 !important;
    background-color: #15171c !important;
}
#comments .gdwp-comment-toolbar-left button.loading,
#comments .btn-upload-comment-edit-img.loading {
    width: auto !important;
    padding: 0 8px !important;
    gap: 4px !important;
}

/* Editor Avatar & Notification Dropdown Styles */
#comments .gdwp-editor-profile-link {
    width: 28px !important;
    height: 28px !important;
    flex-shrink: 0 !important;
    border-radius: 50% !important;
    overflow: hidden !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    transition: transform 0.2s ease !important;
}
#comments .gdwp-editor-profile-link:hover {
    transform: scale(1.05) !important;
}
#comments .gdwp-editor-profile-link img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
}
#comments .gdwp-editor-logged-out-avatar {
    width: 28px !important;
    height: 28px !important;
    flex-shrink: 0 !important;
    border-radius: 50% !important;
    overflow: hidden !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    background-color: #cbd5e1 !important;
    color: #475569 !important;
    border: 1px solid rgba(0, 0, 0, 0.05) !important;
}
body.dark-mode #comments .gdwp-editor-logged-out-avatar {
    background-color: #1e2026 !important;
    color: #9ca3af !important;
    border-color: #2d3139 !important;
}

#comments .gdwp-editor-noti-dropdown-wrapper {
    flex-shrink: 0 !important;
}
#comments .gdwp-editor-noti-btn {
    width: 28px !important;
    height: 28px !important;
    background-color: transparent !important;
    border: none !important;
    color: #64748b !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 4px !important;
    padding: 0 !important;
}
#comments .gdwp-editor-noti-btn:hover {
    background-color: #f1f5f9 !important;
    color: #7f3be9 !important;
}
body.dark-mode #comments .gdwp-editor-noti-btn {
    color: #9ca3af !important;
}
body.dark-mode #comments .gdwp-editor-noti-btn:hover {
    background-color: #2d3139 !important;
    color: #a78bfa !important;
}

.gdwp-editor-noti-dropdown {
    width: 320px !important;
    max-height: 380px !important;
    overflow: hidden !important;
    padding: 0 !important;
    border: 1px solid var(--gdwp-border-color) !important;
    position: absolute !important;
    bottom: 38px !important;
    left: 0 !important;
    right: auto !important;
    transform: none !important;
}
.dark-mode .gdwp-editor-noti-dropdown {
    background-color: #12101a !important;
    border-color: #221f30 !important;
}
.dark-mode .gdwp-editor-noti-dropdown .border-bottom {
    border-bottom-color: #221f30 !important;
}
.dark-mode .gdwp-editor-noti-dropdown .border-top {
    border-top-color: #221f30 !important;
}
.dark-mode .gdwp-editor-noti-dropdown .bg-light {
    background-color: #1a1726 !important;
    color: #e2e8f0 !important;
}
.dark-mode .gdwp-editor-noti-dropdown .text-dark {
    color: #f1f5f9 !important;
}

.gdwp-editor-noti-list-scroll {
    max-height: 250px !important;
    overflow-y: auto !important;
}
.gdwp-editor-noti-list-scroll .list-group-item {
    transition: background-color 0.2s ease !important;
    border-color: var(--gdwp-border-color) !important;
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    padding: 12px 16px !important;
    text-decoration: none !important;
}
.dark-mode .gdwp-editor-noti-list-scroll .list-group-item {
    background-color: #12101a !important;
    border-color: #1e1a2b !important;
}
.gdwp-editor-noti-list-scroll .list-group-item:hover {
    background-color: rgba(139, 92, 246, 0.05) !important;
}
.dark-mode .gdwp-editor-noti-list-scroll .list-group-item:hover {
    background-color: rgba(139, 92, 246, 0.08) !important;
}

.gdwp-editor-noti-list-scroll .list-group-item.gdwp-noti-unread {
    background-color: rgba(139, 92, 246, 0.02) !important;
}
.dark-mode .gdwp-editor-noti-list-scroll .list-group-item.gdwp-noti-unread {
    background-color: rgba(139, 92, 246, 0.04) !important;
}

.gdwp-editor-noti-list-scroll::-webkit-scrollbar {
    width: 6px;
}
.gdwp-editor-noti-list-scroll::-webkit-scrollbar-track {
    background: transparent;
}
.gdwp-editor-noti-list-scroll::-webkit-scrollbar-thumb {
    background: rgba(0, 0, 0, 0.1);
    border-radius: 4px;
}
.dark-mode .gdwp-editor-noti-list-scroll::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.1);
}

/* Breakpoint 425px and below style overrides */
@media (max-width: 425px) {
    #comments .gdwp-comment-toolbar-left {
        gap: 8px !important;
    }
    #comments .gdwp-editor-profile-link,
    #comments .gdwp-editor-logged-out-avatar {
        width: 48px !important;
        height: 48px !important;
    }
    #comments .gdwp-editor-logged-out-avatar i {
        font-size: 20px !important;
    }
    #comments .gdwp-comment-tools-wrapper {
        gap: 4px !important;
    }
    #comments .gdwp-tools-row-1,
    #comments .gdwp-tools-row-2 {
        gap: 6px !important;
    }
    #comments .gdwp-comment-toolbar-left button,
    #comments .gdwp-comment-toolbar-left .gdwp-editor-tool-btn,
    #comments .gdwp-comment-toolbar-left .gdwp-editor-sticker-btn,
    #comments .gdwp-editor-noti-btn {
        width: 24px !important;
        height: 24px !important;
        font-size: 11px !important;
    }
    #comments .gdwp-editor-noti-btn i {
        font-size: 0.95rem !important;
    }
    #comments .gdwp-editor-noti-btn .gdwp-noti-count {
        font-size: 7px !important;
        padding: 1px 3px !important;
        top: -1px !important;
        right: -1px !important;
    }
    .gdwp-editor-noti-dropdown {
        position: fixed !important;
        left: 50% !important;
        transform: translateX(-50%) !important;
        bottom: 75px !important;
        top: auto !important;
        width: 320px !important;
        max-width: calc(100vw - 24px) !important;
        margin: 0 !important;
    }
}

/* Tab Bar Navigation at footer */
.gdwp-editor-noti-dropdown .gdwp-noti-tabs-nav {
    display: flex !important;
    flex-wrap: nowrap !important;
    width: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
    border: none !important;
    list-style: none !important;
}
.gdwp-editor-noti-dropdown .gdwp-noti-tabs-nav .nav-item {
    flex: 1 1 0% !important;
    max-width: 25% !important;
    text-align: center !important;
    padding: 0 !important;
    margin: 0 !important;
}
.gdwp-editor-noti-dropdown .gdwp-noti-tabs-nav .nav-link {
    color: #94a3b8 !important;
    font-weight: 600 !important;
    font-size: 11px !important;
    padding: 6px 0 8px 0 !important;
    border: none !important;
    background: transparent !important;
    background-color: transparent !important;
    display: flex !important;
    flex-direction: column !important; /* Vertical stacking of label and count */
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    text-align: center !important;
    overflow: visible !important;
    transition: all 0.2s ease-in-out !important;
    position: relative !important;
    box-shadow: none !important;
}

/* Hover / Focus states */
.gdwp-editor-noti-dropdown .gdwp-noti-tabs-nav .nav-link:hover,
.gdwp-editor-noti-dropdown .gdwp-noti-tabs-nav .nav-link:focus {
    color: #475569 !important;
    background: transparent !important;
    background-color: transparent !important;
    box-shadow: none !important;
}
body.dark-mode .gdwp-editor-noti-dropdown .gdwp-noti-tabs-nav .nav-link:hover,
body.dark-mode .gdwp-editor-noti-dropdown .gdwp-noti-tabs-nav .nav-link:focus {
    color: #cbd5e1 !important;
    background: transparent !important;
    background-color: transparent !important;
    box-shadow: none !important;
}

/* Active states */
.gdwp-editor-noti-dropdown .gdwp-noti-tabs-nav .nav-link.active {
    color: #8b5cf6 !important;
    background: transparent !important;
    background-color: transparent !important;
    box-shadow: none !important;
}
body.dark-mode .gdwp-editor-noti-dropdown .gdwp-noti-tabs-nav .nav-link.active {
    color: #a78bfa !important;
    background: transparent !important;
    background-color: transparent !important;
    box-shadow: none !important;
}

/* Active indicator line */
.gdwp-editor-noti-dropdown .gdwp-noti-tabs-nav .nav-link.active::after {
    content: '' !important;
    position: absolute !important;
    bottom: 0 !important;
    left: 8px !important;
    right: 8px !important;
    height: 2px !important;
    background-color: #8b5cf6 !important;
    border-radius: 2px !important;
}
body.dark-mode .gdwp-editor-noti-dropdown .gdwp-noti-tabs-nav .nav-link.active::after {
    background-color: #a78bfa !important;
}

.gdwp-editor-noti-dropdown .gdwp-editor-noti-tab-count {
    font-size: 10px !important;
    font-weight: 500 !important;
    margin-top: 2px !important;
    color: inherit !important;
    background: transparent !important;
    background-color: transparent !important;
    border: none !important;
    padding: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    display: inline-block !important;
}

@media (max-width: 425px) {
    .gdwp-editor-noti-dropdown .gdwp-noti-tabs-nav .nav-link {
        font-size: 10px !important;
        padding: 4px 0 6px 0 !important;
    }
    .gdwp-editor-noti-dropdown .gdwp-noti-tabs-nav .nav-link.active::after {
        left: 4px !important;
        right: 4px !important;
    }
}

/* Chapter options theme color styling for editor notification dropdown */

/* 1. Dark themes (theme-dark, theme-night, theme-onyx, theme-dusk, dark-mode) */
body.dark-mode:not(.theme-frost):not(.theme-silver):not(.theme-sepia):not(.theme-light) .gdwp-editor-noti-dropdown,
body.theme-dark .gdwp-editor-noti-dropdown,
body.theme-night .gdwp-editor-noti-dropdown,
body.theme-onyx .gdwp-editor-noti-dropdown,
body.theme-dusk .gdwp-editor-noti-dropdown {
    background-color: #15171c !important;
    border: 1px solid #2d3139 !important;
    color: #f3f4f6 !important;
}
body.dark-mode:not(.theme-frost):not(.theme-silver):not(.theme-sepia):not(.theme-light) .gdwp-editor-noti-dropdown h6,
body.theme-dark .gdwp-editor-noti-dropdown h6,
body.theme-night .gdwp-editor-noti-dropdown h6,
body.theme-onyx .gdwp-editor-noti-dropdown h6,
body.theme-dusk .gdwp-editor-noti-dropdown h6 {
    color: #f3f4f6 !important;
}
body.dark-mode:not(.theme-frost):not(.theme-silver):not(.theme-sepia):not(.theme-light) .gdwp-editor-noti-dropdown .gdwp-noti-switch-label,
body.theme-dark .gdwp-editor-noti-dropdown .gdwp-noti-switch-label,
body.theme-night .gdwp-editor-noti-dropdown .gdwp-noti-switch-label,
body.theme-onyx .gdwp-editor-noti-dropdown .gdwp-noti-switch-label,
body.theme-dusk .gdwp-editor-noti-dropdown .gdwp-noti-switch-label {
    color: #9ca3af !important;
}
body.dark-mode:not(.theme-frost):not(.theme-silver):not(.theme-sepia):not(.theme-light) .gdwp-editor-noti-dropdown .border-bottom,
body.theme-dark .gdwp-editor-noti-dropdown .border-bottom,
body.theme-night .gdwp-editor-noti-dropdown .border-bottom,
body.theme-onyx .gdwp-editor-noti-dropdown .border-bottom,
body.theme-dusk .gdwp-editor-noti-dropdown .border-bottom,
body.dark-mode:not(.theme-frost):not(.theme-silver):not(.theme-sepia):not(.theme-light) .gdwp-editor-noti-dropdown .border-top,
body.theme-dark .gdwp-editor-noti-dropdown .border-top,
body.theme-night .gdwp-editor-noti-dropdown .border-top,
body.theme-onyx .gdwp-editor-noti-dropdown .border-top,
body.theme-dusk .gdwp-editor-noti-dropdown .border-top {
    border-color: #2d3139 !important;
}
body.dark-mode:not(.theme-frost):not(.theme-silver):not(.theme-sepia):not(.theme-light) .gdwp-editor-noti-dropdown .bg-light,
body.theme-dark .gdwp-editor-noti-dropdown .bg-light,
body.theme-night .gdwp-editor-noti-dropdown .bg-light,
body.theme-onyx .gdwp-editor-noti-dropdown .bg-light,
body.theme-dusk .gdwp-editor-noti-dropdown .bg-light {
    background-color: #1e2026 !important;
}
body.dark-mode:not(.theme-frost):not(.theme-silver):not(.theme-sepia):not(.theme-light) .gdwp-editor-noti-dropdown .list-group-item,
body.theme-dark .gdwp-editor-noti-dropdown .list-group-item,
body.theme-night .gdwp-editor-noti-dropdown .list-group-item,
body.theme-onyx .gdwp-editor-noti-dropdown .list-group-item,
body.theme-dusk .gdwp-editor-noti-dropdown .list-group-item {
    color: #f3f4f6 !important;
    border-color: #2d3139 !important;
    background-color: transparent !important;
}
body.dark-mode:not(.theme-frost):not(.theme-silver):not(.theme-sepia):not(.theme-light) .gdwp-editor-noti-dropdown .list-group-item .text-dark,
body.theme-dark .gdwp-editor-noti-dropdown .list-group-item .text-dark,
body.theme-night .gdwp-editor-noti-dropdown .list-group-item .text-dark,
body.theme-onyx .gdwp-editor-noti-dropdown .list-group-item .text-dark,
body.theme-dusk .gdwp-editor-noti-dropdown .list-group-item .text-dark {
    color: #f3f4f6 !important;
}
body.dark-mode:not(.theme-frost):not(.theme-silver):not(.theme-sepia):not(.theme-light) .gdwp-editor-noti-dropdown .list-group-item:hover,
body.theme-dark .gdwp-editor-noti-dropdown .list-group-item:hover,
body.theme-night .gdwp-editor-noti-dropdown .list-group-item:hover,
body.theme-onyx .gdwp-editor-noti-dropdown .list-group-item:hover,
body.theme-dusk .gdwp-editor-noti-dropdown .list-group-item:hover {
    background-color: #2c2f36 !important;
}

/* 2. Sepia theme */
body.theme-sepia .gdwp-editor-noti-dropdown {
    background-color: #dfd3b9 !important;
    border: 1px solid #d7cbb1 !important;
    color: #5b4636 !important;
}
body.theme-sepia .gdwp-editor-noti-dropdown h6 {
    color: #5b4636 !important;
}
body.theme-sepia .gdwp-editor-noti-dropdown .gdwp-noti-switch-label {
    color: #8c7b6e !important;
}
body.theme-sepia .gdwp-editor-noti-dropdown .border-bottom,
body.theme-sepia .gdwp-editor-noti-dropdown .border-top {
    border-color: #d7cbb1 !important;
}
body.theme-sepia .gdwp-editor-noti-dropdown .bg-light {
    background-color: #f4ecd8 !important;
}
body.theme-sepia .gdwp-editor-noti-dropdown .list-group-item {
    color: #5b4636 !important;
    border-color: #d7cbb1 !important;
    background-color: transparent !important;
}
body.theme-sepia .gdwp-editor-noti-dropdown .list-group-item .text-dark {
    color: #5b4636 !important;
}
body.theme-sepia .gdwp-editor-noti-dropdown .list-group-item:hover {
    background-color: #d7cbb1 !important;
}

/* 3. Silver theme */
body.theme-silver .gdwp-editor-noti-dropdown {
    background-color: #cbd5e1 !important;
    border: 1px solid #b8c5d6 !important;
    color: #1e293b !important;
}
body.theme-silver .gdwp-editor-noti-dropdown h6 {
    color: #1e293b !important;
}
body.theme-silver .gdwp-editor-noti-dropdown .gdwp-noti-switch-label {
    color: #475569 !important;
}
body.theme-silver .gdwp-editor-noti-dropdown .border-bottom,
body.theme-silver .gdwp-editor-noti-dropdown .border-top {
    border-color: #b8c5d6 !important;
}
body.theme-silver .gdwp-editor-noti-dropdown .bg-light {
    background-color: #e2e8f0 !important;
}
body.theme-silver .gdwp-editor-noti-dropdown .list-group-item {
    color: #1e293b !important;
    border-color: #b8c5d6 !important;
    background-color: transparent !important;
}
body.theme-silver .gdwp-editor-noti-dropdown .list-group-item .text-dark {
    color: #1e293b !important;
}
body.theme-silver .gdwp-editor-noti-dropdown .list-group-item:hover {
    background-color: #b8c5d6 !important;
}

/* 4. Frost / Light themes (theme-frost, theme-light, white background) */
body.theme-frost .gdwp-editor-noti-dropdown,
body.theme-light .gdwp-editor-noti-dropdown {
    background-color: #ffffff !important;
    border: 1px solid #e2e8f0 !important;
    color: #09090b !important;
}
body.theme-frost .gdwp-editor-noti-dropdown h6,
body.theme-light .gdwp-editor-noti-dropdown h6 {
    color: #09090b !important;
}
body.theme-frost .gdwp-editor-noti-dropdown .gdwp-noti-switch-label,
body.theme-light .gdwp-editor-noti-dropdown .gdwp-noti-switch-label {
    color: #64748b !important;
}
body.theme-frost .gdwp-editor-noti-dropdown .border-bottom,
body.theme-light .gdwp-editor-noti-dropdown .border-bottom,
body.theme-frost .gdwp-editor-noti-dropdown .border-top,
body.theme-light .gdwp-editor-noti-dropdown .border-top {
    border-color: #e2e8f0 !important;
}
body.theme-frost .gdwp-editor-noti-dropdown .bg-light,
body.theme-light .gdwp-editor-noti-dropdown .bg-light {
    background-color: #f8fafc !important;
}
body.theme-frost .gdwp-editor-noti-dropdown .list-group-item,
body.theme-light .gdwp-editor-noti-dropdown .list-group-item {
    color: #1f2937 !important;
    border-color: #e2e8f0 !important;
    background-color: transparent !important;
}
body.theme-frost .gdwp-editor-noti-dropdown .list-group-item .text-dark,
body.theme-light .gdwp-editor-noti-dropdown .list-group-item .text-dark {
    color: #1f2937 !important;
}
body.theme-frost .gdwp-editor-noti-dropdown .list-group-item:hover,
body.theme-light .gdwp-editor-noti-dropdown .list-group-item:hover {
    background-color: #f1f5f9 !important;
}
