:root {
    --ht-accent: #176caa;
    --ht-accent-text: #fff;
    --ht-danger: #b73744;
    --ht-tag-bg: #b73744;
    --ht-tag-color: #fff;
    --ht-notice-info: #176caa;
    --ht-notice-info-bg: #eef6ff;
    --ht-notice-info-border: #bdd8ef;
    --ht-notice-success: #286846;
    --ht-notice-success-bg: #eef8f1;
    --ht-notice-success-border: #b7dcc3;
    --ht-notice-warning: #8a5700;
    --ht-notice-warning-bg: #fff6df;
    --ht-notice-warning-border: #edd49a;
    --ht-notice-error: #b73744;
    --ht-notice-error-bg: #fff1f2;
    --ht-notice-error-border: #efb8bf;
    --ht-bg: #fff;
    --ht-text: #4a4a4a;
    --ht-header: #2c2020;
    --ht-muted: #6b6b6b;
    --ht-border: #e5e7eb;
    --ht-border-dashed: #dedede;
    --ht-input-bg: transparent;
    --ht-btn-bg: #ededed;
    --ht-btn-text: #313131;
    --ht-card-border: #e5e7eb;
    --ht-code-bg: #f5f2f2;
    --ht-code-text: #555;
    --ht-smiles-bg: #fff;
    --ht-smiles-bar: #f9f9f9
}

[data-theme=dark] {
    --ht-notice-info: #9acdf3;
    --ht-notice-info-bg: #20303d;
    --ht-notice-info-border: #3b5e78;
    --ht-notice-success: #98d0ac;
    --ht-notice-success-bg: #20342a;
    --ht-notice-success-border: #456b52;
    --ht-notice-warning: #efd193;
    --ht-notice-warning-bg: #30281d;
    --ht-notice-warning-border: #6b5430;
    --ht-notice-error: #f5a9b1;
    --ht-notice-error-bg: #3a2428;
    --ht-notice-error-border: #7d4850;
    --ht-accent: #a6b9e7;
    --ht-accent-text: #15171c;
    --ht-danger: #f2a0aa;
    --ht-tag-bg: #f2a0aa;
    --ht-tag-color: #27191c;
    --ht-bg: #15171c;
    --ht-text: #e4e7ee;
    --ht-header: #e4e7ee;
    --ht-muted: #a5adbc;
    --ht-border: #363c49;
    --ht-border-dashed: #4c5464;
    --ht-input-bg: #1d2027;
    --ht-btn-bg: #363c49;
    --ht-btn-text: #e4e7ee;
    --ht-card-border: #363c49;
    --ht-code-bg: #242832;
    --ht-code-text: #d1d6e0;
    --ht-smiles-bg: #1d2027;
    --ht-smiles-bar: #15171c
}

.Hitalk {
    box-sizing: border-box;
    color: var(--ht-text);
    font-family: -apple-system, BlinkMacSystemFont, Segoe UI, PingFang SC, Microsoft YaHei, sans-serif;
    font-size: 14px;
    line-height: 1.6
}

.Hitalk *,
.Hitalk :before,
.Hitalk :after {
    box-sizing: inherit
}

.Hitalk [hidden] {
    display: none !important
}

.Hitalk button {
    font: inherit;
    color: inherit;
    cursor: pointer;
    touch-action: manipulation;
    margin: 0;
    line-height: 1.4
}

.Hitalk button:disabled {
    cursor: not-allowed;
    opacity: .55
}

.Hitalk button:focus-visible,
.Hitalk a:focus-visible,
.Hitalk input[type=checkbox]:focus-visible {
    outline: 1px solid var(--ht-accent);
    outline-offset: 2px
}

.Hitalk .vinput {
    max-width: 100%;
    font: inherit;
    color: var(--ht-text);
    background-color: #0000;
    border: 0;
    border-radius: 0;
    outline: none;
    margin: 0;
    padding: 12px 0;
    line-height: 1.7;
    display: block
}

.Hitalk .vinput::placeholder {
    color: var(--ht-muted);
    opacity: 1
}

.Hitalk .vinput:disabled,
.Hitalk .vinput:read-only {
    opacity: .65
}

.Hitalk .vbtn {
    border: 1px solid var(--ht-border-dashed);
    background: var(--ht-btn-bg);
    min-height: 40px;
    color: var(--ht-btn-text);
    text-align: center;
    border-radius: 8px;
    justify-content: center;
    align-items: center;
    padding: 8px 18px;
    font-size: 14px;
    font-weight: 500;
    transition: background-color .18s, border-color .18s, color .18s;
    display: inline-flex
}

.Hitalk .vbtn:hover:not(:disabled) {
    color: var(--ht-accent);
    border-color: var(--ht-accent);
    background: var(--ht-bg)
}

.Hitalk .vbtn:active:not(:disabled) {
    border-color: var(--ht-accent)
}

.Hitalk .vwrap {
    border: 1px solid var(--ht-border-dashed);
    background: var(--ht-input-bg);
    border-radius: 8px;
    margin-bottom: 16px;
    padding: 16px;
    position: relative
}

.Hitalk .vheader {
    flex-wrap: wrap;
    gap: 0 16px;
    display: flex
}

.Hitalk .vprofile {
    border-bottom: 1px dashed var(--ht-border-dashed);
    align-items: center;
    gap: 12px;
    min-height: 45px;
    padding-bottom: 8px;
    display: flex
}

.Hitalk .vprofile-nick {
    min-width: 0;
    color: var(--ht-header);
    overflow-wrap: anywhere;
    font-weight: 600
}

.Hitalk .vprofile-edit {
    min-height: 32px;
    color: var(--ht-accent);
    background: 0 0;
    border: 0;
    border-radius: 4px;
    flex-shrink: 0;
    margin-left: auto;
    padding: 4px 8px;
    font-size: 12px
}

.Hitalk .vprofile-edit:hover:not(:disabled) {
    background: var(--ht-btn-bg)
}

.Hitalk .vheader .vinput {
    border-bottom: 1px dashed var(--ht-border-dashed);
    width: 100%;
    min-width: 0;
    color: var(--ht-header);
    flex: 140px
}

.Hitalk .veditor {
    border-bottom: 1px dashed var(--ht-border-dashed);
    resize: vertical;
    background: url(https://hexo-cdn.oss-cn-beijing.aliyuncs.com/oss/plbj.png) 100% 100% no-repeat;
    width: 100%;
    min-height: 160px;
    margin-top: 8px
}

.Hitalk .vheader .vinput:focus,
.Hitalk .veditor:focus {
    border-bottom-color: var(--ht-accent);
    box-shadow: 0 1px 0 var(--ht-accent);
    border-bottom-style: solid;
    outline: none
}

@media (forced-colors:active) {

    .Hitalk .vheader .vinput:focus,
    .Hitalk .veditor:focus {
        outline-offset: 2px;
        outline: 2px solid highlight
    }
}

.Hitalk .veditor:focus,
.Hitalk .veditor:not(:placeholder-shown) {
    background-image: none
}

.Hitalk .vreplying {
    border-left: 2px solid var(--ht-accent);
    background: var(--ht-btn-bg);
    color: var(--ht-header);
    overflow-wrap: anywhere;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    margin-top: 12px;
    padding: 8px 12px;
    font-size: 13px;
    display: flex
}

.Hitalk .vreplying button {
    min-height: 32px;
    color: var(--ht-accent);
    background: 0 0;
    border: 0;
    flex-shrink: 0;
    padding: 4px;
    font-size: 12px
}

.Hitalk .vreplying button:hover:not(:disabled) {
    text-underline-offset: 3px;
    text-decoration: underline
}

.Hitalk .vcontrol {
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 12px;
    padding-top: 12px;
    display: flex
}

.Hitalk .vcontrol>label {
    min-height: 40px;
    color: var(--ht-muted);
    cursor: pointer;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    display: inline-flex
}

.Hitalk .vnotify {
    width: 16px;
    height: 16px;
    accent-color: var(--ht-accent);
    margin: 0
}

.Hitalk .vsubmit {
    border-color: var(--ht-accent);
    background: var(--ht-accent);
    min-width: 88px;
    color: var(--ht-accent-text);
    gap: 8px;
    margin-left: auto
}

.Hitalk .hitalk-send-plane {
    flex: none;
    overflow: visible
}

.Hitalk .hitalk-reply-slot:not(:empty) {
    margin-top: 12px
}

@media (width<=520px) {
    .Hitalk .vheader .vinput {
        flex-basis: 100%;
        font-size: 16px
    }

    .Hitalk .veditor {
        font-size: 16px
    }
}

@media (width<=380px) {
    .Hitalk .vcontrol>label {
        flex-basis: 100%;
        order: 1;
        min-height: 32px
    }
}

.Hitalk .vlist,
.Hitalk .vquote {
    width: 100%;
    margin: 0;
    padding: 0;
    list-style: none
}

.Hitalk .vcard {
    gap: 12px;
    padding-top: 24px;
    scroll-margin-block: 72px;
    animation: .24s ease-out hitalk-comment-enter;
    display: flex;
    position: relative
}

.Hitalk .vimg {
    border: 1px solid var(--ht-border);
    object-fit: cover;
    background: var(--ht-btn-bg);
    border-radius: 50%;
    flex-shrink: 0;
    width: 40px;
    height: 40px
}

.Hitalk .vcard>section {
    border-bottom: 1px solid var(--ht-card-border);
    flex: 1;
    min-width: 0;
    padding-bottom: 24px
}

.Hitalk .vhead {
    flex-wrap: wrap;
    align-items: baseline;
    gap: 6px 10px;
    margin-bottom: 8px;
    line-height: 1.5;
    display: flex
}

.Hitalk .vhead a {
    color: var(--ht-header);
    overflow-wrap: anywhere;
    font-size: 14px;
    font-weight: 600;
    text-decoration: none
}

.Hitalk .vhead a:hover {
    color: var(--ht-accent)
}

.Hitalk .vpin,
.Hitalk .vbadge {
    border-radius: 4px;
    padding: 1px 6px;
    font-size: 11px;
    font-weight: 500;
    display: inline-block
}

.Hitalk .vpin {
    background: var(--ht-tag-bg);
    color: var(--ht-tag-color)
}

.Hitalk .vbadge {
    border: 1px solid var(--ht-border-dashed);
    color: var(--ht-accent)
}

.Hitalk .vtime,
.Hitalk .vua {
    color: var(--ht-muted);
    font-size: 12px
}

.Hitalk .vua {
    overflow-wrap: anywhere;
    flex-basis: 100%
}

.Hitalk .vcontent {
    overflow-wrap: anywhere;
    color: var(--ht-text);
    margin-bottom: 8px;
    font-size: 14px;
    line-height: 1.8;
    position: relative
}

.Hitalk .vcontent p {
    margin: 8px 0
}

.Hitalk .vcontent img {
    border-radius: 4px;
    max-width: 100%;
    height: auto
}

.Hitalk .vcontent img.biaoqing {
    vertical-align: middle;
    width: 30px;
    height: 30px;
    margin: 0 2px;
    display: inline-block
}

.Hitalk .vreply-to {
    border: 0;
    border-left: 2px solid var(--ht-border-dashed);
    max-width: 100%;
    min-height: 32px;
    color: var(--ht-accent);
    text-align: left;
    overflow-wrap: anywhere;
    background: 0 0;
    border-radius: 0;
    margin-bottom: 4px;
    padding: 4px 8px;
    font-size: 12px;
    display: inline-block
}

.Hitalk .vreply-to:hover:not(:disabled) {
    border-color: var(--ht-accent);
    background: var(--ht-btn-bg)
}

.Hitalk .vcard:focus {
    outline: none
}

.Hitalk .vcard:focus-visible>section>.vhead {
    position: relative
}

.Hitalk .vcard:focus-visible>section>.vhead:before {
    content: "";
    border-inline-start: 2px solid var(--ht-accent);
    inset-inline-start: -6px;
    height: 1.5em;
    position: absolute;
    top: 0
}

.Hitalk .vmeta {
    flex-wrap: wrap;
    align-items: center;
    gap: 4px 8px;
    display: flex
}

.Hitalk .vmeta button {
    min-height: 32px;
    color: var(--ht-muted);
    background: 0 0;
    border: 0;
    border-radius: 4px;
    justify-content: center;
    align-items: center;
    gap: 5px;
    padding: 4px 8px;
    font-size: 12px;
    display: inline-flex
}

.Hitalk .vmeta button:hover:not(:disabled) {
    background: var(--ht-btn-bg);
    color: var(--ht-accent)
}

.Hitalk .vmeta .vlike[aria-pressed=true],
.Hitalk .vmeta .vdelete:hover:not(:disabled) {
    color: var(--ht-danger)
}

.Hitalk .vlike {
    position: relative
}

.Hitalk .vlike-symbol {
    display: inline-block
}

.Hitalk .hitalk-like-spark {
    color: var(--ht-danger);
    opacity: 0;
    pointer-events: none;
    font-size: 10px;
    position: absolute;
    top: 4px;
    left: 9px
}

.Hitalk .vquote:not(:empty) {
    border-left: 2px solid var(--ht-border);
    margin-top: 12px;
    padding-left: 16px
}

.Hitalk .vquote .vcard {
    padding-top: 16px
}

.Hitalk .vquote .vcard:first-child {
    padding-top: 0
}

.Hitalk .vquote .vimg {
    width: 32px;
    height: 32px
}

.Hitalk .vquote .vcard>section {
    border-bottom: 0;
    padding-bottom: 16px
}

.Hitalk .vquote .vcard:last-child>section {
    padding-bottom: 0
}

.Hitalk .vmore-replies {
    color: var(--ht-accent);
    background: 0 0;
    margin-top: 16px;
    padding: 6px 12px;
    font-size: 12px
}

.Hitalk .vcontent table {
    border-collapse: collapse;
    max-width: 100%;
    margin: 12px 0;
    display: block;
    overflow-x: auto
}

.Hitalk .vcontent th,
.Hitalk .vcontent td {
    border: 1px solid var(--ht-border);
    padding: 6px 10px
}

.Hitalk .vcontent th {
    font-weight: 600
}

.Hitalk .vcontent blockquote {
    border-left: 3px solid var(--ht-border-dashed);
    color: var(--ht-muted);
    margin: 12px 0;
    padding: 2px 14px
}

.Hitalk .vcontent hr {
    border: 0;
    border-top: 1px solid var(--ht-border);
    margin: 16px 0
}

.Hitalk .vcontent ol,
.Hitalk .vcontent ul {
    padding-inline-start: 1.5em
}

.Hitalk .vcontent a {
    color: var(--ht-accent);
    text-underline-offset: 3px;
    text-decoration: underline
}

.Hitalk .vcontent code,
.Hitalk .vcontent pre {
    background: var(--ht-code-bg);
    color: var(--ht-code-text);
    border-radius: 4px;
    font: 13px/1.7 ui-monospace, SFMono-Regular, Consolas, monospace
}

.Hitalk .vcontent code {
    padding: 2px 5px
}

.Hitalk .vcontent pre {
    max-width: 100%;
    padding: 12px 14px;
    overflow-x: auto
}

.Hitalk .vcontent pre code {
    background: 0 0;
    padding: 0
}

.Hitalk .vcontent.expand {
    cursor: pointer;
    max-height: 180px;
    overflow: hidden
}

.Hitalk .vcontent.expand:after {
    content: "点击展开全文";
    background: var(--ht-bg);
    border-top: 1px dashed var(--ht-border);
    color: var(--ht-accent);
    text-align: center;
    padding: 12px;
    font-size: 12px;
    position: absolute;
    inset: auto 0 0
}

@media (width<=520px) {
    .Hitalk .vcard {
        gap: 8px
    }

    .Hitalk .vimg {
        width: 32px;
        height: 32px
    }

    .Hitalk .vquote:not(:empty) {
        padding-left: 8px
    }

    .Hitalk .vquote .vimg {
        width: 24px;
        height: 24px
    }
}

@keyframes hitalk-comment-enter {
    0% {
        opacity: 0
    }

    to {
        opacity: 1
    }
}

.Hitalk .hitalk-root[data-comments-enabled=false] .vat {
    display: none
}

.Hitalk .vemoji {
    flex: none;
    position: relative
}

.Hitalk .vemoji>button {
    background: var(--ht-btn-bg);
    min-width: 84px;
    min-height: 44px;
    color: var(--ht-btn-text);
    white-space: nowrap;
    border: 1px solid #0000;
    border-radius: 999px;
    place-items: center;
    padding: 0 10px;
    font-size: 15px;
    line-height: 1;
    display: grid
}

.Hitalk .vemoji>button:hover:not(:disabled),
.Hitalk .vemoji>button[aria-expanded=true] {
    background: var(--ht-btn-bg);
    border-color: var(--ht-border)
}

.Hitalk .vemoji-face {
    font-family: ui-rounded, PingFang SC, Microsoft YaHei, sans-serif;
    transition: transform .18s ease-out;
    display: inline-block
}

.Hitalk .vemoji>button:hover:not(:disabled) .vemoji-face,
.Hitalk .vemoji>button[aria-expanded=true] .vemoji-face {
    transform: translateY(-1px)rotate(-5deg)
}

@media (prefers-reduced-motion:reduce) {
    .Hitalk .vemoji-face {
        transition: none
    }
}

.Hitalk .smiles-body {
    background: var(--ht-smiles-bg);
    border: 1px solid var(--ht-border-dashed);
    z-index: 10;
    border-radius: 8px;
    width: min(340px, 100vw - 128px);
    min-width: 160px;
    display: block;
    position: absolute;
    bottom: calc(100% + 8px);
    left: 0;
    box-shadow: 0 6px 24px #0000001f
}

.Hitalk .smiles-items {
    overscroll-behavior: contain;
    grid-template-columns: repeat(auto-fill, minmax(40px, 1fr));
    gap: 2px;
    max-height: min(240px, 45svh);
    margin: 0;
    padding: 10px;
    list-style: none;
    display: none;
    overflow-y: auto
}

.Hitalk .smiles-items-show {
    display: grid
}

.Hitalk .smiles-item {
    background: 0 0;
    border: 0;
    border-radius: 4px;
    place-items: center;
    width: 100%;
    min-height: 40px;
    padding: 4px;
    display: grid
}

.Hitalk .smiles-item:hover {
    background: var(--ht-btn-bg)
}

.Hitalk .smiles-item img {
    width: 30px;
    height: 30px
}

.Hitalk .smiles-bar {
    border-top: 1px solid var(--ht-border);
    background: var(--ht-smiles-bar);
    border-radius: 0 0 8px 8px;
    padding: 8px 10px
}

.Hitalk .smiles-packages {
    gap: 8px;
    margin: 0;
    padding: 0;
    list-style: none;
    display: flex
}

.Hitalk .smiles-name {
    min-height: 32px;
    color: var(--ht-text);
    background: 0 0;
    border: 1px solid #0000;
    border-radius: 4px;
    padding: 4px 12px;
    font-size: 12px
}

.Hitalk .smiles-name:hover {
    border-color: var(--ht-border-dashed)
}

.Hitalk .smiles-package-active {
    background: var(--ht-accent);
    color: var(--ht-accent-text)
}

.Hitalk .hitalk-feedback {
    --ht-feedback-accent: var(--ht-notice-info);
    --ht-feedback-bg: var(--ht-notice-info-bg);
    --ht-feedback-border: var(--ht-notice-info-border);
    top: var(--ht-feedback-top, 12px);
    z-index: 2;
    color: var(--ht-feedback-accent);
    align-items: flex-start;
    gap: 10px;
    font-size: 13px;
    line-height: 1.6;
    display: flex;
    position: sticky
}

.Hitalk .hitalk-feedback[data-kind=success] {
    --ht-feedback-accent: var(--ht-notice-success);
    --ht-feedback-bg: var(--ht-notice-success-bg);
    --ht-feedback-border: var(--ht-notice-success-border)
}

.Hitalk .hitalk-feedback[data-kind=warning] {
    --ht-feedback-accent: var(--ht-notice-warning);
    --ht-feedback-bg: var(--ht-notice-warning-bg);
    --ht-feedback-border: var(--ht-notice-warning-border)
}

.Hitalk .hitalk-feedback[data-kind=error] {
    --ht-feedback-accent: var(--ht-notice-error);
    --ht-feedback-bg: var(--ht-notice-error-bg);
    --ht-feedback-border: var(--ht-notice-error-border)
}

.Hitalk .hitalk-feedback[data-visible=true] {
    border: 1px solid var(--ht-feedback-border);
    border-inline-start: 3px solid var(--ht-feedback-accent);
    background: var(--ht-feedback-bg);
    border-radius: 6px;
    margin: 12px 0;
    padding: 12px 14px;
    box-shadow: 0 3px 12px #0000000f
}

.Hitalk .hitalk-feedback-icon {
    flex: 0 0 22px;
    width: 22px;
    height: 22px;
    display: block
}

.Hitalk .hitalk-feedback[data-kind=loading] .hitalk-feedback-icon {
    animation: .9s linear infinite hitalk-feedback-spin
}

.Hitalk .hitalk-feedback[data-kind=loading] .hitalk-feedback-icon circle {
    opacity: .25
}

.Hitalk .hitalk-status {
    overflow-wrap: anywhere;
    flex: 1;
    min-width: 0
}

.Hitalk .hitalk-feedback-title {
    margin-bottom: 2px;
    font-size: 14px;
    font-weight: 600;
    display: block
}

.Hitalk .hitalk-feedback-message {
    display: block
}

@keyframes hitalk-feedback-spin {
    to {
        transform: rotate(360deg)
    }
}

.Hitalk .hitalk-retry {
    margin-bottom: 12px;
    font-size: 13px
}

.Hitalk .info {
    padding: 16px 0 0
}

.Hitalk .count {
    color: var(--ht-header);
    font-size: 14px;
    font-weight: 600
}

.Hitalk .hitalk-loading,
.Hitalk .vempty {
    color: var(--ht-muted);
    text-align: center;
    padding: 32px 16px;
    font-size: 14px
}

.Hitalk .hitalk-receipts {
    border: 1px dashed var(--ht-border-dashed);
    border-radius: 8px;
    margin-top: 20px;
    padding: 16px
}

.Hitalk .hitalk-receipts-title {
    color: var(--ht-muted);
    margin: 0;
    font-size: 12px
}

.Hitalk .hitalk-receipts .vcard {
    padding-top: 16px
}

.Hitalk .hitalk-receipts .vcard:last-child>section {
    border-bottom: 0;
    padding-bottom: 0
}

.Hitalk .hitalk-comment-status {
    color: var(--ht-muted);
    margin: 8px 0;
    font-size: 12px
}

.Hitalk .hitalk-more {
    background: 0 0;
    min-width: 152px;
    max-width: 100%;
    min-height: 44px;
    margin: 24px auto 16px;
    display: flex
}

.Hitalk .hitalk-more:disabled {
    cursor: wait
}

@media (prefers-reduced-motion:reduce) {

    .Hitalk *,
    .Hitalk :before,
    .Hitalk :after {
        scroll-behavior: auto !important;
        transition: none !important;
        animation: none !important
    }
}