/* ============================================================================
 *  「正在装机中」徽标 + 「配置有更新」提示条(2026-10-29)
 *  详情页(q/view.html)和列表页(q/list.html)共用这一份样式。
 * ========================================================================== */

/* ---- 「正在写配置」徽标(2026-10-29 用户从 5 版方案里选了 B)----
 * 像微信「对方正在输入」那样:紫色文字 + 跳动三点 + 闪烁光标。
 * 没有底色、没有边框 —— 靠动画说话,不靠色块;
 * 列表页十张卡并排时也不会闹。 */
.zjt-live {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    font-weight: 600;
    color: #6c5ce7;
    white-space: nowrap;
    vertical-align: middle;
    line-height: 1;
}
.zjt-live .d {
    display: inline-flex;
    gap: 3px;
    align-items: flex-end;
    height: 12px;
}
.zjt-live .d i {
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: #6c5ce7;
    flex: none;
    animation: zjtLiveJump 1.1s ease-in-out infinite;
}
.zjt-live .d i:nth-child(2) { animation-delay: .16s; }
.zjt-live .d i:nth-child(3) { animation-delay: .32s; }
.zjt-live .c {
    width: 2px;
    height: 13px;
    background: #6c5ce7;
    flex: none;
    animation: zjtLiveBlink .9s steps(1) infinite;
}
@keyframes zjtLiveJump {
    0%, 60%, 100% { transform: translateY(0);    opacity: .45; }
    30%           { transform: translateY(-5px); opacity: 1; }
}
@keyframes zjtLiveBlink { 50% { opacity: 0; } }
/* 详情页徽标稍大一点(那儿信息密度低) */
.tang_post_user_details .zjt-live { font-size: 13.5px; }

/* ---- 「配置有更新」提示条 ----
 * 右下角浮一条,带「刷新看看」按钮。
 * ⚠ 不用 layui 的 layer 弹窗:列表页可能有十张卡,弹窗会挡住内容还只能一个个点。 */
.zjt-toast {
    position: fixed;
    right: 18px;
    bottom: 22px;
    z-index: 99999;
    max-width: 330px;
    background: #fff;
    border: 1px solid #e6ebf5;
    border-left: 3px solid #6c5ce7;
    border-radius: 12px;
    box-shadow: 0 10px 34px rgba(15, 30, 47, .16);
    padding: 13px 15px;
    display: none;
    align-items: center;
    gap: 12px;
    font-size: 13.5px;
    color: #2d3e50;
}
.zjt-toast.show { display: flex; }
.zjt-toast .txt { flex: 1; min-width: 0; line-height: 1.5; }
.zjt-toast .txt b { color: #0f1e2f; }
.zjt-toast button {
    flex: none;
    border: 0;
    background: #6c5ce7;
    color: #fff;
    font-size: 12.5px;
    font-weight: 600;
    padding: 7px 14px;
    border-radius: 8px;
    cursor: pointer;
    white-space: nowrap;
}
.zjt-toast button:hover { background: #5b4bc4; }
.zjt-toast button.ghost {
    background: #f1f4fa;
    color: #7b879b;
}
.zjt-toast button.ghost:hover { background: #e6ebf5; }

@media (max-width: 640px) {
    .zjt-toast {
        right: 12px;
        left: 12px;
        bottom: 74px;          /* 让开手机底部导航 */
        max-width: none;
    }
}