/* ===== 工具页留言区共享样式 =====
   独立视觉的工具页（自带 .xxx- 前缀样式表）如果引入 tools.partials.comments，
   必须同时引入本文件，否则 .cm-* 元素完全没有样式（留言板会散成一坨）。

   规则全部加 .cm-wrap 祖先（特异性 0-2-0），用于压过页面自身的
   .xxx-panel p / .xxx-panel h3 / .xxx-panel b 等正文规则，避免留言区被污染。
   配色统一走站点 --c-* 变量，浅色/深色自动跟随导航栏主题切换。 */

.cm-wrap {
    display: flex;
    flex-direction: column;
    gap: 26px;
    color: var(--c-text, #111827);
    font-size: 14px;
    line-height: 1.7;
}

/* 顶部标题行 */
.cm-wrap .cm-head-row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
}
.cm-wrap .cm-title {
    font-size: 18px;
    font-weight: 800;
    color: var(--c-text, #111827);
    margin: 0;
    line-height: 1.4;
}
.cm-wrap .cm-count {
    display: inline-block;
    min-width: 22px;
    text-align: center;
    font-size: 12px;
    color: var(--c-primary, #0066ff);
    background: var(--c-primary-soft, rgba(0, 102, 255, .1));
    border-radius: 999px;
    padding: 1px 8px;
    margin-left: 4px;
}
.cm-wrap .cm-note {
    font-size: 12px;
    color: var(--c-text-muted, #94a3b8);
}

/* 留言列表 */
.cm-wrap .cm-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.cm-wrap .cm-item {
    display: flex;
    gap: 12px;
    padding: 14px 16px;
    background: var(--c-surface-soft, #f8fafc);
    border: 1px solid var(--c-border, #e5e7eb);
    border-radius: var(--radius-md, 16px);
}
.cm-wrap .cm-avatar {
    width: 38px;
    height: 38px;
    flex-shrink: 0;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    font-weight: 700;
    color: #fff;
    background: linear-gradient(135deg, var(--c-primary, #0066ff), var(--c-accent-cyan, #00d4ff));
    user-select: none;
}
.cm-wrap .cm-main { min-width: 0; flex: 1; }
.cm-wrap .cm-head {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    margin-bottom: 4px;
}
.cm-wrap .cm-name {
    font-size: 14px;
    font-weight: 700;
    color: var(--c-text, #111827);
}
.cm-wrap .cm-tag {
    font-size: 11px;
    padding: 0 8px;
    border-radius: 999px;
    background: #e2e8f0;
    color: #64748b;
    line-height: 18px;
}
.cm-wrap .cm-tag-user {
    background: var(--c-primary-soft, rgba(0, 102, 255, .1));
    color: var(--c-primary, #0066ff);
}
.cm-wrap .cm-time {
    margin-left: auto;
    font-size: 12px;
    color: var(--c-text-muted, #94a3b8);
}
.cm-wrap .cm-content {
    margin: 0;
    font-size: 14px;
    line-height: 1.7;
    color: var(--c-text-sub, #5b6478);
    white-space: pre-wrap;
    word-break: break-word;
}

/* 管理员回复 */
.cm-wrap .cm-admin-reply {
    margin-top: 8px;
    padding: 10px 14px;
    border-radius: 10px;
    background: color-mix(in srgb, var(--c-primary, #0066ff) 5%, transparent);
    border: 1px solid color-mix(in srgb, var(--c-primary, #0066ff) 18%, transparent);
    border-left: 3px solid var(--c-primary, #0066ff);
}
.cm-wrap .cm-admin-reply-head {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 4px;
}
.cm-wrap .cm-admin-tag {
    font-size: 11px;
    font-weight: 700;
    color: var(--c-primary, #0066ff);
    background: color-mix(in srgb, var(--c-primary, #0066ff) 10%, transparent);
    padding: 1px 8px;
    border-radius: 999px;
}
.cm-wrap .cm-admin-time { font-size: 11px; color: var(--c-text-muted, #94a3b8); }
.cm-wrap .cm-admin-content {
    margin: 0;
    font-size: 13px;
    line-height: 1.6;
    color: var(--c-text-sub, #5b6478);
}
/* 留言表单 */
.cm-wrap .cm-form {
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding: 20px;
    border: 1px solid var(--c-border, #e5e7eb);
    border-radius: var(--radius-md, 16px);
    background: var(--c-surface, #fff);
}
.cm-wrap .cm-form-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    flex-wrap: wrap;
}
.cm-wrap .cm-form-title {
    font-size: 15px;
    font-weight: 800;
    color: var(--c-text, #111827);
    margin: 0;
}
.cm-wrap .cm-login-tip { font-size: 12px; color: var(--c-text-muted, #94a3b8); }
.cm-wrap .cm-login-tip b { color: var(--c-primary, #0066ff); }
.cm-wrap .cm-login-tip a { color: var(--c-primary, #0066ff); }

.cm-wrap .cm-field { position: relative; }
.cm-wrap .cm-input,
.cm-wrap .cm-textarea {
    width: 100%;
    border: 1px solid var(--c-border, #e5e7eb);
    border-radius: 10px;
    padding: 10px 14px;
    font-size: 14px;
    font-family: inherit;
    color: var(--c-text, #111827);
    background: var(--c-surface, #fff);
    outline: none;
    transition: border-color .2s ease, box-shadow .2s ease;
}
.cm-wrap .cm-input:focus,
.cm-wrap .cm-textarea:focus {
    border-color: var(--c-primary, #0066ff);
    box-shadow: 0 0 0 3px var(--c-primary-soft, rgba(0, 102, 255, .1));
}
.cm-wrap .cm-textarea { resize: vertical; min-height: 84px; line-height: 1.6; }
.cm-wrap .cm-count-row {
    position: absolute;
    right: 12px;
    bottom: 10px;
    font-size: 12px;
    color: var(--c-text-muted, #94a3b8);
    background: var(--c-surface, #fff);
    padding: 0 4px;
}

.cm-wrap .cm-captcha-row { display: flex; gap: 12px; align-items: stretch; }
.cm-wrap .cm-input-captcha { max-width: 220px; letter-spacing: 2px; }
.cm-wrap .cm-captcha-img {
    height: 42px;
    width: 120px;
    border-radius: 10px;
    cursor: pointer;
    border: 1px solid var(--c-border, #e5e7eb);
    transition: transform .15s ease;
}
.cm-wrap .cm-captcha-img:hover { transform: scale(1.04); }

.cm-wrap .cm-err { font-size: 12px; color: #ef4444; margin-top: 6px; min-height: 0; }

.cm-wrap .cm-submit {
    align-self: flex-start;
    border: none;
    cursor: pointer;
    padding: 11px 26px;
    border-radius: 12px;
    font-size: 14px;
    font-weight: 700;
    color: #fff;
    background: linear-gradient(135deg, var(--c-primary, #0066ff), var(--c-accent-cyan, #00d4ff));
    box-shadow: 0 6px 16px var(--c-primary-soft, rgba(0, 102, 255, .1));
    transition: transform .15s ease, box-shadow .2s ease;
}
.cm-wrap .cm-submit:hover { transform: translateY(-1px); box-shadow: 0 10px 22px var(--c-primary-soft, rgba(0, 102, 255, .1)); }
.cm-wrap .cm-submit:disabled { opacity: .65; cursor: not-allowed; transform: none; }
.cm-wrap .cm-submit--inline { align-self: center; }

.cm-wrap .cm-success {
    text-align: center;
    padding: 34px 24px;
    border: 1px dashed var(--c-primary, #0066ff);
    border-radius: var(--radius-md, 16px);
    background: var(--c-primary-soft, rgba(0, 102, 255, .1));
}
.cm-wrap .cm-success .emoji { font-size: 38px; margin-bottom: 8px; }
.cm-wrap .cm-success h4 {
    font-size: 17px;
    font-weight: 800;
    color: var(--c-text, #111827);
    margin: 0 0 6px;
}
.cm-wrap .cm-success p {
    font-size: 13px;
    color: var(--c-text-muted, #94a3b8);
    margin: 0 0 16px;
}

/* 空态 */
.cm-wrap .comment-empty {
    text-align: center;
    padding: 40px 24px;
    border: 1px dashed var(--c-border, #e5e7eb);
    border-radius: var(--radius-md, 16px);
    color: var(--c-text-muted, #94a3b8);
}
.cm-wrap .comment-empty .emoji { font-size: 40px; margin-bottom: 12px; opacity: .6; }
.cm-wrap .comment-empty p { font-size: 14px; margin: 0; }

/* 页面正文规则兜底：留言区不继承 .xxx-panel 的正文排版 */
.cm-wrap p { margin: 0 0 10px; }
.cm-wrap .cm-content,
.cm-wrap .cm-admin-content,
.cm-wrap .comment-empty p { margin: 0; }
.cm-wrap b { color: var(--c-text, #111827); }
.cm-wrap h3, .cm-wrap h4 { margin: 0; }

@media (max-width: 640px) {
    .cm-wrap .cm-captcha-row { flex-direction: column; }
    .cm-wrap .cm-input-captcha { max-width: none; }
    .cm-wrap .cm-captcha-img { width: 100%; height: 46px; }
    .cm-wrap .cm-form { padding: 16px 14px; }
}