/* Interaction frontend assets: complaint button, complaint page and comment ratings. */



#interaction-complaint-button {

    position: fixed;

    right: var(--interaction-complaint-right-desktop, 24px);

    bottom: var(--interaction-complaint-bottom-desktop, 96px);

    z-index: 99990;

    display: inline-flex;

    align-items: center;

    gap: 7px;

    height: 44px;

    padding: 0 18px;

    border-radius: 999px;

    background: #e8c71b;

    color: #fff !important;

    text-decoration: none !important;

    font: 14px/1.2 "Microsoft YaHei", "PingFang SC", sans-serif;

    box-shadow: 0 8px 22px rgba(40, 164, 234, .28);

    transition: none !important;

}



#interaction-complaint-button:hover {

    background: #e8c71b;

    color: #fff !important;

    text-decoration: none !important;

    transform: none;

    box-shadow: 0 8px 22px rgba(40, 164, 234, .28);

}



#interaction-complaint-button:focus-visible {

    outline: 3px solid rgba(40, 164, 234, .35);

    outline-offset: 3px;

}



#interaction-complaint-button .interaction-complaint-icon {

    display: block;

    width: 18px;

    height: 18px;

    flex: none;

}



#aiarticle-report-root {

    display: none !important;

}



@media (min-width: 769px) {

    #interaction-complaint-button.interaction-complaint-hide-desktop {

        display: none !important;

    }

}



@media (max-width: 768px) {

    #interaction-complaint-button {

        right: var(--interaction-complaint-right-mobile, 16px);

        bottom: var(--interaction-complaint-bottom-mobile, 84px);

        height: 40px;

        padding: 0 15px;

        font-size: 13px;

    }



    #interaction-complaint-button.interaction-complaint-hide-mobile {

        display: none !important;

    }

}



.aiarticle-comment-rating-icon {

    display: inline-block !important;

    width: auto !important;

    height: auto !important;

    margin-right: 2px;

    color: #ffb400 !important;

    font-style: normal !important;

    font-weight: normal !important;

    line-height: 1 !important;

    vertical-align: middle;

    text-decoration: none !important;

}



.aiarticle-comment-rating-icon:before {

    font-family: Arial, "Segoe UI Symbol", "Noto Sans Symbols", "Microsoft YaHei", sans-serif !important;

    font-style: normal !important;

    font-weight: normal !important;

    line-height: 1 !important;

}



.aiarticle-comment-rating-icon.fa-star:before {

    content: "★" !important;

}



.aiarticle-comment-rating-icon.fa-star-o:before {

    content: "☆" !important;

}



.aiarticle-comment-rating-icon:last-child {

    margin-right: 0;

}



.interaction-rating {

    display: inline-block;

    color: #ffb400;

    font-size: 16px;

    line-height: 1;

    letter-spacing: 2px;

    white-space: nowrap;

}



body.interaction-complaint-page,

body.interaction-complaint-page * {

    box-sizing: border-box;

}



body.interaction-complaint-page {

    margin: 0;

    min-height: 100%;

}



body.interaction-complaint-page {

    padding: 42px 20px 56px;

    font-family: "Microsoft YaHei", "PingFang SC", Arial, sans-serif;

    color: #202633;

    background: #f5f5f5;

}



.interaction-complaint-page .complaint-page {

    width: 100%;

    max-width: 660px;

    margin: 0 auto;

}



.interaction-complaint-page .complaint-head {

    text-align: center;

    margin-bottom: 32px;

}



.interaction-complaint-page .complaint-head h1 {

    margin: 0 0 12px;

    font-size: 30px;

    line-height: 1.35;

    color: #1f2530;

    font-weight: 700;

}



.interaction-complaint-page .complaint-head p {

    margin: 0;

    color: #8a919d;

    font-size: 14px;

    line-height: 1.7;

}



.interaction-complaint-page .complaint-card {

    background: #fff;

    border-radius: 14px;

    padding: 32px 30px 30px;

    box-shadow: 0 4px 18px rgba(28, 39, 56, .09);

}



.interaction-complaint-page .field {

    margin-bottom: 27px;

}



.interaction-complaint-page .field-label {

    display: block;

    margin-bottom: 12px;

    font-size: 14px;

    color: #222b38;

    font-weight: 500;

}



.interaction-complaint-page .required {

    color: #ff4d3f;

    margin-right: 4px;

}



.interaction-complaint-page .field-tip {

    margin: -3px 0 8px;

    color: #999faa;

    font-size: 13px;

    line-height: 1.6;

}



.interaction-complaint-page .types {

    display: flex;

    flex-wrap: wrap;

    gap: 20px 24px;

}



.interaction-complaint-page .type-item {

    display: inline-flex;

    align-items: center;

    gap: 7px;

    min-width: 76px;

    font-size: 14px;

    color: #242c37;

    cursor: pointer;

    white-space: nowrap;

}



.interaction-complaint-page .type-item input {

    width: 17px;

    height: 17px;

    margin: 0;

    accent-color: #168cff;

    cursor: pointer;

}



.interaction-complaint-page textarea,

.interaction-complaint-page input[type="text"] {

    display: block;

    width: 100%;

    border: 1px solid #d5d9de;

    border-radius: 8px;

    background: #fff;

    color: #26313e;

    font: 14px/1.65 inherit;

    outline: none;

    transition: border-color .18s ease, box-shadow .18s ease;

}



.interaction-complaint-page textarea {

    height: 152px;

    min-height: 120px;

    padding: 12px 14px;

    resize: vertical;

}



.interaction-complaint-page input[type="text"] {

    height: 42px;

    padding: 0 14px;

}



.interaction-complaint-page textarea:focus,

.interaction-complaint-page input[type="text"]:focus {

    border-color: #168cff;

    box-shadow: 0 0 0 3px rgba(22, 140, 255, .10);

}



.interaction-complaint-page textarea::placeholder,

.interaction-complaint-page input::placeholder {

    color: #c0c4ca;

}



.interaction-complaint-page .form-message {

    margin: 0 0 22px;

    padding: 12px 14px;

    border-radius: 8px;

    font-size: 14px;

    line-height: 1.6;

}



.interaction-complaint-page .form-message.error {

    color: #c73535;

    background: #fff2f2;

    border: 1px solid #ffd0d0;

}



.interaction-complaint-page .form-message.success {

    color: #16794a;

    background: #edfff6;

    border: 1px solid #bfead4;

}



.interaction-complaint-page .actions {

    display: flex;

    align-items: center;

    gap: 12px;

    margin-top: 30px;

}



.interaction-complaint-page .submit {

    height: 42px;

    min-width: 76px;

    padding: 0 24px;

    border: 0;

    border-radius: 8px;

    background: #168cff;

    color: #fff;

    font-size: 14px;

    font-weight: 700;

    cursor: pointer;

    box-shadow: 0 8px 18px rgba(22, 140, 255, .20);

    transition: background .18s ease, transform .18s ease;

}



.interaction-complaint-page .submit:hover {

    background: #087eea;

    transform: translateY(-1px);

}



.interaction-complaint-page .submit:disabled {

    cursor: wait;

    opacity: .7;

}



.interaction-complaint-page .back {

    color: #78818d;

    font-size: 13px;

    text-decoration: none;

}



.interaction-complaint-page .back:hover {

    color: #168cff;

}



.interaction-complaint-page .website-field {

    position: absolute !important;

    left: -9999px !important;

    width: 1px !important;

    height: 1px !important;

    overflow: hidden !important;

}



@media (max-width: 700px) {

    body.interaction-complaint-page {

        padding: 28px 14px 40px;

    }



    .interaction-complaint-page .complaint-head {

        margin-bottom: 22px;

    }



    .interaction-complaint-page .complaint-head h1 {

        font-size: 25px;

    }



    .interaction-complaint-page .complaint-card {

        padding: 25px 18px;

        border-radius: 12px;

    }



    .interaction-complaint-page .types {

        display: grid;

        grid-template-columns: repeat(2, minmax(0, 1fr));

        gap: 15px 12px;

    }



    .interaction-complaint-page .type-item {

        min-width: 0;

    }



    .interaction-complaint-page .field {

        margin-bottom: 23px;

    }

}



@media (max-width: 380px) {

    .interaction-complaint-page .types {

        grid-template-columns: 1fr;

    }



    .interaction-complaint-page .complaint-head h1 {

        font-size: 23px;

    }

}

#interaction-back-top {
    position: fixed;
    right: 24px;
    bottom: 152px;
    z-index: 99989;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    padding: 0;
    border: 1px solid rgba(24, 24, 22, .12);
    border-radius: 50%;
    background: rgba(255, 255, 255, .96);
    color: #26221c;
    box-shadow: 0 8px 20px rgba(24, 24, 22, .16);
    cursor: pointer;
    opacity: 0;
    visibility: hidden;
    transform: translateY(12px);
    transition: opacity .22s ease, transform .22s ease, visibility .22s ease, background .18s ease;
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
}

#interaction-back-top.is-visible {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

#interaction-back-top:hover {
    background: #fff;
}

#interaction-back-top:focus-visible {
    outline: 3px solid rgba(24, 24, 22, .25);
    outline-offset: 3px;
}

#interaction-back-top svg {
    display: block;
    width: 18px;
    height: 18px;
    flex: none;
}

@media (max-width: 768px) {
    #interaction-back-top {
        right: 16px;
        bottom: 134px;
        width: 40px;
        height: 40px;
    }
}