/* ================= 朋友圈：仿 X（Twitter）视觉风格 =================
   这份文件只管本页面自己的 .mo-* 组件和几个"借用了共享组件、但只在本页
   出现"的选择器（.chat-tabs-bottom、.mt-modal/.mt-alert 等）。因为
   <link> 只在 moments.html 里加载这份 CSS，所以哪怕这里写的是没有
   [data-moments] 前缀的裸选择器，也不会泄漏影响到 chat.html/
   chat-entry.html 等其它同样用到这些共享类名的页面——不需要额外加
   属性选择器限定范围。

   跟 style.css 全站统一的暖粉配色（--bg-*、--text-*、--line、--accent）
   完全独立：朋友圈从很早就是"特殊页"，固定用自己的一套中性黑白灰
   （原来是写死的纯白 body:has([data-moments])），这次把它升级成
   真正的深浅色双主题，但触发方式沿用"这个页面自成一派"的老规矩——
   用 prefers-color-scheme 跟随系统外观，不接全站 settings.js 那个
   手动深色开关（body.dark-mode，见 style.css 底部）。两套开关分别
   管两件事，互不影响：如果以后想让这个页面也听手动开关的，需要另外
   接 body.dark-mode 选择器，这里没有做。
   ================================================================= */

:root{
    /* ---------- 主背景 / 主文字 ---------- */
    --mo-bg:#ffffff;
    --mo-text:#1a1a1a;

    /* ---------- 次要文字：@ID、时间戳、关注数一类的弱化信息 ---------- */
    --mo-text-secondary:#8a8a8a;

    /* ---------- 帖子分隔线 ---------- */
    --mo-border:rgba(0,0,0,.12);

    /* ---------- 弱化背景色块：删除按钮底、行内评论区背景这类"贴着文字
         色调走"的浅色蒙层，不用固定死的黑/白，深色模式下自动换成对应的
         浅蒙层，不会出现"黑字配黑蒙层"看不清的情况 ---------- */
    --mo-scrim:rgba(0,0,0,.08);

    /* ---------- 头像占位底色（没有头像图时的圆形背景） ---------- */
    --mo-avatar-bg:#e1e8ed;

    /* ---------- 圆角 ---------- */
    --mo-radius-media:12px;   /* 图片/媒体卡片——当前信息流没有媒体卡片，先备着 */
    --mo-radius-sheet:24px;   /* 弹出面板（发布/删除确认） */

    /* ---------- 字号 ---------- */
    --mo-font-title:20px;   /* 个人主页头部显示名 */
    --mo-font-body:15px;    /* 帖子正文 */
    --mo-font-meta:14px;    /* 帖子内用户名 / @ID / 关注数 / 时间戳 */

    /* ---------- 个人主页头部（moments.html 里 .mo-profile-* 那块静态
       结构，见该文件顶部注释）。

       头像不走这里的变量：主页头像要求跟信息流里"我"这条动态左边的
       头像保持同一个来源（服务端固定路径 /moments/profile-image/avatar，
       见 app.py 的 MOMENTS_PROFILE_IMAGE_DIR），moments.js 在加载时和上传
       成功后都会用同一个 URL 常量给两处渲染——两处读的是同一张服务端图，
       点头像上传换一次，信息流卡片会跟着一起变，不需要再有一个单独的
       --mo-profile-avatar-image 变量。

       banner 图固定读 /moments/profile-image/banner 这个地址（点击 banner
       区域弹出的文件选择上传后，服务端会覆盖保存成这张图，见 app.py），
       不用碰这里的变量或 .mo-profile-banner 的 CSS 规则。没传过图之前
       这个地址返回 404，.mo-profile-banner 的 background-image 写了两层：
       第一层是这个变量，第二层硬编码一个跟全站暖色调（--accent 那个粉）
       呼应的渐变——第一层加载失败不会画出东西，渐变从下面透出来做兜底，
       不会是空白；等传了图上去，第一层会完全盖住渐变，直接显示真实图。

       --mo-profile-handle/--mo-profile-stats 是占位值，等真实关注体系
       上线后由用户自己改这两个变量。 ---------- */
    --mo-profile-banner-image:url('/moments/profile-image/banner');
    --mo-profile-name:"栀";
    --mo-profile-handle:"@zhi";
    --mo-profile-stats:"1 Following  1.2M Followers";
}

@media (prefers-color-scheme:dark){
    :root{
        --mo-bg:#191919;
        --mo-text:#ffffff;
        --mo-text-secondary:#71767b;
        --mo-border:rgba(255,255,255,.15);
        --mo-scrim:rgba(255,255,255,.14);
        --mo-avatar-bg:#333639;
    }
}

/* ---------- 页面背景 ---------- */

body:has([data-moments]){
    background:var(--mo-bg);
}

.app-shell[data-moments]{
    background:var(--mo-bg);
}

.mo-content{
    background:var(--mo-bg);
}

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

/* ---------- 滚动容器：头部 + 信息流一起随页面正常滚动 ----------
   .app-shell 本身是 height:100vh + overflow:hidden 的固定高度 flex 列
   （全站布局，见 style.css），这里靠 .mo-scroll 单独接管滚动：它是
   .app-shell 里 flex:1 的那一项，占满头部/底部 tab 栏之间的剩余高度，
   自己 overflow-y:auto——头部（banner+头像+名字）和下面的信息流都在
   它内部正常文档流排列，往上滑的时候头部跟内容一起滚出去，不是常见的
   "sticky 头部+内部单独滚动"那种效果。底部 .chat-tabs-bottom 留在
   .mo-scroll 外面（app-shell 的另一个 flex 子项），滚动时始终贴底不动。 */

.mo-scroll{
    flex:1;
    min-height:0; /* flex 子项默认 min-height:auto 会撑破容器导致滚不动，必须显式清零 */
    overflow-y:auto;
    -webkit-overflow-scrolling:touch;
}

/* #momentsStage 复用了 theme-center.css 的 .tc-stage 类名（flex:1 +
   overflow:hidden，那是给"自己内部再滚动"的场景设计的），朋友圈这里
   滚动已经交给外层 .mo-scroll 了，要覆盖掉这两条，让 stage 按内容
   实际高度正常往下撑，而不是被裁掉或者又开一层独立滚动。 */
.app-shell[data-moments] .tc-stage{
    flex:none;
    overflow:visible;
}

/* ---------- 个人主页头部：banner + 头像 + 名字/@ID/关注数 ----------
   放在 #momentsStage 外面（见 moments.html），不随 renderFeed() 重渲染；
   下面除头像图外，名字/@ID/关注数都是靠 ::before{content:var(...)} 从
   --mo-profile-* 读文字，不写死在 HTML 里。跟 .mo-scroll 一起滚动，
   不再是固定不动的头部。 */

.mo-profile-header{
    background:var(--mo-bg);
    border-bottom:.5px solid var(--mo-border);
    padding-bottom:14px;
}

.mo-profile-banner{
    position:relative; /* 给右下角的相机徽标定位用 */
    height:150px;
    cursor:pointer; /* 点击整块 banner 就能弹文件选择，见 moments.js */
    /* 两层背景：banner.jpg 在上，粉色渐变在下兜底——图片不存在/加载失败时
       这一层什么都不画，下面的渐变会透出来，不会显示空白。 */
    background-image:var(--mo-profile-banner-image), linear-gradient(135deg,#ffd6c2 0%,#ff9eb0 55%,#ff5c82 100%);
    background-size:cover;
    background-position:center;
}

.mo-profile-toprow{
    display:flex;
    align-items:flex-end;
    padding:0 16px;
}

.mo-profile-avatar{
    position:relative; /* 给右下角的相机徽标定位用 */
    width:80px;
    height:80px;
    flex-shrink:0;
    margin-top:-40px; /* 一半高度叠进 banner 下沿，仿朋友圈/X 主页头像的部分重叠 */
    border-radius:50%;
    overflow:hidden; /* 裁掉里面 <img> 超出圆形的部分——光靠 border-radius 只裁自己的背景/边框，不会裁子元素 */
    box-sizing:border-box;
    border:4px solid var(--mo-bg); /* 描边圈用页面背景色，深浅色自动换 */
    cursor:pointer; /* 点击头像就能弹文件选择，见 moments.js */
    background-color:var(--mo-avatar-bg);
    /* 头像图不是 CSS 背景，是 moments.js 用 <img onerror> 探测服务端图
       存不存在，成功就整个替换掉下面这套居中大写首字母兜底样式（跟
       .mo-avatar 信息流卡片头像同一套逻辑，见下面 .mo-avatar img 那条
       规则），加载失败就保留首字母，不需要在这里另外处理"没有图"的情况。 */
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:28px;
    font-weight:700;
    color:var(--mo-text-secondary);
}

.mo-profile-avatar.has-photo{
    color:transparent; /* 有头像图时占位字母不需要再显示，跟 .mo-avatar.has-photo 同一个道理 */
}

/* 头像里的 <img>（moments.js 加载成功后才会插入，见 renderAvatarInto()），
   跟 .mo-avatar img 共用同一套铺满+裁切规则。 */
.mo-profile-avatar img,
.mo-avatar img{
    width:100%;
    height:100%;
    object-fit:cover;
    display:block;
}

/* banner/头像上的相机徽标：纯视觉提示"这里能点"，本身不接收点击（点击
   事件交给外层大区域处理，见 moments.js），pointer-events:none 避免它
   挡住父元素的点击范围判定。配色跟右上角发布按钮（.mo-compose-btn）
   保持同一套毛玻璃 + currentColor 图标的风格。 */
.mo-profile-edit-badge{
    position:absolute;
    right:6px;
    bottom:6px;
    width:26px;
    height:26px;
    border-radius:50%;
    background:color-mix(in srgb, var(--mo-bg) 55%, transparent);
    backdrop-filter:blur(8px);
    -webkit-backdrop-filter:blur(8px);
    color:#fff;
    display:flex;
    align-items:center;
    justify-content:center;
    pointer-events:none;
}

.mo-profile-avatar .mo-profile-edit-badge{
    right:-2px;
    bottom:-2px;
    width:24px;
    height:24px;
    border:2px solid var(--mo-bg);
    color:var(--mo-text);
}

.mo-profile-edit-badge svg{
    width:14px;
    height:14px;
}

/* 隐藏的文件选择 input：本体不需要任何视觉呈现，点击 banner/头像时用
   JS 调用它的 .click()，选完文件后走 change 事件上传，见 moments.js。 */
.mo-profile-file-input{
    display:none;
}

.mo-profile-info{
    padding:10px 16px 0;
    display:flex;
    flex-direction:column;
    gap:3px;
}

.mo-profile-name{
    font-size:var(--mo-font-title);
    font-weight:800;
    color:var(--mo-text);
}

.mo-profile-name::before{
    content:var(--mo-profile-name);
}

.mo-profile-handle{
    font-size:var(--mo-font-meta);
    color:var(--mo-text-secondary);
}

.mo-profile-handle::before{
    content:var(--mo-profile-handle);
}

.mo-profile-stats{
    font-size:var(--mo-font-meta);
    color:var(--mo-text-secondary);
    margin-top:2px;
}

.mo-profile-stats::before{
    content:var(--mo-profile-stats);
}

/* ---------- 帖子卡片：通栏、无圆角，靠 0.5px 分隔线区分每条动态 ---------- */

.mo-card{
    position:relative;
    padding:14px 0;
    background:transparent;
    border-radius:0;
    border-bottom:.5px solid var(--mo-border);
}

.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:var(--mo-scrim);
    color:var(--mo-text);
    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;
}

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

.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%;
    overflow:hidden; /* 裁掉里面 <img> 超出圆形的部分，见 .mo-avatar img 规则 */
    background-color:var(--mo-avatar-bg);
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:16px;
    font-weight:700;
    color:var(--mo-text-secondary);
}

.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:var(--mo-font-meta);
    font-weight:700;
    color:var(--mo-text);
}

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

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

/* ---------- 时间 + 心情圆点 ---------- */
/* 心情圆点颜色跟 diary.css 的 .dy-note-* 保持一致，是独立于本页黑白灰
   主题之外的强调色标记，深浅色模式下都够亮/够暗，不需要跟着换。 */

.mo-card-meta{
    display:flex;
    align-items:center;
    gap:6px;
    font-size:var(--mo-font-meta);
    color:var(--mo-text-secondary);
    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:.5px solid var(--mo-border);
}

.mo-action-btn{
    display:flex;
    align-items:center;
    gap:6px;
    border:none;
    background:none;
    padding:4px 2px;
    color:var(--mo-text-secondary);
    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:8px;
    background:var(--mo-scrim);
    display:flex;
    flex-direction:column;
    gap:4px;
}

.mo-comment-item{
    font-size:var(--mo-font-meta);
    line-height:1.6;
    word-break:break-word;
}

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

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

.mo-comment-text{
    color:var(--mo-text);
    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:8px;
    border:1px solid var(--mo-border);
    padding:8px 10px;
    font-size:13.5px;
    line-height:1.6;
    color:var(--mo-text);
    background:var(--mo-bg);
    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 加载的公共样式表都没有定义它，这里补上。
   固定深色底 + 白字，本身不跟页面背景切换，深浅色模式下都够醒目，
   不需要接 --mo-* 变量。 */

.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);
}

/* ---------- 发布新动态入口：右上角相机图标按钮 ----------
   替换掉原来右下角圆形"+"悬浮按钮。position:fixed 钉在视口右上角，不随
   .mo-scroll 滚动（头部本身会随页面滚出去，这个入口需要一直可点）。
   跟底部 tab 栏一样用毛玻璃底（color-mix 从 --mo-bg 派生半透明），图标
   用 currentColor 描边、颜色接 --mo-text，深色模式下 --mo-text 变白，
   图标跟着自动变白，不需要单独写一套深色配色。 */

.mo-compose-btn{
    position:fixed;
    top:calc(16px + env(safe-area-inset-top, 0px));
    right:16px;
    width:40px;
    height:40px;
    border:none;
    border-radius:50%;
    background:color-mix(in srgb, var(--mo-bg) 72%, transparent);
    backdrop-filter:blur(12px);
    -webkit-backdrop-filter:blur(12px);
    color:var(--mo-text);
    display:flex;
    align-items:center;
    justify-content:center;
    box-shadow:var(--shadow-soft);
    cursor:pointer;
    z-index:40;
    transition:transform .2s var(--spring);
}

.mo-compose-btn svg{
    width:20px;
    height:20px;
}

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

/* ---------- 底部"消息/动态" tab 栏：毛玻璃 ---------- */
/* .chat-tabs-bottom 这个类名跟 chat.html/chat-entry.html 共用同一份视觉
   规范（定义在 chat.css），但那份是全站暖色调、不跟深色模式走。这里
   直接用裸选择器覆盖，因为 moments.css 只在朋友圈页面加载，不会影响
   到共用这个类名的其它页面。背景色用 color-mix 从 --mo-bg 派生半透明
   蒙层，深浅色自动各自换算，不用另外写一套深色专用的 rgba 数值。 */

.chat-tabs-bottom{
    background:color-mix(in srgb, var(--mo-bg) 72%, transparent);
    backdrop-filter:blur(12px);
    -webkit-backdrop-filter:blur(12px);
    border-top:.5px solid var(--mo-border);
}

.chat-tab-btn:not(.is-active){
    color:var(--mo-text-secondary);
}

/* ---------- 发布/删除确认弹出面板：只改圆角 ---------- */
/* .mt-modal/.mt-alert 定义在 my-themes.css（跟"我的主题"页共用），规范
   只要求圆角改成 24px，配色没有要求改，这里只覆盖 border-radius，
   背景/文字颜色维持 my-themes.css 原有的暖色定义不动。 */

.mt-modal,
.mt-alert{
    border-radius:var(--mo-radius-sheet);
}