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

/* ==========================================================================
   Base Styles
   ========================================================================== */
.kts-comments-wrap {
    --cr-accent: #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;
}

@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-framed {
    /* Avatar frame styles applied dynamically via inline styles */
}

/* .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-link {
    color: inherit;
    text-decoration: none;
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
}

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

.kts-date {
    font-size: 13px;
    color: #64748b;
    display: block;
}

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

.kts-vip-badge {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    background: linear-gradient(135deg, #6b21a8 0%, #9333ea 100%);
    color: #fff;
    font-size: 10px;
    font-weight: 800;
    padding: 2px 6px;
    border-radius: 4px;
    text-transform: uppercase;
    margin-left: 5px;
    box-shadow: 0 2px 4px rgba(107, 33, 168, 0.3);
    animation: vipPulse 2s ease-in-out infinite;
}

@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;
}

.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: 140px;
    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;
}

.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-no-comments {
    text-align: center;
    padding: 40px 20px;
    color: #94a3b8;
    font-size: 15px;
}

/* ==========================================================================
   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: 20px;
}

.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;
}

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

.kts-policy-list {
    padding-left: 20px;
    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); }
}

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

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


@media (max-width: 520px) {
    .kts-form-card {
        background: #fff;
        border: none !important;
        border-bottom: 1px solid #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: 20px;
        width: 95%;
    }
    
    .kts-modal-header h2 {
        font-size: 18px;
    }
    
    .kts-vip-badge,
    .kts-user-title {
        font-size: 9px;
        padding: 1px 5px;
    }
}

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

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


/* =========================================================================
   Kat Comments — Title Animations & Glow Animations
   ========================================================================= */

/* Gradient badge */
.kts-user-title.kts-title-animated {
    background-size: 300% 300%;
}

/* Title animation keyframes */
@keyframes kts-title-slide   { 0%{background-position:0% 50%}50%{background-position:100% 50%}100%{background-position:0% 50%} }
@keyframes kts-title-wave    { 0%,100%{letter-spacing:.5px}50%{letter-spacing:2px} }
@keyframes kts-title-glow    { 0%,100%{box-shadow:0 0 4px rgba(255,255,255,.3)}50%{box-shadow:0 0 12px rgba(255,255,255,.8),0 0 20px rgba(255,255,255,.4)} }
@keyframes kts-title-bounce  { 0%,100%{transform:translateY(0)}50%{transform:translateY(-3px)} }

.kts-title-anim-slide   { animation:kts-title-slide  3s ease infinite; }
.kts-title-anim-wave    { animation:kts-title-wave   2s ease-in-out infinite; }
.kts-title-anim-glow    { animation:kts-title-glow   2s ease-in-out infinite; }
.kts-title-anim-bounce  { animation:kts-title-bounce 1.2s ease-in-out infinite; }

/* Glow animation classes (applied to avatar img elements) */
@keyframes kat-glow-pulse   { 0%,100%{box-shadow:var(--glow-min,0 0 8px currentColor)}50%{box-shadow:var(--glow-max,0 0 24px currentColor)} }
@keyframes kat-glow-wave    { 0%{box-shadow:var(--gw0,0 0 8px currentColor)}33%{box-shadow:var(--gw1,0 0 16px currentColor)}66%{box-shadow:var(--gw2,0 0 12px currentColor)}100%{box-shadow:var(--gw0,0 0 8px currentColor)} }
@keyframes kat-glow-flicker { 0%,100%{opacity:1}20%{opacity:.6}40%{opacity:.95}60%{opacity:.5}80%{opacity:1} }
@keyframes kat-glow-spin    { 0%{filter:hue-rotate(0deg)}100%{filter:hue-rotate(360deg)} }

.kat-glow-anim-pulse   { animation:kat-glow-pulse   2s ease-in-out infinite; }
.kat-glow-anim-wave    { animation:kat-glow-wave    3s ease-in-out infinite; }
.kat-glow-anim-flicker { animation:kat-glow-flicker 1.5s linear infinite; }
.kat-glow-anim-spin    { animation:kat-glow-spin    4s linear infinite; }

/* Gradient border wrapper */
.kat-grad-border-wrap { display:inline-block;border-radius:12px; }
.kat-grad-border-wrap img.kts-avatar { display:block; }

/* Image frame overlay */
.kat-img-frame-wrap { position:relative;display:inline-block; }
.kat-img-frame-wrap img.kts-avatar { display:block; }
.kat-frame-overlay {
    position:absolute;inset:-4px;
    background-size:contain;
    background-repeat:no-repeat;
    background-position:center;
    pointer-events:none;
    z-index:2;
}





/* 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;
}

/* Dark-mode */
@media (prefers-color-scheme: dark) {
    .kts-pinned-block { border-left-color: #818cf8; }
    .kts-pin-icon     { color: #818cf8; }
}

/* ==========================================================================
   Spoiler Tags
   ========================================================================== */

.kts-spoiler-wrap { display:block; margin:8px 0; }

.kts-spoiler-btn {
    display:inline-flex; align-items:center; gap:6px;
    padding:5px 14px; font-size:12px; font-weight:600;
    color:#7c3aed; background:#f5f3ff; border:1px solid #c4b5fd;
    border-radius:20px; cursor:pointer; transition:background .15s,color .15s;
    margin-bottom:6px;
}
.kts-spoiler-btn:hover { background:#ede9fe; color:#5b21b6; }

.kts-spoiler-wrap[data-spoiler="hidden"] .kts-spoiler-content {
    display:block; filter:blur(6px); user-select:none; pointer-events:none;
    opacity:.5; max-height:4em; overflow:hidden; transition:filter .3s, opacity .3s;
}
.kts-spoiler-wrap[data-spoiler="visible"] .kts-spoiler-content {
    display:block; filter:none; opacity:1; user-select:text; pointer-events:auto;
    max-height:none; transition:filter .3s, opacity .3s;
}

/* Comment Toolbar */
.kts-editor-wrap { display:flex; flex-direction:column; }
.kts-toolbar {
    display:flex; align-items:center; gap:6px; padding:6px 10px;
    background:#f8fafc; 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:#7c3aed; background:#fff;
    border:1px solid #c4b5fd; 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:#a78bfa; 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; }

/* ==========================================================================
   Dark mode (all new features)
   ========================================================================== */

@media (prefers-color-scheme: dark) {
    .kts-spoiler-btn      { color:#a78bfa; background:#1e1b4b; border-color:#4338ca; }
    .kts-spoiler-btn:hover { background:#312e81; }
    .kts-toolbar          { background:#1e293b; border-color:#334155; }
    .kts-toolbar-btn      { color:#a78bfa; background:#0f172a; border-color:#4338ca; }
    .kts-toolbar-btn:hover { background:#1e1b4b; }
    .kts-reaction-btn     { background:#1e293b; border-color:#334155; }
    .kts-reaction-btn:hover { background:#334155; }
    .kts-reaction-btn.active { background:#1e1b4b; border-color:#7c3aed; }
    .kts-reaction-count   { color:#94a3b8; }
    .kts-edit-textarea    { background:#0f172a; color:#e2e8f0; border-color:#6366f1; }
    .kts-edit-cancel      { background:#1e293b; color:#94a3b8; border-color:#334155; }
    @keyframes kts-edit-flash { 0%,100%{background:transparent} 30%{background:#14532d} }
}






/**
 * 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(--cr-bg, #fff);
    border: 1px solid var(--cr-border, #f1f5f9);
    border-radius: 12px;
    padding: 20px;
}

.kts-toolbar {
    background: var(--cr-surface, #f8fafc);
    border: 1px solid var(--cr-border, #e2e8f0);
    border-bottom: none;
}

.kts-toolbar-btn {
    background: var(--cr-bg, #fff);
    border: 1px solid var(--cr-border, #c4b5fd);
    color: var(--cr-accent, #7c3aed);
}

/* .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, .kts-no-comments {
    color: var(--cr-meta, #64748b);
}

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

/* --- 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);
}

/* --- Reader Theme Overrides (Dark Mode Logic) --- */
/* This section ensures that when the reader is in DARK theme, 
   the plugin ignores system preferences and follows the reader settings */
[data-theme="dark"] .kts-spoiler-btn { background: #1e1b4b; border-color: #4338ca; }
[data-theme="dark"] .kts-toolbar { background: #1e293b; border-color: #334155; }
[data-theme="dark"] .kts-reaction-btn { background: #1e293b; border-color: #334155; }
[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%} }
... (rest of your existing animations) ...
/* ==========================================================================
   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: 6px;
    left: 0;
    z-index: 9999;
    background: var(--cr-bg, #fff);
    color: var(--cr-text, #1e293b);
    border: 1px solid var(--cr-border, #e2e8f0);
    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: #7c3aed; }
.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;
}

/* ── Dark-mode for new elements ─────────────────────────────────────────── */
@media (prefers-color-scheme: dark) {
    .kts-picker-panel        { background: #1e293b; border-color: #334155; color: #e2e8f0; }
    .kts-emoji-item:hover    { background: #334155; border-color: #475569; }
    .kts-meme-search         { background: #0f172a; color: #e2e8f0; border-color: #334155; }
    .kts-meme-thumb:hover    { border-color: #a78bfa; }
    .kts-inline-reply-form   { background: #1e293b; border-color: #334155; }
}
[data-theme="dark"] .kts-picker-panel      { background: #1e293b; border-color: #334155; color: #e2e8f0; }
[data-theme="dark"] .kts-meme-search       { background: #0f172a; color: #e2e8f0; border-color: #334155; }
[data-theme="dark"] .kts-emoji-item:hover  { background: #334155; }
[data-theme="dark"] .kts-meme-thumb:hover  { border-color: #a78bfa; }
[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: #7c3aed;
    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; }

/* ── Dark mode additions ────────────────────────────────────────────────── */
@media (prefers-color-scheme: dark) {
    .kts-replying-to-banner { background: #1e1b4b; border-color: #3730a3; color: #a5b4fc; }
    .kts-replying-to-banner strong { color: #c7d2fe; }
    .kts-reply-cancel-x { color: #a5b4fc; }
    .kts-reply-cancel-x:hover { background: #3730a3; }
    .kts-submit-row .kts-reply-cancel-btn,
    .kts-submit-row .kts-reply-cancel { background: #1e293b; border-color: #334155; color: #94a3b8; }
    .kts-submit-row .kts-reply-cancel-btn:hover,
    .kts-submit-row .kts-reply-cancel:hover { background: #0f172a; border-color: #475569; color: #e2e8f0; }
    .kts-picker-tabs { border-color: #334155; }
    .kts-picker-tab { color: #94a3b8; }
    .kts-picker-tab:hover { background: #334155; color: #e2e8f0; }
    .kts-picker-tab.active { background: #1e293b; border-color: #334155; border-bottom-color: #1e293b; color: #a78bfa; }
    .kts-gif-status { color: #64748b; }
}
[data-theme="dark"] .kts-replying-to-banner { background: #1e1b4b; border-color: #3730a3; color: #a5b4fc; }
[data-theme="dark"] .kts-replying-to-banner strong { color: #c7d2fe; }
[data-theme="dark"] .kts-submit-row .kts-reply-cancel-btn,
[data-theme="dark"] .kts-submit-row .kts-reply-cancel { background: #1e293b; border-color: #334155; color: #94a3b8; }
[data-theme="dark"] .kts-picker-tabs { border-color: #334155; }
[data-theme="dark"] .kts-picker-tab { color: #94a3b8; }
[data-theme="dark"] .kts-picker-tab:hover { background: #334155; color: #e2e8f0; }
[data-theme="dark"] .kts-picker-tab.active { background: #1e293b; border-color: #334155; border-bottom-color: #1e293b; color: #a78bfa; }
/* ── @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: default;
    white-space: nowrap;
}

/* Dark mode */
@media (prefers-color-scheme: dark) {
    .kts-mention-dropdown { background: #1e293b; border-color: #334155; box-shadow: 0 10px 30px rgba(0,0,0,.4); }
    .kts-mention-dropdown li { color: #e2e8f0; }
    .kts-mention-dropdown li:hover { background: #273549; }
    .kts-mention-dropdown li.kts-mention-active { background: #1e1b4b; }
    .kts-mention-name { color: #cbd5e1; }
    .kts-text .kts-mention-tag { background: #1e1b4b; color: #a5b4fc; }
}
[data-theme="dark"] .kts-mention-dropdown { background: #1e293b; border-color: #334155; }
[data-theme="dark"] .kts-mention-dropdown li { color: #e2e8f0; }
[data-theme="dark"] .kts-mention-dropdown li:hover { background: #273549; }
[data-theme="dark"] .kts-mention-dropdown li.kts-mention-active { background: #1e1b4b; }
[data-theme="dark"] .kts-text .kts-mention-tag { background: #1e1b4b; color: #a5b4fc; }

/* ==========================================================================
   Chapter Reader Theme Integration
   Inherits reader CSS variables (--cr-bg/surface/text/border/meta/accent)
   so all 5 themes + contrast modes apply to comments automatically.
   Most selectors already use var(--cr-*) with fallbacks in the rules above;
   this block only patches remaining hardcoded values and guards against
   OS dark-mode fighting a deliberately chosen light reader theme.
   ========================================================================== */

.cr-reader-wrapper .kts-wrap         { background: transparent; }
.cr-reader-wrapper .kts-header       { border-color: var(--cr-border); }
.cr-reader-wrapper .kts-sort-select  { background: var(--cr-surface); color: var(--cr-text); border-color: var(--cr-border); }

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

.cr-reader-wrapper .kts-more-options:hover     { background: var(--cr-surface); }
.cr-reader-wrapper .kts-page-btn               { background: var(--cr-surface); border-color: var(--cr-border); color: var(--cr-text); }
.cr-reader-wrapper .kts-page-btn:hover         { background: var(--cr-bg); border-color: #7c3aed; color: #7c3aed; }
.cr-reader-wrapper .kts-inline-reply-form      { background: var(--cr-surface); border-color: var(--cr-border); }
.cr-reader-wrapper .kts-comment-meme img       { border-color: var(--cr-border); }
.cr-reader-wrapper .kts-pagination             { border-color: var(--cr-border); }
.cr-reader-wrapper .kts-list > .kts-item > .children,
.cr-reader-wrapper .kts-item .children .kts-item > .children { border-color: var(--cr-border); }

/* Modal */
.cr-reader-wrapper .kts-modal-content  { background: var(--cr-bg); color: var(--cr-text); }
.cr-reader-wrapper .kts-modal-header   { border-color: var(--cr-border); }
.cr-reader-wrapper .kts-modal-header h2 { color: var(--cr-text); }
.cr-reader-wrapper .kts-modal-footer   { border-color: var(--cr-border); color: var(--cr-meta); }
.cr-reader-wrapper .kts-policy-list li { color: var(--cr-text); }
.cr-reader-wrapper .kts-close-modal    { color: var(--cr-meta); }

/* Mention dropdown */
.cr-reader-wrapper .kts-mention-dropdown        { background: var(--cr-bg); border-color: var(--cr-border); }
.cr-reader-wrapper .kts-mention-dropdown li     { color: var(--cr-text); }
.cr-reader-wrapper .kts-mention-dropdown li:hover,
.cr-reader-wrapper .kts-mention-dropdown li.kts-mention-active { background: var(--cr-surface); }

/* ── OS dark-mode guard ─────────────────────────────────────────────────────
   Stop @media (prefers-color-scheme: dark) from overriding a chosen
   light/sepia/soft/grey reader theme on a dark-OS device.              */
@media (prefers-color-scheme: dark) {
    .cr-reader-wrapper:not([data-theme="dark"]) .kts-form-card,
    .cr-reader-wrapper:not([data-theme="dark"]) .kts-textarea,
    .cr-reader-wrapper:not([data-theme="dark"]) .kts-text,
    .cr-reader-wrapper:not([data-theme="dark"]) .kts-toolbar,
    .cr-reader-wrapper:not([data-theme="dark"]) .kts-dropdown,
    .cr-reader-wrapper:not([data-theme="dark"]) .kts-picker-panel,
    .cr-reader-wrapper:not([data-theme="dark"]) .kts-meme-search,
    .cr-reader-wrapper:not([data-theme="dark"]) .kts-inline-reply-form,
    .cr-reader-wrapper:not([data-theme="dark"]) .kts-sort-select,
    .cr-reader-wrapper:not([data-theme="dark"]) .kts-modal-content {
        background: var(--cr-surface) !important;
        color: var(--cr-text) !important;
        border-color: var(--cr-border) !important;
    }
    /* Toolbar buttons keep their purple identity regardless of OS dark mode */
    .cr-reader-wrapper:not([data-theme="dark"]) .kts-toolbar-btn {
        background: var(--cr-bg) !important;
        color: #7c3aed !important;
        border-color: #c4b5fd !important;
    }
    .cr-reader-wrapper:not([data-theme="dark"]) .kts-picker-panel {
        background: var(--cr-bg) !important;
        color: var(--cr-text) !important;
    }
    .cr-reader-wrapper:not([data-theme="dark"]) .kts-meme-search {
        background: var(--cr-surface) !important;
        color: var(--cr-text) !important;
    }
}
/* ── Shadow Ban — admin-only visual indicators ──────────────────────────── */

/* Dimmed appearance so admins can visually distinguish shadow-banned comments */
.kts-shadow-banned-block {
    opacity: 0.55;
    position: relative;
}

/* 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;
}