/* 朋友圈 v2（仿微信：封面 + 头像昵称 + 动态流） */
.moments-panel { align-items: center; justify-content: center; }
.mv2-screen {
    width: 100%; max-width: 520px; height: 100%; max-height: 88vh;
    background: #fff; border-radius: 16px; overflow: hidden;
    display: flex; flex-direction: column;
    box-shadow: 0 18px 50px rgba(0, 0, 0, .22);
    animation: mv2In .22s ease;
}
@keyframes mv2In { from { opacity: 0; transform: translateY(14px) scale(.985); } to { opacity: 1; transform: none; } }

.mv2-topbar {
    flex-shrink: 0; display: flex; align-items: center; gap: 8px;
    padding: 10px 10px; background: #fff; border-bottom: 1px solid #f0f2f4;
    position: relative; z-index: 5;
}
.mv2-topbar h3 { flex: 1; text-align: center; font-size: 16.5px; font-weight: 600; color: #191919; }
.mv2-topbar .icon-btn { width: 36px; height: 36px; }

.mv2-scroll {
    flex: 1; overflow-y: auto; -webkit-overflow-scrolling: touch;
    background: #fff; position: relative;
}

/* 封面 */
.mv2-cover {
    position: relative; height: 250px; overflow: visible;
    background: #2b2f36;
}
.mv2-cover > img {
    position: absolute; inset: 0; width: 100%; height: 100%;
    object-fit: cover; display: block;
}
.mv2-cover-deco {
    position: absolute; inset: 0;
    background:
        radial-gradient(circle at 78% 28%, rgba(255, 214, 102, .55) 0, rgba(255, 214, 102, 0) 34%),
        radial-gradient(circle at 22% 72%, rgba(96, 210, 255, .42) 0, rgba(96, 210, 255, 0) 38%),
        radial-gradient(circle at 55% 14%, rgba(255, 120, 120, .35) 0, rgba(255, 120, 120, 0) 30%),
        linear-gradient(140deg, #1f2937 0%, #24425c 45%, #1c6b63 100%);
}
.mv2-cover::after {
    content: ''; position: absolute; inset: 0; pointer-events: none;
    background: linear-gradient(180deg, rgba(0,0,0,.16) 0%, rgba(0,0,0,0) 32%, rgba(0,0,0,.34) 100%);
}
.mv2-cover-btn {
    position: absolute; right: 16px; bottom: 46px; z-index: 3;
    display: inline-flex; align-items: center; gap: 4px;
    background: rgba(0, 0, 0, .42); color: #fff; border: none;
    font-size: 12px; padding: 6px 11px; border-radius: 20px;
    cursor: pointer; backdrop-filter: blur(6px);
}
.mv2-cover-btn:active { background: rgba(0, 0, 0, .6); }
.mv2-cover-btn i { font-size: 14px; }

.mv2-owner {
    position: absolute; left: 16px; right: 16px; bottom: -26px; z-index: 4;
    display: flex; align-items: flex-end; justify-content: flex-end; gap: 10px;
    pointer-events: none;
}
.mv2-owner-info { text-align: right; padding-bottom: 32px; min-width: 0; }
.mv2-owner-name {
    font-size: 16px; font-weight: 600; color: #fff; line-height: 1.2;
    text-shadow: 0 1px 6px rgba(0, 0, 0, .55);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.mv2-owner-sign {
    font-size: 11.5px; color: rgba(255, 255, 255, .82); margin-top: 4px;
    text-shadow: 0 1px 5px rgba(0, 0, 0, .5);
    max-width: 200px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.mv2-owner-avatar {
    width: 68px; height: 68px; border-radius: 10px; overflow: hidden;
    flex-shrink: 0; border: 3px solid #fff; background: #eef1f4;
    box-shadow: 0 3px 10px rgba(0, 0, 0, .18);
}
.mv2-owner-avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* 动态列表 */
.mv2-list { padding-top: 44px; background: #fff; }
.mv2-item {
    display: flex; gap: 11px; padding: 16px 16px 18px;
    border-bottom: 1px solid #f1f3f5;
}
.mv2-avatar {
    width: 44px; height: 44px; border-radius: 6px; object-fit: cover;
    flex-shrink: 0; background: #eef1f4;
}
.mv2-body { flex: 1; min-width: 0; }
.mv2-name { font-size: 15px; font-weight: 600; color: #576b95; line-height: 1.35; }
.mv2-text {
    font-size: 15px; line-height: 1.55; color: #191919; margin-top: 5px;
    white-space: pre-wrap; word-break: break-word;
}
.mv2-imgs { display: grid; gap: 4px; margin-top: 9px; }
.mv2-imgs.n1 { grid-template-columns: 1fr; max-width: 210px; }
.mv2-imgs.n2 { grid-template-columns: 1fr 1fr; max-width: 230px; }
.mv2-imgs.n3 { grid-template-columns: repeat(3, 1fr); max-width: 270px; }
.mv2-imgs.n4 { grid-template-columns: 1fr 1fr; max-width: 230px; }
.mv2-imgs img {
    width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 4px;
    cursor: pointer; background: #f2f4f6;
}
.mv2-imgs.n1 img { aspect-ratio: 4 / 3; }
.mv2-loc {
    display: inline-flex; align-items: center; gap: 3px;
    font-size: 12px; color: #576b95; margin-top: 8px;
}
.mv2-foot {
    display: flex; align-items: center; justify-content: space-between;
    margin-top: 9px; min-height: 22px;
}
.mv2-time { font-size: 12px; color: #b2b8bf; }
.mv2-foot-right { display: flex; align-items: center; gap: 8px; }
.mv2-del {
    background: none; border: none; color: #c2c9d0; font-size: 14px;
    padding: 2px; cursor: pointer;
}
.mv2-more {
    display: inline-flex; align-items: center; justify-content: center; gap: 1px;
    width: 30px; height: 19px; border-radius: 5px; border: none;
    background: #f2f4f6; color: #576b95; cursor: pointer; padding: 0;
}
.mv2-more i { font-size: 10px; line-height: 1; }

/* 点赞 / 评论 */
.mv2-interact {
    margin-top: 8px; background: #f7f8fa; border-radius: 6px;
    padding: 8px 10px; position: relative;
}
.mv2-interact::before {
    content: ''; position: absolute; top: -5px; left: 14px;
    width: 9px; height: 9px; background: #f7f8fa; transform: rotate(45deg);
}
.mv2-likes {
    display: flex; align-items: flex-start; gap: 4px; flex-wrap: wrap;
    font-size: 13.5px; color: #576b95; line-height: 1.6;
}
.mv2-likes i { color: #f05252; font-size: 13px; margin-top: 3px; }
.mv2-like-name { font-weight: 500; }
.mv2-comments { margin-top: 3px; }
.mv2-comment { font-size: 13.5px; line-height: 1.65; color: #191919; word-break: break-word; }
.mv2-c-author { color: #576b95; font-weight: 500; }
.mv2-c-reply { color: #576b95; }

/* 弹出操作菜单 */
.mv2-menu {
    position: fixed; z-index: 3000; display: flex; align-items: stretch;
    background: #4c4c4c; border-radius: 8px; overflow: hidden;
    box-shadow: 0 8px 24px rgba(0, 0, 0, .28);
    animation: mv2Menu .14s ease;
}
@keyframes mv2Menu { from { opacity: 0; transform: scale(.94); } to { opacity: 1; transform: none; } }
.mv2-menu button {
    display: inline-flex; align-items: center; gap: 4px;
    background: transparent; border: none; color: #fff;
    font-size: 13px; padding: 9px 14px; cursor: pointer;
    border-right: 1px solid rgba(255, 255, 255, .14);
    white-space: nowrap;
}
.mv2-menu button:last-child { border-right: none; }
.mv2-menu button i { font-size: 14px; }
.mv2-menu button.danger { color: #ffb3b3; }
.mv2-menu button:active { background: rgba(255, 255, 255, .1); }

/* 空状态 / 加载 */
.mv2-empty {
    text-align: center; padding: 70px 24px 60px; color: #b6bfc7;
}
.mv2-empty i { font-size: 46px; color: #dfe4e9; display: block; margin-bottom: 12px; }
.mv2-empty p { font-size: 14px; color: #98a2ab; }
.mv2-empty span { display: block; font-size: 11.5px; color: #c2c9d0; margin-top: 6px; }
.mv2-loading {
    display: flex; align-items: center; justify-content: center; gap: 8px;
    padding: 22px 0 26px; font-size: 12.5px; color: #b0b8c0;
}
.mv2-loading span {
    width: 14px; height: 14px; border: 2px solid #e3e8ed; border-top-color: #07C160;
    border-radius: 50%; animation: mv2Spin .7s linear infinite; display: inline-block;
}
@keyframes mv2Spin { to { transform: rotate(360deg); } }
.mv2-end { text-align: center; font-size: 11.5px; color: #c2c9d0; padding: 18px 0 26px; }

@media (max-width: 768px) {
    .moments-panel { align-items: stretch; justify-content: flex-start; }
    .mv2-screen {
        max-width: none; height: 100%; max-height: none; border-radius: 0;
        animation: none;
    }
    .mv2-topbar { padding-top: calc(env(safe-area-inset-top, 0px) + 8px); }
    .mv2-cover { height: 240px; }
    .mv2-list { padding-top: 40px; padding-bottom: calc(env(safe-area-inset-bottom, 0px) + 10px); }
}

/* ===== 发布面板：上传/发布进度 ===== */
.moment-progress {
    margin: 10px 0 4px;
    padding: 10px 12px;
    background: #f6f7f9;
    border-radius: 10px;
}
.moment-progress .mp-track {
    position: relative;
    height: 4px;
    border-radius: 4px;
    background: rgba(0, 0, 0, .08);
    overflow: hidden;
}
.moment-progress .mp-track > i {
    display: block;
    width: 0;
    height: 100%;
    border-radius: 4px;
    background: linear-gradient(90deg, #07C160, #37d67a);
    transition: width .2s linear;
}
.moment-progress .mp-text {
    display: block;
    margin-top: 6px;
    font-size: 12px;
    color: #8a9199;
    line-height: 1.3;
}