body.body-lock {
    overflow: auto;
}

[class^="xqbj-icon-"] {
    background-repeat: no-repeat;
    background-size: 100% 100%;
}

#body-bottom {
    z-index: inherit !important;
}

#comments.comments.comments {
    padding-bottom: 0 !important;
}

#comments.comments .respond.child-respond {
    margin: 0.75rem 0 0 2.29375rem;
    margin-top: 0.75rem !important;
}

#comments.comments .respond.child-respond .comment-reply-title {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-direction: row;
}

#comments.comments .respond.child-respond .cancel-comment-reply {
    float: inherit;
    margin-top: 0;
    font-size: 1.0rem;
    color: #f83863 !important;
}

#comments.comments a, 
#comments.comments a:link, 
#comments.comments a:visited, 
#comments.comments .color-main {
    color: #f83863 !important;
}

#comments.comments .comment-author cite {
    overflow: hidden;
    display: block;
    max-height: 1.10rem;
    color: #f83863 !important;
}

#comments.comments .popup-comment-list-container {
    bottom: 0;
    left: 0;
    z-index: 2013;
    width: 100vw;
    height: 100vh;
    position: fixed;
    max-height: 100%;
    overflow: hidden;
    box-sizing: border-box;
    transition: transform -0.3s;
    -webkit-overflow-scrolling: touch;
    margin: 0;
    padding: 0;
    display: none;
    flex-direction: column;
    justify-content: flex-end;
}

#comments.comments .popup-comment-list-container .popup-comment-list-mask {
    position: absolute;
    z-index: 2014;
    width: 100%;
    height: 100vh;
    overflow: hidden;
    background-color: #00000080;
    margin: 0;
    padding: 0 1.0rem;
    border-radius: 1.0rem 1.0rem 0 0;
    display: none;
}

#comments.comments .popup-comment-list-container {

}

#comments.comments .comment-list-container .cancel-comment-reply > a,
#comments.comments .child-comment-list-content .cancel-comment-reply > a{
    display: block !important;
}

#comments.comments .popup-comment-list-container.show {
    display: flex;
}

#comments.comments .popup-comment-list-container.show .popup-comment-list-mask {
    display: block;
}

#comments.comments .popup-comment-list-content {
    position: absolute;
    top: initial;
    bottom: 0;
    left: 50%;
    z-index: 2014;
    width: 100%;
    max-width: 710px;
    height: 90vh;
    overflow: hidden;
    background-color: #454343;
    margin: 0;
    padding: 0 1.0rem;
    border-radius: 1.0rem 1.0rem 0 0;
    transform: translate(-50%, 0);
}

#comments.comments .popup-comment-list-content .comment-list-pagetion {
    width: 100%;
    display: flex;
    justify-content: space-between;
}

#comments.comments .popup-comment-list-content .comment-list-pagetion > div {
    width: 9.375rem;
    height: 2.1875rem;
}

#comments.comments .popup-comment-list-content .child-comment-list-header {
    height: 1.6rem;
    font-size: 1.0rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

#comments.comments .popup-comment-list-content .child-comment-list-header > div {

}

#comments.comments .popup-comment-list-content .child-comment-list-header .child-comment-list-header-left {
}

#comments.comments .popup-comment-list-content .child-comment-list-header .child-comment-list-header-center {
}

#comments.comments .popup-comment-list-content .child-comment-list-header .child-comment-list-header-right {
}

#comments.comments .comment-list li.comment-body {
    margin-top: 1.875rem;
}

#comments.comments .comment-list-container .comment-list-content {
    margin: 0 0 3.125rem 0;
}

/*  */
.comment-list-container {
    width: 100%;
    height: 100%;
    position: relative;
    overflow: hidden;
}
.comment-list-container .comment-list-virtual {
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
}

.comment-list-container .comment-list-content .more-child-comment-btns {
    margin-top: 1.625rem;
}
.comment-list-container .comment-list-content .more-child-comment-btns .flex {
    display: flex;
    align-items: center;
}
.comment-list-container .comment-list-content .more-child-comment-btns .border {
    width: 2rem;
    height: 1px;
    background-color: #1abb9b;
    margin-right: 10px;
}

#comments.comments .comment-list-container .comment-list-content .more-child-comment-btns {
    display: flex;
    align-items: center;
}

#comments.comments .comment-list-container .comment-list-content .more-child-comment-btns .show-more-child-comment {
    margin: 0 1.0rem 0 0;
}

#comments.comments .comment-list-container .comment-list-content .more-child-comment-btns .hide-more-child-comment {
    display: none;
}


#comments.comments .comment-list-container .comment-list-pagetion {
    width: 100%;
    display: flex;
    justify-content: center;
    gap: 6.25rem;
}

#comments.comments .comment-list-container .comment-list-pagetion .next, 
#comments.comments .comment-list-container .comment-list-pagetion .prev {
    width: 12.5rem;
    height: 2.5rem;
    font-size: 1.0rem;
    background-color: #454343;
    border-radius: 0.3rem;
    align-items: center;
    justify-content: center;
    display: none;
}

#comments.comments .child-comment-list-container {
    width: 100%;
    /* height: 100%; */
    height: calc(100% - 3.625rem);
    position: relative;
    overflow: auto;

    
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch; /* iOS */
    contain: strict; /* 限制重绘区域 */
    will-change: scroll-position;
}



#comments.comments .child-comment-list-container .child-comment-list-virtual {
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
}
#comments.comments .child-comment-list-container .child-comment-list-content {
    margin: 0 1.0rem 0 0 !important;
    padding: 0 0 4.0rem 0 !important;
    
    will-change: transform;
    backface-visibility: hidden;
    width: calc(100%) !important;
}

#comments.comments .child-comment-list-container .child-comment-list-content .comment-body {
    margin: 0 0.78125rem;
}

#comments.comments .child-comment-list-container .child-comment-list-content .comment-content {
    margin: 0 0 1.25rem 0;
}

#comments.comments .child-comment-list-container .child-comment-list-content .respond.child-respond {
    margin: 0.75rem 0 1.25rem 2.29375rem;
    margin-top: 0 !important;
}

#comments.comments .child-comment-list-container .child-comment-list-more {
    margin: 2.0rem;
    font-size: 0.8rem;
    display: flex;
    justify-content: center;
}
#comments.comments .child-comment-list-container .scrollbar-track {
    background-color: #454343;
}
#comments.comments .child-comment-list-container .scrollbar-thumb {
    position: absolute;
    top: 0;
    left: 0;
    width: 8px;
    height: 8px;
    background: rgb(99 99 99 / 50%);
    border-radius: 4px;
}
/*  */


/* 新样式 start */
#comments.comments .comment-list ol {
    padding-left: 0.625rem;
    border-left: 0.125rem solid #5e5d5d;
}

#comments.comments .widget-title,
#comments.comments .comment-reply-title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    margin: 0 0 0.75rem;
    padding: 0;
    color: #ddd !important;
    font-size: 1rem !important;
    font-weight: 400 !important;
    line-height: 1.5 !important;
}

#comments.comments .comment-reply-title > div:first-child {
    color: #ddd;
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.5;
}

#comments.comments .cancel-comment-reply a {
    color: #fc0b7c !important;
    font-size: 0.8125rem;
    text-decoration: none !important;
}

#comments.comments .comment-separator {
    margin-top: 1.5rem;
    padding: 0;
    color: #fff !important;
    font-size: 1.125rem;
    font-weight: 500;
    line-height: 1.5;
}

#comments.comments .comment-separator .comment-num {
    color: #fff;
    font-size: 1.125rem;
    font-weight: 500;
    line-height: 1.5;
}

#comments.comments .comment-author .avatar {
    width: 3.5rem;
    height: 3.5rem;
}

/* 回复克隆表单会去掉 #comment-form，统一用 .comment-form 兜底，避免样式丢失 */
#comments .comment-form,
#comments #comment-form {
    padding-top: 0;
    font-size: 0.875rem;
    white-space: normal !important;
}

#comments .comment-form > p {
    margin: 0 0 0.75rem !important;
}

#comments .comment-form input.comment-input,
#comments #comment-form input.comment-input {
    display: block;
    box-sizing: border-box;
    width: 100%;
    max-width: 15rem;
    height: 2.25rem;
    margin-top: 0.75rem !important;
    margin-bottom: 0.625rem;
    padding: 0.375rem 0.625rem;
    border: 1px solid #979797 !important;
    border-radius: 0.375rem;
    color: #f0f0f0 !important;
    font-size: 0.875rem;
    line-height: 1.25rem;
    -webkit-appearance: none;
    outline: 0 !important;
    background-color: transparent !important;
}

#comments .comment-form textarea,
#comments #comment-form textarea {
    display: block;
    box-sizing: border-box;
    width: 100%;
    min-height: 6.25rem;
    height: 6.25rem;
    margin: 0;
    padding: 0.625rem 0.75rem;
    border: 1px solid #979797 !important;
    border-radius: 0.375rem;
    color: #f0f0f0 !important;
    font-size: 0.875rem;
    line-height: 1.375rem;
    overflow-y: auto;
    vertical-align: top;
    -webkit-appearance: none;
    outline: 0 !important;
    background-color: transparent !important;
    resize: none;
}

#comments .comment-form input.comment-input::-webkit-input-placeholder,
#comments .comment-form textarea::-webkit-input-placeholder,
#comments #comment-form input.comment-input::-webkit-input-placeholder,
#comments #comment-form textarea::-webkit-input-placeholder {
    color: #bcbcbc !important;
    opacity: 1;
}

#comments .comment-form input.comment-input::-moz-placeholder,
#comments .comment-form textarea::-moz-placeholder,
#comments #comment-form input.comment-input::-moz-placeholder,
#comments #comment-form textarea::-moz-placeholder {
    color: #bcbcbc !important;
    opacity: 1;
}

#comments .comment-form .button[type="submit"],
#comments .comment-form input.button,
#comments #comment-form #submit.button,
#comments #comment-form input#submit {
    display: block;
    box-sizing: border-box;
    width: 100%;
    height: 2.75rem;
    margin: 0.875rem 0 0;
    padding: 0 0.875rem;
    border: 0 !important;
    border-radius: 0.375rem;
    background: #fc0b7c !important;
    background-image: none !important;
    color: #fff !important;
    font-size: 0.875rem;
    font-weight: 500;
    line-height: 1.25rem;
    cursor: pointer;
    animation: none !important;
    -webkit-animation: none !important;
    transition: background-color 0.2s ease, opacity 0.2s ease;
}

#comments .comment-form .button[type="submit"]:hover,
#comments .comment-form input.button:hover,
#comments #comment-form #submit.button:hover,
#comments #comment-form input#submit:hover {
    background: #e00a6f !important;
    opacity: 0.96;
}

body.theme-dark #comments .comment-form input.comment-input,
body.theme-dark #comments .comment-form textarea,
body.theme-dark.dark-mode #comments .comment-form input.comment-input,
body.theme-dark.dark-mode #comments .comment-form textarea,
body.theme-dark #comments #comment-form input.comment-input,
body.theme-dark #comments #comment-form textarea,
body.theme-dark.dark-mode #comments #comment-form input.comment-input,
body.theme-dark.dark-mode #comments #comment-form textarea {
    color: #f0f0f0 !important;
    border-color: #979797 !important;
}

body.theme-dark.dark-mode #comments .comment-form textarea,
body.theme-dark.dark-mode #comments #comment-form textarea {
    font-size: 0.875rem;
    height: 6.25rem;
    min-height: 6.25rem;
}

body.theme-dark.dark-mode #comments .comment-form textarea::-webkit-input-placeholder,
body.theme-dark.dark-mode #comments #comment-form textarea::-webkit-input-placeholder {
    color: #bcbcbc !important;
}

body.theme-dark.dark-mode #comments .comment-form input.comment-input,
body.theme-dark.dark-mode #comments #comment-form input.comment-input {
    font-size: 0.875rem;
    height: 2.25rem;
}

body.theme-dark.dark-mode #comments .comment-form .button[type="submit"],
body.theme-dark.dark-mode #comments .comment-form input.button,
body.theme-dark.dark-mode #comments #comment-form #submit.button,
body.theme-dark.dark-mode #comments #comment-form input#submit {
    height: 2.75rem;
    color: #fff !important;
    font-size: 0.875rem;
    background: #fc0b7c !important;
    background-image: none !important;
}

body.not-safari.theme-dark .child-comment-list-container::-webkit-scrollbar, 
body.not-safari.theme-dark .child-comment-list-container *::-webkit-scrollbar {
    height: 0.25rem;
    width: 0;
}

#comments.comments .more-child-comment-btns .xqbj-icon-arrow {
    width: 0.625rem;
    height: 0.625rem;
    background-image: url(./down@3x.png);
}

#comments.comments .more-child-comment-btns .flex .xqbj-icon-arrow.top {
    width: 0.625rem;
    height: 0.625rem;
    background-image: url(./up@3x.png);
}

#comments.comments .content {
    font-size: 1.0rem;
    margin: 0 0.3125rem 0 0;
}


#comments.comments a.no-animation {
    pointer-events: none;
}


#comments.comments a:hover:after {
    display: none;
}


/* 新样式 end */

@media (max-width: 768px) {
    body.body-lock {
        overflow: hidden;
        position: sticky;
        width: 100%;
        height: 100%;
    }

    body.theme-dark.dark-mode #comment-form textarea,
    body.theme-dark.dark-mode #comments .comment-form textarea,
    body.theme-dark.dark-mode #comments #comment-form textarea {
        border: 1px solid #979797 !important;
        font-size: 0.8125rem;
        height: 5.5rem;
        min-height: 5.5rem;
    }

    #comments.comments .comment-list-container {
        margin: 0.625rem 0 0 0;
    }

    #comments.comments .comment-list-container .comment-list-content {
        margin: 0 0 1.5625rem 0;
    }

    #comments.comments .comment-content {
        font-size: 0.875rem;
    }


    #comments.comments .popup-comment-list-container {
        bottom: 0;
        left: 0;
        z-index: 2013;
        width: 100vw;
        height: 100vh;
        position: fixed;
        max-height: 100%;
        overflow: hidden;
        box-sizing: border-box;
        transition: transform -0.3s;
        -webkit-overflow-scrolling: touch;
        margin: 0;
        padding: 0;
        display: none;
        flex-direction: column;
        justify-content: flex-end;
        transform: inherit;
    }

    #comments.comments .comment-separator {
        font-size: 1rem;
        margin-top: 1.25rem;
        color: #fff !important;
    }

    #comments.comments .comment-separator .comment-num {
        font-size: 1rem;
        color: #fff;
    }

    #comments.comments .comment-children {
        margin-top: 0.9375rem;
        margin-left: 2.29375rem;
        padding-left: 0;
    }

    .child-comment-list-container .child-comment-list-content {
        margin: 0;
        padding: 0 0.78125rem 0 0.78125rem !important;
        will-change: transform;
        backface-visibility: hidden;
        /* width: calc(100% - 1.5625rem) !important; */
        width: 100% !important;
    }

    #comments.comments .popup-comment-list-container .popup-comment-list-mask {
        position: absolute;
        z-index: 2014;
        width: 100%;
        height: 100vh;
        overflow: hidden;
        background-color: #00000080;
        margin: 0;
        padding: 0;
        border-radius: 0;
        display: none;
    }

    #comments.comments .popup-comment-list-container.show {
        display: flex;
    }

    #comments.comments .popup-comment-list-container.show .popup-comment-list-mask {
        display: block;
    }

    #comments.comments .popup-comment-list-content {
        position: absolute;
        top: initial;
        left: initial;
        z-index: 2014;
        width: 100%;
        height: 73.768vh;
        overflow: hidden;
        background-color: #2b2a2a;
        margin: 0;
        /* padding: 0 0.6rem 0.6rem 0.6rem; */
        padding: 0;
        border-radius: 0.6rem 0.6rem 0 0;
        transform: initial;
    }

    #comments.comments .comment-author .avatar {
        width: 1.875rem;
        height: 1.875rem;
    }

    #comments.comments .comment-list ol {
        /* margin: 0 0 0 0; */
        /* margin-left: 2.59375rem; */
        padding-left: 0.625rem;
        border-left: 0.0625rem solid #5e5d5d;
    }

    #comments.comments .comment-author {
        font-size: .875rem;
    }

    #comments.comments .comment-meta a {
        font-size: .75rem;
    }

    #comments.comments .comment-list li .comment-reply {
        font-size: .75rem;
    }

    #comments.comments .comment-list li.comment-body {
        margin: 0 0 1.25rem 0;
    }

    body.theme-dark.dark-mode #comments.comments .comment-content {
        font-size: .875rem;
        /* padding: 0.375rem 0 0.9375rem 0; */
        padding: 0.375rem 0 0 0;
        color: #ffffff;
    }

    body.theme-dark.dark-mode #comments.comments .comment-children-ol .comment-content {
        font-size: .875rem;
        padding: 0.375rem 0 0 0;
        color: #ffffff;
    }

    #comments.comments .comment-list.comment-children-ol li.comment-body {
        margin: 0 0 0.625rem 0;
    }

    #comments.comments .comment-reply-author {
        font-weight: normal;
    }

    #comments.comments .more-child-comment-btns .flex .border {
        margin: 0 0.5625rem 0 0;
    }

    #comments.comments .more-child-comment-btns {
        margin-top: 1.25rem;
    }

    #comments.comments .content {
        font-size: 0.78125rem;
        margin: 0 0.71875rem 0 0;
    }

    #comments.comments .more-child-comment-btns .xqbj-icon-arrow {
        width: 0.625rem;
        height: 0.625rem;
        background-image: url(./down@3x.png);
    }

    #comments.comments .more-child-comment-btns .flex .xqbj-icon-arrow.top {
        width: 0.625rem;
        height: 0.625rem;
        background-image: url(./up@3x.png);
    }

    #comments.comments .xqbj-icon-close {
        width: 1.875rem;
        height: 1.875rem;
        background-image: url(./close@3x.png);
    }

    #comments.comments .popup-comment-list-content .child-comment-list-header {
        height: 3.625rem;
    }

    #comments.comments .popup-comment-list-content .child-comment-list-header-center {
        color: #ffffff;
        font-size: 1.0rem;
        font-weight: 500;
    }

    #comments.comments .popup-comment-list-content .child-comment-list-header .child-comment-list-header-left,
    #comments.comments .popup-comment-list-content .child-comment-list-header .child-comment-list-header-right {
        width: 4.125rem;
        display: flex;
        justify-content: center;
    }

    #comments.comments .comment-list-container .comment-list-pagetion {
        width: 100%;
        display: flex;
        justify-content: center;
        gap: 3.125rem;
    }

    #comments.comments .comment-list-container .comment-list-pagetion .next, 
    #comments.comments .comment-list-container .comment-list-pagetion .prev {
        width: 9.375rem;
        height: 2.1875rem;
        font-size: 0.9375rem;
        background-color: #454343;
        border-radius: 0.3rem;
        align-items: center;
        justify-content: center;
        display: none;
    }


    #comments.comments .child-comment-list-container .child-comment-list-content::after {
        content: "- 没有更多了 -";
        display: block;
        text-align: center;
        color: #939292;
        margin: 1.25rem 0 0 0;
        font-size: 0.78125rem;
        font-weight: 500;
    }
    
    
    #comments.comments .respond.child-respond .cancel-comment-reply {
        float: inherit;
        margin-top: 0;
        font-size: 0.813rem;
    }

}

/* Comment image upload and preview（对齐 Figma 684:4595，整体缩小） */
#comments .comment-upload{
    margin-top:0;
    margin-bottom:0;
}
#comments .comment-upload-btn{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    box-sizing:border-box;
    width:8.75rem;
    height:2rem;
    line-height:1;
    padding:0 0.625rem;
    border:1px solid #fc0b7c;
    border-radius:0.3125rem;
    background:#fc0b7c;
    color:#fff;
    text-align:center;
    font-family:"PingFang SC",-apple-system,BlinkMacSystemFont,"Helvetica Neue",sans-serif;
    font-size:0.875rem;
    font-weight:600;
    font-style:normal;
    cursor:pointer;
}
#comments .comment-upload-btn:hover{
    background:#e00a6f;
    border-color:#e00a6f;
}
#comments .comment-upload-input{
    display:none!important;
}
#comments .comment-upload-preview{
    display:flex;
    flex-wrap:wrap;
    gap:0.75rem;
    margin-top:0.625rem;
}
#comments .comment-upload-thumb{
    position:relative;
    width:4rem;
    height:4rem;
    border-radius:0.3125rem;
    background:#2a2a2a;
    overflow:visible;
}
#comments .comment-upload-thumb img{
    display:block!important;
    width:100%!important;
    height:100%!important;
    max-width:none!important;
    max-height:none!important;
    margin:0!important;
    border-radius:0.3125rem;
    object-fit:cover;
}
#comments .comment-upload-remove{
    position:absolute;
    top:-0.5rem;
    right:-0.5rem;
    display:flex;
    align-items:center;
    justify-content:center;
    width:1.125rem;
    height:1.125rem;
    padding:0;
    border:0;
    border-radius:50%;
    background:transparent url(/usr/themes/Mirages/images/comment/icon-upload-close.svg) center / 1.125rem 1.125rem no-repeat;
    color:transparent;
    font-size:0;
    line-height:0;
    text-indent:-9999px;
    overflow:hidden;
    cursor:pointer;
}
#comments .comment-text-wrap{
    margin:0;
}
#comments .comment-text{
    display:-webkit-box!important;
    margin:0;
    padding:0;
    overflow:hidden;
    -webkit-line-clamp:3;
    -webkit-box-orient:vertical;
    white-space:normal;
    word-break:break-word;
    line-height:1.6;
}
#comments .comment-text-wrap.is-expanded .comment-text{
    display:block!important;
    overflow:visible;
    -webkit-line-clamp:unset;
}
#comments .comment-text-more{
    display:none;
    margin-top:.25rem;
    padding:0;
    border:0;
    background:transparent;
    color:#f83863;
    font-size:.875rem;
    line-height:1.5;
    cursor:pointer;
}
#comments .comment-text-wrap.is-collapsible .comment-text-more{
    display:inline-block;
}
#comments .comment-text-wrap.is-collapsible.is-expanded .comment-text-more{
    display:inline-block;
}
#comments .comment-image-group{
    display:flex;
    align-items:flex-end;
    gap:.5rem;
    margin-top:.625rem;
}
#comments .comment-image-group.is-single{
    width:40%;
    max-width:18rem;
}
#comments .comment-image-grid{
    display:grid;
    gap:.5rem;
}
#comments .comment-image-group.is-multiple .comment-image-grid{
    width:18.75rem;
    grid-template-columns:repeat(3,minmax(0,1fr));
}
#comments .comment-image-item{
    position:relative;
    display:block;
    width:100%;
    padding:0;
    border:0;
    background:#1f1f1f;
    cursor:pointer;
    overflow:hidden;
}
#comments .comment-image-group.is-single .comment-image-item{
    max-height:300px;
}
#comments .comment-image-group.is-multiple .comment-image-item{
    aspect-ratio:1/1;
}
#comments .comment-image-grid img{
    display:block!important;
    width:100%!important;
    max-width:none!important;
    margin:0!important;
    border:0!important;
}
#comments .comment-image-group.is-single img{
    height:auto!important;
    max-height:300px!important;
    object-fit:contain;
}
#comments .comment-image-group.is-multiple img{
    height:100%!important;
    max-height:none!important;
    object-fit:cover;
}
#comments .comment-image-count{
    flex:0 0 auto;
    color:#bbb;
    font-size:.75rem;
    line-height:1.2;
    white-space:nowrap;
}
body.comment-image-viewer-open{
    overflow:hidden!important;
}
.comment-image-viewer{
    position:fixed;
    inset:0;
    z-index:100000;
    display:none;
    align-items:center;
    justify-content:center;
    background:rgba(0,0,0,.92);
}
.comment-image-viewer:not(.is-active){
    display:none!important;
}
.comment-image-viewer.is-active{
    display:flex;
}
.comment-image-viewer-img{
    display:block!important;
    max-width:100vw!important;
    max-height:100vh!important;
    max-height:100dvh!important;
    margin:0!important;
    object-fit:contain;
}
.comment-image-viewer.is-error .comment-image-viewer-img{
    width:min(70vw,20rem)!important;
    height:min(70vw,20rem)!important;
    background:rgba(255,255,255,.08);
}
.comment-image-viewer-close,
.comment-image-viewer-nav{
    position:absolute;
    z-index:1;
    display:flex;
    align-items:center;
    justify-content:center;
    border:0;
    background:rgba(255,255,255,.14);
    color:#fff;
    cursor:pointer;
}
.comment-image-viewer-close{
    top:1rem;
    right:1rem;
    width:2.25rem;
    height:2.25rem;
    border-radius:50%;
    font-size:1rem;
}
.comment-image-viewer-nav{
    top:50%;
    width:2.5rem;
    height:3.5rem;
    transform:translateY(-50%);
    font-size:2rem;
}
.comment-image-viewer-prev,
.comment-image-viewer-nav.is-prev{
    left:1rem;
}
.comment-image-viewer-next,
.comment-image-viewer-nav.is-next{
    right:1rem;
}
.comment-image-viewer-count,
.comment-image-viewer-counter{
    position:absolute;
    left:50%;
    bottom:1rem;
    transform:translateX(-50%);
    color:#fff;
    font-size:.875rem;
}
@media (max-width:767.98px){
    #comments.comments .widget-title,
    #comments.comments .comment-reply-title,
    #comments.comments .comment-reply-title > div:first-child {
        font-size:0.9375rem !important;
    }
    #comments.comments .comment-separator,
    #comments.comments .comment-separator .comment-num {
        font-size:1rem;
    }
    #comments .comment-form input.comment-input,
    #comments #comment-form input.comment-input {
        max-width:100%;
        height:2rem;
        font-size:0.8125rem;
    }
    #comments .comment-form textarea,
    #comments #comment-form textarea {
        min-height:5.5rem;
        height:5.5rem;
        font-size:0.8125rem;
    }
    #comments .comment-form .button[type="submit"],
    #comments .comment-form input.button,
    #comments #comment-form #submit.button,
    #comments #comment-form input#submit {
        height:2.375rem;
        font-size:0.8125rem;
    }
    #comments .comment-upload-btn{
        width:6.75rem;
        height:1.75rem;
        font-size:0.75rem;
        font-weight:600;
    }
    #comments .comment-upload-preview{
        gap:0.5rem;
    }
    #comments .comment-upload-thumb,
    #comments .comment-upload-thumb img{
        width:3.25rem!important;
        height:3.25rem!important;
    }
    #comments .comment-upload-remove{
        top:-0.375rem;
        right:-0.375rem;
        width:1rem;
        height:1rem;
        background-size:1rem 1rem;
    }
    #comments .comment-image-group.is-single{
        width:40%;
        min-width:7rem;
    }
    #comments .comment-image-group.is-multiple{
        display:flex;
        flex-direction:column;
        align-items:flex-start;
        gap:.375rem;
    }
    #comments .comment-image-group.is-multiple .comment-image-grid{
        width:min(100%,18.75rem);
    }
    #comments .comment-image-count{
        font-size:12px;
        line-height:1;
    }
    .comment-image-viewer-nav{
        display:none;
    }
}

/* Comment submit loading — CSS spinner (sharp on dark bg, no GIF aliasing) */
body.comment-submit-loading-open{
    overflow:hidden!important;
}
.comment-submit-loading{
    position:fixed;
    inset:0;
    z-index:100001;
    display:none;
    align-items:center;
    justify-content:center;
    background:rgba(0,0,0,.45);
}
.comment-submit-loading.is-active{
    display:flex;
}
.comment-submit-loading-spinner{
    width:2.25rem;
    height:2.25rem;
    border:3px solid rgba(255,255,255,.22);
    border-top-color:#f83863;
    border-radius:50%;
    animation:comment-submit-spin .7s linear infinite;
}
@keyframes comment-submit-spin{
    to{transform:rotate(360deg)}
}