/* ================= 朋友圈：信息流（X/Twitter 风格卡片） ================= */
/* 复用 style.css 的 .settings-* / .app-shell / --bg-*/--text-*/--line 这几个
   全局变量（body.dark-mode 会整体重定义它们，见 style.css 的"深色模式"一段——
   这里全程用变量而不是写死颜色，是为了以后深色模式打通到这个页面时不用
   改这个文件），theme-center.css 的 .tc-* 进场动画/提示文字/按钮，
   my-themes.css 的 .mt-overlay / .mt-alert 弹层、.mt-empty 空状态。这里只补
   .mo-* 这几个朋友圈页面自己特有的东西：中性卡片、头像/昵称行、底部图标行、
   行内评论区。*/

/* ---------- 页面背景：改成纯白 ----------
   style.css 的 body 渐变、.app-shell、.settings-content 用的都是全站统一的
   暖粉配色（--bg-0/1/2），这里只在朋友圈页面（[data-moments]/.mo-content）
   覆盖成纯白，不动其它页面共用的那套配色变量。 */
body:has([data-moments]){
    background:#fff;
}

.app-shell[data-moments]{
    background:#fff;
}

.mo-content{
    background:#fff;
}

.mo-feed{
    display:flex;
    flex-direction:column;
}

/* 推特风格：卡片之间不留间距、不各自成框，靠一条底部分隔线区分每条动态，
   不再是圆角+阴影的"一框一框"独立卡片。 */
.mo-card{
    position:relative;
    padding:14px 0;
    background:transparent;
    border-bottom:1px solid var(--line);
}

.mo-card:last-child{
    border-bottom:none;
}

.mo-card-delete{
    position:absolute;
    top:10px;
    right:10px;
    width:20px;
    height:20px;
    border:none;
    border-radius:50%;
    background:rgba(0,0,0,.08);
    color:var(--text-1);
    font-size:10px;
    line-height:1;
    display:flex;
    align-items:center;
    justify-content:center;
    cursor:pointer;
    opacity:.6;
    z-index:1;
}

.mo-card-delete:active{
    opacity:1;
}

/* ---------- 头部：头像 + 昵称 + @handle ---------- */

.mo-card-head{
    display:flex;
    align-items:center;
    gap:10px;
    margin-bottom:8px;
    padding-right:20px; /* 给右上角的删除按钮留空间 */
}

.mo-avatar{
    flex-shrink:0;
    width:40px;
    height:40px;
    border-radius:50%;
    background-color:var(--bg-2, #f0ece7);
    background-size:cover;
    background-position:center;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:16px;
    font-weight:700;
    color:var(--text-2);
}

.mo-avatar.has-photo{
    color:transparent; /* 有图片时占位字母不需要再显示 */
}

.mo-card-name-line{
    display:flex;
    align-items:baseline;
    gap:6px;
    flex-wrap:wrap;
}

.mo-card-name{
    font-size:15px;
    font-weight:700;
    color:var(--text-1);
}

/* ---------- 正文 ---------- */

.mo-card-text{
    font-size:15px;
    line-height:1.6;
    color:var(--text-1);
    white-space:pre-wrap;
    word-break:break-word;
    margin-bottom:8px;
}

/* ---------- 时间 + 心情圆点（不再是大色块背景，弱化成一个小标记） ---------- */

.mo-card-meta{
    display:flex;
    align-items:center;
    gap:6px;
    font-size:12px;
    color:var(--text-2);
    opacity:.85;
    margin-bottom:10px;
}

.mo-mood-dot{
    width:7px;
    height:7px;
    border-radius:50%;
    flex-shrink:0;
}

.mo-mood-pink{ background:#e2547a; }
.mo-mood-blue{ background:#4f9dc4; }
.mo-mood-yellow{ background:#d9a63e; }
.mo-mood-white{ background:#c9c2b8; }
.mo-mood-gray{ background:#8a8a86; }

/* ---------- 底部四图标：评论 / 转发（装饰） / 喜欢 / 分享（装饰） ---------- */

.mo-card-actions{
    display:flex;
    align-items:center;
    justify-content:space-between;
    max-width:320px;
    padding-top:8px;
    border-top:1px solid var(--line);
}

.mo-action-btn{
    display:flex;
    align-items:center;
    gap:6px;
    border:none;
    background:none;
    padding:4px 2px;
    color:var(--text-2);
    cursor:pointer;
}

.mo-action-icon{
    width:18px;
    height:18px;
    display:flex;
}

.mo-action-icon svg{
    width:100%;
    height:100%;
}

.mo-action-count{
    font-size:12.5px;
}

/* 转发/分享：目前没有对应的后端功能，纯装饰——比评论/喜欢更淡一档，
   点击有响应（toast 提示"开发中"）但视觉上明确区分于两个真实功能，
   避免用户误以为四个图标都能用。 */
.mo-action-btn-disabled{
    opacity:.45;
}

.mo-like-btn.is-liked{
    color:#e2547a;
}

/* ---------- 已有评论：行内平铺，不是独立详情页 ---------- */

.mo-comment-list{
    margin-top:2px;
    padding:8px 10px;
    border-radius:var(--radius-sm, 8px);
    background:var(--bg-2, rgba(0,0,0,.04));
    display:flex;
    flex-direction:column;
    gap:4px;
}

.mo-comment-item{
    font-size:13px;
    line-height:1.6;
    word-break:break-word;
}

.mo-comment-author{
    font-weight:700;
    color:var(--text-1);
}

.mo-comment-item-character .mo-comment-author{
    color:#c77a3c;
}

.mo-comment-text{
    color:var(--text-1);
    opacity:.9;
}

/* ---------- 评论输入框 ---------- */

.mo-comment-form{
    margin-top:10px;
    display:flex;
    flex-direction:column;
    gap:8px;
}

.mo-comment-input{
    width:100%;
    min-height:56px;
    resize:vertical;
    border-radius:var(--radius-sm, 8px);
    border:1px solid var(--line);
    padding:8px 10px;
    font-size:13.5px;
    line-height:1.6;
    color:var(--text-1);
    background:var(--bg-0, #fff);
    font-family:inherit;
}

.mo-comment-submit{
    align-self:flex-end;
}

.mo-comment-status{
    margin:0;
}

/* ---------- Toast ---------- */
/* moments.js 的 showToast() 用的是 .oft-toast 这个类名（跟 diary.js 同款
   写法），但 moments.html/diary.html 加载的公共样式表（style.css/
   theme-center.css/my-themes.css）都没有定义它——只有 memory.css/
   official-themes.css 这两个页面自己的样式表定义过，diary/moments 页面
   实际上一直是没样式的隐形 toast，这里补上（跟 memory.css 的定义保持
   一致，不是发明一套新样式）。 */

.oft-toast{
    position:fixed;
    left:50%;
    bottom:36px;
    transform:translate(-50%,12px);
    background:rgba(28,28,30,.92);
    color:#fff;
    font-size:13px;
    padding:10px 18px;
    border-radius:var(--radius-pill);
    opacity:0;
    pointer-events:none;
    transition:opacity .2s ease,transform .2s ease;
    z-index:70;
    max-width:86%;
    text-align:center;
}

.oft-toast.is-visible{
    opacity:1;
    transform:translate(-50%,0);
}

/* ---------- 发布新动态悬浮按钮 ----------
   跟 memory.css 的 .mem-fab 同一套视觉规范（右下角固定圆形按钮），朋友圈
   页面自己维护一份，不共享模块——这几个"中心"页面一贯的做法。 */

.mo-fab{
    position:fixed;
    right:20px;
    bottom:calc(24px + env(safe-area-inset-bottom, 0px));
    width:52px;
    height:52px;
    border:none;
    border-radius:50%;
    background:var(--accent);
    color:#fff;
    font-size:26px;
    line-height:1;
    display:flex;
    align-items:center;
    justify-content:center;
    box-shadow:var(--shadow-lift);
    cursor:pointer;
    z-index:40;
    transition:transform .2s var(--spring);
}

.mo-fab:active{
    transform:scale(.92);
}