:root {
    --difference: 56px;
}

.comments {


.comments {
    border-top: 1px solid var(--border);
    padding: var(--gap) 0px;
    margin-top: var(--padding);
}

ul.discussion-avatar-list {
    
    display: flex;
    list-style: none;
    padding: 0;
    margin: 0 0 8px;

    & li {

        padding: 0;
        margin: 0 -8px 0 0;

        & .avatar {
            width: var(--input-size);
            height: var(--input-size);
            border-radius: var(--border-radius);
            border: 3px solid var(--border);
            object-fit: cover;
            display: block;
        }
    }

    & .other-users {
        display: flex;
        align-items: center;
        justify-content: center;
        width: var(--input-size);
        height: var(--input-size);
        border-radius: var(--border-radius);
        border: 3px solid var(--border);
        background: var(--box-border);
        color: var(--muted, #888);
        font-size: 11px;
        font-weight: 600;
        text-decoration: none;
    }
}

ul.comment-list {

    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: var(--padding);

    & li.comment {

        width: 100%;
        height: auto;
        flex-direction: column;
        display: flex;
        gap: var(--padding);

        margin: 0px;

        &.bypostauthor {

            & > .comment-body {

                & > img.avatar {
                    /*border: 2px solid var(--brand-light) !important;*/
                }
            }

            & .comment-bubble {

                border-left: 3px solid var(--brand-light);

                & .comment-author {

                    &::after {
                        content: "author";
                        display: inline-block;
                        margin-left: 5px;
                        padding: 5px 5px;
                        background: var(--brand-light);
                        color: var(--brand);
                        font-size: 10px;
                        font-weight: 700;
                        border-radius: 3px;
                        text-transform: uppercase;
                        vertical-align: middle;
                    }
                }
            }
        }

        &:has([data-status="unapproved"]) {
            
            & .comment-bubble {
                background: var(--error-light) !important;
                outline: 1px solid var(--error);
            }

            & .comment-date::after {
                content: " · Pending";
                color: var(--error, #dc3545);
                font-weight: 700;
            }
        }

        & ul.children {

            gap: var(--padding);
            padding-left: 64px;

        }

        & .comment-body {

            display: flex;
            align-items: flex-start;
            gap: var(--padding);
            width: 100%;
            overflow: visible;

            & > img.avatar {
                display: block;
                width: var(--input-size);
                height: var(--input-size);
                min-width: var(--input-size);
                flex-shrink: 0;
                border-radius: var(--border-radius);
                border: 3px solid var(--border) !important;
                object-fit: cover;
                border: 0;
            }

            & .comment-bubble-wrap {
                
                flex: 1;
                min-width: 0;         /* prevents flex child overflow */
                display: flex;
                flex-direction: column;
                gap: 0;

                & .comment-bubble {
                    
                    display: block;
                    width: 100%;
                    max-width: 100%;
                    background: var(--box-border);
                    border-radius: var(--border-radius);
                    padding: var(--padding);
                    box-sizing: border-box;

                    & .comment-author {

                        display: block;
                        font-size: 13px;
                        font-weight: 700;
                        line-height: 1.3;
                        margin: 0 0 3px;
                        color: var(--header-text);

                        & a {
                            color: inherit;
                            text-decoration: none;
                            padding: 0;
                            background: transparent;
                            border: 0;
                            height: auto;
                            margin: 0;

                            &:hover { color: var(--brand); }
                        }
                    }

                    & .comment-text {

                        font-size: 15px;
                        line-height: 1.45;
                        color: var(--header-text);
                        word-break: break-word;
                        margin: 0;
                        padding: 0;
                        border: 0;

                        & .comment-edit-textarea {

                            display: block;
                            width: 100%;
                            padding: var(--padding);
                            margin-top: var(--padding);
                            resize: vertical;
                            min-height: 60px;
                            background: var(--body-bg);
                            border: 1px solid var(--border);
                            border-radius: var(--border-radius);
                            color: var(--header-text);
                            font-size: 14px;
                            line-height: 1.5;

                            &:focus {
                                border-color: var(--brand-light);
                                box-shadow: var(--box-shadow);
                            }
                        }
                    }
                }

                /* ── Reply textarea (injected before .comment-footer) ─────── */

                & .reply-form-wrap {

                    padding-right: var(--difference);

                    & textarea.reply-textarea {
                        display: block;
                        width: 100%;
                        padding: var(--padding);
                        margin: 15px 0;
                        /*resize: none;*/
                        min-height: 70px;
                        background: var(--body-bg);
                        border: 1px solid var(--border);
                        border-radius: var(--border-radius);
                        color: var(--header-text);
                        font-size: 14px;
                        line-height: 1.5;

                        &:focus {
                            border-color: var(--brand-light);
                            box-shadow: var(--box-shadow);
                        }
                    }

                    & .reply-form-actions {

                        width: 100%;
                        display: flex;
                        gap: 15px;

                        & .reply-clear,
                        & .reply-submit {

                            height: var(--input-size);
                            display: flex;
                            align-items: center;
                            justify-content: center;

                        }

                        & .reply-clear {

                        }

                        & .reply-submit {
                            
                        }
                    }
                }

                /* ── Footer: date · Like · Reply · [admin] ────────────────── */

                & .comment-footer {
                    /*display: flex;
                    align-items: center;
                    flex-wrap: wrap;
                    gap: var(--padding);
                    margin: 0;*/

                    margin-top: 5px;
                    display: flex;
                    justify-content: space-between;
                    padding-right: var(--difference);

                    & * { 

                        color: var(--muted, #65676b);
                        font-size: 14px; 
                        font-weight: 600; 

                    }

                    & .comment-date {
                        
                        white-space: nowrap;
                    }

                    & .comment-edited-label {
                        
                    }

                    & .comment-actions {

                        display: flex;
                        align-items: center;
                        gap: var(--padding);
                        margin: 0;
                        padding: 0;

                        & a {
                            display: inline-flex;
                            align-items: center;
                            gap: 3px;
                            padding: 2px 6px;
                            font-size: 12px;
                            font-weight: 700;
                            color: var(--muted, #65676b);
                            text-decoration: none;
                            border: 0;
                            background: transparent;
                            border-radius: var;
                            cursor: pointer;
                            transition: color 0.12s ease, background 0.12s ease;
                            height: auto;
                            margin: 0;

                            &:hover {
                                color: var(--header-text);
                                background: var(--box-border);
                                & * { color: inherit; }
                            }
                        }
                    }
                }
            }
        }
    }

    & .comment-inline-error {
        font-size: 12px;
        color: var(--error, #dc3545);
        padding-left: 40px;
        margin-top: 2px;
    }
}

/* ── Comment form ────────────────────────────────────────────────────────── */

#respond.comment-respond {

    margin-top: 28px;
    padding: 20px;
    background: transparent;
    border: 1px solid var(--border);
    border-radius: var(--border-radius);

    & * { color: var(--header-text); }

    & form {

        & p.comment-form-comment {

            margin: 0;

            & label { display: none; }

            & textarea {
                display: block;
                width: 100%;
                min-height: 90px;
                padding: var(--padding);
                background: var(--body-bg);
                border: 1px solid var(--border);
                border-radius: var(--border-radius);
                color: var(--header-text);
                font-size: 15px;
                line-height: 1.5;
                resize: vertical;
                box-sizing: border-box;
                transition: border-color 0.15s ease, box-shadow 0.15s ease;

                &:focus {
                    border-color: var(--brand-light);
                    box-shadow: var(--box-shadow);
                }

                &::placeholder {
                    color: var(--muted, #aaa);
                    font-style: italic;
                }
            }
        }

        & p.form-submit {
            
            margin: 10px 0 0;

            & input[type="submit"] {
                padding: 8px 20px;
                display: flex;
                justify-content: center;
                align-items: center;
                width: 100%;
                height: var(--input-size);
                background: var(--button);
                color: var(--header-text);
                border: 0px;
                border-radius: var(--border-radius);
                font-size: 14px;
                font-weight: 700;
                cursor: pointer;
                /*transition: opacity 0.15s ease;*/

                /*&:hover    { opacity: 0.88; }
                &:disabled { opacity: 0.55; cursor: not-allowed; }*/
            }
        }
    }
}

/* ── Logged-out prompt ───────────────────────────────────────────────────── */

.logged-out-comment-prompt {
    text-align: center;
    padding: 36px 24px;
    background: var(--box-bg, #f8f9fa);
    border: 1px solid var(--box-border);
    border-radius: var(--border-radius);
    margin-top: 24px;

    & h3 { font-size: 17px; margin-bottom: 8px; }

    & p {
        color: var(--muted, #888);
        font-size: 14px;
        margin-bottom: 18px;
    }
}

/* ── Member comment list (profile page) ─────────────────────────────────── */

section.member-comment {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin-bottom: 14px;

    & .comment-bubble {
        background: var(--box-bg, #f0f2f5);
        border-radius: 18px;
        padding: 8px 14px;
        flex: 1;
        min-width: 0;

        & p {
            margin: 0 0 4px;
            font-size: 14px;
            font-style: italic;
        }

        & small {
            font-size: 12px;
            color: var(--muted, #888);

            & a {
                color: var(--brand);
                text-decoration: none;
                &:hover { text-decoration: underline; }
            }
        }
    }
}

.no-comments {
    color: var(--muted, #888);
    font-size: 14px;
    text-align: center;
    padding: 24px 0;
}

/* ── Responsive ──────────────────────────────────────────────────────────── */

@media (max-width: 640px) {

    ul.comment-list li.comment ul.children {
        padding-left: 28px !important;
    }

    #respond.comment-respond {
        padding: 14px;
    }
}

/* ── Comment bubble row (bubble + mod dropdown side by side) ─────────────── */

.comment-bubble-row {
    width: 100%;
    display: flex;
    align-items: flex-start;
    gap: 6px;
}

/* ── Moderator dropdown ──────────────────────────────────────────────────── */

.comment-mod-wrap {
    position: relative;
    flex-shrink: 0;
    align-self: flex-start;

    /* Hidden until parent comment hovered */
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.18s ease, visibility 0.18s ease;

    & .comment-mod-btn {
        display: flex;
        align-items: center;
        justify-content: center;
        width: var(--input-size);
        height: var(--input-size);
        border-radius: var(--border-radius);
        border: 0;
        background: transparent;
        color: var(--muted, #65676b);
        font-size: 16px;
        font-weight: 700;
        letter-spacing: 1px;
        cursor: pointer;
        transition: background 0.15s ease, color 0.15s ease;
        padding: 0;
        line-height: 1;

        &:hover {
            background: var(--box-border);
            color: var(--header-text);
        }
    }

    & .comment-mod-menu {
        position: absolute;
        top: calc(100% + 4px);
        left: 0;
        z-index: 100;
        min-width: 150px;
        background: var(--box-bg, #fff);
        border: 1px solid var(--box-border);
        border-radius: var(--border-radius);
        box-shadow: 0 4px 16px rgba(0,0,0,.12);
        padding: 4px 0;
        display: none;
    }

    &.is-open .comment-mod-menu {
        display: block;
    }

    & .comment-mod-item {
        display: flex;
        align-items: center;
        gap: 8px;
        padding: 8px 14px;
        font-size: 13px;
        font-weight: 500;
        color: var(--header-text);
        text-decoration: none;
        cursor: pointer;
        transition: background 0.12s ease;

        &:hover { background: var(--box-border); }

        &.comment-spam-link  { &:hover { color: var(--error,   #dc3545); } }
        &.comment-trash-link { &:hover { color: var(--warning, #997404); } }
    }
}

/* Reveal mod wrap on comment hover / focus-within */
li.comment:hover .comment-mod-wrap,
li.comment:focus-within .comment-mod-wrap {
    opacity: 1;
    visibility: visible;
}

/* ── React button + emoji picker ─────────────────────────────────────────── */

.comment-react-wrap {
    position: relative;
    display: inline-flex;

    & .comment-react-btn {
        display: inline-flex;
        align-items: center;
        gap: 3px;
        padding: 2px 6px;
        font-size: 12px;
        font-weight: 700;
        color: var(--muted, #65676b);
        text-decoration: none;
        border: 0;
        background: transparent;
        border-radius: 4px;
        cursor: pointer;
        transition: color 0.12s ease;

        &:hover,
        &.is-reacted { color: var(--brand); }
    }

    & .comment-react-picker {
        position: absolute;
        bottom: calc(100% + 6px);
        left: -4px;
        z-index: 200;
        display: flex;
        gap: 2px;
        padding: 6px 8px;
        background: var(--box-bg, #fff);
        border: 1px solid var(--box-border);
        border-radius: 24px;
        box-shadow: 0 4px 20px rgba(0,0,0,.15);
        white-space: nowrap;

        /* Hidden by default — shown by .is-open class */
        opacity: 0;
        visibility: hidden;
        transform: scale(0.8) translateY(6px);
        transform-origin: bottom left;
        transition: opacity 0.18s ease, visibility 0.18s ease, transform 0.18s ease;

        &.is-open {
            opacity: 1;
            visibility: visible;
            transform: scale(1) translateY(0);
        }

        & .react-emoji {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            width: 36px;
            height: 36px;
            font-size: 22px;
            border: 0;
            background: transparent;
            border-radius: 50%;
            cursor: pointer;
            transition: transform 0.15s ease, background 0.12s ease;
            padding: 0;
            line-height: 1;

            &:hover {
                transform: scale(1.35) translateY(-3px);
                background: var(--box-border);
            }
        }
    }
}

/* ── Reaction chips (inside .comment-bubble) ─────────────────────────────── */

.comment-reactions {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    /*margin-top: 6px;*/

    /* Empty = takes no space */
    &:empty { display: none; }

    & .reaction-chip {
        display: inline-flex;
        align-items: center;
        /*gap: 3px;*/
        /*padding: 2px 8px;*/
        font-size: 13px;
        background: var(--body-bg);
        /*border: 1px solid var(--box-border);*/
        /*border-radius: 12px;*/
        cursor: default;
        user-select: none;
        /*transition: border-color 0.12s ease, background 0.12s ease;*/

        &.is-mine {
            /*border-color: var(--brand);*/
            /*background: var(--brand-light, rgba(13,110,253,.08));*/
        }
    }
}



.comment-reactions {

    & .reaction-chip {
        position: relative;

        &:hover .reaction-popover {
            opacity: 1;
            visibility: visible;
        }

        &.is-mine {

        }

        & .reaction-total {


        }

        & .reaction-emoji-stack {

        }

        & .reaction-popover {

            position: absolute;
            top: calc(100% + 6px);
            left: 0;
            opacity: 0;
            visibility: hidden;
            transition: opacity 0.15s ease, visibility 0.15s ease;
            z-index: 100;

            padding: var(--padding);
            background-color: var(--color-03);

            color: white;

            border-radius: var(--border-radius);

            & * { color: var(--header-bg) !important; }

            & .reaction-popover-row {

                display: flex;
                gap: var(--padding);

                & .rp-emoji {

                }

                & .rp-count {
                    
                }
            }
        }
    }
}