/* ==========================================================================
   组件：卡片 / 按钮 / 表单 / 头像 / 徽标 / 标签 / 弹层 / 提示 / 分页 / 宣传位
   ========================================================================== */

/* ── 卡片 ─────────────────────────────────────── */
.nz-card {
    background: var(--nz-surface);
    border: 1px solid var(--nz-border);
    border-radius: var(--nz-radius-md);
    box-shadow: var(--nz-shadow-xs);
    position: relative;
}
.nz-card.is-pad { padding: calc(16px * var(--nz-density)); }
.nz-card.is-glass {
    background: var(--nz-panel);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    box-shadow: var(--nz-shadow-sm);
    border-radius: var(--nz-radius-lg);
}
.nz-card-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: calc(12px * var(--nz-density)) calc(16px * var(--nz-density));
    border-bottom: 1px solid var(--nz-border-soft);
}
.nz-card-head h3 { font-size: var(--nz-fs-md); font-weight: 700; }
.nz-card-body { padding: calc(14px * var(--nz-density)) calc(16px * var(--nz-density)); }
.nz-card-foot {
    padding: calc(10px * var(--nz-density)) calc(16px * var(--nz-density));
    border-top: 1px solid var(--nz-border-soft);
    display: flex;
    align-items: center;
    gap: 10px;
}

.nz-hoverable { transition: transform var(--nz-dur) var(--nz-ease), box-shadow var(--nz-dur) var(--nz-ease), border-color var(--nz-dur) var(--nz-ease); }
.nz-hoverable:hover { transform: translateY(-2px); box-shadow: var(--nz-shadow-hover); border-color: var(--nz-border-strong); }

/* ── 按钮 ─────────────────────────────────────── */
.nz-btn {
    appearance: none;
    position: relative;   /* 角标要挂在自己身上，不能飘到 header 上去 */
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    height: calc(36px * var(--nz-density));
    padding: 0 14px;
    border-radius: var(--nz-radius-sm);
    border: 1px solid var(--nz-border-strong);
    background: var(--nz-surface);
    color: var(--nz-accent-deep);
    font-weight: 700;
    font-size: var(--nz-fs-base);
    cursor: pointer;
    white-space: nowrap;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
    transition: transform var(--nz-dur-fast) var(--nz-ease), background var(--nz-dur) var(--nz-ease),
                border-color var(--nz-dur) var(--nz-ease), color var(--nz-dur) var(--nz-ease), box-shadow var(--nz-dur) var(--nz-ease);
}
.nz-btn:hover { border-color: var(--nz-accent); background: var(--nz-accent-soft); }
.nz-btn:active { transform: scale(.97); }
.nz-btn[disabled], .nz-btn.is-disabled { opacity: .5; pointer-events: none; }
/* hidden 属性会被上面的 display:inline-flex 顶掉（元素照样显示、照样能点）。
   这条兜底是必须的：搜索历史那个"展开全部"当初就是这么"藏"起来的 ——
   它没真的消失，用户点了反而把已经展开的历史收起来了 */
.nz-btn[hidden] { display: none; }

.nz-btn-primary {
    /* 平涂主色：三段渐变和彩色发光阴影都撤了，按下靠 :active 的缩放给反馈 */
    background: var(--nz-accent);
    border-color: transparent;
    color: #fff;
}
.nz-btn-primary:hover { background: var(--nz-accent-hover); color: #fff; }
.nz-btn-primary:active { background: var(--nz-accent-deep); }

.nz-btn-ghost { background: transparent; border-color: transparent; color: var(--nz-text-sub); }
.nz-btn-ghost:hover { background: var(--nz-surface-3); color: var(--nz-text-strong); border-color: transparent; }

.nz-btn-soft { background: var(--nz-accent-soft); border-color: transparent; color: var(--nz-accent-deep); }
.nz-btn-soft:hover { background: var(--nz-accent-soft); border-color: var(--nz-accent); }

.nz-btn-danger { color: var(--nz-danger); border-color: color-mix(in srgb, var(--nz-danger) 40%, transparent); }
.nz-btn-danger:hover { background: var(--nz-danger-soft); border-color: var(--nz-danger); color: var(--nz-danger); }

.nz-btn-sm { height: calc(30px * var(--nz-density)); padding: 0 10px; font-size: var(--nz-fs-sm); border-radius: var(--nz-radius-xs); }
.nz-btn-lg { height: calc(44px * var(--nz-density)); padding: 0 22px; font-size: var(--nz-fs-lg); border-radius: var(--nz-radius-md); }
.nz-btn-block { width: 100%; }
.nz-btn-icon { width: calc(36px * var(--nz-density)); padding: 0; }
.nz-btn-icon.nz-btn-sm { width: calc(30px * var(--nz-density)); }

.nz-btn.is-liked { color: var(--nz-danger); border-color: color-mix(in srgb, var(--nz-danger) 40%, transparent); background: var(--nz-danger-soft); }
.nz-btn.is-active { color: var(--nz-accent-deep); background: var(--nz-accent-soft); border-color: var(--nz-accent); }

/* 纯文字操作条（注意：它经常挂在 <button> 上，必须把浏览器默认的背景和边框清掉，
   否则会出现灰底黑框，看起来像一块没融进页面的补丁） */
.nz-action {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    appearance: none;
    background: none;
    border: 0;
    color: var(--nz-text-sub);
    font-family: inherit;
    font-size: var(--nz-fs-sm);
    font-weight: 600;
    line-height: 1.5;
    cursor: pointer;
    padding: 5px 8px;
    border-radius: var(--nz-radius-xs);
    transition: color var(--nz-dur) var(--nz-ease), background var(--nz-dur) var(--nz-ease);
    -webkit-tap-highlight-color: transparent;
}
.nz-action:hover { color: var(--nz-accent-deep); background: var(--nz-surface-3); }
.nz-action.is-on { color: var(--nz-danger); }
.nz-action.is-on:hover { color: var(--nz-danger); background: var(--nz-danger-soft); }

/* ── 表单 ─────────────────────────────────────── */
.nz-input, .nz-select, .nz-textarea {
    width: 100%;
    padding: 9px 12px;
    border-radius: var(--nz-radius-sm);
    border: 1px solid var(--nz-border);
    background: var(--nz-surface-2);
    color: var(--nz-text);
    transition: border-color var(--nz-dur) var(--nz-ease), box-shadow var(--nz-dur) var(--nz-ease), background var(--nz-dur) var(--nz-ease);
}
.nz-textarea { resize: vertical; min-height: 90px; line-height: 1.7; }
.nz-input:focus, .nz-select:focus, .nz-textarea:focus {
    outline: none;
    border-color: var(--nz-accent);
    background: var(--nz-surface);
    box-shadow: 0 0 0 4px var(--nz-accent-soft);
}
.nz-input::placeholder, .nz-textarea::placeholder { color: var(--nz-text-faint); }
.nz-select { appearance: none; background-image: none; cursor: pointer; }
.nz-field { display: flex; flex-direction: column; gap: 6px; }
.nz-label { font-size: var(--nz-fs-sm); font-weight: 700; color: var(--nz-text-sub); }
.nz-hint { font-size: var(--nz-fs-xs); color: var(--nz-text-faint); }
.nz-switch {
    position: relative;
    width: 44px; height: 24px;
    border-radius: var(--nz-radius-pill);
    background: var(--nz-surface-3);
    border: 1px solid var(--nz-border);
    cursor: pointer;
    transition: background var(--nz-dur) var(--nz-ease);
    flex: 0 0 auto;
}
.nz-switch::after {
    content: '';
    position: absolute;
    top: 2px; left: 2px;
    width: 18px; height: 18px;
    border-radius: 50%;
    background: #fff;
    box-shadow: var(--nz-shadow-xs);
    transition: transform var(--nz-dur) var(--nz-ease);
}
.nz-switch.is-on { background: var(--nz-accent); border-color: var(--nz-accent); }
.nz-switch.is-on::after { transform: translateX(20px); }

/* ── 头像 ─────────────────────────────────────── */
.nz-avatar {
    width: 38px; height: 38px;
    min-width: 38px;
    border-radius: 50%;
    object-fit: cover;
    background: var(--nz-surface-3);
    border: 1px solid var(--nz-border);
    flex: 0 0 auto;
    display: block;
    /* 头像不能被父级的 max-width:100% 压扁成椭圆 */
    max-width: none;
}
.nz-avatar-sm { width: 28px; height: 28px; min-width: 28px; }
.nz-avatar-lg { width: 54px; height: 54px; min-width: 54px; }
.nz-avatar-xl { width: 88px; height: 88px; min-width: 88px; }
/* 只有"整个链接就是一张头像"的时候才锁死宽度。
   以前是 a:has(> .nz-avatar) 一刀切，连"头像 + 昵称"那种整行链接也一起冻住了：
   链接不能收缩，里面的超长昵称就顺着把整行顶出屏幕（黑名单、卡片作者名、
   抽屉里的用户名都是这么坏的）。 */
a:has(> .nz-avatar):not(:has(> :not(.nz-avatar))) { flex: 0 0 auto; display: inline-flex; }
.nz-avatar-link { display: inline-flex; border-radius: 50%; transition: transform var(--nz-dur) var(--nz-ease); }
.nz-avatar-link:hover { transform: scale(1.06); }

.nz-avatar-stack { display: flex; }
.nz-avatar-stack .nz-avatar {
    margin-left: -10px;
    border: 2px solid var(--nz-surface);
    width: 30px;
    height: 30px;
    min-width: 30px;   /* 不加会被 .nz-avatar 的 min-width 撑变形 */
}
.nz-avatar-stack .nz-avatar:first-child { margin-left: 0; }

/* ── 徽标 / 角色 / 标签 ───────────────────────── */
.nz-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    border-radius: var(--nz-radius-pill);
    background: var(--nz-danger);
    color: #fff;
    font-size: 11px;
    font-weight: 800;
    line-height: 1;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}
.nz-badge.is-soft { background: var(--nz-accent); }

.nz-role {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    padding: 1px 7px;
    border-radius: var(--nz-radius-pill);
    font-size: var(--nz-fs-xs);
    font-weight: 700;
    border: 1px solid transparent;
    white-space: nowrap;
}
.nz-role-owner { background: #f3c64f; color: #6d4a00; }
.nz-role-admin { background: var(--nz-accent-soft); color: var(--nz-accent-deep); border-color: color-mix(in srgb, var(--nz-accent) 34%, transparent); }
.nz-role-user  { background: var(--nz-surface-3); color: var(--nz-text-sub); }
.nz-role-ban   { background: var(--nz-danger-soft); color: var(--nz-danger); }

.nz-tag {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 9px;
    border-radius: var(--nz-radius-pill);
    background: var(--nz-surface-3);
    color: var(--nz-text-sub);
    font-size: var(--nz-fs-xs);
    font-weight: 600;
    cursor: pointer;
    border: 1px solid transparent;
    transition: all var(--nz-dur) var(--nz-ease);
    white-space: nowrap;
}
.nz-tag:hover { background: var(--nz-accent-soft); color: var(--nz-accent-deep); border-color: color-mix(in srgb, var(--nz-accent) 30%, transparent); }
.nz-tag.is-active { background: var(--nz-accent-soft); color: var(--nz-accent-deep); border-color: var(--nz-accent); }

.nz-pin {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    padding: 1px 7px;
    border-radius: var(--nz-radius-xs);
    font-size: var(--nz-fs-xs);
    font-weight: 800;
    background: #f3c64f;
    color: #6d4a00;
}
.nz-pin.is-global { background: #ff8b8b; color: #6d1414; }
.nz-pin.is-featured { background: #9d8bff; color: #fff; }
.nz-pin.is-locked { background: var(--nz-surface-3); color: var(--nz-text-sub); }

/* ── 选项卡 ───────────────────────────────────── */
.nz-tabs {
    display: flex;
    align-items: center;
    gap: 4px;
    overflow-x: auto;
    scrollbar-width: none;
    padding: 4px;
    background: var(--nz-surface);
    border: 1px solid var(--nz-border);
    border-radius: var(--nz-radius-md);
}
.nz-tabs::-webkit-scrollbar { display: none; }
.nz-tab {
    flex: 0 0 auto;
    padding: 7px 14px;
    border-radius: var(--nz-radius-sm);
    font-weight: 700;
    font-size: var(--nz-fs-base);
    color: var(--nz-text-sub);
    cursor: pointer;
    white-space: nowrap;
    transition: all var(--nz-dur) var(--nz-ease);
    -webkit-tap-highlight-color: transparent;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
.nz-tab:hover { background: var(--nz-surface-3); color: var(--nz-text-strong); }
.nz-tab.is-active { background: var(--nz-accent); color: #fff; }

.nz-seg { display: inline-flex; background: var(--nz-surface-3); border-radius: var(--nz-radius-sm); padding: 3px; gap: 2px; }
.nz-seg-item {
    padding: 5px 12px;
    border-radius: var(--nz-radius-xs);
    font-size: var(--nz-fs-sm);
    font-weight: 700;
    color: var(--nz-text-sub);
    cursor: pointer;
    transition: all var(--nz-dur) var(--nz-ease);
    white-space: nowrap;
}
.nz-seg-item.is-active { background: var(--nz-surface); color: var(--nz-accent-deep); box-shadow: var(--nz-shadow-xs); }

/* ── 弹层 ─────────────────────────────────────── */
.nz-modal-overlay {
    position: fixed;
    inset: 0;
    z-index: 120;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    background: rgba(47, 74, 99, .3);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    opacity: 0;
    visibility: hidden;
    transition: opacity var(--nz-dur) var(--nz-ease), visibility var(--nz-dur);
}
.nz-modal-overlay.is-open { opacity: 1; visibility: visible; }
.nz-modal {
    width: min(560px, 100%);
    max-height: min(86vh, 860px);
    display: flex;
    flex-direction: column;
    background: var(--nz-surface);
    border: 1px solid var(--nz-border);
    border-radius: var(--nz-radius-lg);
    box-shadow: var(--nz-shadow-modal);
    transform: translateY(14px) scale(.98);
    opacity: 0;
    transition: transform var(--nz-dur-slow) var(--nz-ease-out), opacity var(--nz-dur) var(--nz-ease);
    overflow: hidden;
}
.nz-modal-overlay.is-open .nz-modal { transform: none; opacity: 1; }
.nz-modal-lg { width: min(860px, 100%); }
.nz-modal-xl { width: min(1180px, 100%); }
.nz-modal-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 16px 18px;
    border-bottom: 1px solid var(--nz-border-soft);
}
.nz-modal-head h3 { font-size: var(--nz-fs-lg); }
.nz-modal-body { padding: 18px; overflow-y: auto; flex: 1 1 auto; }
.nz-modal-foot {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
    padding: 14px 18px;
    border-top: 1px solid var(--nz-border-soft);
}

@media (max-width: 640px) {
    .nz-modal-overlay { align-items: flex-end; padding: 0; }
    .nz-modal {
        width: 100%;
        max-height: 90dvh;
        border-radius: var(--nz-radius-lg) var(--nz-radius-lg) 0 0;
        transform: translateY(100%);
        padding-bottom: env(safe-area-inset-bottom, 0px);
    }
    .nz-modal-lg, .nz-modal-xl { width: 100%; }
}

/* ── 轻量弹层（气泡卡） ───────────────────────── */
.nz-pop {
    position: fixed;
    z-index: 130;
    min-width: 180px;
    max-width: 320px;
    background: var(--nz-surface);
    border: 1px solid var(--nz-border);
    border-radius: var(--nz-radius-md);
    box-shadow: var(--nz-shadow-modal);
    padding: 8px;
    animation: nz-pop var(--nz-dur) var(--nz-ease-out) both;
    max-height: 320px;
    overflow-y: auto;
}
/* 用户悬停卡：淡入淡出，不做位移抖动
   注意：.nz-pop 自带 animation: ... both，动画的终态会一直压过普通声明，
   所以这里必须把动画关掉，否则 opacity 永远停在 1，卡片收不起来 */
.nz-hover-card {
    width: 290px;
    padding: 0;
    animation: none;
    opacity: 0;
    transform: translateY(-4px) scale(.985);
    transition: opacity var(--nz-dur) var(--nz-ease), transform var(--nz-dur) var(--nz-ease-out);
    pointer-events: none;
    overflow: hidden;
}
.nz-hover-card.is-visible { opacity: 1; transform: none; pointer-events: auto; }
.nz-hover-cover { height: 64px; background-size: cover; background-position: center; }
.nz-hover-body { padding: 0 14px 14px; }
.nz-hover-avatar { margin-top: -22px; border: 3px solid var(--nz-surface); background: var(--nz-surface); }
.nz-hover-name {
    margin-top: 8px;
    font-weight: 800;
    color: var(--nz-text-strong);
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
}
.nz-hover-stats { display: flex; gap: 16px; margin-top: 10px; font-size: var(--nz-fs-xs); color: var(--nz-text-sub); }
.nz-hover-stats b { color: var(--nz-text-strong); }

.nz-pop-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 10px;
    border-radius: var(--nz-radius-xs);
    cursor: pointer;
    font-size: var(--nz-fs-sm);
    font-weight: 600;
}
.nz-pop-item:hover { background: var(--nz-surface-3); }
.nz-pop-sep { height: 1px; background: var(--nz-border-soft); margin: 6px 4px; }

/* ── 提示条 Toast ─────────────────────────────── */
.nz-toasts {
    position: fixed;
    top: calc(var(--nz-header-h) + 14px);
    left: 50%;
    transform: translateX(-50%);
    z-index: 200;
    display: flex;
    flex-direction: column;
    gap: 8px;
    align-items: center;
    pointer-events: none;
    width: min(92vw, 420px);
}
.nz-toast {
    pointer-events: auto;
    display: flex;
    align-items: center;
    gap: 9px;
    width: 100%;
    padding: 11px 15px;
    border-radius: var(--nz-radius-sm);
    background: var(--nz-panel-strong);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border: 1px solid var(--nz-border);
    box-shadow: var(--nz-shadow);
    font-size: var(--nz-fs-base);
    font-weight: 600;
    color: var(--nz-text-strong);
    animation: nz-pop var(--nz-dur) var(--nz-ease-out) both;
}
.nz-toast.is-leaving { animation: nz-fade var(--nz-dur) var(--nz-ease) reverse both; }
.nz-toast .nz-icon { color: var(--nz-accent); }
.nz-toast-error .nz-icon { color: var(--nz-danger); }
.nz-toast-success .nz-icon { color: var(--nz-success); }
.nz-toast-warn .nz-icon { color: var(--nz-warning); }

/* ── 空态 / 加载 ──────────────────────────────── */
.nz-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 54px 20px;
    color: var(--nz-text-faint);
    text-align: center;
}
.nz-empty .nz-icon { width: 46px; height: 46px; opacity: .55; stroke-width: 1.5; }
.nz-empty-title { font-weight: 700; color: var(--nz-text-sub); }

.nz-loading { display: flex; align-items: center; justify-content: center; gap: 8px; padding: 34px; color: var(--nz-text-faint); }

/* ── 分页 ─────────────────────────────────────── */
.nz-pager { display: flex; align-items: center; justify-content: center; gap: 6px; flex-wrap: wrap; padding: 6px 0; }
.nz-pager-item {
    min-width: 34px;
    height: 34px;
    padding: 0 10px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--nz-radius-xs);
    border: 1px solid var(--nz-border);
    background: var(--nz-surface);
    color: var(--nz-text-sub);
    font-weight: 700;
    font-size: var(--nz-fs-sm);
    cursor: pointer;
    transition: all var(--nz-dur) var(--nz-ease);
}
.nz-pager-item:hover { border-color: var(--nz-accent); color: var(--nz-accent-deep); }
.nz-pager-item.is-active { background: var(--nz-accent); border-color: transparent; color: #fff; }
.nz-pager-item.is-disabled { opacity: .45; pointer-events: none; }
.nz-pager-gap { color: var(--nz-text-faint); padding: 0 2px; }
/* 跳页：直接填第几页，比一页页按快 */
.nz-pager-jump { display: inline-flex; align-items: center; gap: 5px; margin-left: 8px; }
.nz-pager-jump .nz-input { width: 56px; height: 30px; padding: 0 6px; text-align: center; font-size: var(--nz-fs-sm); }
.nz-pager-jump .nz-input::-webkit-outer-spin-button,
.nz-pager-jump .nz-input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

/* 楼中楼自己的翻页条：塞在回复列表和"收起"之间，不要那条分割线 */
.nz-sub-pager { display: flex; justify-content: center; margin: 10px 0 4px; }
.nz-sub-pager .nz-pager { margin: 0; }

/* ── 帖子卡片 ─────────────────────────────────── */
.nz-post-list { display: flex; flex-direction: column; gap: 10px; }

.nz-post {
    display: flex;
    gap: 14px;
    padding: calc(14px * var(--nz-density));
    background: var(--nz-surface);
    border: 1px solid var(--nz-border);
    border-radius: var(--nz-radius-md);
    cursor: pointer;
    position: relative;
    transition: transform var(--nz-dur) var(--nz-ease), box-shadow var(--nz-dur) var(--nz-ease), border-color var(--nz-dur) var(--nz-ease);
    -webkit-tap-highlight-color: transparent;
}
.nz-post:hover { transform: translateY(-2px); box-shadow: var(--nz-shadow-hover); border-color: var(--nz-border-strong); }
.nz-post:active { transform: translateY(0) scale(.995); }
/* overflow:hidden 是给封面用的：它是绝对定位的背景层，得让卡片的圆角把它裁掉 */
.nz-post { overflow: hidden; }
/* 正文压在封面上面（封面是 z-index:0 的背景层） */
.nz-post-main { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 7px; position: relative; z-index: 1; }
.nz-post-head { display: flex; align-items: center; gap: 8px; min-width: 0; flex-wrap: wrap; }
.nz-post-author { display: inline-flex; align-items: center; gap: 6px; color: var(--nz-text-sub); font-size: var(--nz-fs-sm); font-weight: 600; min-width: 0; }
.nz-post-author:hover { color: var(--nz-accent-deep); }
.nz-post-title {
    font-size: var(--nz-fs-lg);
    font-weight: 700;
    color: var(--nz-text-strong);
    line-height: 1.45;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    letter-spacing: -.005em;
}
.nz-post:hover .nz-post-title { color: var(--nz-accent-deep); }
.nz-post-excerpt { font-size: var(--nz-fs-base); color: var(--nz-text-sub); line-height: 1.65; -webkit-line-clamp: 2; display: -webkit-box; -webkit-box-orient: vertical; overflow: hidden; }
.nz-post-foot { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; color: var(--nz-text-faint); font-size: var(--nz-fs-xs); padding-right: 92px; }
.nz-post-foot .nz-metric { display: inline-flex; align-items: center; gap: 4px; }
/* 时间钉在正文栏（= 整张卡片）的右下角。
   正文栏是整宽的，所以它不会因为右边有封面就往左跑 —— 用户要的就是"时间一直在右下角" */
.nz-post-time {
    position: absolute;
    right: 12px;
    bottom: 2px;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    max-width: 40%;
    color: var(--nz-text-faint);
    font-size: var(--nz-fs-xs);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    pointer-events: none;
}
/* 封面：绝对定位的背景层，右侧 1/3、上下顶满卡片。
   不占流 -> 卡片高度只由正文决定（超长竖图也不会把卡片撑破），正文也不会被挤窄。
   object-fit: cover 默认取中间那块，长图截中间显示 */
.nz-post-cover {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    width: 33.3333%;
    overflow: hidden;
    background: var(--nz-surface-3);
    pointer-events: none;
    z-index: 0;
}
.nz-post-cover img { width: 100%; height: 100%; object-fit: cover; object-position: center; display: block; }
/* 往左渐隐 + 右侧压 30% 卡片底色：图片压在文字/时间底下时也能看清 */
.nz-post-cover::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(to left,
        color-mix(in srgb, var(--nz-surface) 32%, transparent) 0%,
        color-mix(in srgb, var(--nz-surface) 36%, transparent) 45%,
        color-mix(in srgb, var(--nz-surface) 68%, transparent) 76%,
        var(--nz-surface) 100%);
}
.nz-post-tags { display: flex; gap: 6px; flex-wrap: wrap; }

@media (max-width: 640px) {
    .nz-post { padding: 13px; gap: 10px; }
    /* 手机上还是右侧 1/3（绝对定位那套不变，卡片高度依旧只由正文决定） */
    .nz-post-cover { width: 33.3333%; }
    .nz-post-title { font-size: var(--nz-fs-md); }
    .nz-post-excerpt { -webkit-line-clamp: 2; font-size: var(--nz-fs-sm); }
}

.nz-post.is-pinned { border-color: color-mix(in srgb, var(--nz-warning) 42%, var(--nz-border)); background: color-mix(in srgb, var(--nz-warning) 6%, var(--nz-surface)); }
.nz-post.is-featured { border-color: color-mix(in srgb, var(--nz-accent-2) 40%, var(--nz-border)); }

/* ── 宣传位 ───────────────────────────────────── */
.nz-promo { position: relative; overflow: hidden; }
.nz-promo-card {
    display: flex;
    gap: 12px;
    padding: 14px;
    border-radius: var(--nz-radius-md);
    border: 1px solid var(--nz-border);
    background: var(--nz-surface);
    cursor: pointer;
    transition: transform var(--nz-dur) var(--nz-ease), box-shadow var(--nz-dur) var(--nz-ease);
}
.nz-promo-card:hover { transform: translateY(-2px); box-shadow: var(--nz-shadow-hover); }
.nz-promo-card img { width: 68px; height: 68px; border-radius: var(--nz-radius-sm); object-fit: cover; flex: 0 0 auto; }
.nz-promo-card-title { font-weight: 800; color: var(--nz-text-strong); font-size: var(--nz-fs-md); }
.nz-promo-card-sub { font-size: var(--nz-fs-sm); color: var(--nz-text-sub); -webkit-line-clamp: 2; display: -webkit-box; -webkit-box-orient: vertical; overflow: hidden; }
.nz-promo-badge {
    position: absolute;
    top: 8px; right: 8px;
    font-size: 10px;
    padding: 1px 6px;
    border-radius: var(--nz-radius-pill);
    background: rgba(0,0,0,.42);
    color: #fff;
    font-weight: 700;
    letter-spacing: .04em;
    backdrop-filter: blur(4px);
}

/* 半页融入式横幅 */
.nz-promo-banner {
    position: relative;
    border-radius: var(--nz-radius-lg);
    overflow: hidden;
    min-height: 168px;
    display: flex;
    align-items: flex-end;
    cursor: pointer;
    border: 1px solid var(--nz-border);
    background: var(--nz-accent);
    box-shadow: var(--nz-shadow-sm);
    transition: transform var(--nz-dur) var(--nz-ease), box-shadow var(--nz-dur) var(--nz-ease);
}
.nz-promo-banner:hover { transform: translateY(-2px); box-shadow: var(--nz-shadow-hover); }
.nz-promo-banner img.nz-promo-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.nz-promo-banner::after {
    content: '';
    position: absolute; inset: 0;
    background: linear-gradient(180deg, rgba(20,40,60,.05) 0%, rgba(20,40,60,.62) 100%);
}
.nz-promo-banner-body { position: relative; z-index: 1; padding: 18px; color: #fff; width: 100%; }
.nz-promo-banner-title { font-size: var(--nz-fs-xl); font-weight: 800; text-shadow: 0 2px 12px rgba(0,0,0,.35); }
.nz-promo-banner-sub { font-size: var(--nz-fs-sm); opacity: .92; text-shadow: 0 1px 8px rgba(0,0,0,.3); }

/* 沉浸式（整块大图 + 渐变叠层） */
.nz-promo-immersive { min-height: 220px; align-items: center; }
.nz-promo-immersive .nz-promo-banner-body { text-align: center; }

/* 一行小卡 */
.nz-promo-compact {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    border-radius: var(--nz-radius-sm);
    border: 1px dashed var(--nz-border-strong);
    background: var(--nz-surface-2);
    cursor: pointer;
    font-size: var(--nz-fs-sm);
    color: var(--nz-text-sub);
    transition: all var(--nz-dur) var(--nz-ease);
}
.nz-promo-compact:hover { border-color: var(--nz-accent); color: var(--nz-accent-deep); background: var(--nz-accent-soft); }

/* 分区宣传卡 */
.nz-promo-section {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 16px;
    border-radius: var(--nz-radius-md);
    background: var(--nz-accent-soft);
    border: 1px solid color-mix(in srgb, var(--nz-accent) 26%, transparent);
    cursor: pointer;
    transition: transform var(--nz-dur) var(--nz-ease), box-shadow var(--nz-dur) var(--nz-ease);
}
.nz-promo-section:hover { transform: translateY(-2px); box-shadow: var(--nz-shadow-hover); }
.nz-promo-section-icon {
    width: 46px; height: 46px;
    border-radius: var(--nz-radius-sm);
    background: var(--nz-surface);
    display: flex; align-items: center; justify-content: center;
    color: var(--nz-accent-deep);
    flex: 0 0 auto;
    box-shadow: var(--nz-shadow-xs);
}

.nz-promo-inline { margin: 2px 0; }

/* 移动端没有 hover，点卡片必须当场给点反馈，不然按下到进帖子之间是"没反应"的。
   反过来 hover 出来的那 2px 上浮在触屏上是"粘"的：抬起之后收不回去，
   卡片会一直浮着，所以位移只留给有鼠标的设备，触屏的反馈靠 ：active */
@media (hover: none) {
    .nz-post:active { background: var(--nz-surface-2); }
    .nz-user-row:active { background: var(--nz-surface-2); }
    .nz-dm-thread:active { background: var(--nz-surface-2); }
    .nz-post:hover, .nz-hoverable:hover, .nz-promo-card:hover,
    .nz-promo-banner:hover, .nz-promo-section:hover { transform: none; }
}

/* ── 帖子正文沙箱 iframe（详情页和编辑器预览共用，所以放组件层） ── */
.nz-post-frame {
    width: 100%;
    border: 0;
    display: block;
    min-height: 200px;
    /* 框挂上去的时候是 200px，正文量完高度才改成真实值。
       不给高度过渡的话整页会从"一条"啪一下撑成几千像素，滚动条和底下的评论一起跳。
       沙箱那边没有任何同步等待，改高度不会卡到它 */
    transition: height var(--nz-dur-slow) var(--nz-ease-out);
    background: transparent;
}

/* ── 评论 ─────────────────────────────────────── */
.nz-comment { display: flex; gap: 11px; padding: 14px 0; border-bottom: 1px solid var(--nz-border-soft); }
.nz-comment:last-child { border-bottom: 0; }
.nz-comment-body { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.nz-comment-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.nz-comment-name { font-weight: 700; color: var(--nz-text-strong); font-size: var(--nz-fs-base); min-width: 0; flex: 0 1 auto; }
.nz-comment-name:hover { color: var(--nz-accent-deep); }
/* 评论正文：保留换行，超长折叠 */
.nz-comment-text {
    white-space: pre-wrap;
}
.nz-comment-text.is-collapsed {
    max-height: var(--nz-clamp-h, 180px);
    overflow: hidden;
    position: relative;
}
.nz-comment-text.is-collapsed::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 44px;
    background: linear-gradient(180deg, transparent, var(--nz-surface));
    pointer-events: none;
}
.nz-expand-btn {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    margin-top: 6px;
    padding: 4px 10px;
    border: 0;
    border-radius: var(--nz-radius-pill);
    background: var(--nz-surface-3);
    color: var(--nz-accent-deep);
    font: inherit;
    font-size: var(--nz-fs-sm);
    font-weight: 700;
    cursor: pointer;
}
.nz-expand-btn:hover { background: var(--nz-accent-soft); }
/* hidden 属性会被上面的 display:inline-flex 顶掉，必须显式关掉 */
.nz-expand-btn[hidden] { display: none; }
/* 展开整楼之后出现的"收起回复" */
/* 留言板的回复区要能当定位父级用 */
/* 回复区的高度变化要有过渡，展开 / 收起对话时不会"啪"地跳 */
.nz-sub-list-host,
.nz-sub-list {
    position: relative;
    transition: height .18s var(--nz-ease);
}
/* 展开出来的回复逐条淡入，有个"展开"的感觉 */
@keyframes nz-unfold {
    from { opacity: 0; transform: translateY(-4px) scale(.99); }
    to { opacity: 1; transform: none; }
}
.nz-just-in { animation: nz-unfold .2s var(--nz-ease-out) both; }
.nz-sub-toggle.is-fold {
    justify-content: center;
    color: var(--nz-text-faint);
}
.nz-sub-toggle.is-fold:hover { color: var(--nz-accent-deep); }
.nz-expand-hint { color: var(--nz-danger); font-weight: 600; margin-left: 6px; }

/* 楼中楼的"显示对话"：整块盖住这个楼的回复区，带过渡动画 */
.nz-dialog-link { color: var(--nz-accent-deep); font-weight: 700; }
.nz-dialog-link.is-on { background: var(--nz-accent-soft); }

/* 开着的对话视图：直接嵌在楼里（原来的回复先藏起来），不是浮在上面 */
.nz-dialog-inline {
    position: relative;
    border-radius: var(--nz-radius-sm);
    background: color-mix(in srgb, var(--nz-surface-3) 92%, transparent);
    border: 1px solid var(--nz-border);
    overflow: hidden;
    animation: nz-unfold .2s var(--nz-ease-out) both;
}
.nz-dialog-inline .nz-dialog-bar,
.nz-dialog-inline .nz-dialog-body { background: var(--nz-surface); }
/* 关掉之后原来的回复淡回来 */
@keyframes nz-refade {
    from { opacity: 0; transform: translateY(-3px); }
    to { opacity: 1; transform: none; }
}
.nz-refade { animation: nz-refade .22s var(--nz-ease-out) both; }

.nz-dialog-overlay {
    transition: opacity .18s var(--nz-ease), transform .18s var(--nz-ease-out), height .18s var(--nz-ease);
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    /* 至少盖满整个回复区，内容多的时候自己长高，但不超过屏幕；
       不要用 inset:0，那样高度被父元素锁死，对话一多就被裁掉、还滚不动 */
    /* 高度由 JS 按"楼高 / 屏幕剩余空间"取小的那个写死。
       里面全部用绝对定位，不用 flex：
       flex 子项要不要收缩跟"容器高度算不算确定"有关，实测反复横跳，
       而 top/bottom 撑出来的高度是死的，一定能出滚动条。 */
    bottom: auto;
    z-index: 12;
    display: block;
    border-radius: var(--nz-radius-sm);
    /* 整体变灰，底下的楼还能隐约看见 */
    background: color-mix(in srgb, var(--nz-surface-3) 88%, transparent);
    backdrop-filter: blur(3px);
    -webkit-backdrop-filter: blur(3px);
    opacity: 0;
    transform: translateY(8px) scale(.985);
    transition: opacity .2s var(--nz-ease), transform .2s var(--nz-ease-out);
    overflow: hidden;
}
.nz-dialog-overlay.is-open { opacity: 1; transform: none; }
.nz-dialog-overlay.is-leaving { opacity: 0; transform: translateY(6px) scale(.99); }

.nz-dialog-bar {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 10px 8px 12px;
    border-bottom: 1px solid var(--nz-border-soft);
    background: var(--nz-surface);
    /* 内容长的时候标题栏跟着滚上去，叉要一直看得见 */
    z-index: 2;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 42px;
    box-sizing: border-box;
    border-radius: var(--nz-radius-sm) var(--nz-radius-sm) 0 0;
}
.nz-dialog-title {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: var(--nz-fs-sm);
    font-weight: 700;
    color: var(--nz-text-strong);
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.nz-dialog-body {
    position: absolute;
    top: 42px;
    left: 0;
    right: 0;
    bottom: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: 8px 12px 12px;
    background: var(--nz-surface);
}
.nz-dialog-item {
    display: flex;
    gap: 9px;
    padding: 8px 0;
    border-top: 1px solid var(--nz-border-soft);
}
.nz-dialog-item:first-child { border-top: 0; }
/* 树状缩进：被回复的那条在上一层，回复它的往下缩进一层 */
.nz-dialog-item.is-child {
    border-top: 0;
    padding-top: 4px;
    padding-bottom: 4px;
}
.nz-dialog-branch {
    flex: 0 0 auto;
    width: 10px;
    align-self: stretch;
    border-left: 2px solid var(--nz-border);
    border-bottom: 2px solid var(--nz-border);
    border-bottom-left-radius: 8px;
    margin-right: 2px;
    margin-top: -4px;
}
.nz-dialog-item.is-self {
    background: var(--nz-accent-soft);
    border-radius: var(--nz-radius-xs);
    padding: 8px;
    margin: 2px -8px;
}
.nz-dialog-here {
    font-size: 11px;
    font-weight: 800;
    color: var(--nz-accent-deep);
    background: var(--nz-accent-soft);
    border-radius: var(--nz-radius-pill);
    padding: 1px 7px;
}
/* 评论里"回复 @某人"的那个 @，做成能点的链接 */
a.nz-mention {
    color: var(--nz-accent-deep);
    font-weight: 700;
    text-decoration: none;
    cursor: pointer;
}
a.nz-mention:hover { text-decoration: underline; }

/* 展开后比屏幕还高时，底部常驻的收起条 */
.nz-collapse-bar {
    position: fixed;
    left: 50%;
    transform: translateX(-50%);
    bottom: 18px;
    z-index: 200;
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 260px;
    max-width: min(92vw, 520px);
    padding: 9px 12px;
    border-radius: var(--nz-radius-pill);
    background: var(--nz-surface);
    border: 1px solid var(--nz-border);
    box-shadow: var(--nz-shadow-modal);
    font-size: var(--nz-fs-sm);
    color: var(--nz-text-sub);
}
.nz-collapse-bar[hidden] { display: none; }

.nz-comment-text { font-size: var(--nz-fs-md); line-height: 1.75; color: var(--nz-text); word-break: break-word; white-space: pre-wrap; }
.nz-comment-text a { color: var(--nz-accent-deep); }
.nz-comment-text .nz-mention { color: var(--nz-accent-deep); font-weight: 700; cursor: pointer; }
.nz-comment-actions { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; }
.nz-comment.is-target { animation: nz-highlight 2.2s var(--nz-ease) both; }
@keyframes nz-highlight {
    0% { background: var(--nz-accent-soft); }
    100% { background: transparent; }
}
/* ── 帖子正文：比半屏还高就先折起来 ───────────────
   只裁外面这一层，沙箱 iframe 自己的高度、里面的脚本和滚动一点不动
   （用户要的"不影响帖子渲染"）。尾部同样走 mask 向下渐隐 */
.nz-post-clip {
    position: relative;
    overflow: hidden;
}
.nz-post-clip.is-folded {
    max-height: var(--nz-post-fold-h, 50vh);
    -webkit-mask-image: linear-gradient(180deg, #000 calc(100% - 120px), transparent 100%);
    mask-image: linear-gradient(180deg, #000 calc(100% - 120px), transparent 100%);
}
.nz-post-expand {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    margin: 12px auto 0;
    padding: 6px 16px;
}
.nz-post-expand[hidden] { display: none; }

/* ── 游客：评论只给看前几条 ───────────────────────
   两层一起上：
     1. 列表自己用 mask 把最后一条的尾部淡掉（不依赖卡片底色，换主题也成立）
     2. 底部那条登录提示**往上压住**列表尾部，它自己顶上带一段
        "透明 -> 卡片底色"的渐变，等于给尾部盖了一层遮罩 */
/* 用 id 选：这个元素只有 id="nz-comment-list"，身上**没有** nz-comment-list 这个类，
   早先按 .nz-comment-list.is-guest-cut 写，选择器压根匹配不上 ——
   CSS 里看着有渐变，页面上一点没生效（用户第二次报"最后一条没渐隐"就是这个） */
#nz-comment-list.is-guest-cut,
.nz-comment-list.is-guest-cut {
    position: relative;
    -webkit-mask-image: linear-gradient(180deg, #000 calc(100% - 120px), transparent 100%);
    mask-image: linear-gradient(180deg, #000 calc(100% - 120px), transparent 100%);
}
.nz-guest-more {
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 7px;
    margin-top: -88px;
    padding: 88px 0 6px;
    background: linear-gradient(180deg, transparent 0%, color-mix(in srgb, var(--nz-surface) 88%, transparent) 42%, var(--nz-surface) 72%);
}

.nz-sub-list { margin-top: 8px; padding-left: 12px; border-left: 2px solid var(--nz-border-soft); display: flex; flex-direction: column; }
.nz-sub-list .nz-comment { padding: 10px 0; }
.nz-sub-toggle.is-locked { color: var(--nz-text-faint); cursor: default; font-weight: 600; }
.nz-sub-toggle { font-size: var(--nz-fs-sm); font-weight: 700; color: var(--nz-accent-deep); cursor: pointer; display: inline-flex; align-items: center; gap: 4px; }
.nz-sub-toggle:hover { color: var(--nz-accent); }
.nz-reply-hint { font-size: var(--nz-fs-xs); color: var(--nz-text-faint); }

/* 勾选框 + 文字：给足宽度，别让"公开"两个字被挤到第二行 */
.nz-check-row {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 34px;
    padding: 4px 12px 4px 10px;
    border-radius: var(--nz-radius-sm);
    border: 1px solid var(--nz-border);
    background: var(--nz-surface-2);
    font-size: var(--nz-fs-base);
    white-space: nowrap;
    cursor: pointer;
    flex: 0 0 auto;
}
.nz-check-row input[type="checkbox"] {
    width: 18px;
    height: 18px;
    flex: 0 0 auto;
    accent-color: var(--nz-accent);
    margin: 0;
}

/* 醒目警告横幅：隔离执行、站外链接都用它 */
.nz-warn-banner {
    display: flex;
    gap: 12px;
    align-items: flex-start;
    padding: 14px;
    border-radius: var(--nz-radius-sm);
    background: var(--nz-danger-soft);
    border: 1px solid color-mix(in srgb, var(--nz-danger) 35%, transparent);
    color: var(--nz-text-strong);
}
.nz-warn-banner > .nz-icon {
    width: 26px;
    height: 26px;
    color: var(--nz-danger);
    flex: 0 0 auto;
}
.nz-warn-banner.is-external {
    background: var(--nz-warning-soft, var(--nz-danger-soft));
}
.nz-warn-title { font-weight: 800; font-size: var(--nz-fs-md); margin-bottom: 4px; }
.nz-warn-text { font-size: var(--nz-fs-sm); color: var(--nz-text-sub); line-height: 1.7; }
.nz-link-host {
    font-size: 20px;
    font-weight: 800;
    color: var(--nz-danger);
    word-break: break-all;
    margin: 4px 0;
}
.nz-link-full {
    margin-top: 10px;
    padding: 9px 11px;
    border-radius: var(--nz-radius-xs);
    background: var(--nz-surface-3);
    font-family: var(--nz-font-mono);
    font-size: var(--nz-fs-xs);
    color: var(--nz-text-sub);
    word-break: break-all;
}

/* ── 编辑器（评论框 / @ 提及） ────────────────── */
.nz-composer { display: flex; gap: 11px; position: relative; }
.nz-composer-box {
    flex: 1 1 auto;
    border: 1px solid var(--nz-border);
    border-radius: var(--nz-radius-sm);
    background: var(--nz-surface-2);
    transition: border-color var(--nz-dur) var(--nz-ease), box-shadow var(--nz-dur) var(--nz-ease);
    overflow: hidden;
}
.nz-composer-box:focus-within { border-color: var(--nz-accent); background: var(--nz-surface); box-shadow: 0 0 0 4px var(--nz-accent-soft); }
.nz-composer-input {
    width: 100%;
    min-height: 66px;
    max-height: 300px;
    padding: 10px 12px;
    border: 0;
    background: transparent;
    resize: none;
    outline: none;
    line-height: 1.7;
}

/* contenteditable 版输入框：@ 提及会变成一整块 chip */
.nz-mention-editor {
    width: 100%;
    min-height: 66px;
    max-height: 320px;
    overflow-y: auto;
    padding: 10px 12px;
    outline: none;
    line-height: 1.75;
    word-break: break-word;
    overflow-wrap: anywhere;
    white-space: pre-wrap;
}
.nz-mention-editor:empty::before {
    content: attr(data-placeholder);
    color: var(--nz-text-faint);
    pointer-events: none;
}
.nz-mention-chip {
    display: inline-block;
    padding: 0 7px;
    margin: 0 1px;
    border-radius: 6px;
    background: var(--nz-accent-soft);
    color: var(--nz-accent-deep);
    font-weight: 700;
    /* 超长昵称的 @ 药丸以前是 nowrap，一个药丸就能把写作区撑出横向滚动。
       这里让它自己折行 —— 折行之后整段名字还是全都看得见，不会被截掉 */
    max-width: 100%;
    white-space: normal;
    overflow-wrap: anywhere;
    vertical-align: bottom;
    user-select: none;
    cursor: default;
}
.nz-mention-chip::selection { background: transparent; color: var(--nz-accent-deep); }
.nz-composer-bar {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px 8px;
    border-top: 1px solid var(--nz-border-soft);
    background: var(--nz-surface);
    flex-wrap: wrap;
}
.nz-composer-bar .nz-grow { flex: 1 1 auto; }
.nz-mention-pop {
    position: absolute;
    z-index: 140;
    background: var(--nz-surface);
    border: 1px solid var(--nz-border);
    border-radius: var(--nz-radius-sm);
    box-shadow: var(--nz-shadow-modal);
    padding: 5px;
    min-width: 200px;
    /* 以前只有 min-width 没有封顶：昵称一长，这个绝对定位的框就跟着长，
       顶出视口之后整页都能横向拖，手机上还会触发缩放（用户报的）。
       这里按"屏幕宽减 24px"封住，里面超长的名字交给 .nz-scroll-x 自己横滑 + 两头渐隐。 */
    max-width: min(340px, calc(100vw - 24px));
    max-height: 240px;
    overflow-y: auto;
    overflow-x: hidden;
}
.nz-mention-item { display: flex; align-items: center; gap: 8px; padding: 6px 8px; border-radius: var(--nz-radius-xs); cursor: pointer; font-size: var(--nz-fs-sm); min-width: 0; }

/* 昵称排在主位：让它自己横滑，划到哪看到哪，不截断也不顶着别的东西往外跑 */
.nz-mention-name { flex: 1 1 auto; min-width: 0; font-weight: 700; color: var(--nz-text-strong); }
/* @用户名 是次要信息，最多占 45%，也是横滑而不是省略号（id 又长又没规律，截了等于看不见） */
.nz-mention-uid { flex: 0 1 auto; min-width: 0; max-width: 45%; }
.nz-mention-item:hover, .nz-mention-item.is-active { background: var(--nz-accent-soft); }

/* ── 用户列表行 ───────────────────────────────── */
.nz-user-row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px;
    border-radius: var(--nz-radius-md);
    border: 1px solid var(--nz-border);
    background: var(--nz-surface);
    transition: all var(--nz-dur) var(--nz-ease);
}
.nz-user-row:hover { border-color: var(--nz-border-strong); box-shadow: var(--nz-shadow-sm); }
.nz-user-row-name { font-weight: 700; color: var(--nz-text-strong); display: flex; align-items: center; gap: 6px; min-width: 0; }
.nz-user-row-name > * { flex: 0 0 auto; }
.nz-user-row-name > .nz-scroll-x { flex: 0 1 auto; }
.nz-user-row-bio { font-size: var(--nz-fs-sm); color: var(--nz-text-sub); -webkit-line-clamp: 1; display: -webkit-box; -webkit-box-orient: vertical; overflow: hidden; }
.nz-user-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 10px; }

/* ── 统计块 ───────────────────────────────────── */
.nz-stats { display: flex; gap: 22px; flex-wrap: wrap; }
.nz-stat { display: flex; flex-direction: column; gap: 1px; cursor: default; }
.nz-stat-num { font-size: var(--nz-fs-xl); font-weight: 800; color: var(--nz-text-strong); line-height: 1.2; }
.nz-stat-label { font-size: var(--nz-fs-xs); color: var(--nz-text-faint); font-weight: 600; }
a.nz-stat:hover .nz-stat-num { color: var(--nz-accent-deep); }

/* ── 分隔与小工具 ─────────────────────────────── */
.nz-divider { height: 1px; background: var(--nz-border-soft); margin: 12px 0; }
.nz-chip {
    display: inline-flex; align-items: center; gap: 5px;
    padding: 3px 10px;
    border-radius: var(--nz-radius-pill);
    background: var(--nz-surface-3);
    font-size: var(--nz-fs-xs);
    font-weight: 700;
    color: var(--nz-text-sub);
}
.nz-chip-accent { background: var(--nz-accent-soft); color: var(--nz-accent-deep); }
.nz-chip-danger { background: var(--nz-danger-soft); color: var(--nz-danger); }
.nz-chip-warning { background: var(--nz-warning-soft); color: var(--nz-warning); }
.nz-chip-success { background: var(--nz-success-soft); color: var(--nz-success); }

/* ── 加载条 ───────────────────────────────────── */
.nz-progress { position: fixed; top: 0; left: 0; right: 0; height: 2px; z-index: 300; background: transparent; overflow: hidden; }
.nz-progress::before {
    content: '';
    position: absolute; top: 0; left: -40%;
    width: 40%; height: 100%;
    background: linear-gradient(90deg, transparent, var(--nz-accent), transparent);
    animation: nz-loading-line 1.1s infinite var(--nz-ease-in-out);
    opacity: 0;
}
.nz-progress.is-loading::before { opacity: 1; }
@keyframes nz-loading-line { 0% { left: -40%; } 100% { left: 100%; } }

/* ── 过渡补漏（这轮 UI 整理加的）────────────────
   下面这些都是"点了有反应、但没有过渡"的元素，状态一切就是"啪"一下。
   统一在这里补上，只走颜色和 transform。 */
.nz-pop-item { transition: background-color .12s var(--nz-ease), color .12s var(--nz-ease); }
.nz-neighbor { transition: border-color var(--nz-dur) var(--nz-ease), background-color var(--nz-dur) var(--nz-ease), transform var(--nz-dur-fast) var(--nz-ease); }
.nz-neighbor:active { transform: scale(.98); }
a.nz-stat { transition: background-color var(--nz-dur) var(--nz-ease), border-color var(--nz-dur) var(--nz-ease), transform var(--nz-dur-fast) var(--nz-ease); }
a.nz-stat:active { transform: scale(.97); }
.nz-stat-num { transition: color var(--nz-dur) var(--nz-ease); }
.nz-expand-btn,
.nz-sub-toggle { transition: background-color var(--nz-dur-fast) var(--nz-ease), color var(--nz-dur-fast) var(--nz-ease); }
.nz-iv-btn { transition: background-color .14s var(--nz-ease), color .14s var(--nz-ease), opacity .14s var(--nz-ease); }
.nz-chip { transition: background-color var(--nz-dur-fast) var(--nz-ease), color var(--nz-dur-fast) var(--nz-ease), border-color var(--nz-dur-fast) var(--nz-ease); }