/* ============================================================
   作品详情页：点赞按钮（2026-10-19，2026-10-19 二次改造：迁入左侧悬浮栏）
   ------------------------------------------------------------
   位置由 work_rail.css 负责（.wp-rail-like 是它的容器），本文件只管：
   胶囊外形、心形图标两态、心跳动画、请求中/焦点/减少动效。
   颜色全部走 CSS 变量 + 兜底值：脱离悬浮栏单独用时仍是原来的浅色胶囊，
   进了悬浮栏就跟随 --rail-fg 自动翻面（深色玻璃上变白字）。
   ============================================================ */

.work-like-form {
    display: block;
    margin: 0;
}

.work-like-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;                               /* 占满浮栏一栏宽：图标+数字居中 */
    height: 44px;
    padding: 0 14px;
    border: none;
    border-radius: 12px;                       /* 与浮栏内部圆角语言一致 */
    /* 底：半透明白色 chip。这里刻意不用 backdrop-filter——
       按钮已经嵌在毛玻璃面板里，子元素的 backdrop-filter 只能采到
       "最近滤镜祖先之后绘制的内容"，嵌套玻璃既不可靠又白烧 GPU。
       深色主题的底色由 work_rail.css 的 .is-dark 覆盖 */
    background: rgba(255, 255, 255, 0.55);
    box-shadow:
        inset 0 0 0 0.5px var(--rail-line, rgba(0, 0, 0, 0.08)),
        0 1px 4px rgba(0, 0, 0, 0.04);
    color: var(--rail-fg, #1d1d1f);
    font-size: 14px;
    font-weight: 600;
    line-height: 1;
    /* 数字等宽：点赞数从 9→10、99→100 时按钮宽度不变，不产生抖动 */
    font-variant-numeric: tabular-nums;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    transition:
        background 0.24s cubic-bezier(0.28, 0.11, 0.32, 1),
        color 0.24s cubic-bezier(0.28, 0.11, 0.32, 1),
        box-shadow 0.2s cubic-bezier(0, 0, 0.5, 1),
        transform 0.2s cubic-bezier(0, 0, 0.5, 1);
}

.work-like-btn:hover {
    background: rgba(255, 255, 255, 0.72);
    box-shadow:
        inset 0 0 0 0.5px var(--rail-line, rgba(0, 0, 0, 0.12)),
        0 2px 10px rgba(0, 0, 0, 0.08);
}

.work-like-btn:active {
    transform: scale(0.98);
}

/* 键盘可达性：不能只靠 hover 给反馈 */
.work-like-btn:focus-visible {
    outline: 2px solid var(--rail-accent, #0071e3);
    outline-offset: 2px;
}

/* 心形图标：默认描边空心，已赞填实（同一几何，两态只换 fill） */
.work-like-icon {
    width: 18px;
    height: 18px;
    flex: none;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linejoin: round;
    transition: fill 0.2s ease, transform 0.2s cubic-bezier(0, 0, 0.5, 1);
}

/* 已赞态：红色实心 —— 与全站红（涨/强调）同一色系，不用品牌蓝避免与链接混淆 */
.work-like-btn.is-liked {
    color: #e0245e;
}

.work-like-btn.is-liked .work-like-icon {
    fill: currentColor;
}

/* 点赞瞬间的心跳：只动图标，不动按钮尺寸（否则整条栏会跟着跳） */
.work-like-btn.is-popping .work-like-icon {
    animation: like-pop 0.32s cubic-bezier(0.2, 0.9, 0.3, 1.4);
}

@keyframes like-pop {
    0%   { transform: scale(1); }
    40%  { transform: scale(1.28); }
    100% { transform: scale(1); }
}

/* 请求在途：降透明度提示"正在处理"，不加 loading 转圈（一次请求很短，
   转圈反而显得慢）。只降透明度和鼠标指针，不改宽高 → 不会引起回流 */
.work-like-btn:disabled {
    opacity: 0.6;
    cursor: default;
    transform: none;
}

/* ---------- 手机端：栏内按钮高度略降（浮栏本身更窄） ---------- */
@media (max-width: 768px) {
    .work-like-btn {
        height: 42px;                          /* 仍高于 40px 可点下限的观感阈值 */
        font-size: 13.5px;
    }
    .work-like-icon {
        width: 17px;
        height: 17px;
    }
}

/* ---------- 减少动效偏好 ---------- */
/* 系统开启"减少动态效果"时，去掉缩放与心跳，保留颜色变化（状态仍然可辨） */
@media (prefers-reduced-motion: reduce) {
    .work-like-btn,
    .work-like-icon {
        transition: color 0.2s ease, background 0.2s ease;
    }

    .work-like-btn:hover,
    .work-like-btn:active {
        transform: none;
    }

    .work-like-btn.is-popping .work-like-icon {
        animation: none;
    }
}