/* Google Fonts are preloaded non-render-blocking via int_cb_google_fonts_preload() in wp_head (priority 1) */

:root {
    /* v7.7.24: cache-detection marker — debug overlay JS isko read karke confirm karta hai
       ki CSS file wahi version serve kar rahi hai jo PHP/JS abhi chala rahe hain. Agar
       yeh mismatch ho, matlab CSS kahin (browser/CDN/Hostinger/caching-plugin) se STALE
       serve ho rahi hai, chahe overlay ka apna header naya version dikha raha ho. */
    --int-cb-css-ver: "7.8.3";
    --int-btn:        #dc2626;
    --int-btn-pad-x:  50px;
    --int-btn-radius: 4px;
    --int-btn-font:   15px;
    --int-btn-h:      40px;
    --int-focus:      #111111;
    --int-focus-a:    rgba(17,17,17,.12);
    --int-btn-a:      rgba(220,38,38,.15);
    --int-btn-hover-a: rgba(194,0,0,.35);
    --int-r-xl:       1px;
    --int-r-lg:       14px;
    --int-r-md:       10px;
    --int-r-sm:       7px;
    --int-border:     #ffffff;
    --int-bg:         #f9fafb;
    --int-white:      #ffffff;
    --int-text:       #111111;
    --int-muted:      #6b7280;
    --int-shadow:     0 2px 16px rgba(99,102,241,.06);
    --int-shadow-lg:  0 8px 32px rgba(0,0,0,.10);
    --int-font:       'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, sans-serif;
    --int-card-radius: 1px;
    --int-card-border: #ffffff;
    --int-card-shadow: 0 2px 16px rgba(99,102,241,.06);
    --int-avatar-size: 36px;
    --int-font-size:   14px;
    --int-pt-s1-bg1:    #1a1a2e;
    --int-pt-s1-bg2:    #0f3460;
    --int-pt-s1-badge1: #6366f1;
    --int-pt-s1-badge2: #a855f7;
    --int-pt-s2-bg1:    #f5f3ff;
    --int-pt-s2-bg2:    #eff6ff;
    --int-pt-s2-border: #e0e7ff;
    --int-pt-s2-accent1:#6366f1;
    --int-pt-s2-accent2:#a855f7;
    --int-pt-s3-accent1:#000000;
    --int-pt-s3-accent2:#000000;
    --int-pt-s4-border: #e5e7eb;
    --int-pt-s4-accent: #6366f1;
    --int-pt-s4-badge1: #1a1a2e;
    --int-pt-s4-badge2: #0f3460;
    --int-yt-username:   #1a1a2e;
    --int-yt-date:       #9ca3af;
    --int-yt-text:       #374151;
    --int-yt-icon:       #6b7280;
    --int-yt-divider:    #f0f0f0;
    --int-yt-star-filled:#f59e0b;
    --int-yt-star-empty: #e5e7eb;
    --int-yt-loved-bg:     #991b1b;
    --int-yt-loved-border: #ffffff;
    --int-yt-loved-text:   #f02849;
    --int-yt-font: var(--int-font);
    --int-yt-font-size-username: 15px;
    --int-yt-font-size-text:     13px;
}

.comment-respond *, .comment-respond *::before, .comment-respond *::after,
.comment-list *,   .comment-list *::before,   .comment-list *::after {
    box-sizing: border-box;
    font-family: var(--int-font);
}

/* ── Comments area ── */
#comments { width:100%; margin-top:32px; clear:both; }
.int-toggle-active #comments { margin-top: 16px; }

/* ── Comment Section Banner ── */
.int-comment-section {
    position: relative;
    border-radius: 16px;
    overflow: visible;
    box-shadow: 0 4px 32px rgba(0,0,0,0.10);
    margin-bottom: 20px;
}
.int-comment-banner {
    position: relative;
    background: linear-gradient(135deg, #1a1a2e 0%, #16213e 50%, #0f3460 100%);
    padding: 24px 20px 72px;
    overflow: hidden;
    border-radius: 16px 16px 0 0;
}
.int-comment-banner::before {
    content: '';
    position: absolute;
    top: -40px; right: -40px;
    width: 200px; height: 200px;
    background: radial-gradient(circle, rgba(99,102,241,0.3) 0%, transparent 70%);
    border-radius: 50%;
    pointer-events: none;
}
.int-comment-banner::after {
    content: '';
    position: absolute;
    bottom: -20px; left: 30%;
    width: 300px; height: 100px;
    background: radial-gradient(ellipse, rgba(168,85,247,0.2) 0%, transparent 70%);
    pointer-events: none;
}
.int-banner-dot {
    position: absolute;
    border-radius: 50%;
}
.int-banner-dot-1 { width:6px; height:6px; background:#fff; top:18px; right:80px; opacity:.15; }
.int-banner-dot-2 { width:4px; height:4px; background:#a855f7; top:40px; right:140px; opacity:.15; }
.int-banner-dot-3 { width:8px; height:8px; background:#6366f1; bottom:40px; left:20px; opacity:.2; }

.int-banner-tag {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: rgba(99,102,241,0.25);
    border: 1px solid rgba(99,102,241,0.4);
    border-radius: 20px;
    padding: 4px 12px;
    font-size: 11px;
    font-weight: 700;
    color: #a5b4fc;
    letter-spacing: .5px;
    text-transform: uppercase;
    margin-bottom: 12px;
    font-family: var(--int-font);
}
.int-banner-title {
    font-size: 22px;
    font-weight: 800;
    color: #fff;
    line-height: 1.3;
    letter-spacing: -.3px;
    margin-bottom: 6px;
    font-family: var(--int-font);
    position: relative;
    z-index: 1;
}
.int-banner-title em {
    font-style: normal;
    background: linear-gradient(90deg, #818cf8, #c084fc);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}
.int-banner-sub {
    font-size: 13px;
    color: rgba(255,255,255,0.55);
    font-family: var(--int-font);
    position: relative;
    z-index: 1;
}

/* ── Action Bar ── */
.int-action-bar-wrap {
    position: relative;
    margin-top: -42px;
    padding: 0 14px 0 14px;
    z-index: 2;
    width: 100%;
    box-sizing: border-box;
    max-width: 100%;
    overflow: hidden;
    display: flex;
    justify-content: center;
}
.int-action-bar {
    display: flex;
    align-items: center;
    justify-content: center;
    background: #fff;
    border: 1.5px solid #e8eaed;
    border-radius: 50px;
    padding: 8px 16px;
    box-shadow: 0 4px 20px rgba(0,0,0,0.12);
    gap: 14px;
    width: auto;
    max-width: 100%;
    overflow: hidden;
    box-sizing: border-box;
    font-family: var(--int-font);
    clip-path: inset(0 0 0 0 round 50px);
}
.int-all-comments-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    line-height: 1;
    font-weight: 700;
    color: #1a1a2e;
    text-decoration: none;
    white-space: nowrap;
    flex-shrink: 1;
    min-width: 0;
    background: none;
    border: none;
    cursor: pointer;
    font-family: var(--int-font);
    padding: 0;
    vertical-align: middle;
}
.int-all-comments-btn:hover { color: #4f46e5; }
.int-all-comments-btn .int-btn-icon {
    width: 26px; height: 26px;
    background: linear-gradient(135deg, #6366f1, #a855f7);
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-size: 11px; line-height: 1;
    flex-shrink: 0;
}
.int-all-comments-btn .int-count-badge {
    background: #f0f0f0;
    color: #444;
    border-radius: 20px;
    padding: 2px 7px;
    font-size: 11px;
    line-height: 1.3;
    font-weight: 700;
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
}
.int-action-bar-sep {
    width: 1px; height: 18px;
    background: #ddd;
    flex-shrink: 0;
}
.int-comment-count-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    background: linear-gradient(135deg, #1a1a2e, #0f3460);
    color: #fff !important;
    border: none;
    border-radius: 30px;
    padding: 8px 14px;
    font-size: 11px;
    line-height: 1;
    font-weight: 700;
    font-family: var(--int-font);
    text-decoration: none !important;
    white-space: nowrap;
    flex-shrink: 0;
    letter-spacing: .3px;
    word-spacing: 3px;
    box-sizing: border-box;
}

/* ── Comment Body (below banner) ── */
.int-comment-body {
    background: #fff;
    padding: 20px 16px 20px;
    border-radius: 0 0 16px 16px;
    margin-top: 16px;
}

/* ── Info Strip ── */
.int-info-strip {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-top: 12px;
    padding: 0 2px;
    flex-wrap: wrap;
}
.int-info-item {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 11.5px;
    color: #888;
    font-family: var(--int-font);
}

/* ── Avatar fallback — first letter ── */
.int-avatar-fallback {
    width: 100%; height: 100%; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    color: #fff; font-weight: 700; font-size: 16px; text-transform: uppercase;
    font-family: var(--int-font);
}

/* ── YouTube Flat Style B ── */
.int-list-youtube .comment-list li.comment,
.int-list-youtube .comment-list li.pingback {
    background: transparent !important; border: none !important;
    border-radius: 0 !important; box-shadow: none !important;
    padding: 14px 4px !important; margin-bottom: 0 !important;
    border-bottom: 1px solid #f0f0f0 !important;
}
.int-list-youtube .comment-list > li.comment:last-child { border-bottom: none !important; }
.int-list-youtube .int-avatar img, .int-list-youtube .int-avatar { width: 36px !important; height: 36px !important; }
.int-list-youtube .int-author-name, .int-list-youtube .comment-author .fn {
    font-size: 13px !important; font-weight: 700 !important; color: #1a1a2e !important;
    background: none !important; -webkit-text-fill-color: #1a1a2e !important;
}
.int-list-youtube .int-author-name::before { content: "@"; }
.int-list-youtube .int-comment-date, .int-list-youtube .comment-metadata a { font-size: 12px; color: #6b7280; }
.int-list-youtube .int-comment-body p { font-size: 14px; color: #1a1a2e; line-height: 1.5; }
.int-list-youtube .int-like-btn {
    background: none !important; border: none !important; padding: 4px 6px !important;
    color: #606060; gap: 5px; border-radius: 0 !important;
}
.int-list-youtube .int-like-btn svg { width: 17px; height: 17px; }
/* v7.7.0 DEAD-CODE CLEANUP: yahan pehle ".int-list-youtube .int-like-bar { gap: 14px;
   margin-top: 8px; }" tha — line 274 wali ".int-like-bar { gap:...!important;
   margin-top:8px!important; }" rule hamesha isse jeet jaati thi (!important kabhi bhi
   kisi non-important rule se haarti nahi, specificity chahe kuch bhi ho), isliye ye
   rule kabhi bhi asal mein apply nahi hoti thi — pura dead code tha, hata diya. */

/* ── Reply icon button (YouTube speech bubble) ── */
.int-reply-icon-btn {
    display: inline-flex; align-items: center; justify-content: center;
    background: none; border: none; cursor: pointer; color: #606060;
    padding: 4px; transition: color .2s; line-height: 1;
}
.int-reply-icon-btn:hover { color: #1a1a2e; }
.int-reply-icon-btn svg { width: 20px; height: 20px; }

/* ── Creator Heart double-layer badge ── */
.int-heart-badge-wrap {
    position: relative; display: inline-flex; align-items: center;
    justify-content: center; cursor: default;
}
.int-heart-badge-wrap .int-heart-avatar {
    width: 22px; height: 22px; border-radius: 50%;
    background: #991b1b; display: flex; align-items: center;
    justify-content: center; font-size: 8px; color: #fff; font-weight: 700;
}
.int-heart-badge-wrap .int-heart-badge-icon {
    position: absolute; bottom: -5px; right: -6px;
    width: 18px; height: 18px; transition: transform .2s;
}
.int-heart-badge-wrap:hover .int-heart-badge-icon { transform: scale(1.18); }

/* ── Creator Heart — icon-only, inline in action bar ── */
.int-avatar { position: relative; display: inline-block; flex-shrink: 0; }
.int-heart-btn {
    margin-left: auto;
    display: inline-flex; align-items: center; justify-content: center;
    width: 28px; height: 28px; border-radius: 50%;
    font-size: 14px; cursor: pointer;
    transition: all .2s; background: #f9fafb;
    border: 1.5px dashed #e5e7eb; color: #9ca3af; flex-shrink: 0;
}
.int-heart-btn:hover { border-color: #f43f5e; background: #fff1f2; transform: scale(1.1); }
.int-heart-btn.int-hearted {
    background: #fff1f2; border: 1.5px solid #f43f5e; border-style: solid;
}
.int-loved-badge {
    display: inline-flex; align-items: center; justify-content: center;
    width: 26px; height: 26px; font-size: 13px;
    background: #fff1f2; border: 1px solid #fecdd3;
    border-radius: 50%; flex-shrink: 0; margin-left: auto;
}
/* Reply button inline with like/dislike */
.int-reply-inline { display: inline-flex; }
.int-reply-inline .comment-reply-link { margin-top: 0 !important; }

/* Dark mode */
@media (prefers-color-scheme: dark) {
    .int-comment-banner { background: linear-gradient(135deg, #0d0d1a 0%, #0a0f1e 50%, #071828 100%); }
    .int-action-bar { background: #1e2122; border-color: #333; }
    .int-all-comments-btn { color: #e0e0e0; }
    .int-action-bar-sep { background: #444; }
    .int-comment-body { background: #1a1a1a; }
    .int-info-item { color: #666; }
}






/* ── Comments Title — hide default ── */
#comments .comments-title,
.comments-area .comments-title {
    display: none !important;
}

/* ── Comments Title Style 1 — Dark Navy Card ── */
.int-title-style1 {
    background: linear-gradient(135deg, var(--int-pt-s1-bg1), var(--int-pt-s1-bg2));
    border-radius: 16px; padding: 16px 18px;
    display: flex; align-items: center; gap: 14px;
    box-shadow: 0 4px 20px rgba(15,52,96,.25);
    margin-bottom: 20px;
    font-family: var(--int-font);
}
.int-title-style1 .int-ti-icon {
    width: 42px; height: 42px;
    background: rgba(255,255,255,.12); border-radius: 12px;
    display: flex; align-items: center; justify-content: center;
    font-size: 20px; flex-shrink: 0;
}
.int-title-style1 .int-ti-text { flex: 1; min-width: 0; }
.int-title-style1 .int-ti-count { font-size: 11px; color: rgba(255,255,255,.6); font-weight: 600; margin-bottom: 3px; }
.int-title-style1 .int-ti-post { font-size: 13px; font-weight: 800; color: #fff; line-height: 1.4; }
.int-title-style1 .int-ti-badge {
    background: linear-gradient(135deg, var(--int-pt-s1-badge1), var(--int-pt-s1-badge2));
    color: #fff; border-radius: 20px;
    padding: 4px 12px; font-size: 13px; font-weight: 800;
    flex-shrink: 0;
}

/* ── Style 2 — Light Purple Banner ── */
.int-title-style2 {
    background: linear-gradient(135deg, var(--int-pt-s2-bg1), var(--int-pt-s2-bg2));
    border: 1.5px solid var(--int-pt-s2-border); border-radius: 16px;
    padding: 16px 20px; margin-bottom: 20px;
    box-shadow: 0 2px 12px rgba(99,102,241,.08);
    font-family: var(--int-font);
}
.int-title-style2 .int-ti-top { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.int-title-style2 .int-ti-bubble {
    background: linear-gradient(135deg, var(--int-pt-s2-accent1), var(--int-pt-s2-accent2));
    color: #fff; border-radius: 20px;
    padding: 3px 12px; font-size: 12px; font-weight: 700;
}
.int-title-style2 .int-ti-label { font-size: 12px; color: #6b7280; font-weight: 600; }
.int-title-style2 .int-ti-post {
    font-size: 14px; font-weight: 800; color: #1a1a2e; line-height: 1.4;
    border-left: 3px solid var(--int-pt-s2-accent1); padding-left: 10px;
}

/* ── Style 3 — Minimal Gradient ── */
.int-title-style3 { padding: 4px 0; margin-bottom: 20px; font-family: var(--int-font); }
.int-title-style3 .int-ti-row { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
.int-title-style3 .int-ti-circle {
    width: 36px; height: 36px;
    background: linear-gradient(135deg, var(--int-pt-s3-accent1), var(--int-pt-s3-accent2));
    border-radius: 50%; display: flex; align-items: center; justify-content: center;
    font-size: 16px; flex-shrink: 0; box-shadow: 0 3px 10px rgba(99,102,241,.3);
}
.int-title-style3 .int-ti-count { font-size: 13px; font-weight: 700; color: var(--int-pt-s3-accent1); }
.int-title-style3 .int-ti-post {
    font-size: 15px; font-weight: 800; line-height: 1.4;
    color: #1a1a2e;
}
.int-title-style3 .int-ti-divider {
    height: 2px;
    background: linear-gradient(90deg, var(--int-pt-s3-accent1), var(--int-pt-s3-accent2), transparent);
    border-radius: 2px; margin-top: 12px;
}

/* ── Style 4 — TOI Style ── */
.int-title-style4 {
    background: #fff; border: 1.5px solid var(--int-pt-s4-border);
    border-radius: 14px; padding: 14px 18px;
    display: flex; align-items: center; justify-content: space-between;
    gap: 12px; margin-bottom: 20px;
    box-shadow: 0 2px 8px rgba(0,0,0,.06);
    font-family: var(--int-font);
}
.int-title-style4 .int-ti-left { flex: 1; min-width: 0; }
.int-title-style4 .int-ti-tag {
    display: inline-flex; align-items: center; gap: 5px;
    font-size: 11px; font-weight: 700; color: var(--int-pt-s4-accent);
    text-transform: uppercase; letter-spacing: .5px; margin-bottom: 5px;
}
.int-title-style4 .int-ti-post { font-size: 14px; font-weight: 800; color: #1a1a2e; line-height: 1.4; }
.int-title-style4 .int-ti-num {
    background: linear-gradient(135deg, var(--int-pt-s4-badge1), var(--int-pt-s4-badge2));
    color: #fff; border-radius: 12px;
    padding: 8px 14px; text-align: center; flex-shrink: 0;
}
.int-title-style4 .int-ti-num .int-ti-n { font-size: 20px; font-weight: 800; display: block; }
.int-title-style4 .int-ti-num .int-ti-l { font-size: 10px; font-weight: 600; opacity: .7; }

/* v7.7.3: Style 5 — Minimal (Title Only), bade news sites (NYTimes/BBC/Indian Express)
   jaisa. Jaan-boojh kar koi card-background, badge, shadow, ya icon nahi rakha — bas
   plain bold heading + halki border-top + chhota muted comment-count. Ye is design ki
   pehchaan hai: JITNA KAM utna hi "professional" — is style mein color-customization
   bhi jaan-boojh kar nahi di gayi (settings mein iska koi color-group nahi hai), kyunki
   iska poora point hi "no decoration" hai. */
.int-title-style5 {
    border-top: 1px solid #e5e7eb; padding-top: 16px; margin-bottom: 20px;
    font-family: var(--int-font);
}
.int-title-style5 .int-ti-post {
    font-size: 20px; font-weight: 800; line-height: 1.35; margin-bottom: 6px;
}
.int-title-style5 .int-ti-count-plain {
    font-size: 13px; font-weight: 500; color: #6b7280;
}

/* ── Sort bar ── */
/* ── Sort Bar ── */
.int-sort-bar { display:flex; align-items:center; gap:10px; margin-bottom:20px; flex-wrap:wrap; }
.int-sort-bar label { font-size:13px; color:var(--int-muted); font-weight:700; letter-spacing:.2px; }
.int-sort-select {
    padding:8px 32px 8px 14px; border:1.5px solid #e0e7ff;
    border-radius:30px; font-size:13px; font-family:var(--int-font);
    background:#f8f7ff; color:#1a1a2e; cursor:pointer; outline:none;
    transition:all .2s; font-weight:700;
    box-shadow:0 2px 8px rgba(99,102,241,.08);
    -webkit-appearance:none; appearance:none;
}
.int-sort-select:focus { border-color:#6366f1; box-shadow:0 0 0 3px rgba(99,102,241,.12); }
.int-sort-select:hover { border-color:#6366f1; }

/* ── Sort Pills (YouTube "Top / Newest" style) ── */
/* v7.7.4: bade news sites (NYTimes, BBC) sort-options ko chhota aur halka rakhte hain —
   na itna bada padding, na itna bold pure-black fill. Pehle padding:7px 16px, font-
   size:13px, font-weight:700, border-radius:20px (poora pill, app-chip jaisa) tha.
   Ab compact-professional look: chhota padding, chhota font-size, halka font-weight,
   kam-rounded corners. */
.int-sort-pill {
    padding:4px 11px; border:none; border-radius:6px;
    font-size:12px; font-family:var(--int-font); font-weight:600;
    background:#f0f0f0; color:#0f0f0f; cursor:pointer;
    transition:all .15s; outline:none;
}
.int-sort-pill:hover { background:#e5e5e5; }
.int-sort-pill.int-sort-pill-active { background:#0f0f0f; color:#fff; }
.int-sort-pill.int-sort-pill-active:hover { background:#272727; }

/* ── Reply Collapse toggle ("N replies ›") ── */
.int-reply-toggle {
    display:inline-flex !important; align-items:center; justify-content:center !important; gap:6px;
    /* v7.2.8 FIX: theme ke global "button{}" reset (display:block / width:100% jaisa)
       is button ko full-row-width tak stretch kar sakta tha — isse andar ka text/chevron
       center pe na hokar left-aligned dikhta tha (padding khud symmetric hone ke bawajood,
       kyunki bacha hua extra khaali space sirf right side pe jama ho jaata tha).
       width:fit-content + display/justify-content ko !important se lock karke ab yeh
       button hamesha apne content (text+chevron+padding) jitna hi chauda banega — isliye
       "1" ke left wala gap aur arrow ke right wala gap hamesha barabar rahega. */
    width:fit-content !important; max-width:100%;
    background:none; border:none; padding:8px 10px;
    /* v7.2.5 FIX: pehle margin 2px 0 6px -10px tha — top-gap (like/dislike row se) sirf
       ~2px thi jabki bottom-gap (divider line tak) ~6px, isliye button neeche wali line
       ke zyada paas aur upar wali row se zyada door dikhta tha (screenshot-confirmed).
       Ab top/bottom dono 6px equal hain — button ab like/dislike row aur niche wali
       divider line ke exact beech mein (vertically centered) baithta hai.
       v7.3.3: request pe button ko thoda NICHE, divider ke aur paas shift kiya — top-gap
       badha kar 10px, bottom-gap ghata kar 2px (total space wahi 12px hai, bas button
       neeche ki taraf shift ho gaya hai).
       v7.7.20 ASLI FIX: jo comments "N replies" toggle pe khatam hote hain (Rocky Bhai,
       Jaanu, Suhana Roy), unka divider-tak-ka-gap plain comments (Lovely Roy, Toni) se
       zyada bada tha — kyunki is button ka apna padding-bottom(8px) + margin-bottom(2px)
       = 10px EXTRA li ke apne 14px padding-bottom ke UPAR stack ho raha tha (total
       ~24px vs 14px). Margin-bottom ko -8px kar diya taaki button ka apna padding-bottom
       cancel ho jaaye — ab dono cases mein divider tak ka gap EXACT same (14px) hai. */
    /* v7.7.21 FINE-TUNE: debug overlay ne EXACT measure kiya — -8px se overshoot ho
       gaya tha (toggle-ending comments 12px, plain comments 15px — 3px chhota reh gaya).
       -5px try kiya tha, lekin cache-clear ke baad fresh data ne dikhaya ki gap abhi
       bhi 12px vs 15px hi hai (3px short) — -5px bhi kaafi nahi tha.
       v7.7.23: -2px kiya (3px aur kam negative) taaki dono exact 15px pe match ho
       jaayein, seedha measured data ke hisaab se. */
    margin:10px 0 -2px -10px;
    cursor:pointer; color:#1a1a2e; font-weight:700; text-align:center;
    /* v7.3.6 FIX: debug overlay ne pakda ki font-size hamesha 16px measure ho raha tha,
       12px nahi — matlab theme ka global button-reset (aksar mobile Safari ke "input
       focus par auto-zoom" ko rokne ke liye har button/input ko explicitly 16px font-size
       deta hai) hamare 12px ko override kar raha tha. !important laga kar lock kar diya.
       v7.3.8: size 12px se 15px badhaya (chevron ab isi font-size ke hisaab se em-based
       scale karega — neeche .int-reply-toggle-chevron dekho).
       v7.3.9: 15px se 14px kiya. */
    font-size:14px !important;
    font-family:var(--int-font);
    /* v7.7.6: teen options wale ek dropdown "Reply Toggle Button Style" se control hota
       hai (pehle do alag toggles the — "Pill-shape" aur "YouTube-style Plain Text Link",
       unhe combine kar diya taaki confusion na ho ki dono ek saath ON kya karenge).
       'pill' = 999px gol, 'rounded'/'link' = 8px (link mein radius vaise bhi matter
       nahi karta kyunki background hi nahi hota). */
    border-radius:999px;
    transition:background-color .15s;
    -webkit-tap-highlight-color:transparent; outline:none;
    /* v7.7.15: is UI-button (koi content/text nahi, sirf "N replies" toggle) ka
       text abhi bhi normal paragraph-text jaisa SELECTABLE tha — isliye long-press
       pe native text-selection-highlight lagta tha, jo washed-out/light dikhta tha
       (screenshot mein "Hide replies" text barely visible tha). Ye long-press ka
       "callout/context-menu" block nahi kar raha (wo cheez content pe chhedni nahi
       chahiye) — sirf itna keh raha hai ki YE CHHOTA BUTTON text ki tarah select
       nahi hona chahiye, jo har website ke buttons ke liye standard/normal hai. */
    -webkit-user-select:none; user-select:none;
}
/* v7.7.7: yahan bhi wahi neutral black/gray palette — pehle hover-bg purple tint
   rgba(99,102,241,.08) aur active-bg rgba(99,102,241,.16) tha, ab sort-pill jaisa
   halka gray (rgba(0,0,0,.05) / .08). Focus-ring bhi purple se neutral kiya.
   v7.7.16: yahan bhi ":hover" ko @media(hover:hover) mein daal diya, same wajah. */
@media (hover: hover) and (pointer: fine) {
    .int-reply-toggle:hover { color:#0f0f0f; background-color:rgba(0,0,0,.05); }
}
.int-reply-toggle:active { background-color:rgba(0,0,0,.08); }
.int-reply-toggle:focus { outline:none !important; background:rgba(0,0,0,.05) !important; box-shadow:none !important; }
.int-reply-toggle:focus-visible { box-shadow:0 0 0 2px rgba(0,0,0,.2); }
.int-reply-toggle .int-reply-toggle-chevron {
    /* v7.3.8: pehle fixed 15px tha (font-size se independent) — ab 1em hai, isliye
       chevron hamesha button ke font-size ke barabar hi bana rahega. Font-size aage
       kabhi bhi badla/ghataya jaaye, arrow apne aap us hisaab se scale ho jaayega,
       alag se dobara size set karne ki zaroorat nahi. */
    width:1em; height:1em; flex-shrink:0; transition:transform .2s;
    /* v7.7.18 NUCLEAR FIX: arrow SVG ka stroke="currentColor" hai — matlab jo bhi
       "color" is element ka resolve hota hai, wahi stroke bhi ban jaata hai. Text
       wala jaisa hi lock ab arrow ke liye bhi — hamesha #1a1a2e (dark), kisi bhi
       state (hover/active/focus/open) mein kabhi na badle. */
    color:#1a1a2e !important;
}
.int-reply-toggle .int-reply-toggle-text {
    /* v7.3.1 FIX: is span pe koi line-height set nahi thi, isliye ye page ke default
       line-height (~1.5-1.6) inherit kar raha tha — jabki chevron sirf 16px fixed height
       ka hai. Bade line-height ki wajah se text ka "line box" chevron se lamba ho jaata
       tha, aur align-items:center us poore lambe box ko center karta tha na ki sirf
       glyphs ko — isse text optically thoda NEECHE khisak jaata tha. line-height:1 se
       text ka box bhi chevron jitna hi tight ho gaya hai, ab dono sahi se same-row
       center pe align hote hain. */
    line-height:1; display:inline-flex; align-items:center; font-size:14px !important;
    /* v7.7.17 NUCLEAR FIX: kai baar try karne ke baad bhi kabhi-kabhi text washed-out/
       white dikh raha tha (expanded "Hide replies" state mein) — chahe wajah kuch bhi
       ho (OS overlay, koi aur state), ab is text-span ka color HAMESHA #1a1a2e
       (dark) LOCK kar diya hai, chahe button ki koi bhi state ho (hover/active/focus/
       open/kuch bhi) — !important se, taaki koi bhi cheez ise kabhi override na kar
       paaye. */
    color:#1a1a2e !important;
}
.int-reply-toggle.int-reply-toggle-open .int-reply-toggle-chevron { transform:rotate(180deg); }

/* v6.98: Jab reply-collapse expand hota hai, andar ke li.comment pehli baar visible
   hote hain — CSS ka entrance-animation (intSlideIn, avatar slide-up) is waqt browser
   dobara TRIGGER kar deta hai (display:none → visible hone pe animations restart hoti
   hain), jiski wajah se connector-line measurement thodi der ke liye galat (mid-animation)
   avatar-position capture kar leta tha — isse line "bada" dikhti thi, phir 0.4s baad
   khud sahi ho jaati thi jab avatar apni FINAL jagah settle hota tha. Fix: expand ke
   waqt is class se un li's ki entrance-animation temporarily disable kar dete hain,
   taaki avatar SEEDHA apni final position pe render ho — measurement pehli hi baar
   sahi aaye, koi visual "jump" na ho. */
.comment-list .children.int-no-entrance-anim li.comment { animation:none !important; }

/* ── Reply Collapse: collapsed-state mini elbow (v6.95, BLUE — YouTube jaisa) ──
   Sirf tab dikhta hai jab replies collapsed hain — avatar ke bottom se curve karte
   hue "N replies" toggle tak. left/top/width/height JS se (intCbRepositionCollapsedElbows)
   set hote hain, per-comment actual avatar/toggle position ke hisaab se. */
.int-reply-collapsed-elbow {
    position:absolute;
    border-left:1.16px solid #3b82f6;
    border-bottom:1.16px solid #3b82f6;
    border-bottom-left-radius:20px;
    pointer-events:none;
    z-index:0;
    display:none;
    /* v7.0.4: defensive baseline — agar kabhi JS ke height set karne se PEHLE hi
       display block ho jaaye (race condition), to yeh explicit 0 height ensure karta
       hai ki koi bhi galat/full-length line ek pal ke liye bhi na dikhe. JS turant
       apna computed height overwrite kar deta hai jab bhi yeh function chalta hai. */
    height:0;
    top:0;
}

/* ── Comment list ── */
.comment-list { margin:0 0 32px; padding:0; list-style:none; }
/* Prevent the "broken mid-reorder frame" flash: intApplySort()/intPaginate() move
   li.comment nodes around on page load (appendChild), which briefly puts the thread
   connector lines / avatars out of sync with the text while the DOM settles. Keep the
   list invisible (layout stays intact) until that JS finishes, then it reveals in one go. */
.comment-list { visibility:hidden; }
.comment-list.int-cb-ready { visibility:visible; }
.comment-list li.comment, .comment-list li.pingback {
    background:var(--int-white); border:1.5px solid var(--int-card-border, #ede9fe);
    border-radius:var(--int-card-radius, 18px); padding:20px 22px;
    margin-bottom:14px;
    box-shadow:var(--int-card-shadow, 0 2px 16px rgba(99,102,241,.06));
    transition:box-shadow .25s, border-color .25s, transform .25s;
    position:relative;
}
.comment-list li.comment {
    animation: intSlideIn .4s ease both;
    /* v5.92 FIX: .children (trunk line) apne parent li ka SIBLING hai (child nahi) — is
       wajah se agar li khud koi stacking context establish NAHI karta (position:static +
       z-index:auto), to uske andar wale avatar ka "z-index:2" sirf uske apne chhote wrapper
       ke andar hi kaam karta hai, poore li ko sibling .children (trunk, z-index:0) ke upar
       nahi le jaata — trunk baad mein DOM mein aata hai, isliye upar paint ho jaata hai,
       avatar ke through dikhta hai. Ab li khud apna stacking context banata hai (position +
       z-index), jo trunk (0) se zyada hai — isliye avatar (aur poora li content) hamesha
       trunk ke upar rahega, avatar ke "peeche" wala effect sirf avatar ki apni CENTER se
       NEECHE wale hisse tak hi simit rahega, jaisa chahiye tha. */
    position:relative;
    z-index:2;
}
@keyframes intSlideIn {
    from { opacity:0; transform:translateY(16px); }
    to   { opacity:1; transform:translateY(0); }
}
.comment-list li.comment:nth-child(1) { animation-delay: 0s; }
.comment-list li.comment:nth-child(2) { animation-delay: 0.07s; }
.comment-list li.comment:nth-child(3) { animation-delay: 0.14s; }
.comment-list li.comment:nth-child(4) { animation-delay: 0.21s; }
.comment-list li.comment:nth-child(5) { animation-delay: 0.28s; }
.comment-list li.comment:nth-child(6) { animation-delay: 0.35s; }
.comment-list li.comment:nth-child(7) { animation-delay: 0.42s; }
.comment-list li.comment:nth-child(8) { animation-delay: 0.49s; }
.comment-list li.comment:nth-child(9) { animation-delay: 0.56s; }
.comment-list li.comment:nth-child(10) { animation-delay: 0.63s; }
/* v7.7.14 ASLI ROOT-CAUSE FIX: "kisi bhi comment-block ko touch karo to woh upar
   uth jaata hai, doosra touch karo to pehla wapas neeche aur doosra upar" — iski
   wajah ye "transform:translateY(-2px)" tha jo ":hover" pe lagta tha. MOBILE/
   TOUCHSCREEN devices pe ":hover" tap ke baad "chipak" jaata hai (stick ho jaata
   hai) jab tak koi AUR element tap na ho — isliye yahi effect bilkul wahi
   behavior de raha tha jo report hua tha. Fix: "@media (hover:hover)" ke andar
   daal diya — ab sirf REAL mouse/pointer wale devices (desktop) pe apply hoga,
   touchscreen pe kabhi trigger hi nahi hoga chahe kitni baar tap karo. */
@media (hover: hover) and (pointer: fine) {
    .comment-list li.comment:hover {
        box-shadow:0 6px 28px rgba(99,102,241,.13);
        border-color:#c4b5fd;
        transform:translateY(-2px);    }
}
.comment-list .children {
    list-style:none;
    /* !important zaroori hai: theme khud bhi `.children` class (WP ka hi generic naam) pe
       apna CSS laga sakta hai, jo hamare indent ke upar EXTRA space jod deta tha — isi wajah
       se Meghna/Black Python/Red Belloon jaisi nested replies zaroorat se zyada right mein
       chali jaati thi, bawajood iske ki neeche ka formula khud chhota hai. Ab hamara indent
       hamesha jeetega, chahe theme kuch bhi try kare. */
    padding-left:30px!important;
    margin-left:0!important;
    margin-right:0!important;
    margin-top:12px;
    /* v7.7.26 ASLI FIX: user ne screenshot se pakda tha ki toggle-ending comment (Rocky
       Bhai, Jaanu) ke baad wala agla comment (Jaanu, Lovely Roy) neeche dhakela hua tha.
       v7.7.24 ne is `.children` (jo khud li.comment ka SIBLING hai) ka margin-TOP theek
       kiya, lekin margin-BOTTOM kabhi explicitly set hi nahi kiya tha — isliye theme ka
       default typography reset (`ul/ol { margin-bottom: 1.5em }`, jo 15px base font-size
       pe 22.5px baithta hai) hamesha leak ho raha tha, chahe `.children` collapsed
       (height:0) hi kyun na ho — margin box ke bahar ka property hai, height:0 use clip
       nahi karta. RAW COMPUTED-STYLE DUMP se pakka confirm hua: margin-top:0px (sahi)
       lekin margin-bottom:22.5px (leak) — bilkul measured 23px top-gap se match. Fix:
       margin-bottom ko explicitly 0 force kar diya. */
    margin-bottom:0 !important;
    position:relative;
}
/* v7.0.8 FIX: Reply-Collapse expand/collapse pehle instant tha — JS `intCbSetHidden()`
   seedha `display:none!important` <-> `display:''` switch karta tha, jisme browser koi
   transition hi nahi de sakta (display animatable property nahi hai), isliye thread
   ekdum se "jump" karke appear/disappear hota tha. Ab isके liye alag function
   (`intCbToggleChildren`, JS section mein) hai — `intCbSetHidden()` khud UNCHANGED
   chhoda gaya hai (Load More aur Pagination abhi bhi usi purane instant-hide ko use
   karte hain, jaisa pehle tha, kyunki wahan animation ki koi zaroorat/request nahi
   thi). Animation sirf "Enable Animations" setting ON hone par lagti hai — OFF hone
   par yeh instant hi rehta hai.
   NOTE: `overflow:hidden` sirf collapsed (resting) state mein hi lagaya hai (permanent
   nahi) — warna thread ke aakhri reply ka "⋮ Report" dropdown menu neeche se cut ho
   jaata.
   v7.5.4 FIX: pehle yahan `max-height .45s` transition bhi tha (JS `overflow:hidden`
   ke saath max-height 0→target animate karta tha — ek "slide open" clip-reveal). Yeh
   clip apni nature se hi TOP-SE-BOTTOM progressive reveal karta hai, isliye ek LAMBI
   thread ki trunk-connector-line "dheere-dheere grow" hoti hui dikhti thi (chhoti
   thread ki line box ke top ke paas hi hone ki wajah se instant lagti thi — asymmetry
   yehi thi). Ab expand sirf OPACITY se fade hota hai (max-height JS mein turant/instant
   set hoti hai, koi clip-transition nahi) — opacity fade UNIFORM hota hai (poora box
   ek saath fade), isliye trunk/elbow line — chhoti ho ya lambi — hamesha EK SAATH
   fade-in hongi, koi progressive uncover kabhi nahi hoga. */
.comment-list .children.int-rc-collapsed {
    max-height:0!important;
    opacity:0;
    overflow:hidden;
    pointer-events:none;
    /* v7.7.24 REAL FIX: `.children` (jab collapsed hai) khud SIBLING-of-li hai (li ke
       ANDAR nahi), aur base `.comment-list .children` rule ke `margin-top:12px` ko
       `max-height:0` + `overflow:hidden` COVER nahi karte — margin BAHAR ka property
       hai, isliye woh clip nahi hota, box collapse hone ke baad bhi apna 12px margin-top
       force karta rehta hai. Matlab jab bhi koi "N replies" toggle-ending comment ke
       baad wala .children collapsed state mein hota hai (default), uska invisible
       12px margin-top us comment ke divider aur AGLE comment (jaise Jaanu, Lovely Roy)
       ke beech mein chup ke extra gap jod deta tha — bilkul wahi bug jo screenshot mein
       dikhaya gaya tha. Pichla saara fine-tuning (.int-reply-toggle margin-bottom) is
       gap ko CHHOOTA hi nahi tha, kyunki woh toggle-ending comment ke apne ANDAR wale
       gap ko target kar raha tha, is BAAHAR/sibling wale hidden margin ko nahi.
       Fix: collapsed state mein margin-top ko 0 force kar diya. */
    margin-top:0 !important;
}
.comment-list .children { transition:opacity .3s ease; }
@media (prefers-reduced-motion: reduce) {
    .comment-list .children { transition:none!important; }
}
.comment-list .children li.comment { background:#faf8ff; border-color:#ede9fe; margin-left:0!important; }
/* Thread Connector Line — YouTube-style curved elbow joining each reply back to the trunk.
   Trunk aligns to the exact horizontal center of the PARENT's own avatar (not a generic
   gutter position), and each elbow reaches the exact center of its own reply's avatar —
   matching the YouTube app's own reply-thread look. Geometry is written with calc() against
   --int-avatar-size (not a baked-in pixel) so it stays correctly centered even where avatar
   size changes responsively (e.g. the 480px breakpoint forces a smaller avatar).
   UNIFIED SINGLE LINE (RED does the full job now — pehle yeh do tukdon mein tha: ek chhota
   BLACK stub parent ke avatar se list ke top tak, aur ek alag RED trunk list ke andar — do
   alag elements, do alag anchor-math, jo kabhi-kabhi visually disconnect/missing ho jaata
   tha. Ab BLACK poora hata diya gaya hai — sirf yeh EK element hai, aur iski top/height
   dono seedha JS se, PARENT ke avatar-center se LAST REPLY ke avatar-center tak, ek hi
   measurement se aati hain (--tc-full-top / --tc-full-height, set intCbAlignConnectors()
   se) — hamesha wahi reliable "avatar ka apna center" anchor, chahe list kitni bhi lambi ho.
   Only the curved elbow branching into each avatar stays per-item. */
.comment-list .children::before {
    /* v7.5.0 REDESIGN: is pseudo-element ka poora kaam ab UNIFIED SVG (`.int-tc-svg`,
       ek hi <svg> per thread, intCbAlignConnectors() se) ne le liya hai — SINGLE
       measurement pass, SINGLE reveal, do alag cheezein sync karne ki zaroorat hi
       khatam. `content:none` isko permanently inert kar deta hai (baaki saari
       properties yahan sirf HISTORY/rollback context ke liye chhodi hain). Dekho:
       intCbAlignConnectors() mein "v7.5.0" wala comment, aur .int-tc-svg CSS neeche. */
    content:none;
    position:absolute;
    top:var(--tc-full-top, 9px);
    height:var(--tc-full-height, calc(100% - 9px - 162px));
    /* v7.1.7 FIX: JS ke exact measurement (--tc-full-top/--tc-full-height) aane se
       PEHLE, yeh fallback "calc(100% - 9px - 162px)" use hota tha — jo ek lambe reply-
       thread (jaise "12 replies") ke liye poore .children container ki height ke
       hisaab se hota hai, matlab bahut lamba/galat line ban jaata tha jo neeche ke
       bilkul alag comments ke upar se guzarta dikhta tha (screenshot-confirmed —
       page-load ke turant baad, JS chalne se pehle, yeh badi red/green line saaf
       dikhti thi). JS ke aane ke baad line sahi ho jaati thi, lekin beech ka woh
       "flash of wrong line" visible tha. Fix: ab line by-default INVISIBLE (opacity:0)
       rehti hai, aur sirf JS ke sahi measurement set karne ke BAAD hi (`.int-tc-measured`
       class lagne par, neeche dekho) fade-in hoti hai — is se galat/lambi line kabhi
       dikhti hi nahi, seedha sahi position pe smoothly aati hai. */
    opacity:0;
    /* Same technique (border-left) as the elbow below — a background-box version was
       tried earlier for independent left/right tuning, but browsers round border-width and
       background-width sub-pixel values differently, so the trunk came out visibly thicker
       than the elbow (screenshot-confirmed). Using border-left everywhere now guarantees the
       exact same rendering path, so thickness matches pixel-for-pixel at every join.
       NO extra manual offset here (no more "-0.92px" etc.) — trunk-x aur elbow-left dono
       hi mathematically wahi ek absolute avatar-center px resolve karte hain (bas alag
       containing-block ke against measure hote hain — trunk apne .children ul ke against,
       elbow apni li ke against — lekin li khud ul ke andar hai bina kisi extra offset ke,
       isliye dono ka absolute screen position hamesha same aata hai). Isi wajah se koi bhi
       manual pixel-patch (jo pehle alag-alag lagayi gayi thi trunk aur elbow pe) in dono
       ko OUT OF SYNC kar deti thi — "double-elbow" jaisa dikhta tha jahan trunk elbow se
       thoda aage/side nikal jaata tha. Ab dono bilkul ek hi jagah milte hain, har depth pe. */
    left:var(--tc-trunk-x, calc(var(--int-avatar-size, 36px) / 2));
    width:0;
    border-left:1.16px solid #ff0000; /* trunk = RED, ab akela hi poora kaam karta hai */
    pointer-events:none;
    z-index:0;
}
.comment-list .children.int-tc-measured::before {
    opacity:1;
    transition: opacity .15s ease;
}
/* Level 2/3/4 ke liye pehle yahan ek alag "+8px" override tha — usse trunk apne elbow se
   ~7px out-of-sync ho jaata tha (double-elbow wala visual bug). Ab hata diya hai — upar
   wala base rule hi har depth pe sahi kaam karta hai, kisi alag override ki zaroorat nahi. */
.comment-list .children > li.comment { position:relative; }
/* Reply avatar ko thoda right shift karte hain — sirf visual shift (position:relative + left),
   layout flow disturb nahi hota (row/text apni jagah nahi hilte, sirf avatar render-time
   thoda side khisak jaata hai). Yeh EK FLAT value hai, HAR depth pe same (8px) — pehle isse
   cumulative (depth * 8px) rakha gaya tha taaki har level ka gap consistent dikhe, lekin
   usse level-2/3+ pe avatar bahut zyada right chala jaata tha aur narrow mobile width par
   avatar text/username ke upar overlap karke layout bigaad deta tha (jo report hua). Ab
   avatar sirf ek chhota FIXED offset leta hai chahe depth kitni bhi ho — safe, kabhi bhi
   itna bada nahi hoga ki row misalign kare. "Same gap har level pe" wala kaam ab avatar
   shift se nahi, balki neeche di JS elbow-width formula ke ek flat bonus se hota hai
   (dekho: intCbAlignConnectors, +14 ko +22 kiya) — wahan har level pe eksaman +8px extra
   reach milta hai bina avatar ko aur zyada khiskaye. */
/* v6.21 REAL FIX: pichla fix (.int-comment-header { gap:20px }) kaam nahi kar raha
   tha — us naam ki koi class markup mein hai hi nahi (teeno styles mein gap ek
   UNCLASSED wrapper div pe INLINE style se aata hai: style="gap:14px" / "gap:12px").
   Class na hone ki wajah se wo parent div CSS se target hi nahi ho sakta. Ab avatar
   ki apni margin-right badha ke fix kiya hai — flex gap aur item margin dono
   visually same kaam karte hain, aur ye avatar ke apne box-model pe hai isliye
   reliably kaam karega. */
/* v6.22: pehle sabhi depths (2/3/4) ko flat margin-right:8px diya tha — lekin har
   level ka avatar size alag hai (88%/80%/72%), isliye gap bhi usi hisaab se
   proportional hona chahiye, flat nahi. Formula: avatar ke actual size ka 20% —
   jo 100% size (level 1) par ~8px deta hai, aur chhote avatars ke saath khud-ba-khud
   chhota hota jaata hai. Admin jo bhi General tab mein avatar size set kare, ye
   formula usi ke hisaab se automatically scale hoga (hardcoded px nahi hai). */
/* v6.23 FIX: 0.2 ratio se gap zyada ho gaya tha (screenshot-confirmed) — 0.1 kar diya. */
.comment-list li.int-depth-2 .int-tc-avatar { left:8px; margin-right:5px; } /* margin = gap_px - 6, taaki visual gap slider ke number se exactly match kare (left:8px ka offset compensate karne ke liye) */
.comment-list li.int-depth-3 .int-tc-avatar { left:8px; margin-right:3px; }
/* "Reply Size Reduction" (admin toggle) — YouTube-style: deeper nested replies get
   progressively smaller avatar + text. Do fayde: (1) visual hierarchy — root comment
   prominent, replies subtly smaller, jaisa YouTube khud karta hai; (2) mobile fit — har
   depth level pehle se ~30px padding-left "khaata" hai, isliye content ko chhota karna
   deep levels (3,4) pe zyada breathing room deta hai, cramped nahi lagta.
   Level 1 (root) bilkul untouched — full size, jo bhi admin ne Avatar Size / Font Size
   settings mein set kiya hai wahi.
   Avatar ka apna koi CSS variable nahi hai (hamesha admin ki Avatar Size se seedha inline
   px), isliye yahan explicit !important override chahiye. Font-size ke liye CSS variables
   (--int-yt-font-size-*, --int-prem-font-size-*) pehle se hain — unhe yahan ek zyada
   specific selector (li.int-depth-N) pe redefine karna hi kaafi hai, cascade khud sambhal
   leta hai, !important ki zaroorat nahi. */
.comment-list li.int-depth-2 .int-tc-avatar { width:calc(var(--int-avatar-size, 36px) * 0.88) !important; height:calc(var(--int-avatar-size, 36px) * 0.88) !important; }
.comment-list li.int-depth-3 .int-tc-avatar { width:calc(var(--int-avatar-size, 36px) * 0.80) !important; height:calc(var(--int-avatar-size, 36px) * 0.80) !important; }
/* Andar wala fallback-letter box aur gravatar photo — dono PHP se hamesha OUTER circle
   ke FULL/original px size mein hi likhe jaate hain (inline style), depth se koi farak
   nahi padta unpe — isliye letter overflow/off-center ho jaata tha. Fix: inhe bhi outer
   circle jaisa hi width/height + proportional font-size diya.
   ZAROORI: selector sirf ".int-tc-avatar .int-avatar-fallback/img" hai (".int-tc-avatar"
   ke ANDAR wala hi), bare ".int-avatar-fallback"/".int-avatar-img" nahi — kyunki ye hi
   class names ek DOOSRE, bilkul alag chhote "heart badge" avatar (.int-heart-avatar,
   "Loved by" wala icon) mein bhi reuse hote hain, jo isi li ke andar hi hota hai. Bare
   class se match karne par wo heart-avatar bhi galti se shrink ho jaata (jo pehle hua
   tha) — is scoped selector se sirf main comment avatar hi affect hota hai. */
.comment-list li.int-depth-2 .int-tc-avatar .int-avatar-fallback,
.comment-list li.int-depth-2 .int-tc-avatar .int-avatar-img { width:calc(var(--int-avatar-size, 36px) * 0.88) !important; height:calc(var(--int-avatar-size, 36px) * 0.88) !important; }
.comment-list li.int-depth-3 .int-tc-avatar .int-avatar-fallback,
.comment-list li.int-depth-3 .int-tc-avatar .int-avatar-img { width:calc(var(--int-avatar-size, 36px) * 0.80) !important; height:calc(var(--int-avatar-size, 36px) * 0.80) !important; }
.comment-list li.int-yt-comment-item.int-depth-2 .int-tc-avatar .int-avatar-fallback { font-size:calc(16px * 0.88) !important; }
.comment-list li.int-yt-comment-item.int-depth-3 .int-tc-avatar .int-avatar-fallback { font-size:calc(16px * 0.80) !important; }
.comment-list li.int-depth-2 {
    --int-yt-font-size-username: 14px;
    --int-yt-font-size-text:     13px;
}
.comment-list li.int-depth-3 {
    --int-yt-font-size-username: 13px;
    --int-yt-font-size-text:     12px;
}
/* BLACK stub yahan se hata diya gaya hai — RED trunk (upar) ab akela hi, parent avatar se
   last reply ke avatar tak, poora kaam karta hai. */
.comment-list .children > li.comment::before {
    /* v7.5.0 REDESIGN: yeh bhi ab UNIFIED SVG (.int-tc-svg) se replace ho chuka hai —
       dekho upar wale trunk rule ka v7.5.0 comment. content:none = permanently inert. */
    content:none;
    position:absolute;
    /* v6.15: pehle top:0 tha (li ke bilkul top se elbow shuru hoti thi). Ab Sony ke
       kehne par elbow apni li ke top edge se 8px UPAR se shuru hoti hai — endpoint
       (avatar CENTER) same rahe isliye height mein bhi +8px add kiya hai. */
    top:-16px;
    left:var(--tc-elbow-left, -12px);
    width:var(--tc-elbow-width, calc(var(--int-avatar-size, 36px) / 2 + 12px));
    height:var(--tc-y, calc(30px + var(--int-avatar-size, 36px) / 2)); /* avatar ki CENTER tak (v5.91 revert) */
    border-left:1.16px solid #00b300; /* elbow = GREEN */
    border-bottom:1.16px solid #00b300; /* elbow = GREEN */
    border-bottom-left-radius:18px;
    pointer-events:none;
    z-index:1; /* sits above trunk (.children::before, z-index:0) — same color, seamless join */
    /* v7.1.8 FIX: pehle elbow ka koi opacity-gate nahi tha — trunk (.children::before)
       to fallback ke through avval invisible rehta tha aur JS ke measurement ke baad hi
       fade-in hota tha (`.int-tc-measured` via intCbAlignConnectors), lekin elbow shuru
       se hi apne FALLBACK left/width ke saath turant visible ho jaata tha, phir JS ke
       exact numbers aane par snap karke sahi jagah "jump" karta tha. Isi wajah se reply
       expand karne par red trunk aur green elbow do ALAG times par load/settle hote the
       (YouTube jaisa ek-saath nahi). Fix: elbow ab bhi trunk jaisa hi default
       opacity:0 rehta hai, aur sirf JS ke exact --tc-elbow-left/--tc-elbow-width set
       karne ke turant BAAD (neeche `.int-tc-measured` class lagne par) fade-in hota
       hai — same class, same 0.15s fade duration jo trunk pe already hai, isliye dono
       ab ek hi frame mein measure hote hain aur ek hi saath (synchronized) nazar aate
       hain, bilkul YouTube ki tarah. */
    opacity:0;
}
.comment-list .children > li.comment.int-tc-measured::before {
    opacity:1;
    transition: opacity .15s ease;
}
/* ── v7.5.0 REDESIGN: UNIFIED SVG connector ──
   Ab tak trunk (red, .children::before) aur elbow (green, li.comment::before) DO
   ALAG pseudo-elements the — dono apni-apni geometry independently measure aur
   independently reveal karte the. Isi split ki wajah se v7.1.7 se v7.2.3 tak
   itni saari "sync/timing" bugs aayi (reveal-mismatch, chhota→bada snap,
   oscillation) — do alag cheezein hamesha sync mein rakhna structurally fragile
   hai. Ab is poori family ki jagah ek hi <svg class="int-tc-svg"> hai (JS —
   intCbAlignConnectors() — se create/update hoti hai), jisme sirf DO <path>
   hain (trunk aur elbow) — lekin dono EK HI measurement-pass se, EK HI baar
   mein banti/reveal hoti hain. Ab "do cheezein sync karna" ka sawaal hi nahi
   uthta, kyunki hai hi ek system. */
.int-tc-svg {
    position:absolute;
    left:0;
    top:0;
    width:1px; /* actual drawing SVG viewport ke bahar bhi ja sakti hai (overflow:visible) */
    height:1px;
    overflow:visible;
    pointer-events:none;
    z-index:0; /* avatar (inline z-index:2) hamesha isse upar rehta hai, jaisa pehle tha */
    opacity:0;
}
.int-tc-svg.int-tc-measured {
    /* v7.5.1 FIX: pehle yahan `transition: opacity .15s ease;` tha — jab reply-count
       zyada ho (jaise "12 replies", ~1800px lambi trunk-line) to yeh fade lambi
       line ko "dheere-dheere load ho rahi" jaisa dikhata tha, aur patli/chhoti
       elbow line ko "size grow ho rahi" jaisa. Underlying data-bug (jiske liye
       yeh fade v7.1.7 mein zaroori tha, taaki "wrong→right" snap soften ho)
       ab fix ho chuka hai (geometry-settled gate — dekho intCbGeometrySettled)
       — dono debug-dumps confirm karte hain ki reveal ke baad geometry KABHI
       nahi badalti. Isliye fade ki koi zaroorat nahi bachi: transition hata
       diya, ab line seedha "fatak se" (instant) apni FINAL position pe appear
       hoti hai, bilkul YouTube jaisa. */
    opacity:1;
}
.int-tc-trunk-path { fill:none; stroke:#ff0000; stroke-width:1.16px; } /* trunk = RED */
.int-tc-elbow-path { fill:none; stroke:#00b300; stroke-width:1.16px; stroke-linecap:round; } /* elbow = GREEN */
/* Level 3/4 ke liye pehle yahan elbow ke left mein ek alag "+8px" tha, jo trunk ke saath
   out-of-sync tha. Ab hata diya hai — base elbow rule (upar, no offset) hi trunk ke exact
   same anchor use karta hai har depth pe, isliye extra override ki zaroorat nahi. */
.comment-list .children > li.comment:first-child::before {
    top:-28px;
    height:var(--tc-y-first, calc(42px + var(--int-avatar-size, 36px) / 2));
}
/* Trim the trunk back to a stop right at the last reply's avatar (matches the original look)
   by painting over the leftover stretch of line below it with the page/card background.
   Margin kept generous (not a tight 1.5px fit) since sub-pixel rounding of the thin line can
   nudge it a pixel or two either way — a tight mask leaves a faint stray tip visible. */
.comment-list .children > li.comment:last-child::after {
    content:'';
    position:absolute;
    top:var(--tc-y-mask, calc(13px + var(--int-avatar-size, 36px) / 2));
    bottom:0;
    left:-18px;
    width:12px;
    background:var(--int-white, #fff);
    pointer-events:none;
    z-index:1;
}

/* ── Comment header ── */
.int-comment-header { display:flex; align-items:flex-start; gap:12px; margin-bottom:12px; }
.int-avatar img, .comment-author img {
    width:var(--int-avatar-size, 44px)!important; height:var(--int-avatar-size, 44px)!important; border-radius:50%!important;
    object-fit:cover; flex-shrink:0;
    border:2px solid #e5e7eb!important;
    background:none!important;
    transition:transform .2s;}
/* v7.7.14: yahi sticky-hover-on-mobile fix, avatar-zoom effect ke liye bhi. */
@media (hover: hover) and (pointer: fine) {
    .comment-list li.comment:hover .int-avatar img { transform:scale(1.1); }
}
.int-comment-meta { flex:1; min-width:0; }
.int-author-name, .comment-author .fn {
    font-size:14px; font-weight:800; color:#111827; display:block;
    background:linear-gradient(135deg,#111827,#374151);
    -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text;
}
.int-author-name a, .comment-author .fn a {
    background:linear-gradient(135deg,#111827,#374151);
    -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text;
    text-decoration:none!important;
}
.int-comment-date, .comment-metadata a {
    font-size:11px; color:#9ca3af; text-decoration:none; display:block; margin-top:3px; font-weight:600;
}
.int-comment-date:hover, .comment-metadata a:hover { color:var(--int-focus); }

/* ── Star display ── */
.int-comment-rating { margin-bottom:8px; font-size:16px; letter-spacing:1px; }
.int-star-filled { color:#f59e0b; }
.int-star-empty  { color:#e5e7eb; }

/* ── Comment body ── */
.comment-content p, .int-comment-body p {
    font-size:var(--int-font-size, 14px); line-height:1.9; color:#374151; margin:0 0 8px; word-break:break-word;
}
.comment-content p:last-child { margin-bottom:0; }

/* ── Max lines clamp ── */
.int-comment-clamp {
    display:-webkit-box; -webkit-box-orient:vertical;
    -webkit-line-clamp:5;
    overflow:hidden;
}
.int-comment-clamp.int-expanded {
    display:block; -webkit-line-clamp:unset; overflow:visible;
}

/* ── Read More ── */
.int-read-more-link {
    font-size:12px; font-weight:700; color:#6366f1;
    cursor:pointer; border:none; background:none; padding:4px 0; margin-top:4px; display:inline-block;
    letter-spacing:.2px;
    transition:opacity .2s;}
.int-read-more-link:hover { opacity:.75; }

/* ── Like / Dislike ── */
/* v7.7.0 NOTE: is rule ke "gap:8px" aur "margin-top:14px" hamesha DEAD hain — line 274
   wali "!important" rule unhe hamesha jeet jaati hai. Baaki teen (display, align-items,
   flex-wrap) zinda/zaroori hain — asli row-layout yahi se aata hai, isliye pura rule
   hataya nahi ja sakta. Agar kabhi gap/margin-top yahan se change karo, koi asar nahi
   padega — sirf line 274 hi maayne rakhti hai. */
.int-like-bar { display:flex; align-items:center; gap:8px; margin-top:14px; flex-wrap:wrap; }
.int-like-btn {
    display:inline-flex; align-items:center; gap:5px; padding:5px 14px;
    border:1.5px solid #e0e7ff; border-radius:30px;
    background:#f8f7ff; font-size:12px; font-weight:700;
    cursor:pointer; transition:all .2s; color:#6b7280;
    user-select:none; font-family:var(--int-font);
}
.int-like-btn:hover { border-color:#6366f1; color:#6366f1; background:#ede9fe; }
.int-like-btn.int-liked    { border-color:#22c55e; color:#16a34a; background:#f0fdf4; }
.int-like-btn.int-disliked { border-color:#ef4444; color:#dc2626; background:#fef2f2; }
.int-like-btn svg { width:13px; height:13px; flex-shrink:0; }
.int-like-btn:active { transform:scale(.94); }

/* ── Reply ── */
.comment-reply-link, .reply a {
    display:inline-flex!important; align-items:center; gap:6px; padding:6px 14px!important;
    background:#f8f7ff!important; border:1.5px solid #e0e7ff!important;
    color:#6366f1!important; border-radius:30px!important; font-size:12px!important;
    text-decoration:none!important; font-weight:700; transition:all .2s; margin-top:10px;
    font-family:var(--int-font)!important;
}
.comment-reply-link:hover, .reply a:hover {
    background:linear-gradient(135deg,#6366f1,#a855f7)!important;
    border-color:#6366f1!important; color:#fff!important;
    transform:translateY(-1px);}

/* ── Pagination ── */
.int-pagination { display:flex; justify-content:center; align-items:center; gap:6px; margin:28px 0; flex-wrap:wrap; }
.int-page-btn {
    min-width:36px; height:36px; padding:0 12px;
    border:1.5px solid #e0e7ff; border-radius:10px;
    background:#fff; color:#6b7280; font-size:13px; font-weight:700;
    cursor:pointer; transition:all .2s; display:inline-flex; align-items:center; justify-content:center;
    font-family:var(--int-font); box-shadow:0 1px 4px rgba(99,102,241,.06);
}
.int-page-btn:hover {
    border-color:#6366f1; color:#6366f1; background:#f5f3ff;
    transform:translateY(-2px); box-shadow:0 4px 12px rgba(99,102,241,.15);}
.int-page-btn.active {
    background:linear-gradient(135deg,#6366f1,#a855f7);
    border-color:transparent; color:#fff;
    box-shadow:0 4px 14px rgba(99,102,241,.35);
    transform:translateY(-1px);}
.int-page-btn:disabled { opacity:.35; cursor:not-allowed; transform:none; box-shadow:none; }

/* ── Comment Toggle Button ── */
/* ── Comment Toggle Button ── */
/* ── Toggle Button Animations ── */
@keyframes intPulseGlow {
    0%   { box-shadow: 0 4px 20px rgba(99,102,241,0.35); }
    50%  { box-shadow: 0 4px 30px rgba(99,102,241,0.7), 0 0 0 6px rgba(99,102,241,0.1); }
    100% { box-shadow: 0 4px 20px rgba(99,102,241,0.35); }
}
@keyframes intArrowBounce {
    0%, 100% { transform: translateY(0); }
    50%       { transform: translateY(3px); }
}
@keyframes intShimmer {
    0%   { left: -100%; }
    100% { left: 150%; }
}

/* ── Leave a Comment Button Color ── */
:root {
    --int-toggle-btn-bg: linear-gradient(135deg, #7f1d1d, #dc2626);
    --int-toggle-btn-shadow: rgba(220,38,38,0.35);
    --int-toggle-btn-shadow-hover: rgba(220,38,38,0.55);
}

.int-comment-toggle-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: auto;
    max-width: 100%;
    margin-left: auto;
    margin-right: auto;
    gap: 18px;
    padding: 11px 28px;
    background: var(--int-toggle-btn-bg);
    color: #fff;
    border: none;
    border-radius: 50px;
    font-size: 14px;
    line-height: 1;
    font-weight: 700;
    font-family: var(--int-font);
    cursor: pointer;
    box-shadow: 0 4px 20px var(--int-toggle-btn-shadow);
    transition: all .3s;
    margin-top: 0;
    position: relative;
    overflow: hidden;
    letter-spacing: .2px;
    box-sizing: border-box;
    animation: intPulseGlow 2.5s ease-in-out infinite;
}
/* Shimmer sweep */
.int-comment-toggle-btn::before {
    content: '';
    position: absolute;
    top: 0; left: -100%;
    width: 60%; height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.12), transparent);
    animation: intShimmer 3s ease-in-out infinite;
    pointer-events: none;
}
.int-comment-toggle-btn::after {
    content: '';
    position: absolute;
    inset: 0;
    background: rgba(255,255,255,0);
    transition: background .2s;
}
.int-comment-toggle-btn:hover {
    transform: translateY(-2px);
    animation: none;
    box-shadow: 0 8px 28px var(--int-toggle-btn-shadow-hover);
}
.int-comment-toggle-btn:hover::after { background: rgba(255,255,255,.08); }
.int-comment-toggle-btn:active { transform: translateY(0); }

/* Arrow bounce animation */
.int-toggle-arrow {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px; height: 24px;
    background: rgba(255,255,255,0.12);
    border-radius: 50%;
    font-size: 12px;
    flex-shrink: 0;
    animation: intArrowBounce 1.2s ease-in-out infinite;
    transition: transform .3s;
}
.int-comment-toggle-btn.int-open .int-toggle-arrow {
    transform: rotate(180deg);
    animation: none;
}
.int-comment-toggle-btn svg {
    width: 20px; height: 20px; flex-shrink: 0;
    transition: transform .3s;
}
.int-comment-toggle-btn.int-open svg { transform: rotate(180deg); }
.int-comment-toggle-btn .int-toggle-count {
    background: rgba(255,255,255,.25);
    border-radius: 20px;
    padding: 2px 10px;
    font-size: 13px;
    font-weight: 700;
    margin-left: 2px;
}

/* ── Collapsible comment respond wrapper ── */
.int-respond-wrapper {
    overflow: hidden;
    max-height: 0;
    width: 100%;
    box-sizing: border-box;
    margin-left: 0 !important;
    margin-right: 0 !important;
    transition: max-height .5s cubic-bezier(0.4, 0, 0.2, 1), opacity .35s ease, margin .4s ease, padding .4s ease;
    opacity: 0;
    margin: 0 !important;
    padding: 0 !important;
}
.int-respond-wrapper.int-open {
    max-height: 2000px;
    opacity: 1;
    margin-top: 16px !important;
}
.int-respond-wrapper .comment-respond {
    margin-top: 0 !important;
    width: 100% !important;
    box-sizing: border-box !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    left: 0 !important;
    transform: none !important;
}

/* ── Form wrapper ── */
.comment-respond {
    /* v6.05 FIX: reply box jab kisi nested reply ke turant baad (.children ke andar)
       move hota hai, connector-line ka RED trunk (.children::before, z-index:0) usi
       stacking context mein render hota hai — box ka background pehle "transparent"
       tha, isliye trunk line box ke UPAR se bhi dikhti thi (bleed-through bug).
       Ab box ko avatar jaisa hi ek opaque "card" bana diya hai (solid background +
       apna z-index avatar ke z-index:2 se bhi upar) — isse trunk/elbow lines box ke
       bilkul peeche chhup jaati hain, sirf card ke UPAR/NEECHE khaali gap mein
       dikhti hain — bade sites (YouTube/Facebook) jaisa hi seamless look. */
    position:relative; width:100%; background:var(--int-white, #fff);
    border-radius:var(--int-r-lg, 16px); padding:18px 12px;
    border:1.5px solid var(--int-border, #e5e7eb); box-shadow:0 6px 24px rgba(0,0,0,0.048);
    z-index:3; /* trunk(0) aur elbow(1) dono se upar, avatar(2) ke barabar/upar */
    margin-top:32px;
    animation: intSlideIn .5s ease .1s both;}

/* ── Form title ── */
/* WordPress/theme ka duplicate default reply-title hide rakho (hamara apna heading alag class/id use karta hai, isliye safe hai) */
.comment-reply-title,
#reply-title {
    display: none !important;
}

/* ── Our own "Leave a Comment" heading — the actual visible title ── */
.int-comment-reply-title {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 22px;
    font-weight: 800;
    color: #1a1a2e;
    margin: 0 0 4px;
    font-family: var(--int-font);
}
.int-comment-reply-title svg.int-icon {
    width: 22px !important;
    height: 22px !important;
    flex-shrink: 0;
    display: inline-block !important;
    stroke: #1a1a2e !important;
    color: #1a1a2e !important;
}

/* ── Decorative dots under "Leave a Comment" heading ── */
.int-title-dots {
    display: flex;
    gap: 4px;
    margin: 0 0 13px;
}
.int-title-dots span {
    width: 3px;
    height: 3px;
    border-radius: 50%;
    background: #ec4899;
    display: inline-block;
}

/* ── Custom Reply Banner ── */
#int-custom-reply-banner {
    display: none;
    align-items: center;
    justify-content: space-between;
    flex-wrap: nowrap;
    gap: 10px;
    /* v6.11: background/border/text colors ab General tab ke naye "Reply Box Color
       Combination" dropdown (7 professional presets + Custom) se aate hain — pehle
       yahan hardcoded #f5f3ff/#ddd6fe tha. Corner radius bhi ab left/right alag-alag
       sliders se control hota hai (pehle single hardcoded 14px tha).
       v6.26: Banner Style — "Flat" (thin border, subtle shadow, asymmetric corners)
       ya "Card" (border-less, deep elevated shadow, symmetric corners) — dono hi
       admin ke "Banner Style" toggle se yahan compute ho rahe hain.
       v6.29: Shadow ka spread/blur ab "Shadow Size" slider se bhi control hota
       hai (4-100px) — dono styles (Flat/Card) ek hi slider use karte hain. */
    background: #f8fafc;
        border: none;
    border-radius: 40px;
    box-shadow: 0 0 4px rgba(0,0,0,0.35);
    padding: 14px 18px;
        margin-bottom: 15px;
    font-family: var(--int-font);
}
#int-custom-reply-banner .int-reply-banner-text {
    font-size: 14px;
    font-weight: 700;
    line-height: 1.3;
    color: #334155;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    flex: 1;
    min-width: 0;
}
#int-custom-reply-banner .int-reply-banner-text strong {
    color: #2563eb;
}
#int-custom-reply-banner #int-cancel-reply-btn {
    background: none;
    border: none;
    color: #64748b;
    font-size: 12px;
    font-weight: 700;
    line-height: 1.3;
    padding: 0;
    white-space: nowrap;
    flex-shrink: 0;
    cursor: pointer;
    font-family: var(--int-font);
    text-decoration: underline;
}
#int-custom-reply-banner #int-cancel-reply-btn:hover { color: #ef4444; }

.comment-notes, .logged-in-as { font-size:14px; color:var(--int-muted); margin-bottom:20px!important; }
.comment-notes .int-notes-italic { font-style: italic; color: var(--int-muted); }
.comment-notes .int-notes-strong { font-style: normal; color: #1a1a2e; font-weight: 600; }

/* ── Premium Textbox ── */
.int-premtb-toolbar { display:flex; gap:6px; margin-bottom:8px; }
.int-premtb-btn {
    width:30px; height:30px; border-radius:8px; border:1.5px solid #e5e7eb; background:#fff;
    color:#374151; font-size:13px; cursor:pointer; display:flex; align-items:center; justify-content:center;
    transition:.15s;
}
.int-premtb-btn:hover { border-color:var(--int-accent,#6366f1); color:var(--int-accent,#6366f1); background:#f5f3ff; }
textarea.int-premtb-glow { transition: box-shadow .25s, border-color .25s; }
textarea.int-premtb-glow:focus {
    border-color: var(--int-accent,#6366f1) !important;
    box-shadow: 0 0 0 4px rgba(99,102,241,.15) !important;
    outline: none !important;
}
.int-premtb-pills {
    font-size:12px; color:#9ca3af; margin-top:-10px; margin-bottom:16px; letter-spacing:.2px;
}
.required { color:#e00; margin-left:2px; }

/* ── Star rating input ── */
.int-rating-wrap { display:flex; align-items:center; gap:10px; margin-bottom:16px; flex-wrap:wrap; }
.int-rating-label { font-size:14px; color:var(--int-muted); font-weight:600; }
.int-stars { display:flex; gap:4px; direction:rtl; }
.int-stars input { display:none; }
.int-stars label { font-size:28px; color:#d1d5db; cursor:pointer; transition:color .15s, transform .15s; line-height:1; }
.int-stars label:hover, .int-stars label:hover ~ label, .int-stars input:checked ~ label { color:#f59e0b; }
.int-stars label:hover { transform:scale(1.18) rotate(-5deg); }

/* ── Emoji ── */
.int-emoji-trigger {
    position:absolute!important; top:12px!important; right:12px!important;
    width:34px!important; height:34px!important; min-width:34px!important; max-width:34px!important;
    flex-shrink:0!important; flex-grow:0!important; box-sizing:border-box!important;
    display:flex!important; align-items:center!important; justify-content:center!important;
    background:var(--int-bg); border:1.5px solid var(--int-border);
    border-radius:50%!important; cursor:pointer; padding:0!important; margin:0!important;
    font-size:18px; color:#6b7280; line-height:1!important;
    transition:transform .2s, border-color .2s, color .2s; z-index:5;
}
.int-emoji-trigger svg { width:18px!important; height:18px!important; flex-shrink:0!important; display:block!important; }
.int-emoji-trigger:hover { transform:scale(1.15) rotate(10deg); border-color:var(--int-focus); color:var(--int-focus); }
.int-emoji-picker {
    display:none; position:absolute; top:52px; right:0;
    background:var(--int-white); border:1.5px solid var(--int-border);
    border-radius:var(--int-r-lg); padding:12px; z-index:99;
    box-shadow:var(--int-shadow-lg); width:280px; flex-wrap:wrap; gap:4px;
    max-height:260px; overflow-y:auto; overflow-x:hidden;
    animation: intSlideIn .2s ease;}
.int-emoji-picker.open { display:flex; }
.int-emoji-picker span { font-size:22px; cursor:pointer; padding:5px; border-radius:var(--int-r-sm); transition:background .15s, transform .1s; line-height:1.2; }
.int-emoji-picker span:hover { background:#f4f4f5; transform:scale(1.2); }

/* ── Textarea ── */
.comment-form-comment { position:relative; margin-bottom:14px; }
#commentform .comment-form-comment textarea#comment,
#commentform textarea#comment,
.comment-respond textarea#comment,
textarea#comment {
    width:100%!important; min-height:140px!important; resize:vertical;
    padding:16px!important; padding-left:14px!important; padding-right:46px!important;
    font-size:15px!important; line-height:1.7;
    border-radius:8px!important; border:none!important;
    background:#f5f5f5!important; outline:none;
    transition:background .2s;
    color:#1a1a2e; font-family:var(--int-font); display:block;
}
.comment-form-comment textarea#comment:focus {
    background:#eeeeee!important;
    box-shadow:none;
}

/* ── Char counter ── */
.int-char-counter { text-align:right; font-size:12px; color:#9ca3af; margin-top:-8px; margin-bottom:8px; transition:color .2s; }
.int-char-counter.warn { color:#f59e0b; font-weight:700; }
.int-char-counter.over { color:#ef4444; font-weight:700; }

/* ── Input fields ── */
.comment-form p { margin-bottom:14px; position:relative; }
.comment-form input[type="text"],
.comment-form input[type="email"],
.comment-form input[type="url"] {
    width:100%!important; height:56px; padding:0 16px!important; font-size:15px!important;
    border-radius:8px!important; border:none!important;
    background:#f5f5f5!important; outline:none;
    transition:background .2s;
    color:#1a1a2e; font-family:var(--int-font); display:block;
}
.comment-form input[type="text"]:focus,
.comment-form input[type="email"]:focus,
.comment-form input[type="url"]:focus {
    background:#eeeeee!important;
    box-shadow:none;
}
.comment-form textarea::placeholder, .comment-form input::placeholder { color:#a1a1aa; opacity:1; }
#commentform textarea#comment::placeholder,
textarea#comment::placeholder { font-size: 13px; }

/* ── Cookie checkbox ── */
/* v6.33: Native checkbox se fully custom, animated checkbox (Stripe/Notion jaisa
   look). Real <input> visually hidden hai (opacity:0, absolute) lekin abhi bhi
   focusable/clickable/accessible hai — sirf CSS ka :checked sibling-selector
   check-mark ko animate karta hai, koi JS zaroori nahi. */
.comment-form-cookies-consent { display:flex; align-items:flex-start; gap:10px; font-size:13px; line-height:1.6; color:#555; margin-bottom:18px; }
.int-cc-wrap {
    position: relative;
    display: inline-flex;
    width: 17px;
    height: 17px;
    flex-shrink: 0;
    margin-top: 3px;
    cursor: pointer;
}
.int-cc-real {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    margin: 0;
    opacity: 0;
    cursor: pointer;
    z-index: 1;
}
.int-cc-box {
    position: absolute;
    inset: 0;
    border: 1.5px solid #1a1a1a;
    border-radius: 2px;
    background: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background .18s ease, border-color .18s ease, box-shadow .15s ease;
}
.int-cc-check {
    width: 13px;
    height: 13px;
    opacity: 0;
    transform: scale(0.4);
    transition: opacity .15s ease, transform .22s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.int-cc-real:checked ~ .int-cc-box {
    background: #007AFF;
    border-color: #007AFF;
}
.int-cc-real:checked ~ .int-cc-box .int-cc-check {
    opacity: 1;
    transform: scale(1);
}
.int-cc-real:focus-visible ~ .int-cc-box {
    box-shadow: 0 0 0 3px rgba(99,102,241,.25);
}
.comment-form-cookies-consent label { cursor: pointer; }

/* ── Submit ── */
.form-submit { margin-top:4px; display:flex; justify-content:center; }
.comment-form .submit {
    display:inline-flex!important; align-items:center!important; justify-content:center!important;
    gap:8px; min-width:200px; height:var(--int-btn-h); padding:0 var(--int-btn-pad-x)!important;
    background:var(--int-btn)!important; color:#fff!important;
    border:none!important; border-radius:var(--int-btn-radius)!important;
    font-size:var(--int-btn-font)!important; font-weight:700!important;
    cursor:pointer; transition:opacity .2s, transform .2s, box-shadow .2s;
    box-shadow:0 4px 14px var(--int-btn-a); font-family:var(--int-font)!important; overflow:hidden;
    position:relative;
}
.comment-form .submit:hover {
        background:#c20000!important; opacity:1;
        transform:translateY(-2px); box-shadow:0 8px 22px var(--int-btn-hover-a);
}
.comment-form .submit:active { transform:translateY(0); }
.comment-form .submit.int-loading { opacity:.65; cursor:not-allowed; pointer-events:none; }

/* Submit ripple */
.comment-form .submit::after {
    content:''; position:absolute; width:100%; height:100%; top:0; left:0;
    background:radial-gradient(circle, rgba(255,255,255,.25) 0%, transparent 60%);
    transform:scale(0); opacity:0; transition:transform .5s, opacity .5s;
}
.comment-form .submit:active::after { transform:scale(2.5); opacity:1; transition:0s; }

/* ── Pending notice ── */
.int-pending-note { font-style:italic; color:#9ca3af; font-size:13px; }

/* ── Box Style: Rounded (Soft) — default look, explicit for reliability ── */
textarea#comment.int-tb-rounded {
    border-radius:12px!important; border:none!important; background:#f9fafb!important;
}
input.int-tb-rounded[type="text"], input.int-tb-rounded[type="email"], input.int-tb-rounded[type="url"] {
    border-radius:12px!important; border:none!important; background:#f9fafb!important;
}
.submit.int-tb-submit-rounded { border-radius:999px!important; }

/* ── Box Style: Bordered (Classic) — visible border, softly rounded ── */
textarea#comment.int-tb-bordered {
    border-radius:4px!important; border:1.5px solid #d1d5db!important;
    background:#ffffff!important; box-shadow:none!important;
}
textarea#comment.int-tb-bordered:focus {
    background:#ffffff!important; border-color:var(--int-focus)!important;
    box-shadow:0 0 0 3px var(--int-focus-a)!important;
}
p.int-tb-joined-first, p.int-tb-joined-mid, p.int-tb-joined-last { margin-bottom:0!important; }
p.int-tb-joined-last { margin-bottom:16px!important; }
p.int-tb-joined-first input, p.int-tb-joined-mid input, p.int-tb-joined-last input {
    border-radius:0!important; border:1px solid #d1d5db!important; border-top:none!important;
    background:#ffffff!important; box-shadow:none!important; width:100%!important; box-sizing:border-box!important;
}
p.int-tb-joined-first input {
    border-top:1px solid #d1d5db!important; border-top-left-radius:4px!important; border-top-right-radius:4px!important;
}
p.int-tb-joined-last input {
    border-bottom-left-radius:4px!important; border-bottom-right-radius:4px!important;
}
p.int-tb-joined-first input:focus, p.int-tb-joined-mid input:focus, p.int-tb-joined-last input:focus {
    background:#ffffff!important; border-color:var(--int-focus)!important; position:relative; z-index:1;
    box-shadow:0 0 0 3px var(--int-focus-a)!important;
}
.submit.int-tb-submit-bordered { border-radius:6px!important; box-shadow:none!important; }
.submit.int-tb-submit-bordered:hover { box-shadow:none!important; }

/* ── Box Style: Simple (Original) — sharp square corners, thin border, bare minimal ── */
.int-title-plain { display:flex; align-items:center; }
textarea#comment.int-tb-simple {
    border-radius:0!important; border:1px solid #d1d5db!important;
    background:#ffffff!important; box-shadow:none!important;
}
textarea#comment.int-tb-simple:focus {
    background:#ffffff!important; border-color:#9ca3af!important; box-shadow:none!important;
}
input.int-tb-simple[type="text"], input.int-tb-simple[type="email"], input.int-tb-simple[type="url"] {
    border-radius:0!important; border:1px solid #d1d5db!important;
    background:#ffffff!important; box-shadow:none!important;
}
.submit.int-tb-submit-simple { border-radius:0!important; box-shadow:none!important; }
.int-textbox-simple .int-premtb-toolbar,
.int-textbox-simple .int-premtb-pills { display:none!important; }

/* ── Responsive ── */
@media (max-width:1024px) { .comment-respond { padding:16px; } .int-comment-reply-title { font-size:18px!important; } }
@media (max-width:768px) {
    .comment-respond { padding:14px; border-radius:var(--int-r-md, 12px); }
    .int-comment-reply-title { font-size:17px!important; }
    .comment-form-comment textarea#comment { min-height:100px!important; font-size:14px!important; }
    .comment-form input[type="text"],
    .comment-form input[type="email"],
    .comment-form input[type="url"] { height:48px; font-size:14px!important; }
    .comment-form .submit { width:auto; min-width:0; height:var(--int-btn-h); font-size:var(--int-btn-font)!important; }
    .int-emoji-picker { right:0; width:250px; }
    .int-like-btn { font-size:12px; padding:4px 11px; }
}
@media (max-width:480px) {
    #comments { margin-top:32px; }
    .comment-respond { padding:12px; border-radius:var(--int-r-md, 10px); }
    .int-comment-reply-title { font-size:16px!important; gap:6px!important; }
    .int-comment-reply-title svg.int-icon { width:16px; height:16px; }
    .comment-form-comment textarea#comment { min-height:90px!important; font-size:14px!important; padding:13px!important; padding-right:46px!important; border-radius:8px!important; }
    .comment-form input[type="text"],
    .comment-form input[type="email"],
    .comment-form input[type="url"] { height:46px; font-size:14px!important; border-radius:var(--int-r-md)!important; padding:0 13px!important; }
    .comment-form .submit { height:var(--int-btn-h); font-size:var(--int-btn-font)!important; border-radius:var(--int-btn-radius)!important; }
    .int-stars label { font-size:24px; }
    .comment-list { --int-avatar-size:38px; }
    .int-comment-header { gap:9px; }
    .comment-list li.int-depth-2 .int-comment-header,
    .comment-list li.int-depth-3 .int-comment-header { gap:17px; }
    .int-avatar img, .comment-author img { width:38px!important; height:38px!important; }
    /* v7.7.0: yahan pehle ".int-like-bar { gap:6px; }" tha — mobile viewport pe bhi line
       274 wali !important rule hamesha jeet jaati thi, isliye ye kabhi apply nahi hoti
       thi (dead code, hata diya). */
    .int-pagination { gap:5px; }
    .int-page-btn { min-width:34px; height:34px; font-size:13px; }
    #comments .comments-title, .comments-area .comments-title { font-size:14px!important; }
}
@media (max-width:360px) {
    .comment-respond { padding:10px; }
    .int-comment-reply-title { font-size:15px!important; }
    .int-emoji-picker { width:220px; }
}

/* ── Dark mode ── */

/* ── YouTube Style: "Leave a Comment" form responsive spacing ── */
.int-youtube-form-wrapper .comment-respond {
    padding: 0px 0px 0px 0px !important;
}
.int-youtube-form-wrapper {
    margin: 0px 0px 0px 0px;
}
@media (max-width:1024px) {
    .int-youtube-form-wrapper .comment-respond {
        padding: 0px 0px 0px 0px !important;
    }
    .int-youtube-form-wrapper {
        margin: 0px 0px 0px 0px;
    }
}
@media (max-width:768px) {
    .int-youtube-form-wrapper .comment-respond {
        padding: 0px 0px 0px 0px !important;
    }
    .int-youtube-form-wrapper {
        margin: 0px 6px 0px 6px;
    }
}
/* ── YouTube Style: dedicated Colors & Typography ── */
.int-yt-comment-item {
    border-bottom-color: var(--int-yt-divider) !important;
    font-family: var(--int-yt-font);
}
.int-yt-comment-item .int-yt-username { color: var(--int-yt-username) !important; font-size: var(--int-yt-font-size-username) !important; font-family: var(--int-yt-font); }
/* v7.8.2: naya "Website Field" link — sirf real hover (mouse) pe underline, taaki
   mobile pe tap ke baad "sticky hover" bug na aaye (plugin ka apna documented rule). */
@media (hover: hover) and (pointer: fine) {
    .int-yt-username-link:hover { text-decoration: underline !important; }
}
.int-yt-comment-item .int-yt-date     { color: var(--int-yt-date) !important; }
.int-yt-comment-item .int-yt-text     { color: var(--int-yt-text) !important; font-size: var(--int-yt-font-size-text) !important; font-family: var(--int-yt-font); }
/* v7.7.19 ASLI ROOT-CAUSE FIX: "comment_text()" apna output khud ek <p> tag mein wrap
   karta hai, aur us <p> ka browser-default margin (~16px, user-agent stylesheet se)
   kabhi reset nahi kiya gaya tha. Ye default margin ".int-yt-text" ke apne
   "margin-bottom:10px" ke saath UNPREDICTABLE tareeke se collapse hota tha — nesting
   depth/DOM-context ke hisaab se kabhi zyada gap (nested replies mein), kabhi kam
   (top-level mein) dikhta tha, jaisa Sony ne Harish/Roni vs Jaanu compare karke
   pakda. Ab <p> ka margin explicitly 0 kar diya — sirf parent ".int-yt-text" ka
   margin-bottom:10px hi maayne rakhta hai, hamesha, sabhi levels pe consistent. */
.int-yt-text p { margin:0; }
.int-yt-text p + p { margin-top:10px; }
.int-yt-comment-item .int-yt-icon-btn { color: var(--int-yt-icon) !important; }
.int-yt-comment-item .int-yt-icon-btn svg { color: var(--int-yt-icon) !important; }
.int-yt-comment-item .int-yt-star-filled { color: var(--int-yt-star-filled) !important; }
.int-yt-comment-item .int-yt-star-empty  { color: var(--int-yt-star-empty) !important; }