/**
 * ZAX Reader UI Fixes
 * Fixes for locked chapter messages, comment form, and theme-aware styling
 * 
 * @package ZAX_Child_Theme
 * @version 1.0.0
 */

/* ============================================
   1. LOCKED CHAPTER MESSAGE STYLING
   ============================================ */

/* Target common locked chapter message containers */
.reading-content .alert-warning,
.reading-content .chapter-warning,
.reading-content .wp-manga-chapter-locked,
.reading-content .chapter-locked,
.reading-content .locked-chapter-message,
.reading-content [class*="locked"],
.reading-content [class*="chapter-locked"],
.reading-content [id*="locked"],
.reading-content [id*="chapter-locked"],
.reading-content .text-left > .alert,
.reading-content .text-left > div[class*="locked"],
.reading-content .dynr-reading > .alert,
.reading-content .dynr-reading > div[class*="locked"] {
    background: var(--mc-surface, #1a1a1a) !important;
    border: 1px solid var(--mc-border, #2a2f36) !important;
    border-radius: 12px !important;
    padding: 48px 32px !important;
    margin: 32px auto !important;
    max-width: 600px !important;
    text-align: center !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    min-height: 200px !important;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3) !important;
    color: var(--mc-text, #e9ecef) !important;
}

/* Dark mode: light text on dark background */
html[data-theme-mode="dark"] .reading-content .alert-warning,
html[data-theme-mode="dark"] .reading-content .chapter-warning,
html[data-theme-mode="dark"] .reading-content .wp-manga-chapter-locked,
html[data-theme-mode="dark"] .reading-content .chapter-locked,
html[data-theme-mode="dark"] .reading-content .locked-chapter-message,
html[data-theme-mode="dark"] .reading-content [class*="locked"],
html[data-theme-mode="dark"] .reading-content [class*="chapter-locked"] {
    background: var(--mc-surface, #1a1a1a) !important;
    color: var(--mc-text, #e9ecef) !important;
}

/* Light themes (Sepia, Silver, Frost): dark text on light background */
html[data-theme-mode="light"] .reading-content .alert-warning,
html[data-theme-mode="light"] .reading-content .chapter-warning,
html[data-theme-mode="light"] .reading-content .wp-manga-chapter-locked,
html[data-theme-mode="light"] .reading-content .chapter-locked,
html[data-theme-mode="light"] .reading-content .locked-chapter-message,
html[data-theme-mode="light"] .reading-content [class*="locked"],
html[data-theme-mode="light"] .reading-content [class*="chapter-locked"],
body.reader-sepia .reading-content .alert-warning,
body.reader-sepia .reading-content .chapter-warning,
body.reader-sepia .reading-content [class*="locked"],
body.reader-silver .reading-content .alert-warning,
body.reader-silver .reading-content .chapter-warning,
body.reader-silver .reading-content [class*="locked"],
body.reader-frost .reading-content .alert-warning,
body.reader-frost .reading-content .chapter-warning,
body.reader-frost .reading-content [class*="locked"] {
    background: #f8f9fa !important;
    color: #212529 !important;
    border-color: #dee2e6 !important;
}

/* Ensure text inside locked messages is readable */
.reading-content .alert-warning *,
.reading-content .chapter-warning *,
.reading-content .wp-manga-chapter-locked *,
.reading-content .chapter-locked *,
.reading-content .locked-chapter-message *,
.reading-content [class*="locked"] * {
    color: inherit !important;
}

html[data-theme-mode="dark"] .reading-content .alert-warning *,
html[data-theme-mode="dark"] .reading-content .chapter-warning *,
html[data-theme-mode="dark"] .reading-content [class*="locked"] * {
    color: var(--mc-text, #e9ecef) !important;
}

html[data-theme-mode="light"] .reading-content .alert-warning *,
html[data-theme-mode="light"] .reading-content .chapter-warning *,
html[data-theme-mode="light"] .reading-content [class*="locked"] *,
body.reader-sepia .reading-content .alert-warning *,
body.reader-sepia .reading-content [class*="locked"] *,
body.reader-silver .reading-content .alert-warning *,
body.reader-silver .reading-content [class*="locked"] *,
body.reader-frost .reading-content .alert-warning *,
body.reader-frost .reading-content [class*="locked"] * {
    color: #212529 !important;
}

/* Buttons/links inside locked messages */
.reading-content .alert-warning a,
.reading-content .chapter-warning a,
.reading-content [class*="locked"] a,
.reading-content .alert-warning button,
.reading-content .chapter-warning button,
.reading-content [class*="locked"] button {
    color: var(--mc-primary, #ff4d4f) !important;
    text-decoration: none !important;
    font-weight: 600 !important;
    padding: 10px 20px !important;
    border-radius: 8px !important;
    display: inline-block !important;
    margin-top: 16px !important;
    transition: all 0.2s ease !important;
}

html[data-theme-mode="light"] .reading-content .alert-warning a,
html[data-theme-mode="light"] .reading-content .chapter-warning a,
html[data-theme-mode="light"] .reading-content [class*="locked"] a,
body.reader-sepia .reading-content .alert-warning a,
body.reader-sepia .reading-content [class*="locked"] a,
body.reader-silver .reading-content .alert-warning a,
body.reader-silver .reading-content [class*="locked"] a,
body.reader-frost .reading-content .alert-warning a,
body.reader-frost .reading-content [class*="locked"] a {
    color: #0066cc !important;
    background: rgba(0, 102, 204, 0.1) !important;
}

.reading-content .alert-warning a:hover,
.reading-content .chapter-warning a:hover,
.reading-content [class*="locked"] a:hover {
    opacity: 0.85 !important;
    transform: translateY(-1px) !important;
}

/* ============================================
   2. COMMENT FORM TOOLBAR VISIBILITY
   ============================================ */

/* Toolbar buttons - use theme tokens, fully visible */
.zax-comment-form__toolbar-btn {
    opacity: 1 !important;
    color: var(--mc-text, #ffffff) !important;
    filter: none !important;
    position: relative !important;
    overflow: visible !important;
}

/* Ensure screen-reader-text doesn't interfere with icons */
.zax-comment-form__toolbar-btn .screen-reader-text {
    position: absolute !important;
    clip: rect(1px, 1px, 1px, 1px) !important;
    width: 1px !important;
    height: 1px !important;
    overflow: hidden !important;
}

.zax-comment-form__toolbar-btn .dashicons {
    opacity: 1 !important;
    color: var(--mc-text, #ffffff) !important;
    fill: var(--mc-text, #ffffff) !important;
    font-size: 20px !important;
    width: 24px !important;
    height: 24px !important;
    line-height: 1 !important;
    display: inline-block !important;
    visibility: visible !important;
    text-indent: 0 !important;
    font-family: dashicons !important;
    font-style: normal !important;
    font-weight: normal !important;
    font-variant: normal !important;
    text-transform: none !important;
    speak: none !important;
    -webkit-font-smoothing: antialiased !important;
    -moz-osx-font-smoothing: grayscale !important;
    position: relative !important;
    z-index: 1 !important;
}

/* Ensure dashicons spans are visible and have proper dimensions */
.zax-comment-form__toolbar-btn > .dashicons {
    min-width: 20px !important;
    min-height: 20px !important;
    text-align: center !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
}

/* Dark mode: light icons on dark background */
html[data-theme-mode="dark"] .zax-comment-form__toolbar-btn:not(.zax-toolbar-btn-locked) {
    background: color-mix(in oklab, var(--mc-surface-2, #15181d) 80%, transparent) !important;
    border-color: color-mix(in oklab, var(--mc-border, #2a2f36) 70%, var(--mc-accent, #00bcd4) 30%) !important;
    color: var(--mc-text, #ffffff) !important;
}

html[data-theme-mode="dark"] .zax-comment-form__toolbar-btn:not(.zax-toolbar-btn-locked):hover {
    background: color-mix(in oklab, var(--mc-surface-3, #1b1f26) 90%, var(--mc-accent, #00bcd4) 10%) !important;
    border-color: color-mix(in oklab, var(--mc-accent, #00bcd4) 60%, var(--mc-border, #2a2f36) 40%) !important;
    color: var(--mc-text, #ffffff) !important;
    opacity: 1 !important;
}

html[data-theme-mode="dark"] .zax-comment-form__toolbar-btn .dashicons {
    color: var(--mc-text, #ffffff) !important;
    fill: var(--mc-text, #ffffff) !important;
    font-size: 20px !important;
    width: 24px !important;
    height: 24px !important;
    opacity: 1 !important;
    visibility: visible !important;
}

/* Light mode: dark icons on light background */
html[data-theme-mode="light"] .zax-comment-form__toolbar-btn:not(.zax-toolbar-btn-locked),
body.reader-sepia .zax-comment-form__toolbar-btn:not(.zax-toolbar-btn-locked),
body.reader-silver .zax-comment-form__toolbar-btn:not(.zax-toolbar-btn-locked),
body.reader-frost .zax-comment-form__toolbar-btn:not(.zax-toolbar-btn-locked) {
    background: #e9ecef !important;
    border-color: #ced4da !important;
    color: #212529 !important;
}

html[data-theme-mode="light"] .zax-comment-form__toolbar-btn:not(.zax-toolbar-btn-locked):hover,
body.reader-sepia .zax-comment-form__toolbar-btn:not(.zax-toolbar-btn-locked):hover,
body.reader-silver .zax-comment-form__toolbar-btn:not(.zax-toolbar-btn-locked):hover,
body.reader-frost .zax-comment-form__toolbar-btn:not(.zax-toolbar-btn-locked):hover {
    background: #dee2e6 !important;
    border-color: #adb5bd !important;
    color: #000000 !important;
    opacity: 1 !important;
}

html[data-theme-mode="light"] .zax-comment-form__toolbar-btn .dashicons,
body.reader-sepia .zax-comment-form__toolbar-btn .dashicons,
body.reader-silver .zax-comment-form__toolbar-btn .dashicons,
body.reader-frost .zax-comment-form__toolbar-btn .dashicons {
    color: #212529 !important;
    fill: #212529 !important;
    font-size: 20px !important;
    width: 24px !important;
    height: 24px !important;
    opacity: 1 !important;
    visibility: visible !important;
}

.zax-comment-form__toolbar-btn:not(.zax-toolbar-btn-locked):focus {
    outline: none !important;
    box-shadow: 0 0 0 3px color-mix(in oklab, var(--mc-accent, #00bcd4) 30%, transparent) !important;
    opacity: 1 !important;
}

.zax-comment-form__toolbar-btn.is-active {
    background: color-mix(in oklab, var(--mc-accent, #00bcd4) 20%, var(--mc-surface-2, #15181d) 80%) !important;
    border-color: color-mix(in oklab, var(--mc-accent, #00bcd4) 60%, var(--mc-border, #2a2f36) 40%) !important;
    color: var(--mc-text, #ffffff) !important;
    opacity: 1 !important;
}

html[data-theme-mode="light"] .zax-comment-form__toolbar-btn.is-active,
body.reader-sepia .zax-comment-form__toolbar-btn.is-active,
body.reader-silver .zax-comment-form__toolbar-btn.is-active,
body.reader-frost .zax-comment-form__toolbar-btn.is-active {
    background: color-mix(in oklab, var(--mc-accent, #00bcd4) 15%, #e9ecef 85%) !important;
    border-color: color-mix(in oklab, var(--mc-accent, #00bcd4) 50%, #ced4da 50%) !important;
    color: #000000 !important;
}

/* Sticker button special styling */
.zax-comment-form__toolbar-btn--sticker {
    background: color-mix(in oklab, var(--mc-accent, #00bcd4) 15%, var(--mc-surface-2, #15181d) 85%) !important;
    border-color: color-mix(in oklab, var(--mc-accent, #00bcd4) 40%, var(--mc-border, #2a2f36) 60%) !important;
    opacity: 1 !important;
}

.zax-comment-form__toolbar-btn--sticker:hover {
    background: color-mix(in oklab, var(--mc-accent, #00bcd4) 25%, var(--mc-surface-3, #1b1f26) 75%) !important;
    border-color: color-mix(in oklab, var(--mc-accent, #00bcd4) 60%, var(--mc-border, #2a2f36) 40%) !important;
    opacity: 1 !important;
}

/* Badge/notification styling in toolbar */
.zax-comment-form__toolbar-btn .badge,
.zax-comment-form__toolbar-btn [class*="badge"],
.zax-comment-form__toolbar-btn [class*="count"],
.zax-comment-form__toolbar-btn [class*="notification"] {
    background: var(--mc-accent, #00bcd4) !important;
    color: #ffffff !important;
    border-radius: 10px !important;
    padding: 2px 6px !important;
    font-size: 10px !important;
    font-weight: 700 !important;
    min-width: 18px !important;
    text-align: center !important;
    opacity: 1 !important;
    box-shadow: 0 2px 8px color-mix(in oklab, var(--mc-accent, #00bcd4) 40%, transparent) !important;
}

/* ============================================
   3. COMMENT SYSTEM THEME-AWARE STYLING
   ============================================ */

/* Dark mode: keep current dark style */
html[data-theme-mode="dark"] .zax-comments,
html[data-theme-mode="dark"] .zax-comment-form {
    background: var(--zax-comments-bg, #0d0d0d) !important;
    border-color: var(--zax-comments-border, #2b2b2b) !important;
    color: var(--zax-comments-text, #e0e0e0) !important;
}

html[data-theme-mode="dark"] .zax-comment-item {
    background: var(--zax-comments-surface, #111111) !important;
    border-color: var(--zax-comments-border, #2b2b2b) !important;
    color: var(--zax-comments-text, #e0e0e0) !important;
}

html[data-theme-mode="dark"] .zax-comment-form__editor,
html[data-theme-mode="dark"] .zax-comment-form input[type="text"],
html[data-theme-mode="dark"] .zax-comment-form input[type="email"],
html[data-theme-mode="dark"] .zax-comment-form input[type="url"],
html[data-theme-mode="dark"] .zax-comment-form textarea {
    background: var(--zax-comments-surface-2, #1a1a1a) !important;
    border-color: var(--zax-comments-border, #2b2b2b) !important;
    color: var(--zax-comments-text, #e0e0e0) !important;
}

/* Light themes: light background with dark text */
html[data-theme-mode="light"] .zax-comments,
html[data-theme-mode="light"] .zax-comment-form,
body.reader-sepia .zax-comments,
body.reader-sepia .zax-comment-form,
body.reader-silver .zax-comments,
body.reader-silver .zax-comment-form,
body.reader-frost .zax-comments,
body.reader-frost .zax-comment-form {
    background: #ffffff !important;
    border-color: #dee2e6 !important;
    color: #212529 !important;
}

html[data-theme-mode="light"] .zax-comment-item,
body.reader-sepia .zax-comment-item,
body.reader-silver .zax-comment-item,
body.reader-frost .zax-comment-item {
    background: #f8f9fa !important;
    border-color: #dee2e6 !important;
    color: #212529 !important;
}

html[data-theme-mode="light"] .zax-comment-form__editor,
html[data-theme-mode="light"] .zax-comment-form input[type="text"],
html[data-theme-mode="light"] .zax-comment-form input[type="email"],
html[data-theme-mode="light"] .zax-comment-form input[type="url"],
html[data-theme-mode="light"] .zax-comment-form textarea,
body.reader-sepia .zax-comment-form__editor,
body.reader-sepia .zax-comment-form input,
body.reader-sepia .zax-comment-form textarea,
body.reader-silver .zax-comment-form__editor,
body.reader-silver .zax-comment-form input,
body.reader-silver .zax-comment-form textarea,
body.reader-frost .zax-comment-form__editor,
body.reader-frost .zax-comment-form input,
body.reader-frost .zax-comment-form textarea {
    background: #ffffff !important;
    border-color: #ced4da !important;
    color: #212529 !important;
}

/* Light theme text colors */
html[data-theme-mode="light"] .zax-comments__title,
html[data-theme-mode="light"] .zax-comment-item__author,
html[data-theme-mode="light"] .zax-comment-item__content,
html[data-theme-mode="light"] .zax-comment-form__title,
body.reader-sepia .zax-comments__title,
body.reader-sepia .zax-comment-item__author,
body.reader-sepia .zax-comment-item__content,
body.reader-sepia .zax-comment-form__title,
body.reader-silver .zax-comments__title,
body.reader-silver .zax-comment-item__author,
body.reader-silver .zax-comment-item__content,
body.reader-silver .zax-comment-form__title,
body.reader-frost .zax-comments__title,
body.reader-frost .zax-comment-item__author,
body.reader-frost .zax-comment-item__content,
body.reader-frost .zax-comment-form__title {
    color: #212529 !important;
}

/* Light theme links and buttons */
html[data-theme-mode="light"] .zax-comment-item__action,
html[data-theme-mode="light"] .zax-comment-reaction,
body.reader-sepia .zax-comment-item__action,
body.reader-sepia .zax-comment-reaction,
body.reader-silver .zax-comment-item__action,
body.reader-silver .zax-comment-reaction,
body.reader-frost .zax-comment-item__action,
body.reader-frost .zax-comment-reaction {
    background: #e9ecef !important;
    border-color: #ced4da !important;
    color: #495057 !important;
}

html[data-theme-mode="light"] .zax-comment-item__action:hover,
html[data-theme-mode="light"] .zax-comment-reaction:hover,
body.reader-sepia .zax-comment-item__action:hover,
body.reader-sepia .zax-comment-reaction:hover,
body.reader-silver .zax-comment-item__action:hover,
body.reader-silver .zax-comment-reaction:hover,
body.reader-frost .zax-comment-item__action:hover,
body.reader-frost .zax-comment-reaction:hover {
    background: #dee2e6 !important;
    border-color: #adb5bd !important;
    color: #212529 !important;
}

/* Light theme reaction icons remain visible */
html[data-theme-mode="light"] .zax-comment-reaction__emoji,
body.reader-sepia .zax-comment-reaction__emoji,
body.reader-silver .zax-comment-reaction__emoji,
body.reader-frost .zax-comment-reaction__emoji {
    opacity: 1 !important;
    filter: none !important;
}

/* Light theme toolbar in light mode */
html[data-theme-mode="light"] .zax-comment-form__toolbar,
body.reader-sepia .zax-comment-form__toolbar,
body.reader-silver .zax-comment-form__toolbar,
body.reader-frost .zax-comment-form__toolbar {
    background: #f8f9fa !important;
    border-color: #dee2e6 !important;
}

html[data-theme-mode="light"] .zax-comment-form__toolbar-btn:not(.zax-toolbar-btn-locked),
body.reader-sepia .zax-comment-form__toolbar-btn:not(.zax-toolbar-btn-locked),
body.reader-silver .zax-comment-form__toolbar-btn:not(.zax-toolbar-btn-locked),
body.reader-frost .zax-comment-form__toolbar-btn:not(.zax-toolbar-btn-locked) {
    background: #e9ecef !important;
    border-color: #ced4da !important;
    color: #495057 !important;
}

html[data-theme-mode="light"] .zax-comment-form__toolbar-btn:not(.zax-toolbar-btn-locked):hover,
body.reader-sepia .zax-comment-form__toolbar-btn:not(.zax-toolbar-btn-locked):hover,
body.reader-silver .zax-comment-form__toolbar-btn:not(.zax-toolbar-btn-locked):hover,
body.reader-frost .zax-comment-form__toolbar-btn:not(.zax-toolbar-btn-locked):hover {
    background: #dee2e6 !important;
    border-color: #adb5bd !important;
    color: #212529 !important;
}

/* Placeholder text in light mode */
html[data-theme-mode="light"] .zax-comment-form__editor::placeholder,
html[data-theme-mode="light"] .zax-comment-form input::placeholder,
body.reader-sepia .zax-comment-form__editor::placeholder,
body.reader-sepia .zax-comment-form input::placeholder,
body.reader-silver .zax-comment-form__editor::placeholder,
body.reader-silver .zax-comment-form input::placeholder,
body.reader-frost .zax-comment-form__editor::placeholder,
body.reader-frost .zax-comment-form input::placeholder {
    color: #6c757d !important;
}

/* ============================================
   4. COMMENT SORT BUTTON (Match Free Chapters Style)
   ============================================ */

/* Sort button container - match Free Chapters button style */
.zax-comments__sort-buttons {
    background: color-mix(in oklab, var(--mc-surface-2, #15181d) 30%, transparent) !important;
    border: 1px solid color-mix(in oklab, var(--mc-border, #2a2f36) 70%, transparent) !important;
    border-radius: 8px !important;
}

/* Sort button - match Free Chapters accent gradient */
.zax-sort-btn {
    color: var(--mc-text, #ffffff) !important;
    position: relative !important;
}

.zax-sort-btn::before {
    content: '' !important;
    position: absolute !important;
    inset-block: 0 !important;
    inset-inline-start: 0 !important;
    width: 3px !important;
    border-radius: 3px 0 0 3px !important;
    background: var(--mc-gradient-cta, linear-gradient(180deg, var(--mc-cta-start, #ff5033), var(--mc-cta-end, #ff8a3d))) !important;
    opacity: 0 !important;
    transition: opacity 0.2s ease !important;
}

.zax-sort-btn:hover::before {
    opacity: 1 !important;
}

.zax-sort-btn:hover {
    background: color-mix(in oklab, var(--mc-surface-3, #1b1f26) 40%, transparent) !important;
    color: var(--mc-text, #ffffff) !important;
}

.zax-sort-btn.active {
    background: color-mix(in oklab, var(--mc-surface-2, #15181d) 30%, transparent) !important;
    color: var(--mc-text, #ffffff) !important;
}

.zax-sort-btn.active::before {
    opacity: 1 !important;
}

.zax-sort-btn .zax-sort-icon {
    color: inherit !important;
    filter: none !important;
}

/* Light mode sort button */
html[data-theme-mode="light"] .zax-comments__sort-buttons,
body.reader-sepia .zax-comments__sort-buttons,
body.reader-silver .zax-comments__sort-buttons,
body.reader-frost .zax-comments__sort-buttons {
    background: #f8f9fa !important;
    border-color: #dee2e6 !important;
}

html[data-theme-mode="light"] .zax-sort-btn,
body.reader-sepia .zax-sort-btn,
body.reader-silver .zax-sort-btn,
body.reader-frost .zax-sort-btn {
    color: #212529 !important;
}

html[data-theme-mode="light"] .zax-sort-btn:hover,
body.reader-sepia .zax-sort-btn:hover,
body.reader-silver .zax-sort-btn:hover,
body.reader-frost .zax-sort-btn:hover {
    background: #e9ecef !important;
    color: #000000 !important;
}

html[data-theme-mode="light"] .zax-sort-btn.active,
body.reader-sepia .zax-sort-btn.active,
body.reader-silver .zax-sort-btn.active,
body.reader-frost .zax-sort-btn.active {
    background: #f8f9fa !important;
    color: #212529 !important;
}

/* ============================================
   5. COMMENT ACTION BUTTONS (Preview, Post Comment, Reactions)
   ============================================ */

/* Main action buttons - use ZAX accent gradient (same as Free Chapters) */
.zax-comment-form__preview-toggle,
.zax-comment-form__submit {
    background: var(--mc-gradient-cta, linear-gradient(180deg, var(--mc-cta-start, #ff5033), var(--mc-cta-end, #ff8a3d))) !important;
    border: none !important;
    color: #ffffff !important;
    font-weight: 600 !important;
}

.zax-comment-form__preview-toggle:hover,
.zax-comment-form__submit:hover {
    background: linear-gradient(180deg, 
        color-mix(in oklab, var(--mc-cta-start, #ff5033) 90%, #ffffff 10%), 
        color-mix(in oklab, var(--mc-cta-end, #ff8a3d) 90%, #ffffff 10%)) !important;
    box-shadow: 0 4px 12px color-mix(in oklab, var(--mc-cta-start, #ff5033) 30%, transparent) !important;
    transform: translateY(-1px) !important;
}

.zax-comment-form__preview-toggle:focus,
.zax-comment-form__submit:focus {
    outline: none !important;
    box-shadow: 0 0 0 3px color-mix(in oklab, var(--mc-accent, #00bcd4) 30%, transparent) !important;
}

.zax-comment-form__submit:disabled {
    opacity: 0.6 !important;
    cursor: not-allowed !important;
}

/* Reaction buttons - use accent colors */
.zax-comment-reaction {
    background: color-mix(in oklab, var(--mc-surface-2, #15181d) 80%, transparent) !important;
    border-color: color-mix(in oklab, var(--mc-border, #2a2f36) 70%, var(--mc-accent, #00bcd4) 30%) !important;
    color: var(--mc-text, #ffffff) !important;
}

.zax-comment-reaction:hover {
    background: color-mix(in oklab, var(--mc-surface-3, #1b1f26) 90%, var(--mc-accent, #00bcd4) 10%) !important;
    border-color: color-mix(in oklab, var(--mc-accent, #00bcd4) 60%, var(--mc-border, #2a2f36) 40%) !important;
    color: var(--mc-text, #ffffff) !important;
}

/* Top border indicator for active reaction buttons - Higher specificity to override minified CSS */
.zax-comment-item__reactions .zax-comment-reaction,
.zax-comment-item__actions-main .zax-comment-item__reactions .zax-comment-reaction {
    position: relative !important;
}

.zax-comment-item__reactions .zax-comment-reaction::before,
.zax-comment-item__actions-main .zax-comment-item__reactions .zax-comment-reaction::before {
    content: '' !important;
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    height: 3px !important;
    border-radius: 3px 3px 0 0 !important;
    background: var(--mc-gradient-cta, linear-gradient(180deg, var(--mc-cta-start, #ff5033), var(--mc-cta-end, #ff8a3d))) !important;
    opacity: 0 !important;
    transition: opacity 0.2s ease !important;
    z-index: 1 !important;
}

.zax-comment-item__reactions .zax-comment-reaction.is-active,
.zax-comment-item__actions-main .zax-comment-item__reactions .zax-comment-reaction.is-active {
    background: color-mix(in oklab, var(--mc-accent, #00bcd4) 20%, var(--mc-surface-2, #15181d) 80%) !important;
    border-color: color-mix(in oklab, var(--mc-accent, #00bcd4) 60%, var(--mc-border, #2a2f36) 40%) !important;
    color: var(--mc-text, #ffffff) !important;
}

.zax-comment-item__reactions .zax-comment-reaction.is-active::before,
.zax-comment-item__actions-main .zax-comment-item__reactions .zax-comment-reaction.is-active::before {
    opacity: 1 !important;
}

/* Ensure emoji and count appear above the border indicator */
.zax-comment-item__reactions .zax-comment-reaction__emoji,
.zax-comment-item__reactions .zax-comment-reaction__count {
    position: relative !important;
    z-index: 2 !important;
}

.zax-comment-reaction__emoji {
    opacity: 1 !important;
    filter: none !important;
}

/* Light mode action buttons */
html[data-theme-mode="light"] .zax-comment-reaction,
body.reader-sepia .zax-comment-reaction,
body.reader-silver .zax-comment-reaction,
body.reader-frost .zax-comment-reaction {
    background: #e9ecef !important;
    border-color: #ced4da !important;
    color: #212529 !important;
}

html[data-theme-mode="light"] .zax-comment-reaction:hover,
body.reader-sepia .zax-comment-reaction:hover,
body.reader-silver .zax-comment-reaction:hover,
body.reader-frost .zax-comment-reaction:hover {
    background: color-mix(in oklab, var(--mc-accent, #00bcd4) 10%, #e9ecef 90%) !important;
    border-color: color-mix(in oklab, var(--mc-accent, #00bcd4) 40%, #ced4da 60%) !important;
    color: #000000 !important;
}

html[data-theme-mode="light"] .zax-comment-reaction.is-active,
body.reader-sepia .zax-comment-reaction.is-active,
body.reader-silver .zax-comment-reaction.is-active,
body.reader-frost .zax-comment-reaction.is-active {
    background: color-mix(in oklab, var(--mc-accent, #00bcd4) 15%, #e9ecef 85%) !important;
    border-color: color-mix(in oklab, var(--mc-accent, #00bcd4) 50%, #ced4da 50%) !important;
    color: #000000 !important;
}

html[data-theme-mode="light"] .zax-comment-reaction.is-active::before,
body.reader-sepia .zax-comment-reaction.is-active::before,
body.reader-silver .zax-comment-reaction.is-active::before,
body.reader-frost .zax-comment-reaction.is-active::before {
    opacity: 1 !important;
}

/* ============================================
   7. EMOJI PICKER VISIBILITY FIX
   ============================================ */

/* Ensure emoji picker is visible and properly positioned */
.zax-emoji-picker {
    display: grid !important;
    grid-template-columns: repeat(5, 1fr) !important; /* Fixed 5 columns */
    gap: 4px !important;
    visibility: visible !important;
    opacity: 1 !important;
    z-index: 9999 !important;
    position: fixed !important;
    background: var(--mc-surface, #1a1a1a) !important;
    border: 1px solid var(--mc-border, #2a2f36) !important;
    border-radius: 8px !important;
    padding: 8px !important;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.5) !important;
    width: 280px !important; /* Fixed width to prevent horizontal scroll */
    max-width: 280px !important;
    max-height: 200px !important;
    overflow-x: hidden !important; /* No horizontal scroll */
    overflow-y: auto !important; /* Only vertical scroll */
}

/* Dark mode emoji picker */
html[data-theme-mode="dark"] .zax-emoji-picker {
    background: var(--mc-surface, #1a1a1a) !important;
    border-color: var(--mc-border, #2a2f36) !important;
}

/* Light mode emoji picker */
html[data-theme-mode="light"] .zax-emoji-picker,
body.reader-sepia .zax-emoji-picker,
body.reader-silver .zax-emoji-picker,
body.reader-frost .zax-emoji-picker {
    background: #ffffff !important;
    border-color: #dee2e6 !important;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15) !important;
}

/* Emoji picker items */
.zax-emoji-picker__item {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    visibility: visible !important;
    opacity: 1 !important;
    font-size: 20px !important;
    padding: 8px !important;
    cursor: pointer !important;
    border-radius: 4px !important;
    transition: background 0.15s ease !important;
    width: 100% !important; /* Fill grid cell */
    min-width: 0 !important; /* Prevent overflow */
    aspect-ratio: 1 !important; /* Keep square shape */
    box-sizing: border-box !important;
}

.zax-emoji-picker__item:hover {
    background: var(--mc-surface-2, #15181d) !important;
}

html[data-theme-mode="light"] .zax-emoji-picker__item:hover,
body.reader-sepia .zax-emoji-picker__item:hover,
body.reader-silver .zax-emoji-picker__item:hover,
body.reader-frost .zax-emoji-picker__item:hover {
    background: #e9ecef !important;
}

/* Ensure comment form has relative positioning for picker */
.zax-comment-form {
    position: relative !important;
}

.zax-comment-form__editor-wrapper {
    position: relative !important;
}

/* ============================================
   6. WPDISCUZ TOOLBAR ICON VISIBILITY FIX
   ============================================ */

/* wpDiscuz toolbar container */
.wpdiscuz-toolbar,
.wpd-toolbar,
.wpd-toolbar-wrap {
    /* Keep existing styles, just ensure icons are visible */
}

/* wpDiscuz toolbar buttons */
.wpdiscuz-toolbar button,
.wpd-tool-button,
.wpd-toolbar button,
.wpd-toolbar .wpd-tool-button,
.wpd-toolbar-wrap button,
.wpd-toolbar-wrap .wpd-tool-button {
    /* Remove any hiding styles on buttons */
    text-indent: 0 !important;
    font-size: inherit !important;
    color: inherit !important;
}

/* Icon elements inside wpDiscuz buttons - make visible */
.wpdiscuz-toolbar button i,
.wpdiscuz-toolbar button .fa,
.wpdiscuz-toolbar button .fas,
.wpdiscuz-toolbar button .far,
.wpdiscuz-toolbar button .fab,
.wpdiscuz-toolbar button svg,
.wpd-tool-button i,
.wpd-tool-button .fa,
.wpd-tool-button .fas,
.wpd-tool-button .far,
.wpd-tool-button .fab,
.wpd-tool-button svg,
.wpd-toolbar button i,
.wpd-toolbar button .fa,
.wpd-toolbar button .fas,
.wpd-toolbar button .far,
.wpd-toolbar button .fab,
.wpd-toolbar button svg,
.wpd-toolbar .wpd-tool-button i,
.wpd-toolbar .wpd-tool-button .fa,
.wpd-toolbar .wpd-tool-button .fas,
.wpd-toolbar .wpd-tool-button .far,
.wpd-toolbar .wpd-tool-button .fab,
.wpd-toolbar .wpd-tool-button svg,
.wpd-toolbar-wrap button i,
.wpd-toolbar-wrap button .fa,
.wpd-toolbar-wrap button .fas,
.wpd-toolbar-wrap button .far,
.wpd-toolbar-wrap button .fab,
.wpd-toolbar-wrap button svg {
    /* Remove hiding styles */
    opacity: 1 !important;
    color: inherit !important;
    text-indent: 0 !important;
    font-size: 0 !important; /* Reset, then set proper size */
    width: auto !important;
    height: auto !important;
    display: inline-block !important;
    visibility: visible !important;
}

/* Set proper icon sizes */
.wpdiscuz-toolbar button i,
.wpdiscuz-toolbar button .fa,
.wpdiscuz-toolbar button .fas,
.wpdiscuz-toolbar button .far,
.wpdiscuz-toolbar button .fab,
.wpd-tool-button i,
.wpd-tool-button .fa,
.wpd-tool-button .fas,
.wpd-tool-button .far,
.wpd-tool-button .fab,
.wpd-toolbar button i,
.wpd-toolbar button .fa,
.wpd-toolbar button .fas,
.wpd-toolbar button .far,
.wpd-toolbar button .fab,
.wpd-toolbar .wpd-tool-button i,
.wpd-toolbar .wpd-tool-button .fa,
.wpd-toolbar .wpd-tool-button .fas,
.wpd-toolbar .wpd-tool-button .far,
.wpd-toolbar .wpd-tool-button .fab {
    font-size: 15px !important;
    line-height: 1 !important;
    width: 15px !important;
    height: 15px !important;
}

/* SVG icons in wpDiscuz buttons */
.wpdiscuz-toolbar button svg,
.wpd-tool-button svg,
.wpd-toolbar button svg,
.wpd-toolbar .wpd-tool-button svg,
.wpd-toolbar-wrap button svg {
    width: 16px !important;
    height: 16px !important;
    display: inline-block !important;
    vertical-align: middle !important;
    fill: currentColor !important;
}

/* ::before pseudo-elements (Font Awesome icons) */
.wpdiscuz-toolbar button::before,
.wpd-tool-button::before,
.wpd-toolbar button::before,
.wpd-toolbar .wpd-tool-button::before,
.wpd-toolbar-wrap button::before {
    opacity: 1 !important;
    color: inherit !important;
    font-size: 15px !important;
    display: inline-block !important;
    visibility: visible !important;
}

/* Dark mode: light icon color */
html[data-theme-mode="dark"] .wpdiscuz-toolbar button,
html[data-theme-mode="dark"] .wpd-tool-button,
html[data-theme-mode="dark"] .wpd-toolbar button,
html[data-theme-mode="dark"] .wpd-toolbar .wpd-tool-button,
html[data-theme-mode="dark"] .wpd-toolbar-wrap button {
    color: var(--mc-text, #ffffff) !important;
}

html[data-theme-mode="dark"] .wpdiscuz-toolbar button i,
html[data-theme-mode="dark"] .wpdiscuz-toolbar button .fa,
html[data-theme-mode="dark"] .wpdiscuz-toolbar button .fas,
html[data-theme-mode="dark"] .wpdiscuz-toolbar button .far,
html[data-theme-mode="dark"] .wpdiscuz-toolbar button .fab,
html[data-theme-mode="dark"] .wpdiscuz-toolbar button svg,
html[data-theme-mode="dark"] .wpd-tool-button i,
html[data-theme-mode="dark"] .wpd-tool-button .fa,
html[data-theme-mode="dark"] .wpd-tool-button .fas,
html[data-theme-mode="dark"] .wpd-tool-button .far,
html[data-theme-mode="dark"] .wpd-tool-button .fab,
html[data-theme-mode="dark"] .wpd-tool-button svg,
html[data-theme-mode="dark"] .wpd-toolbar button i,
html[data-theme-mode="dark"] .wpd-toolbar button .fa,
html[data-theme-mode="dark"] .wpd-toolbar button .fas,
html[data-theme-mode="dark"] .wpd-toolbar button .far,
html[data-theme-mode="dark"] .wpd-toolbar button .fab,
html[data-theme-mode="dark"] .wpd-toolbar button svg,
html[data-theme-mode="dark"] .wpd-toolbar .wpd-tool-button i,
html[data-theme-mode="dark"] .wpd-toolbar .wpd-tool-button .fa,
html[data-theme-mode="dark"] .wpd-toolbar .wpd-tool-button .fas,
html[data-theme-mode="dark"] .wpd-toolbar .wpd-tool-button .far,
html[data-theme-mode="dark"] .wpd-toolbar .wpd-tool-button .fab,
html[data-theme-mode="dark"] .wpd-toolbar .wpd-tool-button svg,
html[data-theme-mode="dark"] .wpd-toolbar-wrap button i,
html[data-theme-mode="dark"] .wpd-toolbar-wrap button .fa,
html[data-theme-mode="dark"] .wpd-toolbar-wrap button .fas,
html[data-theme-mode="dark"] .wpd-toolbar-wrap button .far,
html[data-theme-mode="dark"] .wpd-toolbar-wrap button .fab,
html[data-theme-mode="dark"] .wpd-toolbar-wrap button svg {
    color: var(--mc-text, #ffffff) !important;
    fill: var(--mc-text, #ffffff) !important;
}

html[data-theme-mode="dark"] .wpdiscuz-toolbar button::before,
html[data-theme-mode="dark"] .wpd-tool-button::before,
html[data-theme-mode="dark"] .wpd-toolbar button::before,
html[data-theme-mode="dark"] .wpd-toolbar .wpd-tool-button::before,
html[data-theme-mode="dark"] .wpd-toolbar-wrap button::before {
    color: var(--mc-text, #ffffff) !important;
}

/* Light mode: dark icon color */
html[data-theme-mode="light"] .wpdiscuz-toolbar button,
html[data-theme-mode="light"] .wpd-tool-button,
html[data-theme-mode="light"] .wpd-toolbar button,
html[data-theme-mode="light"] .wpd-toolbar .wpd-tool-button,
html[data-theme-mode="light"] .wpd-toolbar-wrap button,
body.reader-sepia .wpdiscuz-toolbar button,
body.reader-sepia .wpd-tool-button,
body.reader-sepia .wpd-toolbar button,
body.reader-sepia .wpd-toolbar .wpd-tool-button,
body.reader-sepia .wpd-toolbar-wrap button,
body.reader-silver .wpdiscuz-toolbar button,
body.reader-silver .wpd-tool-button,
body.reader-silver .wpd-toolbar button,
body.reader-silver .wpd-toolbar .wpd-tool-button,
body.reader-silver .wpd-toolbar-wrap button,
body.reader-frost .wpdiscuz-toolbar button,
body.reader-frost .wpd-tool-button,
body.reader-frost .wpd-toolbar button,
body.reader-frost .wpd-toolbar .wpd-tool-button,
body.reader-frost .wpd-toolbar-wrap button {
    color: #212529 !important;
}

html[data-theme-mode="light"] .wpdiscuz-toolbar button i,
html[data-theme-mode="light"] .wpdiscuz-toolbar button .fa,
html[data-theme-mode="light"] .wpdiscuz-toolbar button .fas,
html[data-theme-mode="light"] .wpdiscuz-toolbar button .far,
html[data-theme-mode="light"] .wpdiscuz-toolbar button .fab,
html[data-theme-mode="light"] .wpdiscuz-toolbar button svg,
html[data-theme-mode="light"] .wpd-tool-button i,
html[data-theme-mode="light"] .wpd-tool-button .fa,
html[data-theme-mode="light"] .wpd-tool-button .fas,
html[data-theme-mode="light"] .wpd-tool-button .far,
html[data-theme-mode="light"] .wpd-tool-button .fab,
html[data-theme-mode="light"] .wpd-tool-button svg,
html[data-theme-mode="light"] .wpd-toolbar button i,
html[data-theme-mode="light"] .wpd-toolbar button .fa,
html[data-theme-mode="light"] .wpd-toolbar button .fas,
html[data-theme-mode="light"] .wpd-toolbar button .far,
html[data-theme-mode="light"] .wpd-toolbar button .fab,
html[data-theme-mode="light"] .wpd-toolbar button svg,
html[data-theme-mode="light"] .wpd-toolbar .wpd-tool-button i,
html[data-theme-mode="light"] .wpd-toolbar .wpd-tool-button .fa,
html[data-theme-mode="light"] .wpd-toolbar .wpd-tool-button .fas,
html[data-theme-mode="light"] .wpd-toolbar .wpd-tool-button .far,
html[data-theme-mode="light"] .wpd-toolbar .wpd-tool-button .fab,
html[data-theme-mode="light"] .wpd-toolbar .wpd-tool-button svg,
html[data-theme-mode="light"] .wpd-toolbar-wrap button i,
html[data-theme-mode="light"] .wpd-toolbar-wrap button .fa,
html[data-theme-mode="light"] .wpd-toolbar-wrap button .fas,
html[data-theme-mode="light"] .wpd-toolbar-wrap button .far,
html[data-theme-mode="light"] .wpd-toolbar-wrap button .fab,
html[data-theme-mode="light"] .wpd-toolbar-wrap button svg,
body.reader-sepia .wpdiscuz-toolbar button i,
body.reader-sepia .wpdiscuz-toolbar button .fa,
body.reader-sepia .wpdiscuz-toolbar button svg,
body.reader-sepia .wpd-tool-button i,
body.reader-sepia .wpd-tool-button .fa,
body.reader-sepia .wpd-tool-button svg,
body.reader-sepia .wpd-toolbar button i,
body.reader-sepia .wpd-toolbar button .fa,
body.reader-sepia .wpd-toolbar button svg,
body.reader-silver .wpdiscuz-toolbar button i,
body.reader-silver .wpdiscuz-toolbar button .fa,
body.reader-silver .wpdiscuz-toolbar button svg,
body.reader-silver .wpd-tool-button i,
body.reader-silver .wpd-tool-button .fa,
body.reader-silver .wpd-tool-button svg,
body.reader-silver .wpd-toolbar button i,
body.reader-silver .wpd-toolbar button .fa,
body.reader-silver .wpd-toolbar button svg,
body.reader-frost .wpdiscuz-toolbar button i,
body.reader-frost .wpdiscuz-toolbar button .fa,
body.reader-frost .wpdiscuz-toolbar button svg,
body.reader-frost .wpd-tool-button i,
body.reader-frost .wpd-tool-button .fa,
body.reader-frost .wpd-tool-button svg,
body.reader-frost .wpd-toolbar button i,
body.reader-frost .wpd-toolbar button .fa,
body.reader-frost .wpd-toolbar button svg {
    color: #212529 !important;
    fill: #212529 !important;
}

html[data-theme-mode="light"] .wpdiscuz-toolbar button::before,
html[data-theme-mode="light"] .wpd-tool-button::before,
html[data-theme-mode="light"] .wpd-toolbar button::before,
html[data-theme-mode="light"] .wpd-toolbar .wpd-tool-button::before,
html[data-theme-mode="light"] .wpd-toolbar-wrap button::before,
body.reader-sepia .wpdiscuz-toolbar button::before,
body.reader-sepia .wpd-tool-button::before,
body.reader-sepia .wpd-toolbar button::before,
body.reader-sepia .wpd-toolbar .wpd-tool-button::before,
body.reader-sepia .wpd-toolbar-wrap button::before,
body.reader-silver .wpdiscuz-toolbar button::before,
body.reader-silver .wpd-tool-button::before,
body.reader-silver .wpd-toolbar button::before,
body.reader-silver .wpd-toolbar .wpd-tool-button::before,
body.reader-silver .wpd-toolbar-wrap button::before,
body.reader-frost .wpdiscuz-toolbar button::before,
body.reader-frost .wpd-tool-button::before,
body.reader-frost .wpd-toolbar button::before,
body.reader-frost .wpd-toolbar .wpd-tool-button::before,
body.reader-frost .wpd-toolbar-wrap button::before {
    color: #212529 !important;
}