/* 作品展示页：左看图、右详情。
 *
 * 布局的三条硬约束，改之前先读：
 *
 * ① 右栏固定 450px，左栏用 minmax(0, 1fr) —— **不是 1fr**。1fr 的最小值是
 *    min-content，左栏里只要有一个 white-space:nowrap 的东西（工具条按钮就是），
 *    整列就会被撑开、把右栏挤出屏幕。这个坑在创作抽屉那边踩过一次。
 *
 * ② 两栏都要 min-height:0。flex/grid 子项的默认最小高度是 auto，不归零的话
 *    右栏不会滚动（它会把父容器撑高），左栏的图也不会按可用高度收缩。
 *
 * ③ 容器高度用视口减去顶栏 + 导航 + .site-main 的上下内边距。右栏要独立
 *    滚动，就必须有一个**确定的**高度；靠内容撑起来的高度是滚不动的。
 */

.ws {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 450px;
    gap: 1.25rem;
    align-items: stretch;
    height: calc(100vh - var(--bar-height, 56px) - var(--nav-height, 44px) - 3.5rem);
    /* 太矮的窗口下宁可让整页滚，也不要把图压成一条缝。 */
    min-height: 520px;
}

/* ── 左栏 ─────────────────────────────────────────── */

.ws-main {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    min-width: 0;
    min-height: 0;
}

/* 顶部操作条。按钮小而密，图才是主角 —— 一排 icon + 短标签，不是一排大按钮。 */
.ws-bar {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    flex-wrap: nowrap;
    min-width: 0;
}

.ws-bar-spacer { flex: 1 1 auto; min-width: 0; }

.ws-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.35rem 0.6rem;
    border: 1px solid var(--border, #2a2a35);
    border-radius: 8px;
    background: var(--content-bg, #14141c);
    color: var(--text, #e8e8f0);
    font: inherit;
    font-size: 0.8rem;
    line-height: 1.2;
    white-space: nowrap;
    cursor: pointer;
    text-decoration: none;
}

.ws-btn:hover { border-color: var(--accent, #6c5ce7); }
.ws-btn[aria-pressed="true"], .ws-btn.is-active { border-color: var(--accent, #6c5ce7); color: var(--accent, #6c5ce7); }
.ws-btn-icon { width: 16px; height: 16px; flex: none; }

/* 图标按钮（关闭、翻页、详情开关）：只有图标，正方形。 */
.ws-btn--icon { padding: 0.35rem; }

/* 一键复刻是这一排里唯一的主行动，给它实心底色，其余保持描边。 */
.ws-btn--primary {
    background: var(--accent, #6c5ce7);
    border-color: var(--accent, #6c5ce7);
    color: #fff;
    font-weight: 600;
}

/* 下拉：把不常用的动作（举报、复制链接…）收进去，别把工具条塞满。 */
.ws-menu { position: relative; flex: none; }
.ws-menu-list {
    position: absolute;
    right: 0;
    top: calc(100% + 4px);
    z-index: 30;
    min-width: 150px;
    padding: 0.25rem;
    border: 1px solid var(--border, #2a2a35);
    border-radius: 10px;
    background: var(--content-bg, #14141c);
    box-shadow: 0 8px 24px rgb(0 0 0 / 0.35);
}
.ws-menu-list[hidden] { display: none; }
.ws-menu-list button,
.ws-menu-list a {
    display: block;
    width: 100%;
    padding: 0.45rem 0.6rem;
    border: 0;
    border-radius: 6px;
    background: none;
    color: var(--text, #e8e8f0);
    font: inherit;
    font-size: 0.82rem;
    text-align: left;
    text-decoration: none;
    cursor: pointer;
}
.ws-menu-list button:hover,
.ws-menu-list a:hover { background: color-mix(in srgb, var(--accent, #6c5ce7) 18%, transparent); }

/* ── 看图舞台 ──────────────────────────────────────── */

.ws-stage {
    position: relative;
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 12px;
    background: #0a0a10;
    overflow: hidden;
}

/* object-fit:contain + max-height:100% —— 图按可用高度收缩，不裁切、不溢出。 */
.ws-stage img,
.ws-stage video {
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
    display: block;
    object-fit: contain;
}

/* 🔴 幻灯片改成**绝对定位 + 透明度/位移**，不是 display 切换 ——
   display 不能过渡，用它就没有翻页动效可言。所有片同时在文档里、叠在一起，
   只有 .is-current 那张可见可点。 */
.ws-stage-item {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    pointer-events: none;
    transform: translateX(0);
    transition: opacity 0.26s ease, transform 0.26s ease;
}

.ws-stage-item.is-current {
    opacity: 1;
    pointer-events: auto;
    transform: translateX(0);
}

/* 出场：往行进方向滑走。看"下一张"时内容整体向左。 */
.ws-stage-item.is-leaving-left { transform: translateX(-6%); opacity: 0; }
.ws-stage-item.is-leaving-right { transform: translateX(6%); opacity: 0; }

/* 入场的起始位置。JS 先加这个、强制回流、再切到 .is-current，才有过渡。 */
.ws-stage-item.is-entering-right { transform: translateX(6%); opacity: 0; transition: none; }
.ws-stage-item.is-entering-left { transform: translateX(-6%); opacity: 0; transition: none; }

/* 关掉动画的人只看结果，不看过程。 */
@media (prefers-reduced-motion: reduce) {
    .ws-stage-item { transition: none; }
}

/* 翻页按钮压在图上，半透明；单图时整个不渲染。 */
.ws-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 5;
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 0;
    border-radius: 50%;
    background: rgb(0 0 0 / 0.5);
    color: #fff;
    cursor: pointer;
}
.ws-nav:hover { background: rgb(0 0 0 / 0.75); }
.ws-nav--prev { left: 10px; }
.ws-nav--next { right: 10px; }

/* 独立作品页上，单图作品的翻页按钮没有意义 —— 藏起来（元素仍在，弹窗要用）。 */
.ws-stage[data-single] .ws-nav { display: none; }

/* 弹窗里箭头是**跨作品**导航：单图作品同样要能往相邻作品走。 */
.wd .ws-stage[data-single] .ws-nav { display: flex; }

.ws-counter {
    position: absolute;
    bottom: 10px;
    left: 50%;
    transform: translateX(-50%);
    padding: 0.2rem 0.6rem;
    border-radius: 999px;
    background: rgb(0 0 0 / 0.55);
    color: #fff;
    font-size: 0.72rem;
    font-variant-numeric: tabular-nums;
}

/* ── 图下面那一排：点赞 · 收藏 ─────────────────────── */

.ws-react {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.ws-react .ws-btn { padding: 0.45rem 0.8rem; font-size: 0.85rem; }

/* ── 右栏 ─────────────────────────────────────────── */

.ws-side {
    min-width: 0;
    min-height: 0;
    height: 100%;
    overflow-y: auto;
    overscroll-behavior: contain;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    padding-right: 2px;   /* 给滚动条留位，免得内容贴边 */
}

/* 🔴 右栏是 flex 列，子项**默认会被压缩**（flex-shrink:1）。内容撑着的卡片
   看不出来，但空的广告位（300×250）会当场塌成一条线 —— 面板是靠滚动容纳
   内容的，任何一个子项都不该为了"塞进去"而变矮。 */
.ws-side > * { flex: 0 0 auto; }

.ws-card {
    border: 1px solid var(--border, #2a2a35);
    border-radius: 12px;
    background: var(--content-bg, #14141c);
    padding: 0.9rem;
}

.ws-card > h2 {
    margin: 0 0 0.6rem;
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--text, #e8e8f0);
}

/* 作者卡 */
.ws-author { display: flex; gap: 0.7rem; align-items: flex-start; }
.ws-author-avatar { width: 48px; height: 48px; border-radius: 50%; flex: none; object-fit: cover; background: #222; }
.ws-author-main { min-width: 0; flex: 1 1 auto; }
.ws-author-name { display: block; font-weight: 600; color: var(--text, #e8e8f0); text-decoration: none; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ws-author-actions { display: flex; gap: 0.35rem; margin-top: 0.5rem; flex-wrap: wrap; }

/* 四个统计：一行四格，数字大、标签小。 */
.ws-stats {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0.4rem;
    margin-top: 0.75rem;
    padding-top: 0.75rem;
    border-top: 1px solid var(--border, #2a2a35);
}
.ws-stat { text-align: center; min-width: 0; }
.ws-stat-num { display: block; font-size: 0.95rem; font-weight: 600; color: var(--text, #e8e8f0); font-variant-numeric: tabular-nums; }
.ws-stat-label { display: block; font-size: 0.68rem; color: var(--muted, #9aa); white-space: nowrap; }

/* 广告位：固定 300×250，居中。留白本身也是一种诚实 —— 没广告时它就是个空框。 */
.ws-ad {
    width: 300px;
    height: 250px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px dashed var(--border, #2a2a35);
    border-radius: 10px;
    color: var(--muted, #9aa);
    font-size: 0.72rem;
}

/* 标签：小而密，一行能塞下好几个。投票按钮贴在右边。 */
.ws-tags { display: flex; flex-wrap: wrap; gap: 0.35rem; }

.ws-tag {
    display: inline-flex;
    align-items: center;
    gap: 0.15rem;
    padding: 0.1rem 0.15rem 0.1rem 0.5rem;
    border: 1px solid var(--border, #2a2a35);
    border-radius: 999px;
    font-size: 0.75rem;
    line-height: 1.6;
}

.ws-tag-name { color: var(--text, #e8e8f0); text-decoration: none; white-space: nowrap; }
.ws-tag-name:hover { color: var(--accent, #6c5ce7); }

.ws-tag-vote {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: none;
    color: var(--muted, #9aa);
    font: inherit;
    font-size: 0.7rem;
    line-height: 1;
    cursor: pointer;
}
.ws-tag-vote:hover { background: color-mix(in srgb, var(--accent, #6c5ce7) 20%, transparent); color: var(--text, #e8e8f0); }
.ws-tag-vote[aria-pressed="true"] { color: var(--accent, #6c5ce7); }
.ws-tag-score { min-width: 1.2em; text-align: center; font-size: 0.7rem; color: var(--muted, #9aa); font-variant-numeric: tabular-nums; }

/* 作者加的标签：一道细边框标出来，不用另起一块。
   🔴 作者与路人的标签**在同一片标签云里**（Owner 定的口径）—— 分成两块
   的话，同一个标签出现在哪一块就成了一个要解释的问题，而它对读者毫无意义。 */
.ws-tag--author { border-color: color-mix(in srgb, var(--accent, #6c5ce7) 45%, var(--border, #2a2a35)); }

/* 摘标签：只有作品作者看得到。默认压得很淡，悬停到那个标签上才亮 ——
   一排标签上挂着一排 ✕ 会让人以为随时会误删。 */
.ws-tag-remove {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 16px;
    height: 16px;
    margin-right: 2px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: none;
    color: var(--muted, #9aa);
    font: inherit;
    font-size: 0.62rem;
    line-height: 1;
    cursor: pointer;
    opacity: 0;
    transition: opacity 0.15s ease, color 0.15s ease;
}

.ws-tag:hover .ws-tag-remove,
.ws-tag-remove:focus-visible { opacity: 0.7; }
.ws-tag-remove:hover { opacity: 1; color: #e74c3c; }

/* 触屏没有 hover，常显但保持很淡，否则作者永远点不到。 */
@media (hover: none) {
    .ws-tag-remove { opacity: 0.55; }
}

.ws-tag-add { display: flex; gap: 0.35rem; margin-top: 0.6rem; }
.ws-tag-add input {
    flex: 1 1 auto;
    min-width: 0;
    padding: 0.3rem 0.55rem;
    border: 1px solid var(--border, #2a2a35);
    border-radius: 999px;
    background: transparent;
    color: var(--text, #e8e8f0);
    font: inherit;
    font-size: 0.75rem;
}

/* ── 窄屏：右栏收成底部抽屉 ────────────────────────── */

.ws-sheet-toggle { display: none; }

@media (max-width: 1024px) {
    .ws {
        display: block;
        height: auto;
        min-height: 0;
    }

    /* 图不再按视口高度收缩，改成给一个上限，页面整体滚动。 */
    .ws-stage { max-height: 70vh; }

    .ws-side {
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 40;
        height: auto;
        max-height: 80vh;
        padding: 0.75rem 0.9rem calc(0.9rem + env(safe-area-inset-bottom, 0px));
        border-top: 1px solid var(--border, #2a2a35);
        border-radius: 14px 14px 0 0;
        background: var(--content-bg, #14141c);
        box-shadow: 0 -8px 28px rgb(0 0 0 / 0.4);
        transform: translateY(100%);
        transition: transform 0.22s ease;
        /* 收起时不吃点击，也不进 Tab 顺序。 */
        visibility: hidden;
    }

    .ws-side[data-open] { transform: none; visibility: visible; }

    .ws-sheet-toggle {
        position: fixed;
        left: 50%;
        bottom: calc(0.7rem + env(safe-area-inset-bottom, 0px));
        transform: translateX(-50%);
        z-index: 41;
        display: inline-flex;
        align-items: center;
        gap: 0.35rem;
        padding: 0.5rem 1.1rem;
        border: 1px solid var(--border, #2a2a35);
        border-radius: 999px;
        background: var(--content-bg, #14141c);
        color: var(--text, #e8e8f0);
        font: inherit;
        font-size: 0.82rem;
        box-shadow: 0 4px 16px rgb(0 0 0 / 0.35);
        cursor: pointer;
    }

    /* 抽屉展开时把按钮藏掉 —— 抽屉自己顶上有把手可以收。 */
    .ws-side[data-open] ~ .ws-sheet-toggle { display: none; }

    /* 抽屉顶部的把手，点它收起。 */
    .ws-sheet-handle {
        position: sticky;
        top: 0;
        z-index: 1;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 0.4rem;
        margin: -0.75rem -0.9rem 0.5rem;
        padding: 0.5rem;
        border: 0;
        background: var(--content-bg, #14141c);
        color: var(--muted, #9aa);
        font: inherit;
        font-size: 0.78rem;
        cursor: pointer;
    }

    /* 工具条按钮太多时，窄屏把次要的挪到图下面那一排。 */
    .ws-bar [data-ws-demote] { display: none; }
    .ws-react [data-ws-demote] { display: inline-flex; }
}

@media (min-width: 1025px) {
    /* 宽屏上「详情」开关关掉右栏，图占满整宽。 */
    .ws[data-side-hidden] { grid-template-columns: minmax(0, 1fr); }
    .ws[data-side-hidden] .ws-side { display: none; }
    .ws-sheet-handle { display: none; }
    /* 降级项只在窄屏出现在下面那一排。 */
    .ws-react [data-ws-demote] { display: none; }
}

/* ─────────────────────────────────────────────────────────
 * 作品流的全屏弹窗。
 *
 * 🔴 弹窗里装的是同一份 .ws 正文，所以上面那整套规则原样生效 ——
 * 这一段只负责"把它铺满屏幕"，不重写任何正文样式。
 * ───────────────────────────────────────────────────────── */

.wd {
    position: fixed;
    inset: 0;
    /* 🔴 必须高过站点顶栏（.top-bar z=200）与导航（.top-nav z=100）。
       低了的话弹窗铺满了屏幕，可作品的工具条（✕ / 一键复刻 / 下载）正好
       被压在导航底下点不到 —— 浏览器里实测过。这个数与 layouts/site 的
       那两条**必须一起看**，改任何一边都要回来核对。 */
    z-index: 300;
    display: flex;
    align-items: stretch;
    justify-content: center;
}

.wd[hidden] { display: none; }

.wd-scrim {
    position: absolute;
    inset: 0;
    /* 近乎不透明：弹窗是通栏铺满的，背后那点站点顶栏透出来不是"保留上下文"，
       是噪音 —— 工具条正好压在透出来的搜索框上，看着像渲染错误。 */
    background: rgb(0 0 0 / 0.96);
    /* 淡入：弹窗是"就地展开"，不是"跳到新页面"，硬切会让人以为页面变了。 */
    animation: wd-fade 0.18s ease;
}

.wd-panel {
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: 1760px;
    padding: 1rem 1.25rem;
    overflow: hidden;
    animation: wd-rise 0.2s ease;
}

@keyframes wd-fade { from { opacity: 0; } }
@keyframes wd-rise { from { opacity: 0; transform: translateY(10px); } }

@media (prefers-reduced-motion: reduce) {
    .wd-scrim, .wd-panel { animation: none; }
}

/* 弹窗里的正文按弹窗自己的高度算，不再减站点导航（弹窗盖住了它们）。 */
.wd .ws {
    height: calc(100vh - 2rem);
    min-height: 0;
}

.wd-loading {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    margin: 0;
    color: var(--muted, #9aa);
    font-size: 0.85rem;
}

.wd-loading[hidden] { display: none; }

.wd-body { height: 100%; }

/* ── 换作品时：只有图片区域动 ──────────────────────────
 *
 * 🔴 工具条与点赞收藏那一排**原地换掉、不做任何位移或淡入淡出**。
 * 整块正文一起滑的话，屏幕上所有东西同时晃，看着像换了一个页面 ——
 * 可用户的心智是"我在同一个看图器里翻到了下一张"。会动的只该是那张图。
 *
 * 「看上去不动」只是视觉：工具条上那颗「下载」是随工具条一起被**换掉**的，
 * 指向当前这张图，不是留着没动。
 */
.ws-stage { transition: opacity 0.2s ease, transform 0.2s ease; }

.ws-stage.is-out-left { opacity: 0; transform: translateX(-3%); }
.ws-stage.is-out-right { opacity: 0; transform: translateX(3%); }

/* 入场起始位置。JS 先加上、强制回流、再摘掉，才有过渡。 */
.ws-stage.is-in-right { opacity: 0; transform: translateX(3%); transition: none; }
.ws-stage.is-in-left { opacity: 0; transform: translateX(-3%); transition: none; }

/* ── 右栏：内容在换的时候挂骨架 ─────────────────────────
 *
 * 用「原地变暗 + 一道扫光」而不是把内容换成几条灰色方块：卡片的**高度保持
 * 不变**，右栏不会在加载期间抖一下再跳回来。
 *
 * 🔴 .ws-ad 不是 .ws-card，所以广告位一点也不受影响 —— 它跟看的是哪件作品
 * 本来就没有关系，闪一下纯属噪音。
 */
.ws-side[data-loading] .ws-card { position: relative; overflow: hidden; }
.ws-side[data-loading] .ws-card > * { opacity: 0.18; transition: opacity 0.15s ease; }

.ws-side[data-loading] .ws-card::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(
        90deg,
        transparent 0%,
        color-mix(in srgb, var(--text, #e8e8f0) 7%, transparent) 50%,
        transparent 100%
    );
    transform: translateX(-100%);
    animation: ws-shimmer 1.05s ease-in-out infinite;
}

@keyframes ws-shimmer {
    to { transform: translateX(100%); }
}

@media (prefers-reduced-motion: reduce) {
    .ws-stage { transition: none; }
    .ws-side[data-loading] .ws-card::after { animation: none; }
}

@media (max-width: 1024px) {
    .wd-panel { padding: 0.5rem; }
    .wd .ws { height: auto; }
}

/* 弹窗打开时锁住背后那一页的滚动 —— 否则滚轮会滚到列表上去。 */
body.wd-open { overflow: hidden; }


/* ─────────────────────────────────────────────────────────
 * 正文里那些 .work-* 组件（提示词、参数表、评论、打赏面板、作者编辑区…）。
 *
 * 🔴 2026-08-27 从 site/works/show.blade.php 的内联 <style> 搬到这里。
 * 那一份只有独立作品页有，作品流页面没有 —— 于是弹窗里注入的正文是**裸的**，
 * 右栏看着完全不是一回事（Owner 实测「右边栏目的 css 好像坏了」）。
 * 正文有两个宿主，它的样式就必须跟正文一起共用，不能挂在其中一个宿主上。
 * ───────────────────────────────────────────────────────── */

.work-video-meta { margin: 0.25rem 0 0; font-size: 0.75rem; color: var(--muted, #9aa); }
.work-title { margin: 0; font-size: 1.25rem; font-weight: 600; color: var(--text); }
.work-byline { margin: 0.35rem 0 0; font-size: 0.8rem; color: var(--muted, #9aa); display: flex; flex-wrap: wrap; gap: 0.6rem; }
.work-remix { display: inline-block; padding: 0.6rem 1.4rem; border-radius: 999px; background: var(--accent, #6c5ce7); color: #fff; text-decoration: none; font-weight: 600; }
.work-remix-hint { margin: 0.4rem 0 0; font-size: 0.75rem; color: var(--muted, #9aa); }
.work-prompt { margin: 0 0 0.6rem; font-size: 0.85rem; line-height: 1.6; color: var(--text); white-space: pre-wrap; word-break: break-word; }
.work-prompt-label { display: block; font-size: 0.72rem; color: var(--muted, #9aa); margin-bottom: 0.2rem; }
.work-copy { padding: 0.3rem 0.8rem; border-radius: 999px; border: 1px solid var(--border); background: transparent; color: var(--text); font-size: 0.78rem; cursor: pointer; }
.work-params { width: 100%; border-collapse: collapse; font-size: 0.8rem; }
.work-params th, .work-params td { text-align: left; padding: 0.35rem 0.4rem; border-bottom: 1px solid var(--border); color: var(--text); vertical-align: top; word-break: break-word; }
.work-params th { width: 38%; color: var(--muted, #9aa); font-weight: 500; }
.work-edit-field { display: flex; flex-direction: column; gap: 0.3rem; margin-bottom: 0.8rem; }
.work-edit-field label { font-size: 0.8rem; color: var(--muted, #9aa); }
.work-edit-field input[type="text"], .work-edit-field select { padding: 0.45rem 0.6rem; border-radius: 8px; border: 1px solid var(--border); background: var(--content-bg); color: var(--text); }
.work-edit-help { margin: 0; font-size: 0.72rem; color: var(--muted, #9aa); }
/* M7b 标签 chips */
.work-tags { display: flex; flex-wrap: wrap; gap: 0.4rem; margin: 0.5rem 0 0; }
.work-tag-chip { display: inline-block; padding: 0.15rem 0.55rem; border-radius: 999px;
    border: 1px solid var(--border); background: var(--content-bg);
    color: var(--text); font-size: 0.78rem; text-decoration: none; }
.work-tag-chip:hover { border-color: var(--accent, #7c6cf0); }
.work-actions { display: flex; flex-wrap: wrap; gap: 0.6rem; align-items: center; }
.work-danger { padding: 0.45rem 1rem; border-radius: 999px; border: 1px solid #c0392b; background: transparent; color: #e74c3c; font-size: 0.82rem; cursor: pointer; }
.work-error { margin: 0 0 0.6rem; font-size: 0.8rem; color: #e74c3c; }
.work-notice { margin: 0 0 0.6rem; font-size: 0.8rem; color: var(--muted, #9aa); }

/* M7 互动条与评论区。 */
.work-interact { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; }
.work-interact-btn { display: inline-flex; align-items: center; gap: 0.3rem; padding: 0.45rem 0.9rem; border-radius: 999px; border: 1px solid var(--border); background: transparent; color: var(--text); font-size: 0.82rem; cursor: pointer; text-decoration: none; }
.work-interact-btn.is-active { border-color: var(--accent, #6c5ce7); color: var(--accent, #6c5ce7); }
.work-interact-stat { font-size: 0.78rem; color: var(--muted, #9aa); }
.work-tip-panel { margin-top: 0.7rem; border: 1px solid var(--border); border-radius: 10px; padding: 0.8rem; background: var(--content-bg); }
.work-tip-panel[hidden] { display: none; }
.work-tip-panel h3 { margin: 0 0 0.4rem; font-size: 0.9rem; font-weight: 600; color: var(--text); }
.work-tip-presets { display: flex; flex-wrap: wrap; gap: 0.4rem; margin: 0.5rem 0; }
.work-tip-preset { padding: 0.35rem 0.8rem; border-radius: 999px; border: 1px solid var(--border); background: transparent; color: var(--text); font-size: 0.8rem; cursor: pointer; }
.work-tip-amount { width: 8rem; padding: 0.45rem 0.6rem; border-radius: 8px; border: 1px solid var(--border); background: var(--content-bg); color: var(--text); }
/* ── 评论区 ────────────────────────────────────────────
 *
 * 🔴 一条评论是「头像一列 + 内容一列」的网格。名字、正文、动作三行的左边缘
 * 因此天然对齐 —— 这是评论区好不好看的决定性因素。旧版把头像塞在第一行文字
 * 里，于是正文从头像左边开始、名字从头像右边开始，每一条都错开一截。
 */

/* 输入框：这一条被 TextareaAccessibleNameTest 逐字钉住，**不要改**。 */
.work-comment-form label { display: block; margin-bottom: 0.3rem; font-size: 0.8rem; color: var(--text-muted); }

/* 🔴 收起态只有两行高，聚焦或已经写了字才长开。
   空输入框霸占右栏五行高度，而它下面才是真正要读的评论。
   :not(:placeholder-shown) 让"写了一半切走"的状态也保持展开。 */
.work-comment-form textarea {
    width: 100%;
    min-height: 2.5rem;
    padding: 0.5rem 0.65rem;
    border-radius: 10px;
    border: 1px solid var(--border);
    background: color-mix(in srgb, var(--content-bg) 60%, #000);
    color: var(--text);
    font: inherit;
    font-size: 0.85rem;
    line-height: 1.55;
    resize: vertical;
    transition: border-color 0.15s ease, min-height 0.16s ease;
}

.work-comment-form textarea:focus,
.work-comment-form textarea:not(:placeholder-shown) { min-height: 5rem; }

.work-comment-form textarea:focus {
    outline: none;
    border-color: var(--accent, #6c5ce7);
}

/* 动作靠右收成一小条：按钮小、字数提示更小更淡。
   截图里那颗紫色大按钮比它下面的所有评论加起来还抢眼 —— 发表是低频动作，
   不该是这一块的视觉中心。 */
.work-comment-form-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    align-items: center;
    justify-content: flex-end;
    margin-top: 0.45rem;
}

.work-comment-form-actions .work-edit-help { font-size: 0.7rem; opacity: 0.65; }

/* 发表按钮：跟工具条上那些按钮同一个尺寸语言。 */
.work-comment-form-actions .work-remix {
    padding: 0.34rem 0.9rem;
    border-radius: 8px;
    font-size: 0.8rem;
    font-weight: 500;
}

/* 线索之间靠留白分隔，不靠横线 —— 一屏十几条评论时，十几条横线本身就是噪音。 */
.work-comment-thread { margin-top: 1.05rem; }
.work-comment-thread:first-child { margin-top: 0.2rem; }

.work-comment {
    display: grid;
    grid-template-columns: 28px minmax(0, 1fr);
    gap: 0.55rem;
    align-items: start;
}

/* 🔴 固定宽高 + flex:none：作者已注销时里面是空的，不给尺寸就会塌成零宽，
   那一条评论的正文会比别的往左顶出去一截。 */
.work-comment-avatar {
    width: 28px;
    height: 28px;
    flex: none;
    border-radius: 50%;
    overflow: hidden;
    background: color-mix(in srgb, var(--border) 60%, transparent);
}

.work-comment-avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }

.work-comment-main { min-width: 0; }

.work-comment-meta {
    margin: 0 0 0.15rem;
    font-size: 0.74rem;
    color: var(--muted, #9aa);
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.4rem;
    /* 头像是 28px，让名字那一行在它的垂直中线上。 */
    min-height: 28px;
}

/* 名字**不带下划线** —— 一行里同时有下划线的名字、方框的等级、红色的删除，
   三种强调抢在一起，正文反而最不显眼。默认干净，悬停才给反馈。 */
.work-comment-author {
    color: var(--text);
    font-weight: 600;
    font-size: 0.8rem;
    text-decoration: none;
}

.work-comment-author:hover { color: var(--accent, #6c5ce7); text-decoration: underline; }

/* 等级徽章在评论里减重：去掉边框，换成一块很淡的底。它是补充信息，
   不该跟名字争。（只在评论内覆盖，别处的 .user-level 一个字不动。） */
.work-comment .user-level {
    border: 0;
    padding: 0.05rem 0.3rem;
    border-radius: 4px;
    background: color-mix(in srgb, var(--border) 55%, transparent);
    font-size: 0.64rem;
    opacity: 0.8;
}

/* 时间推到最右：它是这一行里最不重要的信息，靠左会挤在名字旁边抢注意力。 */
.work-comment-time { margin-left: auto; white-space: nowrap; }

.work-comment-body {
    margin: 0;
    font-size: 0.85rem;
    line-height: 1.65;
    color: var(--text);
    white-space: pre-wrap;
    word-break: break-word;
}

/* 动作默认压得很淡，鼠标移到这条评论上才亮起来 —— 一屏十几条「回复 举报」
   全亮着的话，真正的内容（正文）反而看不见了。 */
.work-comment-actions { margin: 0.3rem 0 0; display: flex; flex-wrap: wrap; gap: 0.9rem; }

.work-comment-link {
    border: none;
    background: transparent;
    padding: 0;
    color: var(--muted, #9aa);
    font-size: 0.74rem;
    cursor: pointer;
    opacity: 0.55;
    transition: opacity 0.15s ease, color 0.15s ease;
}

.work-comment:hover .work-comment-link,
.work-comment-link:focus-visible { opacity: 1; }
.work-comment-link:hover { color: var(--text); }
/* 🔴 删除**默认不是红的**。一屏五条评论就有五个红字，红色是留给
   "你正要做一件不可逆的事"那一刻的，不是留给一个还没点的按钮。
   悬停才变红 —— 手已经指过去了，那时候警示才有意义。 */
.work-comment-link--danger { color: var(--muted, #9aa); }
.work-comment-link--danger:hover { color: #e74c3c; }

/* 触屏没有 hover，动作一律常亮，否则永远点不到。 */
@media (hover: none) {
    .work-comment-link { opacity: 1; }
}

/* 回复：更小的头像 + 一条细竖线，缩进量刚好对齐父评论的正文左缘。 */
.work-comment-replies:not(:empty) { margin-top: 0.6rem; }

.work-comment--reply {
    margin-left: calc(28px + 0.55rem);
    padding-left: 0.7rem;
    border-left: 2px solid var(--border);
    grid-template-columns: 22px minmax(0, 1fr);
}

.work-comment--reply .work-comment-avatar { width: 22px; height: 22px; }
.work-comment--reply .work-comment-meta { min-height: 22px; }
.work-comment--reply + .work-comment--reply { margin-top: 0.7rem; }

/* 「查看全部 N 条回复」：跟回复对齐，做成一条低调的行内链接。 */
.work-comment-actions--replies {
    margin: 0.45rem 0 0;
    margin-left: calc(28px + 0.55rem);
    padding-left: 0.7rem;
    border-left: 2px solid var(--border);
}

.work-comment-actions--replies .work-comment-link {
    opacity: 1;
    color: var(--accent, #6c5ce7);
    font-size: 0.74rem;
}

.work-comment-actions--replies .work-comment-link:hover { text-decoration: underline; }

/* M7c 等级徽章。只出现在作品页作者行与评论作者行两处，只给荣誉。 */
/* M1b：作者行的"头像 + 昵称链接"内联块。 */
.author-inline { display: inline-flex; align-items: center; gap: 0.3rem; vertical-align: middle; }
.author-inline a { color: inherit; text-decoration: none; }
.author-inline a:hover { color: var(--accent); text-decoration: underline; }
.user-level { display: inline-block; margin-left: 0.3rem; padding: 0 0.35rem; border-radius: 4px;
    border: 1px solid var(--border); font-size: 0.68rem; line-height: 1.5; color: var(--muted, #9aa); }