/* ==========================================================================
 * M3UI · 评论区样式（Material You / Material 3）
 * --------------------------------------------------------------------------
 * 设计取向：**扁平列表**，不是"每条评论一个卡片"。
 * 卡片套卡片会让一屏评论变成一堵灰墙，且父子只差一档 surface，层级根本看不出来。
 * 现在：行式布局（头像 40dp 圆形 + 文本），回复靠缩进 + 2dp 引导线表达层级，
 * 悬停用 M3 的 state layer（半透明叠加），而不是换底色。
 *
 * 独立可复用：只依赖本文件 + 下面的 class 约定，复制到任意项目按结构输出即可。
 *
 * 结构约定（参考 components/comments.php 与 components/list-template.php）：
 *
 *   #comments  （或复用时的 .m3c-comments）
 *     .comments-section-head                区块标题（色调圆形图标 + 标题）
 *     .comment-grid                         评论列表（纵向 flex）
 *       .comment-thread                      一条评论 + 它的回复们
 *         .comment                           行本体（头像 + 正文）
 *           mdui-avatar.comment-avatar
 *           .comment-body
 *             .comment-head                  作者 / 徽标 / 时间
 *             .comment-content               正文
 *             .comment-pending               待审核徽标
 *             .comment-actions.comment-reply  回复按钮（内含 <a>）
 *         .comment-replies                   回复区（缩进 + 竖线 + 每条回复的肘形连接线）
 *           .comment-thread ...（递归）
 *     .comment-page-nav                     分页
 *     .comments-empty                       空状态
 *     .respond                              评论表单（回复时会被搬进 .comment 里）
 *
 * 颜色全部走 MDUI 的 M3 令牌，自动适配亮／暗与动态取色，不要写死颜色。
 * 想调手感只改 :root 上的 --m3c-* 变量。
 * ========================================================================== */

/* ---------- 可调参数 ---------- */
:root {
    --m3c-avatar: 40px;                 /* 顶层头像 */
    --m3c-avatar-reply: 32px;           /* 回复里的头像 */
    --m3c-gap: 12px;                    /* 头像与正文的间距 */
    --m3c-indent: 26px;                 /* 回复区缩进 */
    --m3c-radius: 16px;                 /* 悬停状态层圆角 */
    --m3c-row-pad: 10px 12px;           /* 单条评论的上下/左右内边距 */
    --m3c-section-gap: 24px;            /* 评论区各区块之间 */
    --m3c-section-margin-top: 32px;     /* 评论区与文章主体的距离 */
    --m3c-thread-gap: 12px;             /* 顶层评论之间的距离 */
    /* 注意：MDUI 的颜色令牌是「逗号分隔的 RGB 三元组」（如 68,71,70），
       所以带透明度时必须写 rgba(var(--token), a)；写成 rgb(var(--token) / a) 是非法语法，
       整条声明会失效变成透明 —— 分隔线和引导线会直接消失。 */
    --m3c-thread-line: rgba(var(--mdui-color-outline-variant), 0.85);
    --m3c-divider: rgba(var(--mdui-color-outline-variant), 0.45);
    --m3c-state-hover: rgba(var(--mdui-color-on-surface), 0.04);
}

/* 评论区容器 */
#comments,
.m3c-comments {
    display: flex;
    flex-direction: column;
    gap: var(--m3c-section-gap);
    margin-top: var(--m3c-section-margin-top);
    /* 从别处 scrollIntoView 跳过来时（如评论翻页带 #comments）别贴死在视口顶边 */
    scroll-margin-top: 72px;
    width: 100%;
    box-sizing: border-box;
}

/* 评论区与文章主体之间来一条分隔线，明确边界（与下方内容的距离由容器 gap 提供） */
#comments::before,
.m3c-comments::before {
    content: '';
    display: block;
    height: 1px;
    background: var(--m3c-divider);
}

/* ---------- 区块标题 ---------- */
.comments-section-head {
    display: flex;
    align-items: center;
    gap: 12px;
    min-height: 36px;
}

/* 裸图标：不带圆形容器和底色，直接和标题同排。
   也不给固定宽高 —— 否则图标左右会有死白，标题没法跟下方评论的头像左边缘对齐 */
.comments-section-head__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: rgb(var(--mdui-color-on-surface-variant));
    flex-shrink: 0;
}

.comments-section-head__icon mdui-icon {
    font-size: 22px;
}

.comments-section-head__title {
    margin: 0;
    font-size: 18px;
    font-weight: 500;
    line-height: 1.3;
    letter-spacing: 0;
    color: rgb(var(--mdui-color-on-surface));
}

.comments-section-head--sub {
    min-height: 32px;
}

.comments-section-head--sub .comments-section-head__icon mdui-icon {
    font-size: 19px;
}

.comments-section-head--sub .comments-section-head__title {
    font-size: 16px;
}

/* ---------- 评论列表 ---------- */
.comment-grid {
    display: flex;
    flex-direction: column;
    width: 100%;
}

/* 顶层评论之间用分隔线切开：一眼能看出"这是另一条评论"
   （.comment-grid 只包顶层 —— 见 comments.php 里 before/after 留空的说明） */
.comment-grid > .comment-thread + .comment-thread {
    margin-top: var(--m3c-thread-gap);
    padding-top: var(--m3c-thread-gap);
    border-top: 1px solid var(--m3c-divider);
}

/* 同一层级的回复之间只留一点间距，不画线（有肘形线已经足够） */
.comment-replies > .comment-thread + .comment-thread {
    margin-top: 4px;
}

.comment-thread {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

/* ---------- 单条评论（行式，无卡片） ----------
   负外边距 + 正内边距：把 hover 状态层撑到容器边缘，正文仍与区块对齐 */
:where(#comments, .m3c-comments) .comment {
    position: relative;
    /* 用 grid 而不是 flex：点「回复」时 Typecho 会把表单插到本行末尾，
       grid 可以让它换行并跨列，而不是被挤成第三栏 */
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: start;
    column-gap: var(--m3c-gap);
    row-gap: 0;
    padding: var(--m3c-row-pad);
    margin: 0 -12px;
    border-radius: var(--m3c-radius);
    transition: background-color 0.2s ease;
}

:where(#comments, .m3c-comments) .comment:hover {
    background: var(--m3c-state-hover);
}

:where(#comments, .m3c-comments) .comment-awaiting {
    opacity: 0.6;
}

.comment-avatar {
    --mdui-avatar-size: var(--m3c-avatar);
    width: var(--m3c-avatar);
    height: var(--m3c-avatar);
    flex-shrink: 0;
    border-radius: 50%;
    overflow: hidden;
}

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

/* ---------- 头部：作者 / 徽标 / 时间 ---------- */
.comment-head {
    display: flex;
    align-items: baseline;
    gap: 8px;
    margin-bottom: 2px;
}

.comment-author {
    font-size: 14px;
    font-weight: 500;
    line-height: 1.5;
    color: rgb(var(--mdui-color-on-surface));
}

.comment-author a {
    color: inherit;
    text-decoration: none;
}

.comment-author a:hover {
    text-decoration: underline;
}

.comment-badge {
    display: inline-flex;
    align-items: center;
    padding: 1px 7px;
    border-radius: var(--mdui-shape-corner-small);
    background: rgb(var(--mdui-color-primary-container));
    color: rgb(var(--mdui-color-on-primary-container));
    font-size: 11px;
    font-weight: 500;
    line-height: 1.6;
}

.comment-date {
    margin-left: auto;
    font-size: 12px;
    line-height: 1.5;
    color: rgb(var(--mdui-color-on-surface-variant));
    white-space: nowrap;
}

.comment-pending {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin-top: 6px;
    padding: 2px 8px;
    border-radius: var(--mdui-shape-corner-small);
    background: rgb(var(--mdui-color-tertiary-container));
    color: rgb(var(--mdui-color-on-tertiary-container));
    font-size: 11px;
    font-weight: 500;
}

.comment-pending mdui-icon {
    font-size: 14px;
}

/* ---------- 动作行：紧贴正文，左对齐 ---------- */
.comment-actions {
    display: flex;
    align-items: center;
    gap: 4px;
    margin-top: 2px;
    margin-left: -8px;
}

.comment-actions a {
    display: inline-flex;
    text-decoration: none;
}

/* ---------- 正文排版 ---------- */
.comment-content {
    font-size: 14px;
    line-height: 1.65;
    color: rgb(var(--mdui-color-on-surface));
    word-break: break-word;
}

.comment-content > :first-child {
    margin-top: 0;
}

.comment-content > :last-child {
    margin-bottom: 0;
}

.comment-content p {
    margin: 0 0 6px;
}

.comment-content a {
    color: rgb(var(--mdui-color-primary));
    text-decoration: none;
}

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

.comment-content img {
    max-width: 100%;
    height: auto;
    border-radius: var(--mdui-shape-corner-small);
}

.comment-content code {
    padding: 2px 6px;
    border-radius: 6px;
    background: rgb(var(--mdui-color-surface-container-high));
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 13px;
}

.comment-content pre {
    margin: 8px 0;
    padding: 12px;
    border-radius: var(--mdui-shape-corner-small);
    background: rgb(var(--mdui-color-surface-container-high));
    overflow-x: auto;
    font-size: 13px;
}

.comment-content pre code {
    padding: 0;
    background: none;
}

.comment-content blockquote {
    margin: 6px 0;
    padding: 4px 0 4px 12px;
    border-left: 2px solid var(--m3c-thread-line);
    color: rgb(var(--mdui-color-on-surface-variant));
}

/* ---------- 回复区：缩进 + 引导线 + 肘形连接 ---------- */
.comment-replies {
    --m3c-indent: 26px;
    position: relative;
    margin-left: calc(var(--m3c-avatar) / 2);
    padding-left: var(--m3c-indent);
}

.comment-replies::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 12px;
    width: 2px;
    border-radius: 1px;
    background: var(--m3c-thread-line);
}

/* 每条回复从竖线拉出一段横向短线指向自己的头像 —— 层级关系一眼可见 */
.comment-replies > .comment-thread {
    position: relative;
}

.comment-replies > .comment-thread::before {
    content: '';
    position: absolute;
    left: calc(-1 * var(--m3c-indent));
    top: calc(8px + var(--m3c-avatar-reply) / 2);   /* 对齐回复头像垂直中心 */
    width: calc(var(--m3c-indent) - 8px);
    height: 2px;
    border-radius: 1px;
    background: var(--m3c-thread-line);
}

/* 回复里的头像小一号 */
.comment-replies .comment-avatar {
    --mdui-avatar-size: var(--m3c-avatar-reply);
    width: var(--m3c-avatar-reply);
    height: var(--m3c-avatar-reply);
}

/* 回复行更紧凑，和顶层评论拉开节奏差 */
.comment-replies .comment {
    padding: 8px 12px;
}

.comment-replies .comment-author {
    font-size: 13px;
}

/* 三级以后不再继续加深，避免手机上被挤扁 */
.comment-replies .comment-replies {
    --m3c-indent: 18px;
    margin-left: calc(var(--m3c-avatar-reply) / 2);
}

/* ---------- 分页 ----------
   一排：‹ 上一页  |  1 2 3 … 5  |  下一页 ›
   当前页是填充药丸，其它页码是 text button，首尾之外的中间页折叠成 …
   下面补一行「第 X / Y 页」，避免只有数字不知道总共有多少页 */
.comment-page-nav {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
}

.comment-page-nav__row {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    flex-wrap: wrap;
}

.comment-page-nav__pages {
    display: flex;
    align-items: center;
    gap: 2px;
}

/* 页码按钮：收成 40×40 的方形命中区，和右侧的当前页药丸对齐 */
.comment-page-nav__page {
    min-width: 40px;
    justify-content: center;
}

/* 当前页：M3 填充药丸 */
.comment-page-nav__current {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 40px;
    height: 40px;
    padding: 0 10px;
    box-sizing: border-box;
    border-radius: var(--mdui-shape-corner-full);
    background: rgb(var(--mdui-color-primary));
    color: rgb(var(--mdui-color-on-primary));
    font-size: 14px;
    font-weight: 500;
    user-select: none;
}

.comment-page-nav__gap {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 24px;
    height: 40px;
    font-size: 14px;
    color: rgb(var(--mdui-color-on-surface-variant));
    user-select: none;
}

.comment-page-nav__info {
    margin: 0;
    font-size: 12px;
    line-height: 1.6;
    color: rgb(var(--mdui-color-on-surface-variant));
}

/* ---------- 空状态：轻量，不铺底色 ---------- */
.comments-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    padding: 28px 16px;
    text-align: center;
}

.comments-empty mdui-icon {
    font-size: 36px;
    margin-bottom: 6px;
    color: rgb(var(--mdui-color-outline));
}

.comments-empty__title {
    font-size: 14px;
    font-weight: 500;
    color: rgb(var(--mdui-color-on-surface-variant));
}

.comments-empty__hint {
    font-size: 12px;
    color: rgb(var(--mdui-color-outline));
}

/* ---------- 评论表单 ---------- */
.respond {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 20px;
    box-sizing: border-box;
    border-radius: 20px;
    background: rgb(var(--mdui-color-surface-container-low));
}

/* 回复时表单被搬进评论行里：换到正文那一列，去掉大面板 */
:where(#comments, .m3c-comments) .comment .respond {
    grid-column: 2 / -1;
    margin: 8px 0 4px;
    padding: 12px;
    border-radius: var(--m3c-radius);
    background: rgb(var(--mdui-color-surface-container-high));
}

/* TypechoComment 插入的占位 div（id 形如 respond-post-9-holder） */
:where(#comments, .m3c-comments) div[id$="-holder"] {
    display: none !important;
}

#comment-form {
    display: flex;
    flex-direction: column;
    gap: 12px;
    width: 100%;
}

#comment-form mdui-text-field {
    display: block;
    width: 100%;
}

.comment-form-actions {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
}

/* ---------- 已登录用户信息 ---------- */
.comment-user-info {
    width: 100%;
    padding: 10px 14px;
    box-sizing: border-box;
    border-radius: var(--mdui-shape-corner-large) !important;
}

.comment-user-info__inner {
    display: flex;
    align-items: center;
    gap: 12px;
}

.comment-user-info mdui-avatar {
    --mdui-avatar-size: 36px;
    border-radius: 50%;
    flex-shrink: 0;
}

.comment-user-info__text {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.comment-user-info__name {
    font-size: 14px;
    font-weight: 500;
    line-height: 1.4;
    color: rgb(var(--mdui-color-on-surface));
}

.comment-user-info__hint {
    font-size: 12px;
    line-height: 1.4;
    color: rgb(var(--mdui-color-on-surface-variant));
}

.comment-user-info__inner > mdui-button {
    margin-left: auto;
    flex-shrink: 0;
}

/* ---------- 取消回复 ----------
   display:contents 让空容器不占 flex gap */
.cancel-comment-reply {
    display: contents;
}

.cancel-comment-reply a {
    display: inline-flex;
    align-items: center;
    align-self: flex-start;
    gap: 4px;
    padding: 6px 12px 6px 10px;
    border-radius: var(--mdui-shape-corner-full);
    background: rgba(var(--mdui-color-error), 0.1);
    color: rgb(var(--mdui-color-error));
    font-size: 13px;
    font-weight: 500;
    text-decoration: none;
    transition: background-color 0.2s ease;
}

.cancel-comment-reply a:hover {
    background: rgba(var(--mdui-color-error), 0.18);
    text-decoration: none;
}

.cancel-comment-reply a::before {
    content: '✕';
    font-size: 12px;
    line-height: 1;
}

/* ---------- 响应式 ---------- */
@media screen and (max-width: 768px) {
    :root {
        --m3c-avatar: 36px;
        --m3c-avatar-reply: 28px;
        --m3c-indent: 18px;
        --m3c-section-gap: 20px;
    }

    .respond {
        padding: 16px;
        border-radius: var(--mdui-shape-corner-large);
    }

    /* 窄屏放不下「上一页/下一页」文字，只留箭头 */
    .comment-page-nav__step-label {
        display: none;
    }

    .comment-page-nav__row {
        gap: 0;
    }

    .comment-page-nav__page,
    .comment-page-nav__current {
        min-width: 36px;
        height: 36px;
    }

    .comment-page-nav__gap {
        min-width: 18px;
        height: 36px;
    }
}

/* 桌面端没有顶部 App Bar，留一点点呼吸位就够 */
@media screen and (min-width: 1300px) {
    #comments,
    .m3c-comments {
        scroll-margin-top: 16px;
    }
}

@media (prefers-reduced-motion: reduce) {
    :where(#comments, .m3c-comments) .comment,
    .cancel-comment-reply a {
        transition: none;
    }
}