/* ================================================================
   列表卡评论 / 评论表单（comment-*） · 从 style.css 拆出
   由 tools/css-feature-split.js 生成。加载顺序：style.css 之后、
   layout-airy.css / talk-comment.css 之前，保持原有覆盖关系。
   ================================================================ */
/* 数字等宽（meta、分页、时间） */
.post-meta,.pagination,.diary-time,.side-weather-range,.comment-page {
    font-variant-numeric:tabular-nums;
}

/* 点击「评论」后展开的前台评论表单 */
.post-comment-box {
    margin-top:1.5rem;
}

.post-comment-box[hidden] {
    display:none;
}

.post-comment-box .talk-form {
    margin-top:0;
}

.comment-list {
    list-style:none;
    margin:1.5rem -1.5rem 0;
}

.comment-list>.comment {
    position:relative;
    padding:1rem 1.5rem;
}

.comment-page-li {
    padding-top:20px;
    list-style:none;
}

.comment-page {
    display:flex;
    align-items:center;
    justify-content:center;
    gap:6px;
    font-size:12.5px;
    color:var(--ink-2);
    font-variant-numeric:tabular-nums;
}

.comment-page a,.comment-page>span {
    display:inline-flex;
    align-items:center;
    justify-content:center;
    min-width:30px;
    height:30px;
    padding:0 9px;
    border-radius:9px;
    line-height:1;
    transition:background .2s,color .2s,border-color .2s;
}

.comment-page a {
    background:var(--paper-2);
    color:var(--ink-2);
    font-weight:500;
}

.comment-page a:hover {
    color:var(--accent-ink);
    background:color-mix(in srgb,var(--accent) 10%,var(--paper-2));
}

.comment-page>span {
    background:var(--accent);
    color:#fff;
    font-weight:600;
    box-shadow:0 2px 8px color-mix(in srgb,var(--accent) 28%,transparent);
}

.comment-page em {
    padding:0 2px;
    font-style:normal;
    color:var(--ink-3);
}

.comment-page a[title="Previous Page"],.comment-page a[title="Next Page"] {
    min-width:30px;
    padding:0;
    background:transparent;
    border:1px solid var(--line);
    color:var(--ink-2);
    font-size:15px;
    font-weight:400;
}

.comment-page a[title="Previous Page"]:hover,.comment-page a[title="Next Page"]:hover {
    border-color:color-mix(in srgb,var(--accent) 45%,var(--line));
    background:color-mix(in srgb,var(--accent) 8%,transparent);
    color:var(--accent-ink);
}

.comment-avatar {
    width:48px;
    height:48px;
    border-radius:8px;
    object-fit:cover;
    flex:0 0 auto;
    display:block;
    /* cravatar 的默认头像是透明底的灰色剪影：再铺浅底+描边，会读成「方头像里套着一个人头像」 */background:transparent;
    box-shadow:none;
}

.comment-body {
    flex:1;
    min-width:0;
}

.comment-head {
    display:flex;
    align-items:baseline;
    flex-wrap:wrap;
    gap:8px;
}

.comment-name {
    display:inline-flex;
    align-items:center;
    gap:6px;
    min-width:0;
    font-size:15px;
    font-weight:600;
    line-height:1.5;
    color:var(--ink);
    overflow-wrap:anywhere;
}

.comment-name a {
    color:inherit;
}

.comment-name a:hover {
    color:var(--accent-ink);
}

.comment-date {
    flex:0 0 auto;
    font-size:12.5px;
    font-weight:400;
    color:var(--ink-3);
    font-variant-numeric:tabular-nums;
    white-space:nowrap;
}

.comment-badger {
    flex:0 0 auto;
    padding:1px 7px;
    font-size:10.5px;
    font-weight:600;
    line-height:1.6;
    color:var(--accent-ink);
    background:color-mix(in srgb,var(--accent) 10%,transparent);
    border-radius:999px;
}

.comment-content {
    margin-top:8px;
    font-size:15px;
    line-height:1.8;
    color:var(--ink);
    word-break:break-word;
}

.comment-content a {
    color:var(--accent-ink);
    text-decoration:underline;
    text-underline-offset:2px;
    text-decoration-thickness:1px;
    text-decoration-color:color-mix(in srgb,var(--accent) 35%,transparent);
}

.comment-content a:hover {
    text-decoration-color:currentColor;
}

.comment-content img {
    max-height:200px;
    border-radius:8px;
}

.comment-sub {
    display:flex;
    align-items:center;
    flex-wrap:wrap;
    gap:6px 12px;
    margin-top:8px;
    font-size:12.5px;
    line-height:1.6;
    color:var(--ink-3);
}

.comment-meta {
    color:var(--ink-3);
}

.comment-ua {
    display:inline-flex;
    align-items:center;
    gap:5px;
}

.comment-ua-item {
    display:inline-flex;
    align-items:center;
    gap:4px;
}

.comment-ua-icon {
    display:inline-flex;
    align-items:center;
    position:relative;
    color:var(--ink-3);
}

.comment-ua-icon svg {
    width:auto;
    height:12px;
    display:block;
}

.comment-loc {
    display:inline-flex;
    align-items:center;
    gap:3px;
}

.comment-loc .ci {
    font-size:12px;
    opacity:.75;
}

/* 子评论：浅色回复组，单级缩进 */
.comment-children-list {
    list-style:none;
    margin:14px 0 0;
    padding:20px 22px;
    background:color-mix(in srgb,var(--paper-2) 80%,var(--card));
    border-radius:10px;
}

.comment-children-list .comment+.comment {
    margin-top:1.5rem;
}

.comment-children {
    gap:14px;
}

.comment-children .comment-avatar {
    width:40px;
    height:40px;
    border-radius:8px;
}

.comment-children .comment-name {
    font-size:14px;
}

.comment-children .comment-date {
    font-size:12px;
}

.comment-children .comment-content {
    margin-top:6px;
    font-size:14.5px;
    line-height:1.8;
}

.comment-children .comment-sub {
    margin-top:6px;
    font-size:12px;
}

/* 回复表单插入行 */
.comment-reply-li {
    list-style:none;
    padding:16px 1.5rem;
}

.comment-form {
    padding:16px;
    background:color-mix(in srgb,var(--paper-2) 75%,var(--card));
    border:1px solid var(--line);
    border-radius:var(--radius);
}

/* 回复对象提示条 */
.comment-reply-hint {
    display:flex;
    align-items:center;
    gap:7px;
    margin-bottom:10px;
    padding:7px 8px 7px 12px;
    background:color-mix(in srgb,var(--accent) 7%,var(--card));
    border:1px solid color-mix(in srgb,var(--accent) 16%,var(--line));
    border-radius:var(--radius);
    font-size:12.5px;
    color:var(--ink-2);
}

.comment-reply-hint[hidden] {
    display:none;
}

.comment-reply-hint-icon {
    display:inline-flex;
    font-size:13px;
    line-height:0;
    color:var(--accent-ink);
}

.comment-reply-hint b {
    font-weight:600;
    color:var(--accent-ink);
}

.comment-reply-cancel {
    display:inline-flex;
    align-items:center;
    justify-content:center;
    width:24px;
    height:24px;
    margin-left:auto;
    padding:0;
    background:transparent;
    border:0;
    border-radius:6px;
    font-size:12px;
    color:var(--ink-3);
    transition:background .15s,color .15s;
}

.comment-reply-cancel:hover {
    background:color-mix(in srgb,var(--accent) 12%,transparent);
    color:var(--accent-ink);
}

.comment-form-info {
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:10px;
    margin-bottom:10px;
}

.comment-field {
    display:flex;
    align-items:stretch;
    min-width:0;
    background:var(--card);
    border:1px solid var(--line);
    border-radius:var(--radius);
    box-shadow:0 1px 2px rgba(31,41,55,.03);
    overflow:hidden;
    transition:border-color .2s,box-shadow .2s;
}

.comment-field:hover {
    border-color:color-mix(in srgb,var(--accent) 32%,var(--line));
}

.comment-field:focus-within {
    border-color:var(--accent);
    box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 13%,transparent);
}

.comment-field-name {
    display:flex;
    align-items:center;
    gap:5px;
    flex:0 0 auto;
    padding:0 12px;
    color:var(--ink-3);
    font-size:13px;
    font-weight:600;
    border-right:1px solid var(--line-2);
    white-space:nowrap;
    transition:color .2s;
}

.comment-field:focus-within .comment-field-name {
    color:var(--accent-ink);
}

.comment-field-icon {
    display:inline-flex;
    font-size:14px;
    line-height:0;
    color:var(--ink-3);
    transition:color .2s;
}

.comment-field:focus-within .comment-field-icon {
    color:var(--accent-ink);
}

.comment-field-req {
    color:var(--accent);
    line-height:1;
}

.comment-field input {
    flex:1;
    min-width:0;
    width:100%;
    background:transparent;
    border:0;
    border-radius:0;
    padding:10px 12px;
    font-size:14px;
    outline:none;
}

.comment-field input::placeholder {
    color:var(--ink-3);
}

.comment-editor {
    position:relative;
}

.comment-form textarea {
    display:block;
    width:100%;
    min-height:128px;
    padding:14px 16px 32px;
    background:var(--card);
    border:1px solid var(--line);
    border-radius:var(--radius);
    box-shadow:0 1px 2px rgba(31,41,55,.03);
    font-size:14px;
    line-height:1.75;
    outline:none;
    resize:none;
    transition:border-color .2s,box-shadow .2s;
}

.comment-form textarea::placeholder {
    color:var(--ink-3);
}

.comment-editor-count {
    position:absolute;
    right:14px;
    bottom:10px;
    padding:2px 0 2px 12px;
    background:linear-gradient(90deg,transparent,var(--card) 38%);
    font-size:11.5px;
    line-height:1;
    color:var(--ink-3);
    font-variant-numeric:tabular-nums;
    pointer-events:none;
    transition:color .2s;
}

.comment-editor:focus-within .comment-editor-count {
    color:var(--ink-2);
}

.comment-form-foot {
    position:relative;
    display:flex;
    align-items:center;
    flex-wrap:wrap;
    gap:10px 12px;
    margin-top:12px;
}

.comment-form-tools {
    display:flex;
    align-items:center;
    gap:12px;
    margin-right:auto;
}

.comment-form-tip {
    display:inline-flex;
    align-items:center;
    gap:4px;
    font-size:11.5px;
    color:var(--ink-3);
}

.comment-form-tip kbd {
    padding:2px 5px;
    font-family:var(--sans);
    font-size:10.5px;
    line-height:1.2;
    color:var(--ink-2);
    background:var(--card);
    border:1px solid var(--line);
    border-bottom-width:2px;
    border-radius:4px;
}

.comment-form-actions {
    display:flex;
    align-items:center;
    gap:8px;
}

.comment-form-login {
    margin-right:auto;
    font-size:13px;
    color:var(--ink-2);
}

.comment-emoji-btn {
    display:inline-flex;
    align-items:center;
    gap:6px;
    height:32px;
    flex:0 0 auto;
    padding:0 11px 0 7px;
    background:var(--card);
    border:1px solid var(--line);
    border-radius:var(--radius);
    color:var(--ink-2);
    font-size:12.5px;
    line-height:1;
    transition:border-color .2s,background .2s,color .2s;
}

.comment-emoji-btn:hover,.comment-emoji-btn[aria-expanded='true'] {
    border-color:color-mix(in srgb,var(--accent) 40%,var(--line));
    background:color-mix(in srgb,var(--accent) 8%,var(--card));
    color:var(--accent-ink);
}

.comment-emoji-btn svg {
    display:block;
    width:20px;
    height:20px;
}

.comment-form .comment-submit {
    gap:5px;
    height:32px;
    padding:0 12px;
    border-radius:var(--radius);
    background:var(--accent);
    color:#fff;
    font-size:12.5px;
    font-weight:600;
    box-shadow:0 1px 4px color-mix(in srgb,var(--accent) 24%,transparent);
    transition:background .2s,box-shadow .2s,transform .18s var(--ease),opacity .2s;
}

.comment-form .comment-submit .ci {
    font-size:12.5px;
}

.comment-form .comment-submit:hover {
    background:color-mix(in srgb,var(--accent) 88%,#000);
    color:#fff;
    opacity:1;
    transform:translateY(-1px);
    box-shadow:0 4px 12px color-mix(in srgb,var(--accent) 32%,transparent);
}

.comment-form .comment-submit:active {
    transform:translateY(0) scale(.98);
    box-shadow:0 1px 4px color-mix(in srgb,var(--accent) 24%,transparent);
}

.comment-emoji-panel {
    position:absolute;
    left:0;
    right:0;
    bottom:calc(100% + 8px);
    z-index:30;
    max-height:260px;
    overflow-y:auto;
    padding:10px;
    background:var(--card);
    border:1px solid var(--line);
    border-radius:var(--radius);
    box-shadow:0 12px 32px rgba(15,23,42,.12);
    -webkit-overflow-scrolling:touch;
}

.comment-emoji-panel[hidden] {
    display:none;
}

[data-theme='dark'] .comment-emoji-panel {
    box-shadow:0 12px 32px rgba(0,0,0,.45);
}

.comment-emoji-grid {
    display:grid;
    grid-template-columns:repeat(auto-fill,minmax(42px,1fr));
    gap:6px;
}

.comment-emoji-grid:empty::before {
    content:"加载中…";
    grid-column:1 / -1;
    padding:12px 2px;
    font-size:13px;
    color:var(--ink-3);
}

.comment-emoji-item {
    display:flex;
    align-items:center;
    justify-content:center;
    aspect-ratio:1;
    padding:2px;
    background:transparent;
    border:0;
    border-radius:6px;
    cursor:pointer;
    transition:background .15s;
}

.comment-emoji-item:hover {
    background:var(--paper-2);
}

.comment-emoji-item img {
    display:block;
    width:100%;
    height:100%;
    object-fit:contain;
}

.comment-emoji-img {
    display:inline-block;
    width:1.7em;
    height:1.7em;
    object-fit:contain;
    vertical-align:-.3em;
    margin:0 1px;
}

.comment-captcha {
    display:flex;
    align-items:center;
    gap:6px;
}

.comment-captcha img {
    display:block;
    width:93px;
    height:31px;
    border:1px solid var(--line);
    border-radius:6px;
    background:var(--card);
    cursor:pointer;
}

.comment-form .comment-captcha input {
    width:78px;
    height:32px;
    background:var(--card);
    border:1px solid var(--line);
    border-radius:var(--radius-s);
    padding:0 10px;
    font-size:13px;
    outline:none;
    transition:border-color .2s;
}

.comment-form .comment-captcha input:focus {
    border-color:var(--accent-ink);
}

.comment-form-login a {
    color:var(--accent-ink);
    font-weight:600;
}

.comment-captcha-modal {
    position:fixed;
    inset:0;
    z-index:300;
    display:flex;
    align-items:center;
    justify-content:center;
    padding:20px;
}

.comment-captcha-modal[hidden] {
    display:none;
}

.comment-captcha-mask {
    position:absolute;
    inset:0;
    background:rgba(15,23,42,.45);
    -webkit-backdrop-filter:blur(3px);
    backdrop-filter:blur(3px);
}

.comment-captcha-panel {
    position:relative;
    width:min(320px,100%);
    background:var(--card);
    border:1px solid var(--line);
    border-radius:12px;
    padding:20px;
    box-shadow:0 18px 50px rgba(15,23,42,.18);
}

[data-theme='dark'] .comment-captcha-panel {
    box-shadow:0 18px 50px rgba(0,0,0,.5);
}

.comment-captcha-title {
    font-size:15px;
    font-weight:600;
    color:var(--ink);
    margin-bottom:14px;
}

#comment-captcha-modal .comment-captcha {
    justify-content:center;
    gap:10px;
}

#comment-captcha-modal .comment-captcha img {
    width:108px;
    height:36px;
}

#comment-captcha-modal .comment-captcha input {
    width:112px;
    height:36px;
    padding:0 12px;
    font-size:14px;
    background:var(--paper-2);
    border-color:transparent;
}

.comment-captcha-actions {
    display:flex;
    justify-content:center;
    gap:10px;
    margin-top:18px;
}

.comment-captcha-actions .btn {
    min-width:88px;
}

.comment-captcha-actions [data-captcha-close] {
    background:transparent;
    color:var(--ink-2);
}

.comment-captcha-actions [data-captcha-close]:hover {
    opacity:1;
    color:var(--accent-ink);
}

@media (max-width:760px) {
    .comment-field-icon {
    display:none;
}

}

@media (max-width:560px) {
    .comment-avatar {
    width:40px;
    height:40px;
}

  .comment-list {
    margin-left:-0.75rem;
    margin-right:-0.75rem;
}

  .comment-list>.comment {
    padding:1rem 0.75rem;
}

  .comment-reply-li {
    padding:16px 0.75rem;
}

  .comment-children-list {
    padding:16px;
}

  .comment-sub {
    gap:4px 10px;
}

  .comment-form-info {
    grid-template-columns:1fr;
}

  .comment-form {
    padding:12px;
}

  .comment-form-tip {
    display:none;
}

  .comment-form .comment-submit {
    padding:0 16px;
}

}

.sidebar-newcomm .cm-comment-text {
    display:block;
    padding:0;
    /* 两行窗口：整数行高 22px × 2 = 44px。
       第 3 行行盒从 44px 开始，13px 字形的墨迹要到约 48px 才出现，
       因此 44px 处裁剪不会切出半截字。
       不用 -webkit-line-clamp：它在当前环境计算 display 退化为 flow-root，
       clamp 不生效，只剩气泡层 padding-box 在裁，才会露出第三行字头。 */max-height:44px;
    overflow:hidden;
    word-break:break-word;
}

.side-col .sidebar-newcomm .cm-comment-text {
    /* 不用 -webkit-box + -webkit-line-clamp：!important 会压过表情图的内联 display 之外的一切，
       且该布局把行内内容拆成独立盒子，表情必被挤到单独一行。
       改为普通块 + 几何裁剪：2 行 × 1.5 行高 = 3em，第三行没有露头空间。 */
    display:block!important;
    -webkit-line-clamp:unset!important;
    overflow:hidden!important;
    max-height:3em!important;
    padding:0!important;
    line-height:1.5!important;
    word-break:break-word;
}

/* 侧栏正文里的表情图必须行内：全局 img{display:block} 会让表情独占一行。
   放在这里是因为 comment.css 的 !important 层级高于模板里写的内联样式。 */
.sidebar-newcomm .cm-comment-text img,
.sidebar-newcomm .cm-comment-text .cm-emoji {
    display:inline!important;
    max-width:none;
    vertical-align:-.2em;
    margin:0 1px;
}