/**
 * Kat Comments - Frontend Styles
 * @package Kat_Comments
 * @since 2.5.0.0
 */

/* ==========================================================================
   Base Styles
   ========================================================================== */

/* Site-theme bridge: outside the chapter reader, map the --cr-* variables
   this stylesheet consumes onto the site palette (--nxp-*), so comments
   follow Light / Dark / Sepia / Soft automatically. Inside the reader,
   #nxp-reader redefines --cr-* deeper in the tree and wins. */
:root {
    --cr-bg:      var(--nxp-card-bg, #ffffff);
    --cr-surface: var(--nxp-bg-3, #f2f3f5);
    --cr-text:    var(--nxp-text, #334155);
    --cr-meta:    var(--nxp-text-3, #64748b);
    --cr-border:  var(--nxp-border, #e2e8f0);
    --cr-accent:  var(--nxp-primary, #007bff);
}

   
.kts-wrap {
    max-width: auto;
    margin: 0 auto 40px;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    line-height: 1.6;
    display: block !important;
}

/* Separator Line */
.kts-separator {
    border-top: 1px solid #e2e8f0;
    margin: 40px auto 20px;
    max-width: auto;
}

/* ==========================================================================
   Header Section
   ========================================================================== */

.kts-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 25px;
    padding-bottom: 10px;
}

.kts-count {
    font-size: 20px;
    font-weight: 700;
    color: #000;
    margin: 0;
}

.kts-sort-select {
    border: 1px solid #e2e8f0;
    padding: 6px 12px;
    border-radius: 8px;
    background: #fff;
    font-size: 14px;
    color: #0f0f0f;
    outline: none;
    cursor: pointer;
    transition: all 0.2s;
}

.kts-sort-select:hover {
    border-color: #cbd5e1;
}

.kts-sort-select:focus {
    border-color: #007bff;
    box-shadow: 0 0 0 3px rgba(0, 123, 255, 0.1);
}

/* ==========================================================================
   Comment Form
   ========================================================================== */

.kts-form-card {
    background: #fff;
    border: 1px solid #f1f5f9;
    border-radius: 12px;
    padding: 20px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
    margin-bottom: 30px;
    position: relative;
}

.kts-textarea {
    width: 100%;
    border: none;
    /* background: #f2f3f5; */
    border-radius: 8px;
    padding: 15px;
    font-size: 15px;
    min-height: 80px;
    box-sizing: border-box;
    outline: none;
    resize: vertical;
    font-family: inherit;
}


.kts-submit {
    background: #007bff;
    color: white;
    border: none;
    padding: 10px 28px;
    border-radius: 50px;
    font-weight: 600;
    cursor: pointer;
    margin-top: 15px;
    transition: all 0.2s;
    font-size: 14px;
}

.kts-reply-submit {
    margin-top: 0px !important;
}

.kts-submit:hover {
    background: #0056b3;
    transform: translateY(-1px);
    box-shadow: 0 4px 8px rgba(0, 123, 255, 0.2);
}

.kts-submit:disabled {
    opacity: 0.6;
    cursor: not-allowed;
    transform: none;
}

.kts-form-footer {
    margin-top: 12px;
    font-size: 11px;
    color: #94a3b8;
}

.kts-form-footer a {
    color: inherit;
    text-decoration: underline;
    cursor: pointer;
}

.kts-form-footer a:hover {
    color: #64748b;
}

.kts-text p:last-child {
    margin-bottom: 0;
}

p.form-submit {
    margin-bottom: 0;
}

/* ==========================================================================
   Comments List
   ========================================================================== */

.kts-list {
    list-style: none;
    padding: 0;
    margin: 0;
    transition: opacity 0.3s ease;
}

.kts-list.loading {
    opacity: 0.5;
    pointer-events: none;
}

.kts-item {
    margin-bottom: 30px;
    list-style: none;
    animation: fadeIn 0.4s ease;
    /* NO content-visibility here: it implies paint containment, which clips
       avatar frame rings/glows (they extend past the avatar at the card's
       left edge). Comment lists are paginated, so the perf hint isn't worth
       shearing the cosmetics. */
}

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

.kts-comment-block {
    transition: all 0.2s;
}

/* ==========================================================================
   User Information
   ========================================================================== */

.kts-user-row {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 8px;
}

.kts-avatar {
    width: 44px;
    height: 44px;
    border-radius: 10px;
    object-fit: cover;
    flex-shrink: 0;
    transition: all 0.3s;
}


/* .kts-avatar:hover {
    transform: scale(1.05);
} */

.kts-user-meta {
    line-height: 1.3;
    flex: 1;
}

/* .kts-author {
    font-weight: 700;
    color: #1e293b;
    font-size: 15px;
    display: block;
} */
.kts-author {
    font-weight: 700;
    color: #1e293b;
    font-size: 15px;
    display: flex;
    line-height: 1.1;
    gap:6px;
    align-items: center;
    justify-content: left;
}

.kts-author-link {
    color: inherit;
    text-decoration: none;
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
}

.kts-author-link:hover {
    color: #007bff;
}

.kts-user-title-row {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
    margin-top: 1px;
    margin-bottom: 1px;
    line-height: 1.2;
}

.kts-date {
    font-size: 12px;
    color: var(--cr-meta, #94a3b8);
    display: inline;
    font-weight: 500;
}
/* In the actions row the timestamp docks right, next to the ellipsis menu,
   and shares the action buttons' muted meta color. */
.kts-actions .kts-date {
    white-space: nowrap;
    margin-left: auto;
    line-height: 1;
}
.kts-actions .kts-more-wrap {
    margin-left: -8px; /* tuck the menu against the timestamp (row gap is 18px) */
}
.kts-edited-label {
    font-size: 11px;
    color: var(--cr-meta, #94a3b8);
    font-style: italic;
}

/* ==========================================================================
   VIP Badge & User Titles
   ========================================================================== */

.kts-vip-badge {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    background: linear-gradient(135deg, #6b21a8 0%, #9333ea 100%);
    color: #fff;
    font-size: 12px;
    font-weight: 700;
    padding: 1px 6px;
    border-radius: 4px;
    text-transform: uppercase;
    line-height: 1.3;
}

@keyframes vipPulse {
    0%, 100% {
        box-shadow: 0 2px 4px rgba(107, 33, 168, 0.3);
    }
    50% {
        box-shadow: 0 2px 8px rgba(107, 33, 168, 0.5);
    }
}

.kts-user-title {
    display: inline-flex;
    align-items: center;
    background: #6366f1;
    color: #fff;
    font-size: 10px;
    font-weight: 700;
    padding: 2px 8px;
    border-radius: 4px;
    margin-left: 5px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* ==========================================================================
   Comment Content
   ========================================================================== */

.kts-text {
    background: #f2f3f5;
    padding: 12px 14px;
    border-radius: 10px;
    color: #334155;
    font-size: 15px;
    display: block;
    width: 100%;
    box-sizing: border-box;
    word-wrap: break-word;
    line-height: 1.6;
}

.kts-text p {
    margin: 0 0 10px 0;
}

.kts-text p:last-child {
    margin-bottom: 0;
}

/* ── Show more / less clamp (comment + review bodies) ──────────────────────
   PHP wraps every body in .kts-clamp-inner and CSS clamps it to
   --kts-clamp-lines (Kat Comments → Posting) from the very first paint, so
   the cut ends with a native "…" and there is no unclamped flash. line-clamp
   counts LINE BOXES: a GIF is one line, so a lone GIF is never collapsed and
   the cut can never land mid-GIF. KatClamp (editor.js) only measures overflow
   and appends the plain Show more / Show less toggle on the next line
   (.kts-noclamp = body fits, no clamp; .is-expanded = opened via toggle). */
.kts-clamp-inner {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: var(--kts-clamp-lines, 8);
    overflow: hidden;
}
.kts-noclamp > .kts-clamp-inner,
.is-expanded > .kts-clamp-inner {
    -webkit-line-clamp: none;
    overflow: visible;
}
.kts-clamp-toggle {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    margin-top: 4px;
    padding: 0;
    background: none;
    border: none;
    cursor: pointer;
    font-size: 0.82rem;
    font-weight: 700;
    color: var(--nxp-text-2);
    font-family: inherit;
    touch-action: manipulation;
}
.kts-clamp-toggle i {
    font-size: 0.7rem;
    transition: transform 0.2s ease;
}
.kts-clamp-toggle[aria-expanded="true"] i {
    transform: rotate(180deg);
}

/* .kts-text a {
    color: #007bff;
    text-decoration: underline;
} */

/* .kts-text a:hover {
    color: #0056b3;
} */

/* ==========================================================================
   Comment Actions
   ========================================================================== */

.kts-actions {
    display: flex;
    align-items: center;
    gap: 18px;
    margin-top: 10px;
    padding-left: 4px;
    flex-wrap: wrap;
}

.kts-btn {
    background: none;
    border: none;
    padding: 0;
    color: #64748b;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 6px;
    transition: all 0.2s;
    text-decoration: none;
}

.kts-btn:hover {
    color: #007bff;
    transform: translateY(-1px);
}

.kts-btn i {
    font-size: 15px;
}

.kts-btn.active {
    color: #007bff;
    font-weight: 600;
}

.kts-btn.dislike.active {
    color: #ef4444;
}

.kts-btn .count {
    min-width: 20px;
    text-align: left;
}

/* ==========================================================================
   More Options Dropdown
   ========================================================================== */

.kts-more-wrap {
    margin-left: auto;
    position: relative;
}

.kts-more-options {
    color: #94a3b8;
    cursor: pointer;
    font-size: 16px;
    padding: 5px;
    border-radius: 50%;
    transition: all 0.2s;
    display: flex;
    align-items: center;
    justify-content: center;
}

.kts-more-options:hover {
    background: #f1f5f9;
    color: #475569;
}

.kts-dropdown {
    position: absolute;
    right: 0;
    top: 100%;
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    z-index: 100;
    display: none;
    min-width: 200px;
    overflow: hidden;
    margin-top: 5px;
}

.kts-dropdown.active {
    display: block;
    animation: dropdownSlide 0.2s ease;
}

@keyframes dropdownSlide {
    from {
        opacity: 0;
        transform: translateY(-5px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.kts-dropdown-item {
    padding: 10px 15px;
    font-size: 14px;
    color: #475569;
    cursor: pointer;
    transition: background 0.2s;
    width: 100%;
    text-align: left;
    border: none;
    background: none;
    display: flex;
    align-items: center;
    gap: 8px;
    text-decoration: none;
}

/* Fixed-width icon column so every label starts at the same x-position */
.kts-dropdown-item > i {
    width: 16px;
    flex-shrink: 0;
    text-align: center;
    font-size: 13px;
}

.kts-dropdown-item:hover {
    background: #f8fafc;
}

.kts-dropdown-item.kts-delete-comment-btn {
    color: #ef4444;
    font-weight: 600;
}


.kts-delete-comment-btn:hover {
    background: #fef2f2;
}


/* .kts-dropdown-item.report {
    color: #ef4444;
    font-weight: 600;
}

.kts-dropdown-item.report:hover {
    background: #fef2f2;
} */

/* ==========================================================================
   Replies
   ========================================================================== */

.kts-view-replies {
    color: #007bff;
    background:none;
    border:none;
    font-weight: 700;
    font-size: 14px;
    margin-top: 12px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    text-decoration: none;
    transition: all 0.2s;
}

.kts-view-replies:hover {
    color: #0056b3;
    gap: 6px;
}

/* Only hide the FIRST level of children (direct replies to top-level comments).
   Deeper children (grandchildren+) are always visible once their parent is expanded. */
.kts-list > .kts-item > .children {
    display: none;
    margin-left: 56px;
    padding-top: 20px;
    border-left: 2px solid #f1f5f9;
    padding-left: 20px;
    list-style: none;
}

/* Nested children (grandchildren and deeper) — always visible, indented */
.kts-item .children .kts-item > .children {
    display: block;
    margin-left: 40px;
    padding-top: 12px;
    border-left: 2px solid #f1f5f9;
    padding-left: 16px;
    list-style: none;
}

.kts-item .children .kts-item {
    margin-bottom: 20px;
}

/* ==========================================================================
   Pagination
   ========================================================================== */

.kts-pagination {
    margin-top: 40px;
    padding-top: 20px;
    border-top: 1px solid #f1f5f9;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 20px;
}

.kts-page-btn {
    background: #fff;
    border: 1px solid #e2e8f0;
    padding: 8px 16px;
    border-radius: 8px;
    color: #475569;
    cursor: pointer;
    font-size: 14px;
    font-weight: 500;
    transition: all 0.2s;
    display: flex;
    align-items: center;
    gap: 6px;
}

.kts-page-btn:hover {
    background: #f8fafc;
    border-color: #cbd5e1;
    transform: translateY(-1px);
}

.kts-page-info {
    color: #64748b;
    font-size: 14px;
}

/* ==========================================================================
   No Comments State
   ========================================================================== */

.kts-empty {
    text-align: center;
    padding: 94px 20px;
    color: var(--nxp-text-3, #94a3b8);
    background: var(--nxp-card-bg, #fff);
    border: 1px solid var(--nxp-border-rw, #e2e8f0);
    border-radius: 16px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.05);
}

.kts-empty i {
    font-size: 2.5rem;
    display: block;
    margin-bottom: 12px;
}

.kts-empty p {
    margin: 0 0 4px;
    font-size: 14px;
    font-weight: 600;
    color: var(--nxp-text-2, var(--nxp-text-3, #64748b));
}

.kts-empty span {
    display: block;
    font-size: 13px;
}

/* ==========================================================================
   Comment Policy Modal
   ========================================================================== */

.kts-modal {
    display: none;
    position: fixed;
    z-index: 9999;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    align-items: center;
    justify-content: center;
}

.kts-modal-content {
    background: #fff;
    padding: 30px;
    border-radius: 12px;
    max-width: 450px;
    width: 90%;
    position: relative;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
    font-family: 'Inter', sans-serif;
    animation: modalSlide 0.3s ease;
}

@keyframes modalSlide {
    from {
        opacity: 0;
        transform: translateY(-20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.kts-modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 15px;
}

.kts-modal-header h2 {
    margin: 0;
    font-size: 22px;
    font-weight: 700;
    color: #1e293b;
}

.kts-close-modal {
    font-size: 24px;
    cursor: pointer;
    color: #94a3b8;
    border: none;
    background: none;
    transition: color 0.2s;
    position: absolute;
    top: 6px;
    right: 13px;
}

.kts-close-modal:hover {
    color: #475569;
}

.kts-policy-list {
    padding-left: 5px;
    margin-bottom: 20px;
}

.kts-policy-list li {
    margin-bottom: 10px;
    font-size: 14px;
    color: #475569;
    line-height: 1.6;
}

.kts-policy-list strong {
    color: #1e293b;
}

.kts-modal-footer {
    font-size: 13px;
    color: #64748b;
    margin-top: 15px;
    border-top: 1px solid #f1f5f9;
    padding-top: 15px;
    line-height: 1.6;
}

.kts-modal-footer a {
    color: #007bff;
    text-decoration: underline;
}

.kts-modal-ok {
    background: #007bff;
    color: #fff;
    border: none;
    padding: 10px 30px;
    border-radius: 50px;
    font-weight: 600;
    cursor: pointer;
    width: 100%;
    margin-top: 10px;
    transition: all 0.2s;
}

.kts-modal-ok:hover {
    background: #0056b3;
    transform: translateY(-1px);
}

/* ==========================================================================
   Loading States
   ========================================================================== */

.kts-loading {
    opacity: 0.6;
    pointer-events: none;
}

.kts-spinner {
    display: inline-block;
    width: 20px;
    height: 20px;
    border: 2px solid #f3f3f3;
    border-top: 2px solid #007bff;
    border-radius: 50%;
    animation: spin 1s linear infinite;
}

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



/* ==========================================================================
   Print Styles
   ========================================================================== */

@media print {
    .kts-form-card,
    .kts-actions,
    .kts-sort,
    .kts-pagination {
        display: none !important;
    }
    
    .kts-wrap {
        background: #fff;
    }
}






/* Pending comment badge */
.kts-pending-badge {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    background: #f59e0b;
    color: #fff;
    font-size: 10px;
    font-weight: 700;
    padding: 2px 6px;
    border-radius: 4px;
    margin-left: 6px;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    vertical-align: middle;
}

/* Dim pending comment blocks slightly */
/* .kts-comment-block.kts-is-pending {
    opacity: 0.75;
    border-left: 3px solid #f59e0b;
    padding-left: 10px;
} */



/**
 * Kat Comments - Theme-Aware Styles
 * Uses Reader Variables if available, falls back to defaults if not.
 */

.kts-wrap {
    max-width: auto;
    margin: 0 auto 40px;
    font-family: var(--cr-font-family, 'Inter', -apple-system, sans-serif);
    line-height: 1.6;
    display: block !important;
    color: var(--cr-text, #1e293b);
}

.kts-separator {
    border-top: 1px solid var(--cr-border, #e2e8f0);
    margin: 40px auto 20px;
}

.kts-count {
    font-size: 20px;
    font-weight: 700;
    color: var(--cr-text, #000);
}

/* Form Card (The background behind the input) */
.kts-form-card {
    background: var(--cr-bg, #fff);
    border: 1px solid var(--cr-border, #f1f5f9);
    border-radius: 12px;
    padding: 20px;
}

/* The Input Textarea */
.kts-textarea {
    background: var(--cr-surface, #f2f3f5);
    color: var(--cr-text, #334155);
    border: 1px solid var(--cr-border, transparent);
    width: 100%;
    border-radius: 8px;
    padding: 15px;
}

/* Individual Comment Bubble */
.kts-text {
    background: var(--cr-surface, #f2f3f5);
    color: var(--cr-text, #334155);
    padding: 12px 14px;
    border-radius: 10px;
    word-wrap: break-word;
}

/* User Meta (Names and Dates) */
.kts-author {
    color: var(--cr-text, #1e293b);
}

.kts-date, .kts-btn, .kts-more-options {
    color: var(--cr-meta, #64748b);
}

/* Dropdown Menu */
.kts-dropdown {
    background: var(--cr-surface, #fff);
    border: 1px solid var(--cr-border, #e2e8f0);
}

.kts-dropdown-item {
    color: var(--cr-text, #475569);
}

.kts-dropdown-item:hover {
    background: var(--cr-bg, #f8fafc);
}

/* Pagination */
.kts-page-btn {
    background: var(--cr-surface, #fff);
    border: 1px solid var(--cr-border, #e2e8f0);
    color: var(--cr-text, #000000);
}

/* Sort Select */
/* .kts-sort-select {
    border: 1px solid var(--cr-border, #e2e8f0);
    background: var(--cr-surface, #fff);
    color: var(--cr-text, #1b1b1b);
} */
/* ==========================================================================
   Pinned Comments
   ========================================================================== */

.kts-pinned-item {
    order: -1; /* float to top in flex containers */
}

/* Pinned: thick left border + subtle left accent, everything else unchanged */
.kts-pinned-block {
    /* border-left: 4px solid #6366f1; */
    position: relative;
}

/* Small pin icon — top-right corner */
.kts-pin-icon {
    position: absolute;
    top: 10px;
    right: 12px;
    color: #6366f1;
    font-size: 13px;
    opacity: 0.75;
    line-height: 1;
    pointer-events: none;
}
.kts-pin-icon .fa-thumbtack {
    transform: rotate(45deg);
    display: block;
}

/* ==========================================================================
   Spoiler Tags — Discord-style inline redaction
   The spoiler flows INSIDE the sentence as a dark rounded bar; one click
   reveals it in place (~200ms). Legacy review bodies still contain the old
   <button class="kts-spoiler-btn"> markup — it's hidden so old and new
   spoilers render identically.
   ========================================================================== */

.kts-spoiler-wrap {
    display:inline;
    border-radius:2px;
    /* padding:1px 4px; */
    background:var(--nxp-text);
    cursor:pointer;
    transition:background .2s ease;
    -webkit-box-decoration-break:clone;
    box-decoration-break:clone; /* keep the bar look across line wraps */
}
.kts-spoiler-wrap .kts-spoiler-btn { display:none; } /* legacy stored markup */

.kts-spoiler-wrap[data-spoiler="hidden"] .kts-spoiler-content {
    color:transparent;
    text-shadow:none;
    filter:blur(4px);
    user-select:none;
    pointer-events:none;
    transition:color .2s ease, filter .2s ease;
}
.kts-spoiler-wrap[data-spoiler="hidden"]:hover { background:#2b3648; }
.kts-spoiler-wrap[data-spoiler="hidden"] img { filter:blur(14px); }

.kts-spoiler-wrap[data-spoiler="visible"] {
    background: transparent;
    cursor:text;
}
.kts-spoiler-wrap[data-spoiler="visible"] .kts-spoiler-content {
    color:inherit;
    filter:none;
    user-select:text;
    pointer-events:auto;
    transition:color .2s ease, filter .2s ease;
}
.kts-spoiler-wrap[data-spoiler="visible"] img { filter:none; }

@media (prefers-reduced-motion: reduce) {
    .kts-spoiler-wrap, .kts-spoiler-wrap .kts-spoiler-content { transition:none; }
}

/* Inside the review editor the author must see what they wrote — show the
   text with a dashed spoiler outline instead of redacting it. */
.kvr-editor .kts-spoiler-wrap { background:transparent; outline:1px dashed #8b5cf6; cursor:text; }
.kvr-editor .kts-spoiler-wrap .kts-spoiler-content {
    color:inherit !important; filter:none !important; user-select:text; pointer-events:auto;
}

/* Comment Toolbar */
.kts-editor-wrap { display:flex; flex-direction:column; }
.kts-toolbar {
    display:flex; align-items:center; gap:6px; padding:6px 10px; border:1px solid #e2e8f0; border-bottom:none;
    border-radius:10px 10px 0 0;
}
.kts-toolbar-btn {
    display:inline-flex; align-items:center; gap:5px; padding:4px 9px;
    font-size:12px; font-weight:600; color:#3a5bed; background:#fff;
    border:1px solid #b5ccfd; border-radius:6px; cursor:pointer; transition:background .15s;
}
.kts-toolbar-btn:hover { background:#f5f3ff; }

/* Bold / Italic buttons — same purple style as the rest of the toolbar */
.kts-insert-bold,
.kts-insert-italic {
    padding:4px 9px;
    font-weight:700;
    min-width:28px;
    justify-content:center;
}
.kts-insert-bold:hover,
.kts-insert-italic:hover { background:#f5f3ff; }

/* Separator between bold/italic and spoiler */
.kts-toolbar-sep {
    display:inline-block;
    width:1px;
    height:18px;
    background:#e2e8f0;
    margin:0 2px;
    align-self:center;
}

.kts-editor-wrap .kts-textarea { border-top-left-radius:0; border-top-right-radius:0; }

/* ==========================================================================
   Emoji Reactions
   ========================================================================== */

.kts-reactions {
    display:flex; flex-wrap:wrap; gap:4px;
    padding:6px 0 2px; margin-top:4px;
}

.kts-reaction-btn {
    display:inline-flex; align-items:center; gap:3px;
    padding:3px 8px; font-size:13px; line-height:1;
    background:#f1f5f9; border:1px solid #e2e8f0;
    border-radius:20px; cursor:pointer;
    transition:background .15s, border-color .15s, transform .1s;
}
.kts-reaction-btn:hover { background:#e2e8f0; transform:scale(1.12); }
.kts-reaction-btn.active {
    background:#ede9fe; border-color:#8baefa; font-weight:700;
}
.kts-reaction-emoji { font-size:16px; line-height:1; }
.kts-reaction-count { font-size:11px; font-weight:700; color:#475569; min-width:10px; }
.kts-reaction-btn.active .kts-reaction-count { color:#6d28d9; }

/* ==========================================================================
   Inline Comment Editing
   ========================================================================== */

.kts-edit-form { margin-top:8px; }

.kts-edit-loading {
    padding:10px;
    color:#94a3b8;
    font-size:14px;
}

.kts-edit-textarea {
    width:100%; box-sizing:border-box; padding:10px 12px;
    border:2px solid #6366f1; border-radius:8px; font-size:14px;
    font-family:inherit; line-height:1.6; resize:vertical; min-height:80px;
    outline:none; transition:border-color .2s;
}
.kts-edit-textarea:focus { border-color:#4f46e5; }

.kts-edit-actions {
    display:flex; gap:8px; margin-top:6px;
}

.kts-edit-save {
    background:#6366f1 !important; color:#fff !important; border:none;
    padding:6px 16px; border-radius:8px; font-size:13px;
    font-weight:600; cursor:pointer; transition:background .15s;
}
.kts-edit-save:hover  { background:#4f46e5; }
.kts-edit-save:disabled { opacity:.6; cursor:not-allowed; }

.kts-edit-cancel {
    background:#f1f5f9; color:#475569; border:1px solid #e2e8f0;
    padding:6px 16px; border-radius:8px; font-size:13px;
    font-weight:600; cursor:pointer; transition:background .15s;
}
.kts-edit-cancel:hover { background:#e2e8f0; }

/* Flash green on successful save */
@keyframes kts-edit-flash { 0%,100%{background:transparent} 30%{background:#dcfce7} }
.kts-edit-success-flash { animation:kts-edit-flash 1.2s ease; }

/* OS dark-mode blocks removed: theming is driven exclusively by the explicit
   data-theme system (site html[data-theme] / reader #nxp-reader[data-theme]),
   so the OS preference must not override a chosen light/sepia/soft theme. */






/**
 * Kat Comments - Theme-Aware Styles (V2.1)
 * Supports: Chapters (Themed) & Story Pages (Standard)
 */

/* --- Base & Wrapper --- */
.kts-wrap {
    max-width: auto;
    margin: 0 auto 40px;
    font-family: var(--cr-font-family, 'Inter', -apple-system, sans-serif);
    line-height: 1.6;
    display: block !important;
    color: var(--cr-text, #1e293b);
}

.kts-separator {
    border-top: 1px solid var(--cr-border, #e2e8f0);
    margin: 40px auto 20px;
}

.kts-count {
    font-size: 20px;
    font-weight: 700;
    color: var(--cr-text, #000);
}

/* --- Comment Form & Toolbar --- */
.kts-form-card {
    background: var(--nxp-card-bg, #fff);
    border: 1px solid var(--cr-border, #f1f5f9);
    border-radius: 12px;
    padding: 20px;
}

.kts-toolbar {
    /* background: var(--nxp-bg-2); */
    border: 1px solid var(--cr-border, #e2e8f0);
    border-bottom: none;
}

.kts-toolbar-btn {
    background: var(--cr-bg, #fff);
    border: 1px solid var(--cr-border, #b5cefd);
    color: #007bff;
}

/* .kts-textarea {
    background: var(--cr-surface, #f2f3f5);
    color: var(--cr-text, #334155);
    border: 1px solid var(--cr-border, transparent);
    width: 100%;
} */

/* --- Comment Content & Bubble --- */
.kts-text {
    background: var(--cr-surface, #f2f3f5);
    color: var(--cr-text, #334155);
    padding: 12px 14px;
    border-radius: 10px;
}

.kts-author {
    color: var(--cr-text, #1e293b);
}

.kts-date, .kts-btn, .kts-more-options {
    color: var(--cr-meta, #64748b);
}

/* --- Spoilers --- */
.kts-spoiler-btn {
    color: var(--cr-accent, #3a73ed);
    background: var(--cr-surface, #f5f3ff);
    border: 1px solid var(--cr-border, #b5c8fd);
}

/* --- Reactions --- */
.kts-reaction-btn {
    background: var(--cr-surface, #f1f5f9);
    border: 1px solid var(--cr-border, #e2e8f0);
}

.kts-reaction-btn:hover {
    background: var(--cr-bg, #e2e8f0);
}

.kts-reaction-count {
    color: var(--cr-meta, #475569);
}

/* --- Inline Editing --- */
.kts-edit-textarea {
    background: var(--cr-bg, #fff);
    color: var(--cr-text, #1e293b);
    border: 2px solid var(--cr-accent);
}

.kts-edit-cancel {
    background: var(--cr-surface, #f1f5f9);
    color: var(--cr-meta, #475569);
    border: 1px solid var(--cr-border, #e2e8f0);
}

/* --- Dropdown / Popups --- */
.kts-dropdown {
    background: var(--cr-surface, #fff);
    border: 1px solid var(--cr-border, #e2e8f0);
}

.kts-dropdown-item {
    color: var(--cr-text, #475569);
}

.kts-dropdown-item:hover {
    background: var(--cr-bg, #f8fafc);
}

/* --- Pinned Comments --- */
.kts-pin-icon {
    color: var(--cr-accent);
}

/* --- Dark Theme Overrides --- */
/* Apply when the SITE is dark (outside the reader) or the READER itself is
   dark — a dark site must not restyle a light/sepia/soft/grey reader. */
html[data-theme="dark"] .kts-spoiler-btn:not(#nxp-reader *),
#nxp-reader[data-theme="dark"] .kts-spoiler-btn { background: #1e1b4b; border-color: #3872ca; }
/* html[data-theme="dark"] .kts-toolbar:not(#nxp-reader *),
#nxp-reader[data-theme="dark"] .kts-toolbar { background: #1e293b; border-color: #334155; } */
html[data-theme="dark"] .kts-reaction-btn:not(#nxp-reader *),
#nxp-reader[data-theme="dark"] .kts-reaction-btn { background: #1e293b; border-color: #334155; }
html[data-theme="dark"] .kts-edit-textarea:not(#nxp-reader *),
#nxp-reader[data-theme="dark"] .kts-edit-textarea { background: #0f172a; color: #e2e8f0; }

/* Keep your existing animations at the bottom */
@keyframes kts-title-slide { 0%{background-position:0% 50%}50%{background-position:100% 50%}100%{background-position:0% 50%} }


/* ==========================================================================
   Mobile Responsive
   ========================================================================== */

@media (max-width: 520px) {
   .kts-inline-reply-form {
        background: var(--cr-bg, #fff) !important;
        border: none !important;
        border-bottom: 1px solid var(--cr-border, #e2e8f0) !important;
        border-radius: 0 !important;
        box-shadow: none;
        padding: 15px 0px !important;
        margin-bottom: 20px;
}
}


@media (max-width: 520px) {
    .kts-form-card {
        background: var(--cr-bg, #fff);
        border: none !important;
        border-bottom: 1px solid var(--cr-border, #e2e8f0) !important;
        border-radius: 0 !important;
        box-shadow: none;
        padding: 15px 0px !important;
        margin-bottom: 20px;
    }
    
    .kts-header {
        margin-bottom: 0;
        padding: 0 5px 15px;
        flex-wrap: wrap;
        gap: 10px;
    }
    
    .kts-count {
        font-size: 18px;
    }
    
    .kts-sort-select {
        font-size: 13px;
        padding: 5px 10px;
    }
    
    .kts-avatar {
        width: 36px;
        height: 36px;
    }
    
    .kts-author {
        font-size: 14px;
    }
    
    .kts-date {
        font-size: 12px;
    }
    
    .kts-text {
        font-size: 14px;
        padding: 10px 12px;
    }
    
    .kts-actions {
        gap: 12px;
        font-size: 13px;
    }
    
    .kts-btn {
        font-size: 13px;
    }
    
    .kts-list > .kts-item > .children,
    .kts-item .children .kts-item > .children {
        margin-left: 10px;
        padding-left: 5px;
    }
    
    .kts-modal-content {
        padding: 38px 24px;
        width: 95%;
    }
    
    .kts-modal-header h2 {
        font-size: 18px;
    }
    
    .kts-vip-badge,
    .kts-user-title {
        font-size: 12px;
        padding: 1px 5px;
    }
}
/* =======================================
   Inline Reply Form
================================== */

.kts-inline-reply-form {
    margin-top: 12px;
    padding: 12px;
    background: #f8fafc;
    border-radius: 8px;
    border: 1px solid #e2e8f0;
}

.kts-inline-reply-form .kts-reply-textarea {
    width: 100%;
    box-sizing: border-box;
    margin-bottom: 8px;
    resize: vertical;
}

.kts-inline-reply-form .kts-submit-row {
    display: flex;
    gap: 8px;
    justify-content: flex-end;
}
/* ==========================================================================
   NEW IN 2.2: Edited label, Meme in comments, Emoji/Meme Picker, Reply Form
   ========================================================================== */

/* ── "· edited" timestamp label ─────────────────────────────────────────── */
.kts-edited-label {
    font-size: 12px;
    color: #94a3b8;
    font-style: italic;
    cursor: default;
}

/* ── Meme attached to a comment ─────────────────────────────────────────── */
.kts-comment-meme {
    margin-top: 10px;
}
.kts-comment-meme img {
    height: 150px;
    max-width: 280px;
    max-height: 220px;
    border-radius: 8px;
    border: 1px solid #e2e8f0;
    display: block;
}

/* ── Picker wrap + panel ─────────────────────────────────────────────────── */
.kts-picker-wrap {
    position: relative;
}
.kts-picker-panel {
    position: absolute;
    top: 32px;
    left: 0;
    z-index: 9999;
    background: var(--cr-bg);
    color: var(--cr-text);
    border: 1px solid var(--cr-border);
    border-radius: 12px;
    box-shadow: 0 8px 30px rgba(0,0,0,0.18);
    padding: 12px;
    width: 320px;
    max-height: 280px;
    overflow-y: auto;
}

/* Emoji panel */
.kts-emoji-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
}
.kts-emoji-item {
    background: none;
    border: 1px solid transparent;
    border-radius: 6px;
    font-size: 22px;
    width: 38px;
    height: 38px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background 0.12s, transform 0.1s;
    line-height: 1;
}
.kts-emoji-item:hover {
    background: var(--cr-surface, #f1f5f9);
    border-color: var(--cr-border, #e2e8f0);
    transform: scale(1.18);
}

/* Meme panel */
.kts-meme-search {
    width: 100%;
    box-sizing: border-box;
    padding: 7px 10px;
    border: 1px solid var(--cr-border, #e2e8f0);
    border-radius: 8px;
    font-size: 13px;
    margin-bottom: 10px;
    outline: none;
    background: var(--cr-surface, #f8fafc);
    color: var(--cr-text, #1e293b);
}
.kts-meme-search:focus { border-color: #3a64ed; }
.kts-meme-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(80px, 1fr));
    gap: 6px;
}
.kts-meme-thumb {
    cursor: pointer;
    border-radius: 6px;
    overflow: hidden;
    border: 2px solid transparent;
    transition: border-color 0.15s, transform 0.12s;
}
.kts-meme-thumb:hover {
    border-color: #007bff;
    transform: scale(1.04);
}
.kts-meme-thumb img {
    width: 100%;
    height: 70px;
    object-fit: cover;
    display: block;
}
.kts-meme-remove-btn {
    display: block;
    width: 100%;
    margin-top: 10px;
    padding: 6px 10px;
    font-size: 12px;
    color: #ef4444;
    background: #fef2f2;
    border: 1px solid #fecaca;
    border-radius: 6px;
    cursor: pointer;
    text-align: center;
    transition: background 0.15s;
}
.kts-meme-remove-btn:hover { background: #fee2e2; }

/* ── Pending moderation notice ───────────────────────────────────────────── */
.kts-pending-msg {
    font-size: 12px;
    color: #f59e0b;
    margin: 6px 0 0;
    padding: 5px 10px;
    background: #fffbeb;
    border-radius: 6px;
    border: 1px solid #fde68a;
}

/* ── Inline reply form — now matches main form ───────────────────────────── */
.kts-inline-reply-form {
    margin-top: 14px;
    padding: 14px;
    background: var(--cr-bg, #f8fafc);
    border-radius: 10px;
    border: 1px solid var(--cr-border, #e2e8f0);
    animation: fadeIn 0.25s ease;
}
.kts-inline-reply-form .kts-toolbar {
    border-radius: 8px 8px 0 0;
}
.kts-inline-reply-form .kts-reply-textarea {
    min-height: 80px;
    border-top-left-radius: 0;
    border-top-right-radius: 0;
}
.kts-inline-reply-form .kts-submit-row {
    display: flex;
    gap: 8px;
    margin-top: 10px;
    align-items: center;
}
.kts-inline-reply-form .kts-form-footer {
    display: none;
    margin-top: 8px;
    font-size: 11px;
    color: #94a3b8;
}

html[data-theme="dark"] .kts-picker-panel:not(#nxp-reader *),
#nxp-reader[data-theme="dark"] .kts-picker-panel      { background: #1e293b; border-color: #334155; color: #e2e8f0; }
html[data-theme="dark"] .kts-meme-search:not(#nxp-reader *),
#nxp-reader[data-theme="dark"] .kts-meme-search       { background: #0f172a; color: #e2e8f0; border-color: #334155; }
html[data-theme="dark"] .kts-emoji-item:hover:not(#nxp-reader *),
#nxp-reader[data-theme="dark"] .kts-emoji-item:hover  { background: #334155; }
html[data-theme="dark"] .kts-meme-thumb:hover:not(#nxp-reader *),
#nxp-reader[data-theme="dark"] .kts-meme-thumb:hover  { border-color: #8baefa; }
html[data-theme="dark"] .kts-inline-reply-form:not(#nxp-reader *),
#nxp-reader[data-theme="dark"] .kts-inline-reply-form { background: #1e293b; border-color: #334155; }
/* ── Replying-to banner ──────────────────────────────────────────────────── */
.kts-replying-to-banner {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    color: #6366f1;
    background: #eef2ff;
    border: 1px solid #c7d2fe;
    border-radius: 8px;
    padding: 7px 12px;
    margin-bottom: 10px;
    font-weight: 500;
}
.kts-replying-to-banner i { font-size: 12px; opacity: .7; }
.kts-replying-to-banner strong { color: #4338ca; }
.kts-reply-cancel-x {
    margin-left: auto;
    background: none;
    border: none;
    cursor: pointer;
    color: #6366f1;
    opacity: .6;
    padding: 2px 4px;
    border-radius: 4px;
    line-height: 1;
    font-size: 13px;
    transition: opacity .15s;
}
.kts-reply-cancel-x:hover { opacity: 1; background: #c7d2fe; }

/* ── Styled cancel button in reply/edit rows ─────────────────────────────── */
.kts-submit-row .kts-reply-cancel-btn,
.kts-submit-row .kts-reply-cancel {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 8px 16px;
    border-radius: 8px;
    border: 1.5px solid #e2e8f0;
    background: #fff;
    color: #64748b;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    transition: background .15s, border-color .15s, color .15s;
}
.kts-submit-row .kts-reply-cancel-btn:hover,
.kts-submit-row .kts-reply-cancel:hover {
    background: #f1f5f9;
    border-color: #cbd5e1;
    color: #1e293b;
}

/* ── GIF picker tabs ────────────────────────────────────────────────────── */
.kts-picker-tabs {
    display: flex;
    gap: 4px;
    padding: 8px 8px 0;
    border-bottom: 1px solid var(--cr-border, #e2e8f0);
    margin-bottom: 8px;
}
.kts-picker-tab {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 6px 12px;
    border-radius: 7px 7px 0 0;
    border: 1px solid transparent;
    border-bottom: none;
    background: none;
    font-size: 12px;
    font-weight: 500;
    color: var(--cr-meta, #64748b);
    cursor: pointer;
    transition: background .15s, color .15s;
    margin-bottom: -1px;
}
.kts-picker-tab:hover { background: var(--cr-surface, #f1f5f9); color: var(--cr-text, #1e293b); }
.kts-picker-tab.active {
    background: var(--cr-bg, #fff);
    color: #3a64ed;
    border-color: var(--cr-border, #e2e8f0);
    border-bottom-color: var(--cr-bg, #fff);
    font-weight: 600;
}
.kts-gif-grid { min-height: 80px; }
.kts-gif-status { margin: 0; padding: 8px; font-size: 12px; color: var(--cr-meta, #94a3b8); }
.kts-tab-pane { padding: 4px; }

html[data-theme="dark"] .kts-replying-to-banner:not(#nxp-reader *),
#nxp-reader[data-theme="dark"] .kts-replying-to-banner { background: #1e1b4b; border-color: #3730a3; color: #a5b4fc; }
html[data-theme="dark"] .kts-replying-to-banner strong:not(#nxp-reader *),
#nxp-reader[data-theme="dark"] .kts-replying-to-banner strong { color: #c7d2fe; }
html[data-theme="dark"] .kts-submit-row .kts-reply-cancel-btn:not(#nxp-reader *),
html[data-theme="dark"] .kts-submit-row .kts-reply-cancel:not(#nxp-reader *),
#nxp-reader[data-theme="dark"] .kts-submit-row .kts-reply-cancel-btn,
#nxp-reader[data-theme="dark"] .kts-submit-row .kts-reply-cancel { background: #1e293b; border-color: #334155; color: #94a3b8; }
html[data-theme="dark"] .kts-picker-tabs:not(#nxp-reader *),
#nxp-reader[data-theme="dark"] .kts-picker-tabs { border-color: #334155; }
html[data-theme="dark"] .kts-picker-tab:not(#nxp-reader *),
#nxp-reader[data-theme="dark"] .kts-picker-tab { color: #94a3b8; }
html[data-theme="dark"] .kts-picker-tab:hover:not(#nxp-reader *),
#nxp-reader[data-theme="dark"] .kts-picker-tab:hover { background: #334155; color: #e2e8f0; }
html[data-theme="dark"] .kts-picker-tab.active:not(#nxp-reader *),
#nxp-reader[data-theme="dark"] .kts-picker-tab.active { background: #1e293b; border-color: #334155; border-bottom-color: #1e293b; color: #8baefa; }
/* ── @mention autocomplete dropdown ─────────────────────────────────────── */
.kts-mention-dropdown {
    position: absolute;
    z-index: 99999;
    list-style: none;
    margin: 0;
    padding: 5px;
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    box-shadow: 0 4px 6px -1px rgba(0,0,0,.07), 0 10px 30px rgba(0,0,0,.12);
    max-height: 240px;
    overflow-y: auto;
    font-size: 13px;
    scrollbar-width: thin;
}
.kts-mention-dropdown::-webkit-scrollbar { width: 4px; }
.kts-mention-dropdown::-webkit-scrollbar-thumb { background: #e2e8f0; border-radius: 4px; }

.kts-mention-dropdown li {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 7px 10px;
    border-radius: 8px;
    cursor: pointer;
    color: #1e293b;
    font-weight: 500;
    transition: background .1s;
    user-select: none;
}
.kts-mention-dropdown li:hover,
.kts-mention-dropdown li.kts-mention-active {
    background: #f1f5f9;
}
.kts-mention-dropdown li.kts-mention-active {
    background: #eef2ff;
}

.kts-mention-avatar {
    flex-shrink: 0;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%);
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
}
/* Real gravatar/avatar image */
img.kts-mention-avatar-img {
    width: 26px;
    height: 26px;
    border-radius: 50%;
    object-fit: cover;
    background: #e2e8f0;
}
.kts-mention-name {
    color: #374151;
    font-size: 13px;
}
.kts-mention-name::first-letter { /* the @ sign */
    color: #6366f1;
    font-weight: 700;
}

/* Inline @mention tag in rendered comment text */
.kts-text .kts-mention-tag {
    display: inline;
    /* color: #6366f1; */
    font-weight: 600;
    /* background: #eef2ff; */
    padding: 1px 5px;
    border-radius: 4px;
    font-size: .92em;
    cursor: pointer;
    white-space: nowrap;
    text-decoration: none;
    transition: background .15s ease, color .15s ease;
}
.kts-text a.kts-mention-tag:hover {
    text-decoration: underline;
}

html[data-theme="dark"] .kts-mention-dropdown:not(#nxp-reader *),
#nxp-reader[data-theme="dark"] .kts-mention-dropdown { background: #1e293b; border-color: #334155; }
html[data-theme="dark"] .kts-mention-dropdown li:not(#nxp-reader *),
#nxp-reader[data-theme="dark"] .kts-mention-dropdown li { color: #e2e8f0; }
html[data-theme="dark"] .kts-mention-dropdown li:hover:not(#nxp-reader *),
#nxp-reader[data-theme="dark"] .kts-mention-dropdown li:hover { background: #273549; }
html[data-theme="dark"] .kts-mention-dropdown li.kts-mention-active:not(#nxp-reader *),
#nxp-reader[data-theme="dark"] .kts-mention-dropdown li.kts-mention-active { background: #1e1b4b; }


/* ==========================================================================
   Theme Integration (site pages AND chapter reader)
   Every rule below keys off the --cr-* variables: outside the reader they
   are mapped from the site palette (--nxp-*) at :root, inside the reader
   #nxp-reader[data-theme=...] defines them. One set of rules, all themes.
   ========================================================================== */

.kts-wrap         { background: transparent; }
.kts-header       { border-color: var(--cr-border, #e2e8f0); }
.kts-sort-select  { background: var(--cr-surface, #fff); color: var(--cr-text, #0f0f0f); border-color: var(--cr-border, #e2e8f0); }

/* Reply cancel buttons (were hardcoded #fff) */
.kts-submit-row .kts-reply-cancel-btn,
.kts-submit-row .kts-reply-cancel {
    background: var(--cr-surface, #fff);
    color: var(--cr-meta, #64748b);
    border-color: var(--cr-border, #e2e8f0);
}
.kts-submit-row .kts-reply-cancel-btn:hover,
.kts-submit-row .kts-reply-cancel:hover {
    background: var(--cr-bg, #f1f5f9);
    color: var(--cr-text, #1e293b);
}

.kts-more-options:hover     { background: var(--cr-surface, #f1f5f9); color: var(--cr-text, #475569); }
.kts-page-btn               { background: var(--cr-surface, #fff); border-color: var(--cr-border, #e2e8f0); color: var(--cr-text, #475569); }
.kts-page-btn:hover         { background: var(--cr-bg, #f8fafc); border-color: #3a64ed; color: #3a64ed; }
.kts-inline-reply-form      { background: var(--cr-surface, #f8fafc); border-color: var(--cr-border, #e2e8f0); }
.kts-comment-meme img       { border-color: var(--cr-border, #e2e8f0); }
.kts-pagination             { border-color: var(--cr-border, #f1f5f9); }
.kts-list > .kts-item > .children,
.kts-item .children .kts-item > .children { border-color: var(--cr-border, #f1f5f9); }

/* Meta-toned text */
.kts-page-info, .kts-form-footer, .kvr-policy-note, .kts-edited-label, .kts-edit-loading { color: var(--cr-meta, #94a3b8); }
.kts-form-footer a:hover, .kvr-policy-note a:hover { color: var(--cr-text, #64748b); }
.kts-toolbar-sep { background: var(--cr-border, #e2e8f0); }

/* Modal */
.kts-modal-content  { background: var(--cr-bg, #fff); color: var(--cr-text, #1e293b); }
.kts-modal-header   { border-color: var(--cr-border, #e2e8f0); }
.kts-modal-header h2 { color: var(--cr-text, #1e293b); }
.kts-modal-footer   { border-color: var(--cr-border, #f1f5f9); color: var(--cr-meta, #64748b); }
.kts-policy-list li { color: var(--cr-text, #475569); }
.kts-policy-list strong { color: var(--cr-text, #1e293b); }
.kts-close-modal    { color: var(--cr-meta, #94a3b8); }

/* Mention dropdown */
.kts-mention-dropdown        { background: var(--cr-bg, #fff); border-color: var(--cr-border, #e2e8f0); }
.kts-mention-dropdown li     { color: var(--cr-text, #1e293b); }
.kts-mention-dropdown li:hover,
.kts-mention-dropdown li.kts-mention-active { background: var(--cr-surface, #f1f5f9); }
.kts-mention-dropdown::-webkit-scrollbar-thumb { background: var(--cr-border, #e2e8f0); }
.kts-mention-name { color: var(--cr-text, #374151); }
/* ── Shadow Ban — admin-only visual indicators ──────────────────────────── */

/* Dimmed appearance so admins can visually distinguish shadow-banned comments.
   NOTE: the dim is scoped to the readable content only — NOT the whole block —
   so the ⋮ actions menu stays fully opaque and clickable. Putting opacity on the
   block itself would fade the dropdown too (and a child can't opt back out of a
   parent's opacity), which made menu items look transparent / hard to click. */
.kts-shadow-banned-block {
    position: relative;
}

.kts-shadow-banned-block .kts-user-row,
.kts-shadow-banned-block .kts-text,
.kts-shadow-banned-block .kts-comment-meme,
.kts-shadow-banned-block .kts-view-replies {
    opacity: 0.55;
}

/* The admin-only "Shadow Banned" badge shown at the top of the comment block */
.kts-shadow-ban-badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 11px;
    font-weight: 700;
    color: #fff;
    background: #f59e0b;
    border-radius: 4px;
    padding: 2px 8px;
    margin-top: 8px;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

/* Shadow Ban dropdown button — amber accent to stand out */
.kts-dropdown-item.kts-shadow-ban-btn {
    color: #b45309;
}
.kts-dropdown-item.kts-shadow-ban-btn:hover {
    background: #fef3c7;
    color: #92400e;
}


/* ── Big Emoji ──────────────────────────────────────────────────────────────
   When an entire comment is 1–3 emoji we render them large, just like
   iMessage / WhatsApp / Telegram.
   The <span> replaces the normal <p>-wrapped text so we kill the default
   paragraph margin and let the emoji stand on their own.
   ─────────────────────────────────────────────────────────────────────────── */
 
.kts-text .kts-big-emoji {
    display:     block;
    line-height: 1.15;
    /* no background, no border — pure emoji */
    font-style:  normal;
    user-select: text;
    /* smooth rendering on all platforms */
    -webkit-font-smoothing: antialiased;
}
 
/* Single emoji — biggest */
.kts-text .kts-big-emoji--one   { font-size: 3em; }
 
/* Two emoji — a touch smaller so both fit comfortably */
.kts-text .kts-big-emoji--two   { font-size: 2.5em; }
 
/* Three emoji — slightly smaller again */
.kts-text .kts-big-emoji--three { font-size: 2.0em; }
 
/* Make sure wpautop's <p> wrapper (if it fires after us) doesn't add margin */
.kts-text p:has(> .kts-big-emoji),
.kts-text p:empty {
    margin: 0;
    padding: 0;
}

/* This forces your style to win over the parent theme */
.comment-form .kts-textarea:focus,
.comment-form .kts-textarea:hover {
    background: var(--cr-surface, #f2f3f5) !important;
    color: var(--cr-text, #334155) !important;
    border: 1px solid var(--cr-border, transparent) !important;
}














/* ==========================================================================
   [Author] pill — permanent badge when the story author comments/reviews
   ========================================================================== */

.kts-author-pill {
  display: inline-flex;
  align-items: center;
  font-size: 12px;
  font-weight: 600;
  color: #fff;
  border-radius: 4px;
  padding: 1px 8px;
  line-height: 1.3;
  background: #339dbe;
}
.kts-author-pill i { font-size: 9px; }

/* ==========================================================================
   Report dialog — reason categories + optional note
   ========================================================================== */

.kts-report-overlay {
    position: fixed;
    inset: 0;
    background: rgba(15, 23, 42, .55);
    z-index: 100000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
}
.kts-report-dialog {
    background: var(--cr-bg, var(--nxp-card-bg, #fff));
    color: var(--cr-text, var(--nxp-text, #334155));
    border-radius: 14px;
    width: min(420px, 100%);
    padding: 20px 22px;
    box-shadow: 0 20px 50px rgba(0, 0, 0, .3);
}
.kts-report-dialog h3 {
    margin: 0 0 4px;
    font-size: 16px;
    font-weight: 800;
    display: flex;
    align-items: center;
    gap: 8px;
}
.kts-report-dialog h3 i { color: #ef4444; font-size: 13px; }
.kts-report-why {
    margin: 0 0 12px;
    font-size: 12.5px;
    color: var(--cr-meta, var(--nxp-text-3, #64748b));
}
.kts-report-reasons {
    display: flex;
    flex-direction: column;
    gap: 2px;
    margin-bottom: 12px;
}
.kts-report-reason {
    display: flex;
    align-items: center;
    gap: 9px;
    font-size: 13.5px;
    padding: 7px 10px;
    border-radius: 8px;
    cursor: pointer;
    transition: background .12s ease;
}
.kts-report-reason:hover { background: var(--cr-surface, rgba(100, 116, 139, .08)); }
.kts-report-reason input { margin: 0; accent-color: var(--cr-accent, #3b82f6); }
.kts-report-note {
    width: 100%;
    border: 1px solid var(--cr-border, #e2e8f0);
    border-radius: 9px;
    background: var(--cr-surface, #f8fafc);
    color: var(--cr-text, #334155);
    font-size: 13px;
    font-family: inherit;
    padding: 9px 11px;
    resize: vertical;
    margin-bottom: 14px;
    box-sizing: border-box;
}
.kts-report-note:focus { outline: none; border-color: var(--cr-accent, #3b82f6); }
.kts-report-actions {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
}
.kts-report-actions button {
    border: 0;
    border-radius: 999px;
    padding: 8px 18px;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    font-family: inherit;
}
.kts-report-cancel {
    background: transparent;
    color: var(--cr-meta, #64748b);
}
.kts-report-cancel:hover { color: var(--cr-text, #334155); }
.kts-report-submit {
    background: #ef4444;
    color: #fff;
}
.kts-report-submit:disabled { opacity: .45; cursor: not-allowed; }
.kts-report-submit:not(:disabled):hover { background: #dc2626; }

/* ==========================================================================
   Shared-permalink highlight (visiting #comment-{id})
   ========================================================================== */

.kts-linked-highlight {
    animation: kts-linked-pulse 3.4s ease;
    border-radius: 12px;
}
@keyframes kts-linked-pulse {
    0%   { box-shadow: 0 0 0 3px var(--cr-accent, #3b82f6); background: rgba(59, 130, 246, .10); }
    70%  { box-shadow: 0 0 0 3px var(--cr-accent, #3b82f6); background: rgba(59, 130, 246, .06); }
    100% { box-shadow: 0 0 0 0 transparent; background: transparent; }
}
@media (prefers-reduced-motion: reduce) {
    .kts-linked-highlight { animation: none; outline: 2px solid var(--cr-accent, #3b82f6); }
}

/* ==========================================================================
   Featured badge + moderation dropdown extras
   ========================================================================== */

.kts-featured-badge,
.kts-pinned-badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 10.5px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--cr-accent, #3b82f6);
    background: color-mix(in srgb, var(--cr-accent, #3b82f6) 10%, transparent);
    border-radius: 999px;
    padding: 3px 10px;
    margin-bottom: 6px;
}
.kts-featured-badge { color: #b45309; background: rgba(245, 158, 11, .12); }
.kts-featured-badge i { font-size: 9px; }

.kts-dropdown-sep {
    border: 0;
    border-top: 1px solid var(--cr-border, #e2e8f0);
    margin: 4px 0;
}

a.kts-dropdown-item { text-decoration: none; box-sizing: border-box; }

/* ==========================================================================
   Shared composer (KatEditor) — used by BOTH the comment box and review box.
   The toolbar/picker reuse .kts-* styles; these rules cover the contenteditable
   box, its placeholder, char counter, and inline GIFs.
   ========================================================================== */

.kat-editor-wrap {
    position: relative;
    border: 1px solid var(--cr-border, #e2e8f0);
    border-radius: 10px;
    /* overflow: hidden; */
    transition: border-color 0.15s;
    background: var(--nxp-card-bg, #fff);
}
.kat-editor-wrap:focus-within { border-color: var(--cr-accent, #007bff); }

/* Toolbar sits flush inside the wrapper (wrapper draws the outer border) */
.kat-editor-wrap .kts-toolbar {
    border-left: 0;
    border-right: 0;
    border-top: 0;
    border-radius: 0;
    border-bottom: 1px solid var(--cr-border, #e2e8f0);
}
.kat-fmt-bold,
.kat-fmt-italic {
    padding: 4px 9px;
    font-weight: 700;
    min-width: 28px;
    justify-content: center;
}

.kat-editor {
    width: 100%;
    min-height: 96px;
    padding: 14px;
    font-size: 15px;
    font-family: inherit;
    color: var(--cr-text, #334155);
    line-height: 1.6;
    box-sizing: border-box;
    outline: none;
    overflow-wrap: anywhere;
}
.kat-editor:empty:not(.kat-editor--active)::before {
    content: attr(data-placeholder);
    color: var(--cr-meta, #94a3b8);
    pointer-events: none;
}
.kat-editor strong { font-weight: 700; }
.kat-editor em     { font-style: italic; }

.kat-char-count {
    text-align: right;
    font-size: 11px;
    color: var(--cr-meta, #94a3b8);
    padding: 4px 12px;
    /* background: var(--cr-surface, #f8fafc); */
    border-top: 1px solid var(--cr-border, #e2e8f0);
}

.kat-picker-wrap { position: relative; }

/* Inline GIFs inside the editor + rendered comment/review body */
.kat-inline-gif,
.kts-text .kat-inline-gif {
    display: block;
    max-width: 220px;
    max-height: 180px;
    border-radius: 10px;
    margin: 8px 0;
}

/* While editing, spoilers use the same rounded-bar look as the live page,
   just lighter (grey, not black) — the author can still make out their own
   text so it's not a guessing game. */
.kat-editor .kts-spoiler-wrap {
    display: inline;
    border-radius: 2px;
    /* padding: 1px 4px; */
    background: #1e2530;
    cursor: text;
    -webkit-box-decoration-break: clone;
    box-decoration-break: clone;
}
.kat-editor .kts-spoiler-wrap .kts-spoiler-content {
    color: rgba(255, 255, 255, 0.51) !important;
    filter: none !important;
    user-select: text;
    pointer-events: auto;
}