/* 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: #28a4ea;
 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: #28a4ea;
 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 0;
 font-family: "Microsoft YaHei", "PingFang SC", Arial, sans-serif;
 color: #202633;
 background: #f5f5f5;
}

body.interaction-complaint-page .site-footer {
 margin-top: 48px;
 margin-left: calc(50% - 50vw);
 margin-right: calc(50% - 50vw);
 width: 100vw;
 max-width: 100vw;
}

.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 0;
 }

 .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;
 }
}
