/*
 * Comment section — liquid glass restyle.
 *
 * Fixes the severe color fragmentation in Zibll's multi-level comments
 * caused by depth-based background differentiation. All comments now use
 * a unified glass surface with left-border nesting indication.
 *
 * @package ZibllChild
 */

/* ======================================================
   1. COMMENT SECTION CONTAINER
   ====================================================== */

body.xkmcm-liquid-glass #comments {
    min-width: 0;
}

body.xkmcm-liquid-glass #comments .zib-widget,
body.xkmcm-liquid-glass #comments .theme-box,
body.xkmcm-liquid-glass #comments .box-body {
    border: none !important;
}

/* Comment title bar */
body.xkmcm-liquid-glass #comments .title-theme {
    font-size: 16px;
    font-weight: 700;
}

body.xkmcm-liquid-glass #comments .title-theme::before {
    display: none !important;
    content: none !important;
}

/* ======================================================
   2. COMMENT FILTER / ORDER BAR
   ====================================================== */

body.xkmcm-liquid-glass .comment-filter {
    margin-bottom: 16px;
}

body.xkmcm-liquid-glass .comment-filter .comment-orderby {
    padding: 6px 14px;
    border-radius: var(--xkmcm-pill-radius, 999px);
    font-size: 13px;
    font-weight: 600;
    color: var(--xkmcm-brand-muted-color);
    transition: background-color 0.15s ease, color 0.15s ease;
}

body.xkmcm-liquid-glass .comment-filter .comment-orderby:hover {
    background: rgba(93, 134, 232, 0.08);
    color: var(--xkmcm-brand-color);
}

body.xkmcm-liquid-glass .comment-filter .active .comment-orderby {
    background: rgba(93, 134, 232, 0.10);
    color: var(--xkmcm-brand-color);
}

body.xkmcm-liquid-glass.dark-theme .comment-filter .comment-orderby:hover {
    background: rgba(86, 198, 216, 0.10);
    color: #7dd3ea;
}

body.xkmcm-liquid-glass.dark-theme .comment-filter .active .comment-orderby {
    background: rgba(86, 198, 216, 0.12);
    color: #7dd3ea;
}

/* ======================================================
   3. KILL DEPTH-BASED BACKGROUND FRAGMENTATION
   ====================================================== */

/* THE ROOT CAUSE: Zibll adds background to .children containers */
body.xkmcm-liquid-glass #postcomments .children,
body.xkmcm-liquid-glass #postcomments .children .children {
    background: transparent !important;
    margin-left: 0 !important;
    margin-bottom: 0;
    border-radius: 0;
}

/* Remove thread-odd/thread-even/thread-alt alternating backgrounds */
body.xkmcm-liquid-glass #postcomments .thread-odd,
body.xkmcm-liquid-glass #postcomments .thread-even,
body.xkmcm-liquid-glass #postcomments .thread-alt,
body.xkmcm-liquid-glass #postcomments .odd,
body.xkmcm-liquid-glass #postcomments .even,
body.xkmcm-liquid-glass #postcomments .alt {
    background: transparent !important;
}

/* Remove comment + comment border separator */
body.xkmcm-liquid-glass #postcomments .commentlist .comment + .comment {
    border-top: none !important;
}

/* ======================================================
   4. UNIFIED COMMENT CARD SURFACE
   ====================================================== */

body.xkmcm-liquid-glass #postcomments .comment .list-inline > li {
    padding: 16px 18px !important;
}

/* Top-level comment card */
body.xkmcm-liquid-glass #postcomments .commentlist > .comment > .list-inline {
    border-radius: var(--xkmcm-surface-radius, 12px);
    background:
        linear-gradient(135deg, rgba(255, 255, 255, 0.88), rgba(244, 248, 255, 0.66)),
        rgba(248, 251, 255, 0.92);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.28),
        0 6px 20px rgba(31, 43, 68, 0.04);
    margin-bottom: 12px !important;
}

body.xkmcm-liquid-glass.dark-theme #postcomments .commentlist > .comment > .list-inline {
    background:
        linear-gradient(135deg, rgba(44, 55, 76, 0.84), rgba(31, 40, 56, 0.66)),
        rgba(31, 40, 56, 0.72);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.04),
        0 6px 20px rgba(0, 0, 0, 0.16);
}

/* Nested (children) comment — same surface, with left accent border */
body.xkmcm-liquid-glass #postcomments .children .comment > .list-inline {
    border-radius: 10px;
    background: rgba(93, 134, 232, 0.03);
    border-left: 3px solid rgba(93, 134, 232, 0.18);
    margin-bottom: 8px;
    margin-left: 48px !important;
}

body.xkmcm-liquid-glass.dark-theme #postcomments .children .comment > .list-inline {
    background: rgba(86, 198, 216, 0.04);
    border-left-color: rgba(86, 198, 216, 0.22);
}

/* Deeper nesting — progressively indent */
body.xkmcm-liquid-glass #postcomments .children .children .comment > .list-inline {
    margin-left: 36px !important;
    border-left-color: rgba(142, 124, 247, 0.18);
}

body.xkmcm-liquid-glass.dark-theme #postcomments .children .children .comment > .list-inline {
    border-left-color: rgba(142, 124, 247, 0.22);
}

/* Even deeper */
body.xkmcm-liquid-glass #postcomments .children .children .children .comment > .list-inline {
    margin-left: 24px !important;
    border-left-color: rgba(237, 111, 143, 0.16);
}

body.xkmcm-liquid-glass.dark-theme #postcomments .children .children .children .comment > .list-inline {
    border-left-color: rgba(237, 111, 143, 0.20);
}

/* ======================================================
   5. AUTHOR INFO
   ====================================================== */

body.xkmcm-liquid-glass #postcomments .avatar-img {
    --this-size: 42px;
    margin-right: 14px;
}

body.xkmcm-liquid-glass #postcomments .avatar-img .avatar {
    border-radius: 50%;
    box-shadow: 0 0 0 2px rgba(93, 134, 232, 0.12);
}

body.xkmcm-liquid-glass.dark-theme #postcomments .avatar-img .avatar {
    box-shadow: 0 0 0 2px rgba(86, 198, 216, 0.14);
}

body.xkmcm-liquid-glass #postcomments .children .avatar-img {
    --this-size: 32px;
    margin-right: 10px;
}

body.xkmcm-liquid-glass #postcomments .comt-author {
    font-size: 14px;
    font-weight: 700;
    color: var(--xkmcm-brand-ink-color);
}

body.xkmcm-liquid-glass #postcomments .comt-author a {
    color: var(--xkmcm-brand-ink-color);
    text-decoration: none;
}

body.xkmcm-liquid-glass #postcomments .comt-author a:hover {
    color: var(--xkmcm-brand-color);
}

/* Author badge */
body.xkmcm-liquid-glass #postcomments .badge-approve {
    border-radius: var(--xkmcm-pill-radius, 999px);
    font-size: 11px;
    font-weight: 600;
    padding: 2px 8px;
}

/* bypostauthor highlight */
body.xkmcm-liquid-glass #postcomments .bypostauthor > .list-inline {
    border-left-color: var(--xkmcm-brand-color) !important;
}

/* ======================================================
   6. COMMENT META (time, like, reply)
   ====================================================== */

body.xkmcm-liquid-glass #postcomments .comt-meta {
    font-size: 12px;
    color: var(--xkmcm-brand-muted-color);
    margin-top: 6px;
}

body.xkmcm-liquid-glass #postcomments .comt-meta > span:not(:empty) {
    margin-right: 12px;
}

body.xkmcm-liquid-glass #postcomments .comt-meta > span .but {
    padding: 3px 10px;
    border-radius: var(--xkmcm-pill-radius, 999px);
    font-size: 12px;
    font-weight: 600;
    background: rgba(93, 134, 232, 0.06);
    color: var(--xkmcm-brand-muted-color);
    transition: background-color 0.15s ease, color 0.15s ease;
}

body.xkmcm-liquid-glass #postcomments .comt-meta > span .but:hover {
    background: rgba(93, 134, 232, 0.12);
    color: var(--xkmcm-brand-color);
}

body.xkmcm-liquid-glass.dark-theme #postcomments .comt-meta > span .but {
    background: rgba(86, 198, 216, 0.08);
}

body.xkmcm-liquid-glass.dark-theme #postcomments .comt-meta > span .but:hover {
    background: rgba(86, 198, 216, 0.14);
    color: #7dd3ea;
}

/* Reply link */
body.xkmcm-liquid-glass #postcomments .reply-link .but {
    padding: 3px 10px;
    border-radius: var(--xkmcm-pill-radius, 999px);
    font-size: 12px;
    font-weight: 600;
    background: rgba(93, 134, 232, 0.06);
    color: var(--xkmcm-brand-muted-color);
    transition: background-color 0.15s ease, color 0.15s ease;
}

body.xkmcm-liquid-glass #postcomments .reply-link .but:hover {
    background: rgba(93, 134, 232, 0.12);
    color: var(--xkmcm-brand-color);
}

body.xkmcm-liquid-glass.dark-theme #postcomments .reply-link .but {
    background: rgba(86, 198, 216, 0.08);
}

body.xkmcm-liquid-glass.dark-theme #postcomments .reply-link .but:hover {
    background: rgba(86, 198, 216, 0.14);
    color: #7dd3ea;
}

/* Like button active */
body.xkmcm-liquid-glass #postcomments .action-comment-like.active {
    color: #e84057;
}

/* ======================================================
   7. COMMENT CONTENT
   ====================================================== */

body.xkmcm-liquid-glass .comment-content {
    font-size: 14px;
    line-height: 1.75;
    color: var(--xkmcm-brand-ink-color);
    overflow-wrap: anywhere;
    word-break: break-word;
}

body.xkmcm-liquid-glass .comment-content p {
    margin-bottom: 0.6em;
}

body.xkmcm-liquid-glass .comment-content a:not([class]) {
    color: var(--xkmcm-brand-color);
    text-decoration-thickness: 0.06em;
}

body.xkmcm-liquid-glass .comment-content a:not([class]):hover {
    color: var(--xkmcm-brand-hover-color);
}

/* ======================================================
   8. COMMENT SIGN AREA (login prompt / form)
   ====================================================== */

body.xkmcm-liquid-glass .comment-signarea {
    border: none !important;
    border-radius: var(--xkmcm-surface-radius, 12px);
    background:
        linear-gradient(135deg, rgba(255, 255, 255, 0.88), rgba(244, 248, 255, 0.66)),
        rgba(248, 251, 255, 0.92);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.28),
        0 6px 20px rgba(31, 43, 68, 0.04);
    padding: 24px;
    margin-bottom: 16px;
}

body.xkmcm-liquid-glass.dark-theme .comment-signarea {
    background:
        linear-gradient(135deg, rgba(44, 55, 76, 0.84), rgba(31, 40, 56, 0.66)),
        rgba(31, 40, 56, 0.72);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.04),
        0 6px 20px rgba(0, 0, 0, 0.16);
}

body.xkmcm-liquid-glass .comment-signarea h3 {
    font-size: 15px;
    font-weight: 600;
    color: var(--xkmcm-brand-muted-color);
}

body.xkmcm-liquid-glass .comment-signarea .but {
    border-radius: 10px;
    font-weight: 600;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}

body.xkmcm-liquid-glass .comment-signarea .but:hover {
    transform: translateY(-1px);
}

/* ======================================================
   9. POST-ACTIONS (like / favorite / share bar)
   ====================================================== */

body.xkmcm-liquid-glass .post-actions .action {
    border-radius: 10px;
    background: rgba(93, 134, 232, 0.05);
    transition: background-color 0.15s ease, color 0.15s ease;
}

body.xkmcm-liquid-glass .post-actions .action:hover {
    background: rgba(93, 134, 232, 0.10);
    color: var(--xkmcm-brand-color);
}

body.xkmcm-liquid-glass.dark-theme .post-actions .action {
    background: rgba(86, 198, 216, 0.06);
}

body.xkmcm-liquid-glass.dark-theme .post-actions .action:hover {
    background: rgba(86, 198, 216, 0.12);
    color: #7dd3ea;
}

/* ======================================================
   10. MOBILE RESPONSIVE
   ====================================================== */

@media (max-width: 767px) {
    body.xkmcm-liquid-glass #postcomments .comment .list-inline > li {
        padding: 12px 14px;
    }

    body.xkmcm-liquid-glass #postcomments .avatar-img {
        --this-size: 36px;
        margin-right: 10px;
    }

    body.xkmcm-liquid-glass #postcomments .children .avatar-img {
        --this-size: 28px;
        margin-right: 8px;
    }

    /* Reduce nesting indentation on mobile */
    body.xkmcm-liquid-glass #postcomments .children .comment > .list-inline {
        margin-left: 20px;
    }

    body.xkmcm-liquid-glass #postcomments .children .children .comment > .list-inline {
        margin-left: 16px;
    }

    body.xkmcm-liquid-glass #postcomments .children .children .children .comment > .list-inline {
        margin-left: 24px !important;
    }

    body.xkmcm-liquid-glass .comment-signarea {
        padding: 18px 16px;
    }

    body.xkmcm-liquid-glass #postcomments .commentlist > .comment > .list-inline .comment-footer {
        margin-left: 0 !important;
        margin-top: 0 !important;
    }
}