/* ============================================================
   灵感AI · 设计系统 V3 —— 「微信绿」IM 语言（与公让云主站金色金融风
   刻意分离：主站=金色金融，灵感AI=国民 IM 的熟悉与安心）
   ------------------------------------------------------------
   THESIS: IM 的第一印象是"熟悉可靠"——微信绿是十亿人的肌肉记忆，
           企业 IM 借用这份信任感，而非另起炉灶让用户重新学习。
   OWN-WORLD: 品牌绿 #07C160 唯一强调色；浅色（默认）= 微信经典
           #EDEDED 灰基底 + 白卡片 + 自己的气泡 #95EC69；深色 =
           微信深色 #111111 基底 + 自己的气泡 #3EB575（白字）。
           功能色仅用于状态语义，不作装饰。
   STORY: 用户从金色的公让云主站点进灵感AI，明确感知"进入了一个
           专注聊天的独立空间"——像从公众号点进了微信聊天。
   FORM: 双主题 token 体系（Operate 模式 · Restrained 色彩策略），
           沿用既有信息架构与交互，只换视觉世界。
   FINISH: unreviewed and undocumented is unfinished; this build
           ends with the finish review, the verdict, DESIGN.md,
           and every shipping raster carrying its provenance.
   ============================================================ */

/* ============ 1. 设计 token（深色默认，与主站 style.css 同源） ============ */
:root {
  color-scheme: dark;

  /* 基底（微信深色） */
  --bg: #111111;            /* 页面深灰黑 */
  --bg-soft: #191919;       /* 区块底 */
  --card: #1E1E1E;          /* 卡片一级 */
  --card-2: #2C2C2C;        /* 卡片二级/按压 */
  --outside: #0A0A0A;       /* 桌面端页面外圈 */
  --chat-bg: #111111;       /* 聊天消息区 */
  --chip-bg: rgba(255,255,255,.08);
  --chip-text: #9C9C9C;

  /* 文本 */
  --text: #E6E7E8;
  --sub: #9A9A9A;
  --faint: #7F7F7F;

  /* 品牌（唯一强调色：微信绿） */
  --brand: #07C160;
  --brand-deep: #06AD56;
  --on-brand: #FFFFFF;      /* 绿底上的文字 */
  --brand-dim: rgba(7,193,96,.30);
  --glow-brand: 0 0 0 3px rgba(7,193,96,.22);

  /* 功能色（状态语义专用，不作装饰） */
  --up: #0ECB81;   --up-bg: rgba(14,203,129,.12);
  --down: #FA5151; --down-bg: rgba(250,81,81,.14);   /* 2026-10-10 红色统一：币安红→微信红(未读/危险唯一红，深浅色同值) */
  --warn: #FCD535; --warn-bg: rgba(252,213,53,.10);
  --info: #4B9EF8; --info-bg: rgba(75,158,248,.12);
  --orange: #FF9F0A;

  /* 设计修复批E（2026-10-23）：深色主题微信蓝 #576B95 在 #111 底上仅 ~3.5:1，dark 段提亮为 #7D90FC；
     浅色主题在 html.light 覆盖回微信原蓝。--gold-text 同理：深色金 #F0B90B / 浅色金加深 #8A6A00 */
  --wx-link: #7D90FC;
  --gold-text: #F0B90B;

  /* 气泡（微信深色：自己=暗绿白字，对方=深灰） */
  --bubble-mine: #3EB575;
  --bubble-mine-text: #FFFFFF;
  --bubble-mine-quote: rgba(255,255,255,.14);
  --bubble-peer: #2C2C2C;
  --bubble-peer-text: #E6E7E8;
  --bubble-peer-quote: rgba(255,255,255,.06);

  /* 线与形状 */
  --border: #2E2E2E;
  --border-soft: #262626;
  --avatar-bg: #33383D;
  --radius-lg: 14px;
  --radius-md: 10px;
  --radius-sm: 8px;
  --shadow-1: 0 2px 10px rgba(0,0,0,.45);
  --shadow-2: 0 10px 30px rgba(0,0,0,.55);

  /* 位置小地图（网格纹） */
  --map-a: #1A211C; --map-b: #1F2822; --map-road: #2E3A31;

  --nav-h: 52px;
}

/* 浅色主题：微信经典（html.light 切换；未存偏好时为默认） */
html.light {
  color-scheme: light;

  --bg: #EDEDED;
  --bg-soft: #EDEDED;
  --card: #FFFFFF;
  --card-2: #E5E5E5;
  --outside: #D6D6D6;
  --chat-bg: #EDEDED;
  --chip-bg: rgba(0,0,0,.06);
  --chip-text: #666666;

  --text: #191919;
  --sub: #666666;
  --faint: #7A7A7A;   /* 设计修复批E：9A9A9A→7A7A7A（浅底灰字对比 ≥4.5:1） */

  --brand: #07C160;
  --brand-deep: #06AD56;
  --on-brand: #FFFFFF;
  --brand-dim: rgba(7,193,96,.25);
  --glow-brand: 0 0 0 3px rgba(7,193,96,.20);

  --up: #0E9F6E;   --up-bg: rgba(14,159,110,.10);
  --down: #FA5151; --down-bg: rgba(250,81,81,.10);
  --warn: #C9A200; --warn-bg: rgba(201,162,0,.10);
  --info: #2F6BFF; --info-bg: rgba(47,107,255,.08);
  --orange: #E8720C;

  --wx-link: #576B95;   /* 浅色主题：微信原蓝，浅底对比达标 */
  --gold-text: #8A6A00;   /* 设计修复批E：浅色金字加深（#F0B90B 浅底不达标） */

  --bubble-mine: #95EC69;
  --bubble-mine-text: #111111;
  --bubble-mine-quote: rgba(0,0,0,.08);
  --bubble-peer: #FFFFFF;
  --bubble-peer-text: #191919;
  --bubble-peer-quote: rgba(0,0,0,.04);

  --border: #E0E0E0;
  --border-soft: #E8E8E8;
  --avatar-bg: #E0E5E1;
  --shadow-1: 0 2px 10px rgba(0,0,0,.06);
  --shadow-2: 0 10px 30px rgba(0,0,0,.10);

  --map-a: #E6EAE6; --map-b: #DFE4DF; --map-road: #F6F8F6;
}

/* ============ 2. 基础 + 浏览器表面（未画之处也属于设计） ============ */
* { margin: 0; padding: 0; box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { height: 100%; overscroll-behavior: none; }   /* 十四轮修复：十三轮误把本行复合选择器破坏成 html,html+body 导致 html 丢 height:100% 全站高度链断裂（列表页半高/聊天页被撑高输入栏沉底两个 bug 的根因）；overscroll 并入保留 */
/* 沉浸式状态栏让位（2026-09-05 通知点击修复，index.html 内联脚本按壳桥加类）：
   APK 壳内直开独立站时 navbar 返回键顶进状态栏点不到——html 让出 --sat，
   border-box（上方通配已含）使 padding 吃进 100% 高度内，body/#app/#page 整链同步缩短，
   底部 tabbar/输入栏不被裁。::before 深色顶条复原实色状态栏观感（与主站 sat-shade 同款）。
   iframe 内（主站容器层已让位）与浏览器恒无 .apk-sat 类，零影响。 */
html.apk-sat { padding-top: var(--sat, 0px); }
html.apk-sat::before {
  content: ''; position: fixed; top: 0; left: 0; right: 0; height: var(--sat, 0px);
  background: #0B0E11; z-index: 9990; pointer-events: none;
}
body {
  font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "HarmonyOS Sans SC", "Microsoft YaHei", "Segoe UI", sans-serif;
  background: var(--outside); color: var(--text); font-size: 15px; line-height: 1.45;
  overscroll-behavior: none;
  -webkit-font-smoothing: antialiased;
}
button { font-family: inherit; border: none; background: none; cursor: pointer; color: inherit; }
input, textarea { font-family: inherit; outline: none; color: var(--text); }
input::placeholder, textarea::placeholder { color: var(--faint); }
::selection { background: rgba(7,193,96,.32); }
html.light ::selection { background: rgba(7,193,96,.25); }
input, textarea { caret-color: var(--brand); }
:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; border-radius: 4px; }
.hidden { display: none !important; }

/* 滚动条 */
::-webkit-scrollbar { width: 4px; height: 4px; }
::-webkit-scrollbar-thumb { background: var(--border); border-radius: 2px; }
::-webkit-scrollbar-track { background: transparent; }

/* 主题切换的平滑过渡（只过渡颜色类属性，避免干扰位移动画） */
body, .navbar, .conv-item, .cell, .input-bar, .panel, .modal, .drawer,
.admin-card, .msg-bubble, .login-card, .search-box, .jump-bottom, .ctx-menu {
  transition: background-color .22s ease, border-color .22s ease, color .22s ease;
}

#app { height: 100%; display: flex; justify-content: center; }
#page {
  width: 100%; max-width: 520px; height: 100%; background: var(--bg);
  display: flex; flex-direction: column; position: relative; overflow: hidden;
  box-shadow: 0 0 48px rgba(0,0,0,.55);
}

/* ============ 3. 顶栏 ============ */
.navbar {
  height: var(--nav-h); background: var(--bg-soft); border-bottom: 1px solid var(--border-soft);
  display: flex; align-items: center; padding: 0 12px; gap: 10px;
  flex-shrink: 0; position: relative; z-index: 10;
}
.navbar .nav-back { font-size: 22px; color: var(--text); padding: 4px 8px 4px 0; }
.navbar .nav-title .title-dot {
  width: 8px; height: 8px; border-radius: 2.5px; background: var(--brand);
  box-shadow: 0 0 10px color-mix(in srgb, var(--brand) 40%, transparent);
  flex-shrink: 0;
}
.nav-title {
  flex: 1; text-align: center; font-size: 17px; font-weight: 650;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  display: flex; align-items: center; justify-content: center; gap: 6px;
  letter-spacing: .02em;
}
.navbar .nav-title .sub { font-size: 12px; color: var(--sub); font-weight: 400; }
.navbar .nav-action {
  font-size: 20px; color: var(--text); padding: 5px; margin: -2px 0; border-radius: var(--radius-sm);
  display: flex; align-items: center; justify-content: center; min-width: 32px; min-height: 32px;
}
.navbar .nav-action:active { background: var(--card-2); }
.navbar .nav-action svg { width: 20px; height: 20px; display: block; }

.page-body { flex: 1; overflow-y: auto; -webkit-overflow-scrolling: touch; }

/* ============ 4. 登录页（签名瞬间：金晕呼吸的猫） ============ */
.login-page {
  height: 100%; display: flex; flex-direction: column; align-items: center;
  background:
    radial-gradient(720px 420px at 50% 8%, rgba(7,193,96,.15) 0%, rgba(7,193,96,.04) 42%, transparent 72%),
    linear-gradient(168deg, #161616 0%, #111111 58%, #0D0D0D 100%);
  padding: 11vh 32px 40px; color: var(--text); overflow-y: auto;
}
html.light .login-page {
  background:
    radial-gradient(720px 420px at 50% 8%, rgba(149,236,105,.50) 0%, rgba(149,236,105,.16) 46%, transparent 74%),
    linear-gradient(168deg, #EFF6EA 0%, #F0F2EF 55%, #EDEDED 100%);
}

/* 自动 SSO 过渡态（嵌入主站 iframe 首载/换账号重载时未登录先渲染登录页等待 bridge 换发）：
   不用登录页营销渐变（浅色主题 #EFF6EA→#EDEDED 近白，主站内闪现即"白屏闪过"观感），
   落 App 常规底色=视觉上的"启动中"，bridge 回来即跳列表页（2026-09-07 白闪修复）。
   html 前缀+置尾：优先级压过浅色登录页渐变，两主题同规则 */
html .login-page.sso-wait { background: var(--outside); }

.login-logo {
  font-size: 64px; line-height: 1;
  filter: drop-shadow(0 0 24px rgba(7,193,96,.45));
  animation: breathe 5.5s ease-in-out infinite;
}
/* 公让云猫脸图标：PNG 遮罩填充，深浅主题自动换色 */
.login-logo.ic-cat {
  width: 76px; height: 76px; margin: 0 auto;
  background-color: #07C160;
  /* 2026-09-10 换白色猫头 logo 素材做遮罩（icon-cat-head.png，公让云首页/悬浮球同款猫头）：
     填充色仍是主题绿（深 #07C160 / 浅 #069B50），颜色随底色主题联动不变 */
  -webkit-mask: url(../icon-cat-head.png) center / contain no-repeat;
  mask: url(../icon-cat-head.png) center / contain no-repeat;
}
html.light .login-logo.ic-cat { background-color: #069B50; }
html.light .login-logo { filter: drop-shadow(0 6px 18px rgba(7,193,96,.30)); }
@keyframes breathe {
  0%, 100% { filter: drop-shadow(0 0 16px rgba(7,193,96,.30)); transform: scale(1); }
  50% { filter: drop-shadow(0 0 30px rgba(7,193,96,.55)); transform: scale(1.035); }
}
.login-page h1 { font-size: 30px; margin: 14px 0 4px; letter-spacing: .3em; text-indent: .3em; font-weight: 700; }
.login-page .slogan { font-size: 13px; color: var(--sub); margin-bottom: 36px; letter-spacing: .04em; }
.login-card {
  width: 100%; max-width: 340px; background: var(--card);
  border: 1px solid var(--border-soft); border-radius: var(--radius-lg);
  padding: 22px; display: flex; flex-direction: column; gap: 12px;
  box-shadow: var(--shadow-2);
}
.login-card input {
  height: 46px; border: 1px solid var(--border); border-radius: var(--radius-md);
  padding: 0 14px; font-size: 15px; background: var(--bg-soft);
  transition: border-color .15s, box-shadow .15s;
}
.login-card input:focus { border-color: var(--brand); box-shadow: var(--glow-brand); }
.btn-primary {
  height: 46px; background: var(--brand); color: var(--on-brand);
  border-radius: var(--radius-md); font-size: 16px; font-weight: 650; letter-spacing: .06em;
  transition: filter .15s, opacity .15s;
}
.btn-primary:active { filter: brightness(.88); }
.btn-primary:disabled { background: var(--brand-dim); cursor: not-allowed; }
.login-switch { text-align: center; font-size: 13px; color: var(--brand); padding: 4px 0; }
.login-demo {
  margin-top: 26px; width: 100%; max-width: 340px; font-size: 12px; color: var(--sub);
  background: var(--chip-bg); border-radius: var(--radius-md); padding: 12px 14px; line-height: 2;
}
.login-demo .acc { background: var(--card-2); border-radius: 6px; padding: 1px 8px; margin: 0 2px; cursor: pointer; color: var(--text); }
.login-demo .acc:hover { background: var(--brand-dim); }

/* ============ 5. 消息列表页 ============ */
.list-search { padding: 8px 12px; background: var(--bg); flex-shrink: 0; }
.list-search .search-box {
  background: var(--card-2); border-radius: var(--radius-md); height: 36px;
  display: flex; align-items: center; padding: 0 12px; gap: 8px;
}
.list-search input { flex: 1; border: none; font-size: 14px; background: transparent; }
.list-search .icon { color: var(--faint); font-size: 15px; }
.search-tools { display: flex; gap: 8px; margin-top: 8px; align-items: center; color: var(--sub); font-size: 12px; }
/* 2026-10-25 老板：时间筛选弃原生日历改滚轮选择——只读日期字段（点开 vant 式底部滚轮，已选后 ✕ 清除；两字段平分整行） */
.search-tools .mx-date-field {
  flex: 1; min-width: 0; justify-content: center;
  display: inline-flex; align-items: center; gap: 4px; height: 28px; padding: 0 6px;
  border: 1px solid var(--border); border-radius: 6px; background: var(--card); color: var(--sub);
  font-size: 12px; cursor: pointer; user-select: none; -webkit-tap-highlight-color: transparent;
}
.search-tools .mx-date-field.set { color: var(--text); border-color: var(--brand); }
.search-tools .mx-date-field .mx-date-clear { display: none; font-size: 11px; opacity: .55; padding: 0 1px; }
.search-tools .mx-date-field.set .mx-date-clear { display: inline; }
.search-tools button {
  height: 28px; padding: 0 14px; background: var(--brand); color: var(--on-brand);
  border-radius: 6px; font-size: 12px; font-weight: 600;
}

.conv-section-title {
  padding: 14px 16px 6px; font-size: 12px; font-weight: 600; color: var(--faint); letter-spacing: .08em;
}
/* 会话行：wrap(溢出裁剪+边框) + 行内容 */
.conv-wrap { position: relative; overflow: hidden; border-bottom: 1px solid var(--border-soft); }
.conv-item {
  background: var(--bg); display: flex; align-items: center; padding: 11px 14px; gap: 12px;
  position: relative; transition: background-color .15s ease, transform .18s ease;
  /* 列表行非文本：禁选中/禁系统长按菜单（复制粘贴等），长按只弹自定义功能菜单 */
  -webkit-user-select: none; user-select: none; -webkit-touch-callout: none;
}
.conv-item:active { background: var(--card-2); }
.conv-avatar, .msg-avatar, .msg-card .cavatar, .member-cell .avatar {
  width: 44px; height: 44px; border-radius: 12px; background: var(--avatar-bg);
  flex-shrink: 0; display: flex; align-items: center; justify-content: center;
  font-size: 24px; position: relative; overflow: visible;
}
.msg-avatar { width: 38px; height: 38px; font-size: 22px; border-radius: 11px; cursor: pointer; }   /* 设计修复批C：40→38，与 chat.js 头像 inline 38px 一致（改 CSS 侧，不动 js） */
.conv-main { flex: 1; min-width: 0; }
.conv-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.conv-name { font-size: 16px; font-weight: 550; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.conv-time { font-size: 12px; color: var(--faint); flex-shrink: 0; font-variant-numeric: tabular-nums; }
.conv-preview {
  font-size: 13px; color: var(--sub); margin-top: 3px; display: flex; align-items: center; gap: 6px;
  white-space: nowrap; overflow: hidden;
}
.conv-preview .txt { overflow: hidden; text-overflow: ellipsis; }
.badge {
  min-width: 18px; height: 18px; border-radius: 9px; background: var(--down); color: #fff;
  font-size: 11px; display: inline-flex; align-items: center; justify-content: center;
  padding: 0 5px; flex-shrink: 0; font-weight: 600; box-shadow: 0 2px 6px rgba(246,70,93,.4);
}
.badge.muted-badge { background: var(--faint); box-shadow: none; }
.tag-top { font-size: 11px; color: var(--sub); background: var(--chip-bg); border-radius: 4px; padding: 0 4px; flex-shrink: 0; }   /* 设计修复批A：10→11px（纯数字角标下限） */
.icon-mute { font-size: 13px; flex-shrink: 0; }

/* 左滑操作已按用户要求移除（2026-09-06 v1225）：置顶/隐藏/删除统一走长按菜单 */

/* ===== v1225（2026-09-06 老板要求）：全局禁长按文本选择 =====
   长按只弹自定义菜单（消息长按/会话长按/菜单项复制），不得出现系统文本选择的两个光标与工具栏；
   输入框内正常选中不受影响 */
html, body { -webkit-user-select: none; user-select: none; }
input, textarea, [contenteditable="true"] { -webkit-user-select: text; user-select: text; }

.search-result-group { padding: 14px 16px 4px; font-size: 12px; color: var(--faint); letter-spacing: .08em; }
.search-item { background: var(--bg); padding: 11px 16px; border-bottom: 1px solid var(--border-soft); display: flex; gap: 10px; align-items: center; }
.search-item:active { background: var(--card-2); }
.search-item mark { background: var(--brand-dim); color: var(--brand); border-radius: 2px; padding: 0 1px; }
.search-item .meta { font-size: 12px; color: var(--sub); margin-top: 2px; }

/* ============ 6. 聊天页 ============ */
.chat-page { display: flex; flex-direction: column; height: 100%; background: var(--chat-bg); }   /* 高度回归系统原生（100% 随窗口 resize），JS 不接管——七轮自绘致真机三个布局 bug 已撤销 */

/* 公告栏 / 置顶栏 */
.announce-bar {
  background: var(--warn-bg); border-bottom: 1px solid var(--border-soft);
  padding: 8px 12px; display: flex; align-items: center; gap: 8px; cursor: pointer;
}
.announce-bar .loud { font-size: 16px; }
.announce-bar .content { flex: 1; font-size: 13px; color: var(--warn); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
html.light .announce-bar .content { color: #8A6A00; }   /* 设计修复批E：浅色 #C9A200 金在浅金底上对比不足，加深 */
.announce-bar .count { font-size: 11px; color: var(--sub); flex-shrink: 0; }
.pin-bar {
  background: var(--info-bg); border-bottom: 1px solid var(--border-soft);
  padding: 8px 12px; display: flex; align-items: center; gap: 8px; cursor: pointer;
}
.pin-bar .pin-icon { font-size: 14px; }
.pin-bar .content { flex: 1; font-size: 13px; color: var(--info); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pin-bar .count { font-size: 11px; color: var(--sub); }

/* 消息区 */
.msg-list { overflow-anchor: none; } /* 九轮：禁 Chrome 滚动锚定——prepend 历史时它的自动调整与我们的 scrollTop 赋值交错竞态（锚定值不受控的根因） */
.msg-list { flex: 1; overflow-y: auto; padding: 12px 12px 6px; background: transparent; overscroll-behavior: contain; } /* contain：历史加载是上滑触底翻页，防整页下拉刷新抢手势（群聊体验升级） */
.time-sep { text-align: center; margin: 12px 0; }
.time-sep span { font-size: 12px; color: var(--chip-text); background: var(--chip-bg); border-radius: 5px; padding: 2px 7px; font-variant-numeric: tabular-nums; }   /* 设计修复批A：11→12px */

.msg-row { display: flex; gap: 9px; margin: 10px 0; align-items: flex-start; }
.msg-row.mine { flex-direction: row-reverse; }
.msg-col { max-width: 70%; display: flex; flex-direction: column; }   /* 2026-11-07 老板令:卡片宽度按窗口 70% 封顶(原 74%) */
.msg-row.mine .msg-col { align-items: flex-end; }
.msg-sender { font-size: 12px; color: var(--sub); margin-bottom: 3px; padding: 0; }   /* 设计修复批A/C：11→12px；padding 0 4px→0（与气泡左缘对齐） */
.msg-bubble {
  position: relative; padding: 9px 13px; border-radius: var(--radius-lg); font-size: 15.5px;
  line-height: 1.5; word-break: break-word; overflow-wrap: anywhere; word-break: break-all;   /* 设计修复批B：长串（URL/连续字符）双保险断行，同 :1420 评论区写法 */
  background: var(--bubble-peer); color: var(--bubble-peer-text);
  box-shadow: var(--shadow-1); cursor: default;
  /* v1225（老板要求）：消息文本禁选中——复制走长按菜单，不出现系统选择光标/工具栏 */
  -webkit-user-select: none; user-select: none;
}
.msg-row.mine .msg-bubble { background: var(--bubble-mine); color: var(--bubble-mine-text); }

/* ===== 选择复制批（2026-10-09 老板需求）=====
   v1225 全局禁选口径不变（默认长按只弹自定义菜单，不出系统选择光标）；
   桌面精确指针：仅放开气泡正文 .msg-text 可拖选（微信 PC 同款，鼠标选择+Ctrl+C，
   右键菜单照旧）；触屏不命中此媒体查询，走长按菜单「选择」进入 .txt-selecting 态。 */
/* 桌面拖选放开由 JS 加 body.mouse-select 控制（chat.js 进页判定）——不用媒体查询做唯一门槛：
   部分安卓 OEM WebView 误报 hover:hover+pointer:fine（荣耀测试包实锤：长按气泡触发系统文本
   选择+放大镜占位），JS 端 'ontouchstart'/maxTouchPoints 硬守卫触屏设备恒不放开。 */
body.mouse-select .msg-bubble .msg-text { -webkit-user-select: text; user-select: text; cursor: text; }
.msg-bubble .msg-text a { -webkit-user-drag: none; }   /* 拖选经过链接不触发原生拖拽抢走选区 */
.msg-bubble .msg-text::selection { background: var(--brand-dim); }
.txt-sel-bar {
  position: fixed; z-index: 60; display: flex;
  background: var(--card); border: 1px solid var(--border); border-radius: 10px;
  box-shadow: var(--shadow-2); overflow: hidden;
}
.txt-sel-bar[hidden] { display: none; }   /* 审计 P1-1：作者 display:flex 会盖掉 UA 的 [hidden]，拖动/滚动期间浮条必须藏得住 */
.txt-sel-bar button { padding: 9px 18px; font-size: 14px; border: none; background: transparent; color: var(--text); }
.txt-sel-bar button:active { background: var(--card-2); }
.txt-sel-bar button + button { border-left: 1px solid var(--border-soft); }

/* ===== 微信式就地选择·批2（2026-10-17 全自绘，textsel.js）=====
   根因（Opus 调研 REPORT-wechat-select-copy-1017）：安卓 WebView 对 JS 程序化选区不出系统把手
   （Chromium should_show_handle_ 默认 false），点到选区外内核直接清空——批1 .txt-selecting 靠系统
   手柄的路真机必死，本批彻底不用系统选区：底色=自绘矩形层、把手=自绘两枚、逐字命中=自建矩形表。
   桌面 body.mouse-select 原生拖选照旧不动；触屏长按菜单「选择」进入本模式。 */
body.mouse-select .moment-content,
body.mouse-select .mc-text,
body.mouse-select .mc-content { -webkit-user-select: text; user-select: text; cursor: text; }
.moment-content a, .mc-text a, .mc-content a { -webkit-user-drag: none; }
.moment-content::selection, .mc-text::selection, .mc-content::selection { background: var(--brand-dim); }
.mxsel-on a { pointer-events: none; }   /* 选择态中文本块内链接不抢点击（退出即恢复） */
.mxsel-layer { position: fixed; inset: 0; pointer-events: none; z-index: 59; }
.mxsel-rect { position: absolute; background: var(--brand-dim); border-radius: 2px; }
.mxsel-h { position: fixed; width: 52px; height: 52px; z-index: 62; touch-action: none; cursor: pointer; }   /* 52×52 触摸热区（真机批3 加大：老板实锤点不中） */
.mxsel-h i { position: absolute; left: 50%; width: 2px; height: 24px; margin-left: -1px; background: var(--brand); border-radius: 1px; }
.mxsel-h b { position: absolute; left: 50%; width: 14px; height: 14px; margin-left: -7px; border-radius: 50%; background: var(--brand); box-shadow: 0 1px 3px rgba(0,0,0,.25); transition: transform .08s; }
.mxsel-h.grab b { transform: scale(1.3); }   /* 抓取即时反馈：一点就知道抓住了 */
.mxsel-h-s i { top: 23px; }      /* 起点把手：圆点在上（微信式） */
.mxsel-h-s b { top: 6px; }
.mxsel-h-e i { bottom: 23px; }   /* 终点把手：圆点在下 */
.mxsel-h-e b { bottom: 6px; }
.msg-bubble::before {
  content: ''; position: absolute; top: 14px; width: 0; height: 0;
  border: 5px solid transparent;
}
.msg-row:not(.mine) .msg-bubble { border-top-left-radius: 5px; }
.msg-row:not(.mine) .msg-bubble::before { border-right-color: var(--bubble-peer); left: -9px; }
.msg-row.mine .msg-bubble { border-top-right-radius: 5px; }
.msg-row.mine .msg-bubble::before { border-left-color: var(--bubble-mine); right: -9px; }
.msg-bubble.mention { color: var(--info); }
.msg-status { font-size: 12px; color: var(--faint); margin-top: 4px; padding: 0 4px; display: flex; gap: 5px; align-items: center; }   /* 设计修复批A：11→12px */
.msg-status .ticks { letter-spacing: -3px; }
.msg-status.read { color: var(--brand); }
.msg-status .receipt-link { color: var(--info); cursor: pointer; }

.msg-quote {
  border-left: 2px solid currentColor; opacity: .92;
  background: var(--bubble-peer-quote); padding: 5px 8px; border-radius: 6px;
  font-size: 13px; margin-bottom: 5px; max-height: 52px; overflow: hidden;
  /* 设计修复批B：两行截断以 line-clamp 为主（带省略号），max-height:52px 兜底个别老内核 */
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2;
}
.msg-row.mine .msg-quote { background: var(--bubble-mine-quote); }
.quote-name { font-size: 12px; font-weight: 600; margin-bottom: 2px; }

/* 特殊消息体 */
.msg-emoji { font-size: 44px; line-height: 1.15; background: transparent !important; box-shadow: none !important; padding: 2px !important; }
.msg-emoji::before { display: none !important; }
.msg-image img { max-width: 180px; max-height: 240px; border-radius: var(--radius-md); display: block; cursor: zoom-in; }
/* 无宽高老图片的加载占位（chat-open-perf P0-3）：与加载骨架同色，到图即摘除、按原图比例一次性修正 */
.msg-image img.img-ph { width: 120px; height: 120px; background: var(--card-2); }
.msg-video video { max-width: 200px; border-radius: var(--radius-md); display: block; }
.msg-voice { display: flex; align-items: center; gap: 8px; min-width: 84px; cursor: pointer; }
.msg-voice .wave { letter-spacing: 2px; }
.msg-voice .dur { font-size: 12px; opacity: .75; font-variant-numeric: tabular-nums; }
.msg-voice.playing .wave { animation: pulse 1s infinite; }
@keyframes pulse { 50% { opacity: .4; } }
.voice-actions { font-size: 11px; color: var(--info); margin-top: 3px; cursor: pointer; }
.msg-file { display: flex; align-items: center; gap: 10px; min-width: 160px; }
.msg-file .ficon { font-size: 30px; }
.msg-file .fname { font-size: 13px; max-width: 150px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.msg-file .fsize { font-size: 11px; color: var(--sub); font-variant-numeric: tabular-nums; }
.msg-location { width: 190px; }
.msg-location .map {
  height: 88px; border-radius: var(--radius-sm); margin-top: 6px; position: relative; overflow: hidden;
  background: repeating-linear-gradient(0deg, var(--map-a) 0 14px, var(--map-b) 14px 15px),
              repeating-linear-gradient(90deg, var(--map-a) 0 22px, var(--map-b) 22px 23px);
}
.msg-location .map::after { content: '📍'; position: absolute; left: 50%; top: 46%; transform: translate(-50%,-50%); font-size: 22px; }
.msg-location .map .road { position: absolute; background: var(--map-road); opacity: .9; }
.msg-card { display: flex; align-items: center; gap: 10px; padding: 2px 4px; min-width: 170px; }
.msg-card .cname { font-size: 14px; }
.msg-card .csub { font-size: 11px; color: var(--sub); }
.msg-system { text-align: center; font-size: 12px; color: var(--sub); margin: 10px 0; }
.msg-announcement {
  margin: 10px 0; background: var(--warn-bg); border: 1px solid var(--border-soft);
  border-radius: var(--radius-md); padding: 10px 12px; max-width: 70%; margin-left: auto; margin-right: auto;   /* 2026-11-07 老板令:卡片≤70% 窗口宽(原 86%) */
}
.msg-announcement .a-title { font-size: 13px; color: var(--warn); font-weight: 600; display: flex; gap: 6px; align-items: center; }
.msg-announcement .a-body { font-size: 13px; color: var(--sub); margin-top: 5px; white-space: pre-wrap; }
.msg-system-notice {
  background: var(--card); border: 1px solid var(--border-soft); border-radius: var(--radius-md);
  padding: 12px; margin: 10px 0; max-width: 70%; margin-left: auto; margin-right: auto; box-shadow: var(--shadow-1);   /* 2026-11-07 老板令:卡片≤70% 窗口宽(原 88%) */
}
.msg-system-notice .n-icon { font-size: 26px; }
.msg-system-notice .n-title { font-size: 15px; font-weight: 600; margin: 6px 0 4px; }
.msg-system-notice .n-content { font-size: 13px; color: var(--sub); }
.msg-system-notice .n-fields { margin-top: 8px; border-top: 1px dashed var(--border); padding-top: 8px; }
.msg-system-notice .n-field { display: flex; justify-content: space-between; font-size: 12px; color: var(--sub); padding: 2px 0; }
.msg-system-notice .n-field .v { color: var(--text); }

.msg-revoked { font-size: 12px; color: var(--sub); text-align: center; margin: 8px 0; }
.msg-highlight { animation: flash 1.6s; }
@keyframes flash { 0%,60% { background: var(--brand-dim); } 100% { background: transparent; } }

/* 输入栏 */
.input-bar {
  flex-shrink: 0; background: var(--card); border-top: 1px solid var(--border-soft);
  padding: 8px 10px calc(8px + env(safe-area-inset-bottom, 0px));
  display: flex; align-items: flex-end; gap: 8px;
}
.input-bar .ib-icon { font-size: 24px; color: var(--sub); padding: 5px 2px; flex-shrink: 0; line-height: 1; border-radius: var(--radius-sm); display: flex; align-items: center; justify-content: center; }
.ib-icon svg { display: block; }
/* @ 入口无按钮（2026-11-07 老板终稿）：手敲 '@' 字符即弹可 @ 成员浮层（chat.js onInputForMention）；
   同日早稿的常驻 .ib-at 按钮已撤 */
/* 群管理页·移除管理员小钮 */
.mxga-remove { border: none; background: none; color: var(--down); font-size: 12px; padding: 4px 6px; cursor: pointer; border-radius: 4px; }
.mxga-remove:active { background: var(--card-2); }
.input-bar .ib-icon:active { background: var(--card-2); }
.input-bar textarea {
  flex: 1; border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--card-2);
  padding: 8px 11px; font-size: 15.5px; resize: none; max-height: 118px; min-height: 38px; line-height: 1.4;
  transition: border-color .15s, box-shadow .15s;
}
/* ===== 输入框自动长高 + 全屏输入（2026-10-09 v1289，按微信 8.0.26+ 行为重做）=====
   普通态：框随内容逐行长高，上限 min(11 行, 42% 布局视口)（JS autoGrow 实控），之后框内滚动；
   ≥3 行时左侧图标列顶部出现「^」（微信「对话框左侧向上的箭头」），点 = 全屏输入。
   全屏态（.chat-page.ib-full）：消息区收成 0 高，输入区撑满聊天区（导航栏保留，返回键可用），
   高度随系统 resize / 键盘自然跟随；左上「v」退回普通框。CSS max-height 只作字号缩放兜底。 */
.input-bar textarea { max-height: calc(42vh + 18px); }
.input-bar.ib-main { position: relative; }
.input-bar .ib-expand {
  position: absolute; top: 6px; left: 8px; width: 32px; height: 28px;
  border-radius: var(--radius-sm); background: transparent; border: 0;
  color: var(--sub); display: flex; align-items: center; justify-content: center;
  padding: 0; cursor: pointer; z-index: 3; flex-shrink: 0;
  -webkit-tap-highlight-color: transparent; touch-action: none;   /* 指尖落在箭头上不起滚动手势：touchend 恒可取消，微滑仍算点按 */
}
.input-bar .ib-expand svg { display: block; }
.input-bar .ib-expand[hidden] { display: none; }
.input-bar .ib-expand:active { background: var(--card-2); }
/* 全屏输入 */
.chat-page.ib-full .msg-list { flex: 0 0 0; min-height: 0; padding-top: 0; padding-bottom: 0; overflow: hidden; }
.chat-page.ib-full .jump-bottom, .chat-page.ib-full .new-msg-bar, .chat-page.ib-full .unread-jump-bar { display: none !important; }
.chat-page.ib-full .ib-wrap { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; }
.chat-page.ib-full .ib-wrap > .input-bar.ib-main { flex: 1 1 auto; min-height: 0; padding-top: 40px; }
.chat-page.ib-full .input-bar.ib-main textarea { align-self: stretch; height: auto; max-height: none; }
.input-bar textarea:focus { border-color: var(--brand); box-shadow: var(--glow-brand); }
.input-bar .btn-send {
  background: var(--brand); color: var(--on-brand); border-radius: var(--radius-md);
  padding: 8px 16px; font-size: 14px; font-weight: 650; flex-shrink: 0;
}
.input-bar .btn-send:active { filter: brightness(.88); }
.input-bar .btn-send:disabled { background: var(--brand-dim); }
/* 粘贴图片待发条（v1290）：输入栏上方缩略图 + 每张 ✕；全屏输入态同样位于编辑区上方（不参与撑满） */
.paste-strip { flex: 0 0 auto; display: flex; align-items: center; gap: 8px; overflow-x: auto; padding: 8px 10px 0; background: var(--card); border-top: 1px solid var(--border-soft); scrollbar-width: none; }
.paste-strip::-webkit-scrollbar { display: none; }
.paste-strip + .input-bar { border-top: none; }
.paste-strip .ps-item { position: relative; flex: 0 0 auto; width: 56px; height: 56px; border-radius: 6px; overflow: hidden; background: var(--card-2); border: 1px solid var(--border); }
.paste-strip .ps-item img { width: 100%; height: 100%; object-fit: cover; display: block; }
.paste-strip .ps-x { position: absolute; top: 2px; right: 2px; width: 20px; height: 20px; border-radius: 50%; border: none; background: rgba(0,0,0,.55); color: #fff; font-size: 11px; line-height: 20px; padding: 0; cursor: pointer; }
.paste-strip .ps-x::after { content: ''; position: absolute; inset: -10px; }   /* 设计修复批D：热区外扩到 40px，视觉不变（父 .ps-item overflow:hidden 裁至格内，仍远大于原 20px） */
.paste-strip .ps-tip { flex: 0 0 auto; font-size: 12px; color: var(--sub); white-space: nowrap; }
.input-bar .btn-voice {
  flex: 1; height: 40px; background: var(--bg-soft); border: 1px solid var(--border);
  border-radius: var(--radius-md); font-size: 15px; color: var(--text);
  text-align: center; line-height: 38px; user-select: none;
}
.input-bar .btn-voice.recording { background: var(--brand-dim); border-color: var(--brand); color: var(--brand); }
.muted-tip {
  flex-shrink: 0; background: var(--card); border-top: 1px solid var(--border-soft);
  padding: calc(16px + env(safe-area-inset-bottom, 0px)/2) 16px; text-align: center;
  color: var(--sub); font-size: 14px;
}
.receipt-toggle { font-size: 11px; color: var(--info); display: flex; align-items: center; gap: 4px; flex-shrink: 0; padding-bottom: 8px; }
.receipt-toggle input { accent-color: var(--brand); }

/* 表情 / + 面板（微信式：外层容器高度由 JS 对齐键盘高度，切换时输入栏位置不动；
   关闭走 250ms 过渡与键盘弹出动画反向同步——打开时 JS 临时禁用过渡瞬时撑住） */
.panel-wrap { flex-shrink: 0; overflow: hidden; transition: height .25s ease-out; }
.panel {
  height: 100%; background: var(--card); border-top: 1px solid var(--border-soft);
  overflow: hidden; display: flex; flex-direction: column;   /* 十轮：面板本体不滚——tabs/底条固定，仅网格区滚动（底条删除键永不被裁） */
  /* 十一轮（微信原生原理文档）：面板内容进场=translationY+alpha 双动画（200ms FastOutSlowIn），
     与容器 height 展开（250ms ease-out）叠加——观感"键盘渐收、面板内容从底部滑入"；
     表情↔加号互切时 .panel 元素重建自动重播=交叉过渡 */
  animation: panelIn .2s cubic-bezier(.4, 0, .2, 1);
}
@keyframes panelIn {
  from { transform: translateY(26px); opacity: .35; }
  to { transform: translateY(0); opacity: 1; }
}
.panel > .emoji-tabs, .panel > .emoji-foot { flex-shrink: 0; }
.panel > .emoji-grid { flex: 1; overflow-y: auto; }
.panel > .plus-grid { flex: 1; overflow-y: auto; }
.emoji-grid { display: grid; grid-template-columns: repeat(8, 1fr); padding: 8px 10px 4px; gap: 2px; }
/* 九轮：格子 100% 宽+正方形+裁切——防窄屏/大字体下表情字形撑破格子往右溢出（右缘不齐的根因） */
.emoji-grid button { width: 100%; aspect-ratio: 1; display: flex; align-items: center; justify-content: center; overflow: hidden; font-size: clamp(18px, 6.5vw, 26px); padding: 0; border-radius: var(--radius-sm); }
.emoji-grid button:active { background: var(--card-2); }
.emoji-tabs { display: flex; gap: 14px; padding: 8px 14px 0; font-size: 13px; color: var(--sub); }
.emoji-tabs .tab.on { color: var(--brand); font-weight: 600; }
/* 九轮：面板底部条——右下角微信式删除键 */
.emoji-foot { display: flex; align-items: flex-end; padding: 4px 10px calc(6px + env(safe-area-inset-bottom, 0px)); }
.emoji-foot .grow { flex: 1; }
.emoji-del { min-width: 54px; height: 38px; display: flex; align-items: center; justify-content: center; background: var(--bg-soft); border: 1px solid var(--border-soft); border-radius: var(--radius-sm); color: var(--sub); font-size: 19px; line-height: 1; flex-shrink: 0; }
.emoji-del:active { background: var(--card-2); }
.plus-grid { display: grid; grid-template-columns: repeat(4, 1fr); padding: 18px 8px; gap: 14px; }
.plus-item { display: flex; flex-direction: column; align-items: center; gap: 7px; font-size: 12px; color: var(--sub); }
.plus-item .picon {
  width: 54px; height: 54px; background: var(--bg-soft); border: 1px solid var(--border-soft);
  border-radius: var(--radius-lg); display: flex; align-items: center; justify-content: center; font-size: 26px;
}
.plus-item:active .picon { background: var(--card-2); }

/* 引用条 */
.reply-bar {
  flex-shrink: 0; background: var(--card); border-top: 1px solid var(--border-soft);
  padding: 7px 12px; display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--sub);
}
.reply-bar .r-main { flex: 1; border-left: 2px solid var(--brand); padding-left: 8px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }

/* ============ 7. 浮层 ============ */
#menu-root .ctx-menu {
  position: fixed; z-index: 1000; background: var(--card-2); border: 1px solid var(--border);
  border-radius: var(--radius-md); padding: 5px 0; min-width: 140px;
  box-shadow: var(--shadow-2); animation: menuIn .12s ease;
}
@keyframes menuIn { from { opacity: 0; transform: scale(.94); } }
.ctx-menu .mi { color: var(--text); font-size: 14px; padding: 9px 18px; display: flex; align-items: center; gap: 8px; width: 100%; text-align: left; }
.ctx-menu .mi:active { background: var(--card); }
.ctx-menu .mi.danger { color: var(--down); }
.ctx-menu .sep { height: 1px; background: var(--border); margin: 4px 0; }

.modal-mask {
  position: fixed; inset: 0; background: rgba(4,6,9,.62); z-index: 900;
  display: flex; align-items: center; justify-content: center; animation: fadeIn .15s;
}
@keyframes fadeIn { from { opacity: 0; } }
.modal {
  width: 82%; max-width: 340px; background: var(--card); border: 1px solid var(--border-soft);
  border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-2);
  animation: modalIn .26s cubic-bezier(.16, 1, .3, 1);   /* UI批5：过阻尼入场（快出缓停），原裸 ease 收尾拖沓 */
}
@keyframes modalIn { from { opacity: 0; transform: scale(.94) translateY(6px); } }
.modal .m-head { padding: 22px 20px 8px; text-align: center; font-size: 16px; font-weight: 650; }
.modal .m-body { padding: 8px 20px 18px; text-align: center; font-size: 14px; color: var(--sub); line-height: 1.65; }
.modal .m-foot { display: flex; border-top: 1px solid var(--border-soft); }
.modal .m-foot button { flex: 1; height: 48px; font-size: 16px; color: var(--sub); }
.modal .m-foot button + button { border-left: 1px solid var(--border-soft); }
.modal .m-foot .strong { color: var(--brand); font-weight: 650; }
.modal .m-foot .warn { color: var(--down); font-weight: 650; }
/* 输入确认弹窗（防误触，如输入「注销」二字）：与 m-body 同宽居中输入框 */
.modal .m-input {
  display: block; width: calc(100% - 40px); margin: 0 20px 16px; padding: 10px 12px;
  background: var(--card-2); border: 1px solid var(--border-soft); border-radius: var(--radius-md);
  color: var(--text); font-size: 15px; text-align: center; outline: none;
}
.modal .m-input:focus { border-color: var(--down); }

/* 用户名片（点击头像弹出，2026-10-15 需求）：头像与名称信息左右一行，信息列左对齐垂直居中 */
.modal.profile-modal .m-head { display: flex; align-items: center; gap: 14px; padding: 24px 20px 18px; text-align: left; }
.profile-modal .p-info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.profile-modal .p-name { font-size: 17px; font-weight: 650; line-height: 1.3; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.profile-modal .p-sub { font-size: 12.5px; color: var(--sub); font-weight: 400; line-height: 1.4; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* 朋友圈设置弹层（我的朋友圈页右上 ⚙）：wx-cell 行原样进弹层，左对齐去 m-body 居中 */
.modal .m-body.m-moments-cfg { text-align: left; padding: 8px 0 4px; }
.modal .m-body.m-moments-cfg .wx-cell { border-bottom: none; border-radius: var(--radius-md); margin: 0 6px; }
.modal .m-body.m-moments-cfg .wx-cell:last-child { margin-bottom: 6px; }

.modal-sheet { width: 100%; max-width: 520px; }
.sheet-title { text-align: center; font-size: 14px; color: var(--sub); padding: 12px; }

#toast-root {
  position: fixed; top: 44%; left: 50%; transform: translateX(-50%); z-index: 1350;   /* 公告视频全屏批 1027：提示层盖过 lightbox(1300)/raised viewer(1250)/forced(1200) */
  display: flex; flex-direction: column; align-items: center; gap: 10px; pointer-events: none;
}
.toast {
  background: rgba(12,14,18,.88); color: #F5F6F8; border: 1px solid rgba(255,255,255,.08);
  border-radius: var(--radius-md); padding: 11px 18px;
  font-size: 14px; max-width: 76vw; text-align: center; animation: toastIn .2s ease;
  box-shadow: var(--shadow-2);
  /* 2026-10-26 老板：提示内容不折行（toast-root 列居中，pill 随文字单行撑宽，76vw 封顶超长省略） */
  white-space: nowrap; text-overflow: ellipsis; overflow: hidden;
}
html.light .toast { background: rgba(31,35,40,.92); }
@keyframes toastIn { from { opacity: 0; transform: translateY(8px); } }
/* 录音提示条：可点按取消（pointer-events 打开） */
.toast.rec-hint { pointer-events: auto; cursor: pointer; }

/* 保存进度 HUD（2026-10-16 老板需求：视频保存全程可见进度）——微信式深色方卡，
   单色圆环+环心百分比；品牌绿/微信红只出现在成败两态。z=1250：toast(1200) 之上、
   lightbox(1300) 之下；下层垫透明拦截层防保存中重复触发 */
.save-hud-veil { position: fixed; inset: 0; z-index: 1249; }
.save-hud {
  position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: 1250;
  width: 124px; padding: 20px 12px 16px; text-align: center;
  background: rgba(12,14,18,.88); color: #F5F6F8; border: 1px solid rgba(255,255,255,.08);
  border-radius: 16px; box-shadow: var(--shadow-2);
  animation: saveHudIn .18s ease;
}
html.light .save-hud { background: rgba(31,35,40,.92); }
@keyframes saveHudIn { from { opacity: 0; transform: translate(-50%, -50%) scale(.92); } }
.save-hud.out { transition: opacity .18s ease; opacity: 0; }
.save-hud .sh-ring { position: relative; width: 46px; height: 46px; margin: 0 auto; }
.save-hud .sh-ring svg { display: block; width: 46px; height: 46px; }
.save-hud .sh-track { stroke: rgba(255,255,255,.16); }
.save-hud .sh-arc { stroke: #F5F6F8; transition: stroke-dashoffset .2s linear; }
.save-hud .sh-arc.spin { animation: shSpin .9s linear infinite; }
@keyframes shSpin { to { transform: rotate(360deg); } }
.save-hud .sh-arc, .save-hud .sh-arc.spin { transform-origin: 50% 50%; }
.save-hud .sh-pct {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  font-size: 12px; font-weight: 600; font-variant-numeric: tabular-nums; letter-spacing: .2px;
}
.save-hud .sh-mark { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; }
.save-hud .sh-mark svg { width: 26px; height: 26px; }
.save-hud.ok .sh-mark { color: #07C160; }
.save-hud.err .sh-mark { color: #FA5151; }
.save-hud .sh-label { margin-top: 10px; font-size: 13px; line-height: 1.4; color: rgba(245,246,248,.92); }
.save-hud.err .sh-label { color: #FF8A8A; }
@media (prefers-reduced-motion: reduce) {
  .save-hud { animation: none; }
  .save-hud .sh-arc.spin { animation: none; }
  .save-hud .sh-arc { transition: none; }
}

/* 安全拦截弹窗 */
.block-modal .m-head { color: var(--down); }
.hotline-card { background: var(--up-bg); border: 1px solid var(--border-soft); border-radius: var(--radius-md); padding: 14px; margin: 6px 0 4px; }
.hotline-card .num { font-size: 24px; font-weight: 700; color: var(--up); letter-spacing: 1px; font-variant-numeric: tabular-nums; }

/* 强制阅读遮罩 */
.force-mask {
  position: absolute; inset: 0; background: rgba(7,9,12,.94); z-index: 500;
  display: flex; flex-direction: column; align-items: center; padding: 8vh 26px 30px; color: #F5F6F8;
}
.force-mask .fm-icon { font-size: 44px; }
.force-mask .fm-title { font-size: 17px; font-weight: 650; margin: 12px 0 4px; }
.force-mask .fm-time { font-size: 12px; color: var(--sub); }
.force-mask .fm-content {
  margin-top: 16px; background: rgba(255,255,255,.07); border-radius: 12px; padding: 16px;
  font-size: 14.5px; line-height: 1.8; overflow-y: auto; max-height: 44vh; white-space: pre-wrap;
}
.force-mask .btn-read {
  margin-top: 22px; background: var(--brand); color: var(--on-brand); border-radius: 24px;
  padding: 12px 46px; font-size: 16px; font-weight: 650;
}

/* —— 群聊信息页（2026-10-13 改版：微信式，原右侧窄抽屉+行内输入框 → 全宽抽屉+卡片分组） —— */
.drawer-mask { position: absolute; inset: 0; background: rgba(4,6,9,.5); z-index: 400; }
.drawer {
  position: absolute; right: 0; top: 0; bottom: 0; width: 100%; max-width: 480px;
  background: var(--bg); z-index: 401; display: flex; flex-direction: column;
  box-shadow: var(--shadow-2); animation: slideIn .22s ease;
}
@keyframes slideIn { from { transform: translateX(100%); } }
/* 页内导航：返回箭头 + 居中标题（微信聊天信息页同款） */
.ginfo-nav { display: flex; align-items: center; height: var(--nav-h); flex-shrink: 0; padding: 0 6px; }
.ginfo-back { width: 42px; height: 42px; display: flex; align-items: center; justify-content: center; color: var(--text); flex-shrink: 0; }
.ginfo-nav-title { flex: 1; text-align: center; font-size: 16px; font-weight: 600; margin-right: 42px; }
.drawer-head { padding: 6px 16px 12px; }
.drawer-head .g-name { font-size: 18px; font-weight: 650; display: flex; align-items: center; gap: 8px; min-width: 0; }
.drawer-head .g-name-txt { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.drawer-head .g-sub { font-size: 12px; color: var(--sub); margin-top: 4px; word-break: break-all; }
.drawer-body { flex: 1; overflow-y: auto; padding-bottom: calc(24px + env(safe-area-inset-bottom)); }
/* 微信式分组卡片：灰底页 + 白底圆角卡 + 8px 侧距 */
.ginfo-card { background: var(--card); border-radius: var(--radius-md); margin: 8px 12px 0; overflow: hidden; }
.ginfo-card .wx-cell { background: var(--card); }
.ginfo-card .wx-cell:last-child { border-bottom: none; }
.ginfo-card .wx-cell .wx-cell-right { max-width: 42vw; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* 群二维码入口图标：单色二维码标识，颜色同「群聊名称」行展示名的字色 var(--sub)
   （2026-10-13 老板二次反馈：不要绿色彩色底，只放一个二维码符号） */
.ginfo-qr-icon { display: flex; color: var(--sub); }
/* 微信式开关（消息免打扰 / 全员禁言 / 加好友策略） */
.wx-switch {
  -webkit-appearance: none; appearance: none; box-sizing: border-box; margin: 0;
  width: 46px; height: 28px; border-radius: 15px; background: var(--card-2);
  border: 1px solid var(--border-soft); position: relative; flex-shrink: 0; cursor: pointer;
  transition: background .15s, border-color .15s;
}
.wx-switch::after {
  content: ''; position: absolute; left: 2px; top: 2px; width: 22px; height: 22px; border-radius: 50%;
  background: #fff; box-shadow: 0 1px 4px rgba(0,0,0,.3); transition: left .15s;
}
.wx-switch:checked { background: var(--brand); border-color: var(--brand); }
.wx-switch:checked::after { left: calc(100% - 24px); }
/* 群成员网格：minmax(0,1fr) 是关键——1fr(=minmax(auto,1fr)) 的 auto 下限会被长昵称的
   min-content 撑到 134px/列，5 列 710px 横向挤出抽屉；0 下限允许列收缩自适应容器宽 */
.member-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); padding: 12px 8px 6px; gap: 8px; }
.member-cell { display: flex; flex-direction: column; align-items: center; gap: 5px; cursor: pointer; padding: 4px 0; border-radius: var(--radius-sm); min-width: 0; }
.member-cell:active { background: var(--card-2); }
.member-cell .nick { font-size: 12px; color: var(--sub); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%; min-width: 0; }   /* 设计修复批A：11→12px */
.role-tag { font-size: 11px; border-radius: 4px; padding: 2px 6px; font-weight: 600; }   /* 设计修复批A/D：9→11px；padding 0 4px→2px 6px（触达） */
.role-tag.owner { background: rgba(240,185,11,.15); color: var(--brand); }
html.light .role-tag.owner { background: rgba(7,193,96,.14); color: var(--brand); }
.role-tag.admin { background: var(--info-bg); color: var(--info); }
.role-tag.official { background: rgba(240,185,11,.15); color: var(--brand); }
.red-dot { position: absolute; right: -1px; top: -1px; width: 9px; height: 9px; background: var(--down); border-radius: 50%; border: 1.5px solid var(--card); }

/* 置底按钮 */
.jump-bottom {
  position: absolute; right: 14px; bottom: 130px; width: 42px; height: 42px; border-radius: 50%;
  background: var(--card); border: 1px solid var(--border-soft); box-shadow: var(--shadow-1);
  display: flex; align-items: center; justify-content: center; font-size: 18px; z-index: 20; color: var(--sub);
  overflow: visible;
}

/* ============ 8. 管理端 / 通用 cell ============ */
.admin-page { background: var(--bg); }
.admin-tabs { display: flex; background: var(--card); border-bottom: 1px solid var(--border-soft); flex-shrink: 0; }
.admin-tabs button { flex: 1; height: 44px; font-size: 13.5px; color: var(--sub); border-bottom: 2px solid transparent; }
.admin-tabs button.on { color: var(--brand); border-bottom-color: var(--brand); font-weight: 650; }
.admin-card { background: var(--card); margin: 10px 12px; border: 1px solid var(--border-soft); border-radius: var(--radius-md); padding: 12px; font-size: 13px; box-shadow: var(--shadow-1); }
.admin-card .row { display: flex; gap: 8px; margin: 3px 0; }
.admin-card .k { color: var(--sub); width: 70px; flex-shrink: 0; }
.admin-card .v { flex: 1; word-break: break-all; }
.admin-card .ops { display: flex; gap: 8px; margin-top: 8px; }
.admin-card .ops button { border: 1px solid var(--brand); color: var(--brand); border-radius: 6px; padding: 8px 14px; font-size: 12px; }   /* 设计修复批D：4px 12px→8px 14px（触达） */
.admin-card .ops button.reject { border-color: var(--down); color: var(--down); }
.admin-form { display: flex; flex-direction: column; gap: 8px; margin: 10px 12px; }
.admin-form input, .admin-form select, .admin-form textarea {
  height: 38px; border: 1px solid var(--border); border-radius: var(--radius-md); padding: 0 10px; font-size: 14px; background: var(--card);
}
.admin-form select { color: var(--text); }
.admin-form textarea { height: auto; padding: 8px 10px; }
.admin-form .inline { display: flex; gap: 8px; }
.admin-form .inline > * { flex: 1; }
.sev-severe { color: var(--down); font-weight: 600; }
.sev-medium { color: var(--orange); font-weight: 600; }
.sev-light { color: var(--sub); }
.stat-pill { font-size: 11px; padding: 1px 8px; border-radius: 9px; background: var(--chip-bg); color: var(--sub); }
.stat-pill.pending { background: var(--down-bg); color: var(--down); }

/* 我的页 / 设置列表 */
.cell {
  background: var(--bg); padding: 14px 16px; display: flex; align-items: center; gap: 10px;
  border-bottom: 1px solid var(--border-soft); font-size: 15px;
}
.cell:active { background: var(--card-2); }
.cell .icon { font-size: 20px; width: 26px; }
.cell .grow { flex: 1; }
.cell .arrow { color: var(--faint); }
.cell input[type=text], .cell input[type=checkbox] { accent-color: var(--brand); }
.cell input[type=text] { border: 1px solid var(--border); background: var(--bg-soft); border-radius: 6px; padding: 6px 10px; font-size: 13px; width: 140px; }

/* 图片查看器（z-index 1300：强制公告弹层 1200 之上——弹层内点图大图必须可见，审计 F-1） */
.lightbox { position: fixed; inset: 0; background: rgba(2,3,5,.94); z-index: 1300; display: flex; align-items: center; justify-content: center; overflow: hidden; }
.lightbox img { max-width: 96vw; max-height: 90vh; transition: transform .15s; }
.lb-counter { position: absolute; top: 16px; left: 50%; transform: translateX(-50%); color: rgba(255,255,255,.92); font-size: 14px; font-weight: 600; text-shadow: 0 1px 3px rgba(0,0,0,.6); pointer-events: none; user-select: none; }
/* 2026-10-12 mximg：关闭钮改灰底白边圆钮（客户鸿蒙机 '✕' 字形渲染空白+黑底圆不可辨实锤），
   44px 触达（安卓最小可点标准），safe-area 防刘海/挖孔遮挡；叉本体=SVG 线条（util.js xSvg，零字体依赖） */
.lightbox .lb-close { position: absolute; top: calc(10px + env(safe-area-inset-top)); right: 14px; z-index: 2; width: 44px; height: 44px; display: flex; align-items: center; justify-content: center; color: #fff; font-size: 22px; background: rgba(70,70,70,.55); border: 1px solid rgba(255,255,255,.5); border-radius: 50%; padding: 0; }

/* 桌面端适配 */
@media (min-width: 521px) {
  body { background: var(--outside); }
}
/* 样式表版本标记（GW-261107-013）：app.js 启动时与 MX_WEB_VER 对拍，错配（新脚本 + 旧样式表）就强制重载样式表。
   写成 v=数字 的形式，升版本号的 sed / bump_ver.py 会一并替换 */
:root { --mx-css-ver: 'v=1426'; }

.login-ver { text-align: center; font-size: 12px; color: var(--faint); margin-top: 14px; letter-spacing: .05em; }   /* 设计修复批A：11→12px */

/* ============ 12. 微信式组件（底部Tab / 通讯录单元格 / 资料页 / 按钮体系） ============ */

/* —— 底部 Tab 栏 —— */
/* position+z-index：会话行 .conv-item 是 positioned z-index:1（左滑按钮垫底所需），
   无层级的 tabbar 会被列表末行盖住 C 位凸起圆钮的上半（"返回消息页圆被砍掉"根因）——
   提到底栏层级与顶栏一致，圆钮恒浮于列表之上 */
.tabbar {
  flex-shrink: 0; display: flex; background: var(--bg-soft);
  border-top: 1px solid var(--border-soft);
  padding: 5px 0 calc(5px + env(safe-area-inset-bottom, 0px));
  position: relative; z-index: 10;
}
.tab-item { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 1px; padding: 3px 0 1px; color: var(--sub); }
.tab-item .tab-ico { position: relative; display: flex; align-items: center; justify-content: center; height: 28px; }
.tab-item .tab-label { font-size: 12px; letter-spacing: 0; }   /* 设计修复批A：10.5→12px */
.tab-item.on { color: var(--brand); }
.tab-badge {
  position: absolute; top: -4px; left: calc(50% + 6px);
  min-width: 16px; height: 16px; padding: 0 4px; border-radius: 8px;
  background: var(--down); color: #fff; font-size: 11px; line-height: 16px; text-align: center;   /* 设计修复批A：10→11px（纯数字角标下限） */
}
.page-body.has-tabbar { padding-bottom: 0; }

/* —— C位凸起圆钮（猫道出行）：渐变绿圆钮浮出底栏 —— */
.tab-item.tab-center .tab-ico { height: 34px; align-items: flex-start; }
/* ===== 图标 mask 染白（2026-11-07 老板指定图标）：PNG 遮罩+背景白，随容器染色 ===== */
.mx-ico-mall, .mx-ico-live { display: inline-block; background-color: #fff; -webkit-mask: var(--mx-mask) center / contain no-repeat; mask: var(--mx-mask) center / contain no-repeat; }
.mx-ico-mall { --mx-mask: url(../light/car.png); width: 29px; height: 29px; }
.mx-ico-live { --mx-mask: url(../light/live.png); width: 21px; height: 21px; }

/* ===== 公让云商城 C 位（2026-11-07 灵感AI改版，老板拍板稿）：公让云品牌橙渐变 + 购物袋图标；直播 C 位退役 ===== */
.tab-center-circle.mall { background: linear-gradient(135deg, #FF9A62, #FF5000); box-shadow: 0 4px 12px rgba(255, 80, 0, .35); }
.tab-item.tab-center .tab-label { color: #FF5000; font-weight: 600; }

/* ===== 直播闪动通知条（2026-11-07 灵感AI改版）：消息列表搜索栏下方，仅直播进行时出现 =====
 * 动效三件：绿底呼吸光圈（盒阴影外扩）/ LIVE 红标 1.1s 闪烁 / 封面右下红点脉冲——全部 transform/opacity/box-shadow */
.mx-live-bar { margin: 0 12px 8px; border-radius: 12px; background: linear-gradient(100deg, #07C160, #06AD56); display: flex; align-items: center; gap: 10px; padding: 8px 10px; cursor: pointer; animation: mxlbGlow 1.6s ease-in-out infinite; }
.mx-live-bar.hidden { display: none; }
@keyframes mxlbGlow { 0%, 100% { box-shadow: 0 0 0 0 rgba(7, 193, 96, .45); } 50% { box-shadow: 0 0 0 7px rgba(7, 193, 96, 0); } }
.mx-live-bar .cov { position: relative; width: 38px; height: 38px; border-radius: 9px; background: #FF5000; display: grid; place-items: center; font-size: 19px; flex: none; }
.mx-live-bar .cov .eq { position: absolute; right: -3px; bottom: -3px; width: 12px; height: 12px; border-radius: 50%; background: #FA5151; border: 2px solid #fff; animation: mxlbDot .9s ease-in-out infinite; }
@keyframes mxlbDot { 50% { transform: scale(.55); opacity: .6; } }
.mx-live-bar .tx { flex: 1; min-width: 0; }
.mx-live-bar .l1 { display: flex; align-items: center; gap: 6px; }
.mx-live-bar .pill { background: #FA5151; color: #fff; font-size: 9.5px; font-weight: 800; border-radius: 4px; padding: 1px 5px; letter-spacing: .5px; flex: none; animation: mxlbPill 1.1s steps(2) infinite; }
@keyframes mxlbPill { 50% { opacity: .35; } }
.mx-live-bar .tt { color: #fff; font-size: 13px; font-weight: 650; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mx-live-bar .l2 { color: rgba(255, 255, 255, .85); font-size: 11px; margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mx-live-bar .go { background: #fff; color: #06AD56; font-size: 12px; font-weight: 700; border-radius: 14px; padding: 5px 12px; border: 0; flex: none; cursor: pointer; }
.mx-live-bar .x { background: none; border: 0; color: rgba(255, 255, 255, .75); font-size: 13px; padding: 4px 2px; flex: none; cursor: pointer; }

/* 「我」页直播行（在播呼吸）——与闪动条同源状态，浅红晕提醒 */
.me-group .wx-cell.mx-live-cell { animation: mxlbCell 1.8s ease-in-out infinite; }
@keyframes mxlbCell { 0%, 100% { box-shadow: 0 0 0 0 rgba(250, 81, 81, .25); } 50% { box-shadow: 0 0 12px 2px rgba(250, 81, 81, .14); } }

.tab-center-circle {
  /* position:relative：直播播放中动效的信号环伪元素需要定位原点（2026-10-16） */
  position: relative;
  width: 50px; height: 50px; margin-top: -25px; border-radius: 50%;
  background: linear-gradient(135deg, #07C160, #059048);
  color: #fff; display: flex; align-items: center; justify-content: center;
  border: 2.5px solid var(--bg-soft);
  box-shadow: 0 4px 12px rgba(7,193,96,.35), 0 1px 3px rgba(0,0,0,.10);
  transition: transform .15s ease, box-shadow .15s ease;
}
.tab-item.tab-center:active .tab-center-circle { transform: scale(.92); }
.tab-item.tab-center.on .tab-center-circle {
  transform: scale(1.06);
  box-shadow: 0 6px 16px rgba(7,193,96,.48), 0 1px 3px rgba(0,0,0,.10);
}
.tab-item.tab-center.on .tab-label { color: var(--brand-deep); font-weight: 600; }

/* —— 直播播放中动效（2026-10-16 老板需求，设计稿 mockups/live-tab-playing-motion.html v2 定稿）——
   有直播在播（主站推 live_onair_count>0）时观众端 C 位圆钮挂 .live：
   ① 播放三角换三根白音条错拍跳动（正在播放）② 两道品牌绿信号环外扩（正在播出）
   ③ 光晕同拍呼吸；标签「直播」→「直播中」带绿点。主播端（开播）与邻近 tab 一律不动；
   全程只用品牌绿——红色是未读/危险唯一语义色，不作装饰。 */
.tab-center-circle.live { animation: mx-live-breathe 2.4s ease-in-out infinite; }
.tab-center-circle.live::before,
.tab-center-circle.live::after {
  content: ''; position: absolute; inset: 0; border-radius: 50%;
  border: 2px solid var(--brand); opacity: 0; pointer-events: none;
  animation: mx-live-ring 2.4s cubic-bezier(.16,.84,.44,1) infinite;
}
.tab-center-circle.live::after { animation-delay: 1.2s; }
@keyframes mx-live-ring {
  0%   { transform: scale(1);    opacity: .55; }
  70%  { transform: scale(1.72); opacity: 0; }   /* 50px 圆环扩到 86px 后消隐 */
  100% { transform: scale(1.72); opacity: 0; }
}
@keyframes mx-live-breathe {
  0%, 100% { box-shadow: 0 4px 12px rgba(7,193,96,.35), 0 1px 3px rgba(0,0,0,.10); }
  50%      { box-shadow: 0 5px 18px rgba(7,193,96,.55), 0 1px 3px rgba(0,0,0,.10); }
}
/* 播放键跳动：三根白音条（高 9/16/12px），1.05s 一拍、错拍 0.18s 起落 */
.tab-center-circle .eq { display: flex; align-items: center; gap: 3px; height: 17px; }
.tab-center-circle .eq span {
  width: 3.5px; border-radius: 2px; background: #fff;
  animation: mx-eq-jump 1.05s ease-in-out infinite;
}
.tab-center-circle .eq span:nth-child(1) { height: 9px; }
.tab-center-circle .eq span:nth-child(2) { height: 16px; animation-delay: .18s; }
.tab-center-circle .eq span:nth-child(3) { height: 12px; animation-delay: .36s; }
@keyframes mx-eq-jump {
  0%, 100% { transform: scaleY(.52); }
  35%      { transform: scaleY(1.18); }
  68%      { transform: scaleY(.72); }
}
/* 标签：直播 → 直播中（前置 4px 绿点） */
.tab-label.live-label { color: var(--brand-deep); font-weight: 600; }
.tab-label.live-label::before {
  content: ''; display: inline-block; width: 4px; height: 4px; border-radius: 50%;
  background: var(--brand); margin-right: 3.5px; vertical-align: 1.5px;
}
/* 系统「减弱动效」：音条停跳、信号环退静态柔光（静态仍可辨「直播中」状态） */
@media (prefers-reduced-motion: reduce) {
  .tab-center-circle.live,
  .tab-center-circle.live::before,
  .tab-center-circle.live::after,
  .tab-center-circle .eq span { animation: none; }
  .tab-center-circle.live { box-shadow: 0 5px 18px rgba(7,193,96,.5), 0 1px 3px rgba(0,0,0,.10); }
  .tab-center-circle.live::before { opacity: .35; transform: scale(1.35); }
  .tab-center-circle.live::after { opacity: 0; }
}

/* —— 微信式导航（标题居中，两侧按钮区等宽占位） —— */
.wx-nav .nav-side { flex: 1; display: flex; align-items: center; }
.wx-nav .nav-side.right { justify-content: flex-end; gap: 2px; }
.wx-nav .nav-title { flex: none; }

/* —— 通讯录/列表单元格（微信白底行） —— */
.wx-cell {
  display: flex; align-items: center; gap: 12px;
  background: var(--card); padding: 11px 14px; border-bottom: 1px solid var(--border-soft);
  cursor: pointer; min-height: 54px;
}
.wx-cell:active { background: var(--card-2); }
.wx-cell-ico {
  width: 38px; height: 38px; border-radius: 9px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center; color: #fff;
}
.wx-cell-ico span { display: flex; }
.wx-cell-label { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 15.5px; }
.wx-cell-main { flex: 1; min-width: 0; }
.wx-cell-sub { font-size: 12.5px; color: var(--sub); margin-top: 2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wx-cell-arrow { color: var(--faint); display: flex; }
.wx-cell .badge { margin-left: 8px; }
.wx-cell-right { font-size: 13px; color: var(--sub); margin-right: 2px; }

.contact-letter { background: var(--bg-soft); color: var(--sub); font-size: 12.5px; padding: 4px 14px; }
.contact-empty { text-align: center; color: var(--sub); padding: 44px 20px; font-size: 14px; }
.contact-count { text-align: center; color: var(--faint); font-size: 12px; padding: 14px 0 30px; }
/* 右侧 A-Z 索引条（2026-10-15 微信式拖动快速定位）：固定居右竖排，拖动时中央大字母气泡 */
.contact-rail { position: fixed; right: 6px; top: 50%; transform: translateY(-50%); z-index: 30;   /* 设计修复批H：right 3→6px，离屏幕右缘留出余量 */
  display: flex; flex-direction: column; align-items: center; gap: 1px; padding: 4px 5px; border-radius: 10px;
  touch-action: none; -webkit-user-select: none; user-select: none; cursor: pointer; }
.contact-rail span { font-size: 12px; line-height: 1.35; color: var(--sub); min-width: 15px; text-align: center; }   /* 设计修复批A：11→12px */
.contact-rail span.on { color: #fff; background: var(--brand); border-radius: 999px; }
.contact-rail-bubble { position: fixed; left: 50%; top: 45%; transform: translate(-50%, -50%); z-index: 31;
  width: 58px; height: 58px; border-radius: 14px; background: rgba(0, 0, 0, .58); color: #fff;
  font-size: 28px; font-weight: 600; display: flex; align-items: center; justify-content: center; pointer-events: none; }
.contact-rail-bubble[hidden] { display: none; }

/* —— 新的朋友：请求按钮 —— */
.req-btns { display: flex; gap: 8px; flex-shrink: 0; }
.req-btns button { padding: 6px 14px; border-radius: 5px; font-size: 13px; }
.req-btns .btn-acc { background: var(--brand); color: var(--on-brand); }
.req-btns .btn-rej { background: var(--card-2); color: var(--sub); }
.req-status { font-size: 12.5px; color: var(--faint); flex-shrink: 0; }
/* 已通过的好友请求行：整行可点直达聊天（微信式） */
.req-clickable { cursor: pointer; }
.req-clickable .req-status { margin-right: 2px; }
/* 外链（聊天/朋友圈正文与评论里的网址）：微信式蓝字，长链接换行不撑爆 */
.ext-link { color: var(--wx-link); word-break: break-all; }

.add-friend-input { flex: 1; height: 34px; border: none; border-radius: 6px; padding: 0 10px; font-size: 14px; background: var(--card); color: var(--text); }
.verify-input { width: 100%; height: 38px; border: 1px solid var(--border); border-radius: 6px; padding: 0 10px; font-size: 14px; background: var(--bg-soft); color: var(--text); }

/* —— 资料页 —— */
.profile-head { display: flex; align-items: center; gap: 14px; background: var(--card); padding: 18px 16px; border-bottom: 1px solid var(--border-soft); }
.profile-name { font-size: 19px; font-weight: 600; }
.profile-meta { flex: 1; min-width: 0; }
.profile-actions { padding: 22px 16px 8px; display: flex; gap: 10px; }

/* —— 微信按钮体系 —— */
.btn-wx-primary {
  flex: 1; height: 44px; border-radius: 6px; background: var(--brand); color: var(--on-brand);
  font-size: 15.5px; font-weight: 600;
}
.btn-wx-primary:active { opacity: .85; }

/* —— 系统分享接收页（#/share）—— */
.share-card { display: flex; align-items: center; gap: 12px; margin: 18px 14px; padding: 16px 14px;
  background: var(--card); border-radius: 10px; border: 1px solid var(--border); }
.share-ico { width: 46px; height: 46px; border-radius: 9px; background: var(--card-2);
  display: flex; align-items: center; justify-content: center; font-size: 24px; flex-shrink: 0; }
.share-main { min-width: 0; }
.share-title { font-size: 14.5px; line-height: 1.45; word-break: break-all;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.share-sub { font-size: 12px; color: var(--sub); margin-top: 3px; word-break: break-all; }
.share-act { display: block; width: calc(100% - 28px); margin: 0 14px 12px; height: 46px; border-radius: 8px; }
.share-act.ghost { background: var(--card-2); color: var(--text); }
.share-tip { text-align: center; font-size: 12px; color: var(--faint); margin-top: 14px; padding: 0 20px; min-height: 16px; }
.share-thumb { width: 52px; height: 52px; border-radius: 8px; object-fit: cover; flex-shrink: 0; }

/* —— 微信式链接卡片（聊天气泡 / 朋友圈动态 / 发布器槽共用骨架） —— */
/* 聊天气泡内：白底圆角小卡，标题+域名在左、封面小图在右 */
.msg-bubble.msg-linkcard { padding: 4px !important; background: transparent !important; }
.link-card { display: flex; align-items: center; gap: 10px; width: 232px; max-width: 62vw;
  background: #FFFFFF; border-radius: 8px; padding: 10px; box-sizing: border-box; cursor: pointer; }
.lc-main { flex: 1; min-width: 0; }
.lc-title { font-size: 13.5px; line-height: 1.4; color: #111; word-break: break-all;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.lc-domain { font-size: 11px; color: #9B9B9B; margin-top: 5px; word-break: break-all; }
.lc-thumb { width: 46px; height: 46px; border-radius: 5px; object-fit: cover; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center; font-size: 20px; background: #F2F2F2; }
.lc-noimg { background: #F2F2F2; color: #999; }

/* 朋友圈：标题+域名左、封面 84px 右（微信分享文章到朋友圈的样式） */
.moment-link { display: flex; align-items: center; gap: 10px; margin-top: 8px; padding: 10px;
  background: var(--card-2); border-radius: 8px; cursor: pointer; }
.ml-main { flex: 1; min-width: 0; }
.ml-title { font-size: 14px; line-height: 1.45; word-break: break-all;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.ml-domain { font-size: 11px; color: var(--sub); margin-top: 4px; word-break: break-all; }   /* 设计修复批A：11.5→11px，与 lc/cl-domain 三处链接卡域名统一 */
.ml-thumb { width: 84px; height: 84px; border-radius: 6px; object-fit: cover; flex-shrink: 0; }
.ml-noimg { background: var(--card-2); color: var(--sub); display: flex; align-items: center; justify-content: center; font-size: 26px; }

/* 发布器：链接卡片槽（可移除） */
.composer-link { position: relative; display: flex; align-items: center; gap: 10px; margin: 8px 0 2px;
  padding: 9px 34px 9px 10px; background: var(--card-2); border-radius: 8px; }
.cl-main { flex: 1; min-width: 0; text-align: left; }
.cl-title { font-size: 13.5px; line-height: 1.4; word-break: break-all;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.cl-domain { font-size: 11px; color: var(--sub); margin-top: 3px; word-break: break-all; }
.cl-thumb { width: 44px; height: 44px; border-radius: 5px; object-fit: cover; flex-shrink: 0; }
.cl-noimg { background: var(--card); color: var(--sub); display: flex; align-items: center; justify-content: center; font-size: 20px; }
.cl-del { position: absolute; top: 4px; right: 6px; width: 22px; height: 22px; border-radius: 50%;
  border: none; background: var(--card); color: var(--sub); font-size: 14px; line-height: 1; }
.cl-del::after { content: ''; position: absolute; inset: -9px; }   /* 设计修复批D：热区外扩到 40px，视觉不变 */
.btn-wx-disabled { flex: 1; height: 44px; border-radius: 6px; background: var(--card-2); color: var(--faint); font-size: 15px; }
.btn-wx-danger-ghost {
  display: block; width: calc(100% - 32px); margin: 18px 16px 0; height: 44px;
  border-radius: 6px; background: var(--card); color: var(--down); font-size: 15px;
  border: none;
}
.btn-wx-danger-ghost:active { background: var(--card-2); }

/* —— 「我」页 —— */
.me-head { display: flex; align-items: center; gap: 14px; background: var(--card); padding: 24px 16px; margin-bottom: 8px; }
.me-name { font-size: 21px; font-weight: 700; margin-bottom: 4px; }
.me-meta { flex: 1; min-width: 0; }
.me-group { background: var(--card); border-top: 1px solid var(--border-soft); border-bottom: 1px solid var(--border-soft); margin-bottom: 8px; }
.me-group .wx-cell:last-child { border-bottom: none; }
.me-logout { width: calc(100% - 32px); margin: 18px 16px 0; }
/* 注销账号（2026-09-10）：与退出登录同款红描边，间距收紧 */
.me-cancel { width: calc(100% - 32px); margin: 10px 16px 0; }

/* +面板彩色图标（微信为彩色图形，容器去掉底框） */
.picon { background: transparent; border: none; }
.picon span { display: flex; }

/* 微信式一体顶栏：tab 页导航与页面同底色无边框（浅色下与状态栏融为一体，无白杠） */
.navbar.wx-nav { background: var(--bg); border-bottom: none; }

/* 微信式 @ 浮层：锚定输入栏上方 */
.mention-pop {
  position: absolute; bottom: 100%; left: 8px; right: 8px; max-height: 236px; overflow-y: auto;
  background: var(--card); border-radius: 8px 8px 0 0; box-shadow: var(--shadow-2);
  z-index: 30; padding: 4px 0;
}
.mention-row { display: flex; align-items: center; gap: 10px; padding: 8px 14px; font-size: 14.5px; cursor: pointer; }
.mention-row.on { background: var(--card-2); }
.mention-name { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.input-bar { position: relative; }

/* 聊天背景色卡面板 */
.bg-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; padding: 4px 0 6px; }
.bg-cell { display: flex; flex-direction: column; align-items: center; gap: 6px; cursor: pointer; }
.bg-swatch { width: 52px; height: 52px; border-radius: 10px; border: 2px solid var(--border); }
.bg-cell.on .bg-swatch { border-color: var(--brand); box-shadow: 0 0 0 2px var(--brand-dim); }
.bg-name { font-size: 11.5px; color: var(--sub); }

/* 语音转文字 */
.voice-text { font-size: 12px; color: var(--sub); line-height: 1.5; margin-top: 6px; border-top: 1px dashed var(--bubble-mine-quote); padding-top: 6px; white-space: pre-wrap; word-break: break-all; }
.msg-row:not(.mine) .voice-text { border-top-color: var(--bubble-peer-quote); }
.voice-to-text { font-size: 11px; color: var(--faint); background: none; border: 1px solid var(--border); border-radius: 4px; padding: 2px 8px; margin-top: 6px; }
.voice-to-text:active { background: var(--card-2); }

/* 好友添加提醒卡片（系统通知会话） */
.friend-card { display: flex; align-items: center; gap: 12px; background: var(--card); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 12px 14px; margin: 6px 0; max-width: 86%; }

/* ============ 朋友圈（V2.5，入口已移至底部 Tab） ============ */

.moments-cover { position: relative; height: 150px; margin-bottom: 46px; background: linear-gradient(135deg, #2C3E50, #4CA1AF); }
/* 自定义封面图（2026-10-15 微信式换封面）：cover 铺满居中裁，无图时露出父级默认渐变 */
.moments-cover-img { position: absolute; inset: 0; background-size: cover; background-position: center; }
.moments-me { position: absolute; right: 14px; bottom: -26px; display: flex; align-items: center; gap: 12px; color: #fff; text-shadow: 0 1px 3px rgba(0,0,0,.4); font-size: 15px; }
.moments-me > div:first-child { margin-top: 30px; }
.moment-card { display: flex; gap: 10px; padding: 12px 14px; background: var(--bg); border-bottom: 1px solid var(--border-soft); }
.moment-main { flex: 1; min-width: 0; }
.moment-name { color: var(--wx-link); font-size: 14.5px; font-weight: 600; }
.moment-content { font-size: 14.5px; line-height: 1.5; margin-top: 3px; word-break: break-all; white-space: pre-wrap; }
.moment-loc { font-size: 12px; color: var(--wx-link); margin-top: 4px; }
.moment-time { font-size: 12px; color: var(--faint); margin-top: 4px; }   /* 设计修复批A：11.5→12px */
.moment-del { color: var(--wx-link); margin-left: 10px; }
.moment-grid { display: grid; gap: 4px; margin-top: 6px; }
.moment-grid.n1 { grid-template-columns: 1fr; }
.moment-grid.n2, .moment-grid.n4, .moment-grid.n5, .moment-grid.n7, .moment-grid.n8 { grid-template-columns: repeat(2, 1fr); }
.moment-grid.n3, .moment-grid.n6, .moment-grid.n9 { grid-template-columns: repeat(3, 1fr); }
.moment-grid img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 4px; background: var(--card-2); }
.moment-video video { width: 100%; max-height: 300px; border-radius: 6px; margin-top: 6px; background: #000; }

/* ===== 朋友圈视频微信式首帧封面 + 全屏播放器（v147） ===== */
.moment-video-cover { position: relative; margin-top: 6px; width: min(62%, 240px); aspect-ratio: 3 / 4; max-width: 100%;
  border-radius: 6px; overflow: hidden; background: #000; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.moment-video-cover video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; pointer-events: none; }
/* 2026-10-15 黑屏修复：有真实画面封面的视频帖——img 直出（与 video 同规格铺法，feed 零 video 元件） */
.moment-video-cover img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; pointer-events: none; }
.mvc-play { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 44px; height: 44px; border-radius: 50%;
  background: rgba(0, 0, 0, .45); display: flex; align-items: center; justify-content: center; pointer-events: none; }
.mvc-play svg { margin-left: 2px; filter: drop-shadow(0 1px 3px rgba(0,0,0,.4)); }
.mvc-dur { position: absolute; right: 6px; top: 6px; z-index: 2; border-radius: 4px; padding: 1px 6px;
  background: rgba(0, 0, 0, .55); color: #fff; font-size: 11px; font-variant-numeric: tabular-nums; pointer-events: none; }
.video-player-mask { position: fixed; inset: 0; z-index: 500; background: #000; display: flex; align-items: center; justify-content: center; }
.video-player-mask video { width: 100%; max-height: 100%; max-width: 100%; }
.vp-bar { position: absolute; top: calc(8px + env(safe-area-inset-top)); right: 10px; display: flex; gap: 10px; z-index: 2; }
.vp-close { width: 36px; height: 36px; border: none; border-radius: 50%; background: rgba(255, 255, 255, .16); color: #fff; font-size: 20px; line-height: 1; display: flex; align-items: center; justify-content: center; }
.vp-dl { height: 36px; border: none; border-radius: 18px; background: rgba(255, 255, 255, .16); color: #fff; font-size: 13px;
  display: inline-flex; align-items: center; gap: 5px; padding: 0 14px; text-decoration: none; }
.vp-dl svg { display: block; }
.moment-voice { margin-top: 6px; background: var(--card); border-radius: 6px; padding: 8px 12px; font-size: 13.5px; color: var(--sub); width: fit-content; }
.moment-bar { margin-top: 8px; background: var(--card); border-radius: 6px; padding: 8px 10px; }
.moment-likes { font-size: 13px; color: var(--wx-link); padding-bottom: 6px; border-bottom: 1px solid var(--border-soft); margin-bottom: 6px; }
.moment-comments { font-size: 13px; line-height: 1.7; }
.mc-row { display: flex; flex-wrap: wrap; gap: 2px; }
.mc-name { color: var(--wx-link); font-weight: 500; }
.mc-more { color: var(--wx-link); font-size: 12.5px; margin-top: 4px; }
.mc-reply { color: var(--wx-link); font-size: 12px; margin-left: 8px; }

.composer-text { width: 100%; border: none; background: var(--bg-soft); border-radius: 8px; padding: 10px; font-size: 14.5px; color: var(--text); resize: none; }
.composer-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin-top: 10px; }
.composer-cell { position: relative; aspect-ratio: 1; border-radius: 6px; overflow: hidden; background: var(--card-2); }
.composer-cell img { width: 100%; height: 100%; object-fit: cover; }
.cc-plain { display: flex; align-items: center; justify-content: center; height: 100%; font-size: 13px; color: var(--sub); }
.cc-del { position: absolute; top: 2px; right: 2px; width: 20px; height: 20px; border-radius: 50%; background: rgba(0,0,0,.55); color: #fff; font-size: 13px; }
.cc-del::after { content: ''; position: absolute; inset: -10px; }   /* 设计修复批D：热区外扩到 40px，视觉不变（父格 overflow:hidden 裁至格内） */
.composer-add { aspect-ratio: 1; border: 1.5px dashed var(--border); border-radius: 6px; display: flex; align-items: center; justify-content: center; font-size: 26px; color: var(--faint); }
.ms-list { max-height: 260px; overflow-y: auto; text-align: left; }

/* 建群好友选择 */
.pick-friend { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 6px 2px; border-radius: 8px; border: 1.5px solid transparent; }
.pick-friend.on { border-color: var(--brand); background: var(--brand-dim); }
.pf-name { font-size: 11.5px; color: var(--sub); max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* 评论/发布弹层：输入行 + 宽发送键 + 关闭钮 */
.m-foot.comment-foot { display: flex; gap: 10px; align-items: center; }
.comment-foot .verify-input { flex: 1; }
.comment-send { min-width: 84px !important; height: 40px; border-radius: 8px; font-size: 15px; }
.sheet-close { position: absolute; right: 12px; top: 10px; width: 30px; height: 30px; border-radius: 50%; background: var(--card-2); color: var(--sub); font-size: 16px; display: flex; align-items: center; justify-content: center; }
.sheet-close::after { content: ''; position: absolute; inset: -5px; }   /* 设计修复批D：热区外扩到 40px，视觉不变 */
.modal { position: relative; }

/* 微信式朋友圈点赞评论区 */
.moment-bar { position: relative; margin-top: 14px; background: var(--card-2); border-radius: 5px; padding: 8px 10px 8px; }
.moment-likes { display: flex; gap: 6px; font-size: 13px; color: var(--wx-link); padding-bottom: 2px; }
.ml-heart { font-size: 13px; }
.ml-names { flex: 1; line-height: 1.5; }
.moment-comments { font-size: 13.5px; line-height: 1.6; }
.mc-row { padding: 2px 0; }
.mc-name { color: var(--wx-link); font-weight: 500; }
.mc-more { color: var(--wx-link); font-size: 12.5px; padding-top: 4px; }

/* 微信式评论弹层 */
.wx-comment-modal .m-body { padding: 12px 16px; }
.wx-comment-row { display: flex; gap: 10px; padding: 10px 0; border-bottom: 1px solid var(--border-soft); }
.wx-cmt-main { flex: 1; min-width: 0; }
.mc-reply-to { font-size: 11.5px; color: var(--faint); margin: 1px 0; }
.mc-content { font-size: 14px; line-height: 1.5; margin: 2px 0; word-break: break-all; }
.mc-time { font-size: 12px; color: var(--faint); display: flex; gap: 12px; align-items: center; }   /* 设计修复批A：11→12px */
.mc-reply-btn { color: var(--wx-link); }
.comment-input { flex: 1; height: 38px; border: none; border-radius: 8px; padding: 0 12px; font-size: 14px; background: var(--bg-soft); color: var(--text); }

/* —— 朋友圈铃铛未读红点（微信式小数字角标） —— */
.bell-dot { position: absolute; top: -4px; right: -6px; min-width: 16px; height: 16px; padding: 0 4px; border-radius: 8px; background: var(--down); color: #fff; font-size: 11px; font-weight: 600; display: flex; align-items: center; justify-content: center; line-height: 1; box-shadow: 0 0 0 1.5px var(--bg); pointer-events: none; }   /* 设计修复批A：10→11px */

/* —— 朋友圈消息页（微信式：互动通知列表） —— */
.moment-notif-list { background: var(--bg); }
.moment-notif-row { display: flex; gap: 10px; padding: 12px 14px; border-bottom: 1px solid var(--border-soft); align-items: center; cursor: pointer; }
.moment-notif-row:active { background: var(--bg-soft); }
.mn-main { flex: 1; min-width: 0; }
.mn-line { font-size: 14px; line-height: 1.4; color: var(--text); }
.mn-name { color: var(--wx-link); font-weight: 600; }
.mn-act { color: var(--sub); }   /* 设计修复批H：--text-2 未定义（旁路 token）→ --sub */
.mn-content { font-size: 13px; color: var(--sub); margin-top: 3px; line-height: 1.45; word-break: break-all; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.mn-time { font-size: 11px; color: var(--faint); margin-top: 3px; }
.mn-thumb { width: 46px; height: 46px; border-radius: 5px; object-fit: cover; background: var(--card); flex-shrink: 0; }
.mn-snippet { width: 46px; height: 46px; border-radius: 5px; background: var(--card); flex-shrink: 0; font-size: 11px; color: var(--sub); padding: 4px; overflow: hidden; box-sizing: border-box; line-height: 1.3; text-align: center;
  /* 设计修复批A/B：10→11px；两行截断防长标题溢出 46px 方块（display:flex 居中会引出方块） */
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }

/* —— 点赞评论区微信式精修：有点赞也有评论时中间细线，评论行间距 —— */
.moment-bar.has-both .moment-likes { border-bottom: 1px solid var(--border); padding-bottom: 6px; }
.moment-bar .moment-comments { margin-top: 4px; }
.moment-bar .mc-row + .mc-row { margin-top: 3px; }
.mc-text { color: var(--text); }


/* ===== 朋友圈·点赞评论 UI v128（微信式：时间行右侧操作胶囊 + 底部评论抽屉） ===== */
.moment-time { display: flex; align-items: center; gap: 8px; }
.moment-time .mt-text { font-size: 12px; color: var(--faint); }   /* 设计修复批A：11.5→12px */
.moment-bar { background: var(--bg-soft); border-radius: 8px; padding: 8px 12px; }
.moment-likes { display: flex; align-items: flex-start; gap: 6px; font-size: 13.5px; color: var(--wx-link); line-height: 1.5; padding: 2px 0 6px; }
.moment-likes .ml-heart { flex: none; }
.moment-bar.has-both .moment-likes { border-bottom: 1px solid var(--border-soft); margin-bottom: 4px; }
.moment-comments .mc-row { display: block; font-size: 13.5px; line-height: 1.55; padding: 4px 0; }
.mc-row .mc-name { color: var(--wx-link); font-weight: 600; }
.mc-row .mc-text { color: var(--text); }
.mc-more { color: var(--wx-link); font-size: 12.5px; padding: 6px 0 2px; }

/* 评论底部抽屉（微信式从底部滑出） */
.modal.sheet-btm { position: fixed; left: 0; right: 0; bottom: 0; width: 100%; max-width: 100%; margin: 0; border-radius: 16px 16px 0 0; max-height: 74vh; display: flex; flex-direction: column; animation: sheetUp .28s cubic-bezier(.16, 1, .3, 1); }   /* UI批5：底部抽屉同曲线 */
/* GW-261107-013：桌面上底部抽屉（「我的云贝」/ 评论框等）跟着灵感AI栏走——与 #page 同宽居中、贴住栏底，不再铺满整个视口变成一条白带；
   遮罩照旧铺满视口。须写在上面那条基础规则之后（同特异度，后写的赢） */
@media (min-width: 521px) { .modal.sheet-btm { max-width: 520px; margin: 0 auto; } }
@keyframes sheetUp { from { transform: translateY(40%); opacity: .6; } to { transform: translateY(0); opacity: 1; } }
.wx-comment-modal .m-head { padding: 14px 16px 8px; }
.wx-comment-modal .ms-list-wrap { overflow-y: auto; flex: 1; padding: 4px 16px 8px; }
.wx-comment-modal .wx-comment-row { display: flex; gap: 10px; padding: 10px 0; border-bottom: 1px solid var(--border-soft); }
.wx-comment-modal .wx-comment-row:last-child { border-bottom: none; }
.wx-cmt-main { flex: 1; min-width: 0; }
.wx-cmt-main .mc-content { font-size: 14px; line-height: 1.5; margin: 2px 0 4px; word-break: break-word; }
.wx-cmt-main .mc-time { font-size: 12px; color: var(--faint); display: flex; align-items: center; gap: 12px; }   /* 设计修复批A：11→12px */
.mc-reply-btn { color: var(--wx-link); font-size: 12px; font-weight: 500; }
.mc-reply-to { font-size: 11.5px; color: var(--faint); margin-top: 1px; }
.comment-foot { padding: 10px 14px calc(10px + env(safe-area-inset-bottom)); display: flex; gap: 8px; align-items: center; border-top: 1px solid var(--border-soft); }
.comment-send { min-width: 72px; }


/* ===== v130：朋友圈位置标签 ===== */
.moment-loc { font-size: 12px; color: var(--wx-link); margin-top: 4px; }


/* ===== v139：朋友圈赞/评论改微信同款「··」两点按钮 + 横向弹出胶囊菜单 =====
   取代历代 .moment-acts 常驻胶囊（v126 绝对定位版/v128 行内版/v129 加大版均已删）：
   操作收进「··」按钮，点击弹出深色横条「♡ 赞 | 💬 评论」，点外部任意处收起 */
.moment-time { position: relative; }
.mm-toggle { position: relative; margin-left: auto; flex: none; display: inline-flex; align-items: center; justify-content: center; gap: 4px; width: 36px; height: 18px; padding: 0; border: none; border-radius: 5px; background: var(--bg-soft); box-shadow: inset 0 0 0 1px var(--border-soft); }
.mm-toggle::after { content: ''; position: absolute; inset: -11px -4px; }   /* 设计修复批D：伪元素外扩热区到 40×44px，视觉不变 */
.mm-toggle i { width: 4px; height: 4px; border-radius: 50%; background: var(--wx-link); }
.mm-toggle:active { opacity: .65; }

/* 弹出菜单：锚在时间行右下方，小三角指向「··」按钮 */
.moment-menu { position: absolute; right: 0; top: calc(100% + 7px); z-index: 30; display: none; background: #4C4C4E; border-radius: 7px; box-shadow: 0 6px 16px rgba(0, 0, 0, .32); }
.moment-menu.open { display: flex; align-items: stretch; animation: mmIn .12s ease-out; }
@keyframes mmIn { from { opacity: 0; transform: translateY(-3px); } to { opacity: 1; transform: none; } }
.moment-menu::after { content: ''; position: absolute; top: -4px; right: 12px; width: 10px; height: 10px; background: #4C4C4E; transform: rotate(45deg); border-radius: 2px; }
.mm-divider { flex: none; align-self: stretch; width: 1px; margin: 8px 0; background: rgba(255, 255, 255, .22); }
.moment-menu button { display: flex; align-items: center; gap: 6px; border: none; background: transparent; color: #fff; font-size: 14px; font-weight: 500; padding: 0 22px; height: 38px; }
.moment-menu button:active { background: rgba(255, 255, 255, .14); border-radius: 7px; }
.moment-menu .mm-like.liked svg { color: #FF6B6B; }   /* 已赞：菜单里心形实心红（微信同款） */

/* ===== v3 官方客服（通讯录置顶 / AI 转人工按钮） ===== */
.kefu-head { color: #B07800; font-weight: 700; }
.kefu-cell .kefu-tag { display: inline-block; margin-left: 6px; font-size: 11px; font-weight: 700; border-radius: 6px; padding: 1px 6px; vertical-align: 1px; }
.kefu-tag.ai { color: #2F6BFF; background: #EBF1FF; }
.kefu-tag.manual { color: #B07800; background: #FFF1DE; }
.handoff-btn { display: block; margin-top: 8px; border: none; border-radius: 16px; background: #E55A00; color: #fff; font-size: 13px; font-weight: 700; padding: 8px 18px; cursor: pointer; }   /* 设计修复批E：底 #FF6700→#E55A00（白字对比 ≥4.5） */
.handoff-btn:disabled { opacity: .6; }

/* ===== 8.31v2-X3：朋友圈时间行窄屏防溢出（时间+删除+「··」按钮挤压换行错乱） ===== */
.moment-time { flex-wrap: wrap; row-gap: 4px; min-width: 0; padding: 2px 0; }
.moment-time .mt-text { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.moment-del { flex: none; }

/* ===== 8.31v2-X4：朋友圈发布器素材上传状态角标 ===== */
.cc-state { position: absolute; left: 4px; bottom: 4px; z-index: 2; border-radius: 9px; padding: 1px 7px; font-size: 11px; font-weight: 700; color: #fff; background: rgba(0,0,0,.55); pointer-events: none; }
.cc-state.uploading { background: rgba(47,107,255,.85); animation: ccPulse 1.1s infinite; }
.cc-state.done { background: rgba(7,193,96,.88); }
.cc-state.fail { background: rgba(229,72,77,.9); pointer-events: auto; cursor: pointer; }
/* v140：视频上传中占位（spinner+文案；图/视频二选一、选视频即传） */
.cc-uploading { flex-direction: column; gap: 7px; font-size: 12.5px; }
.cc-spin { width: 22px; height: 22px; border-radius: 50%; border: 2.5px solid var(--border); border-top-color: var(--brand); animation: ccSpin .8s linear infinite; }
@keyframes ccSpin { to { transform: rotate(360deg); } }

/* ===== v141：全屏取景相机 + 微信式照片编辑器（涂鸦/马赛克/文字/裁剪） ===== */
.cam-mask { position: fixed; inset: 0; z-index: 450; background: #000; display: flex; flex-direction: column; }
.cam-mask video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.cam-top { position: relative; z-index: 2; display: flex; padding: calc(10px + env(safe-area-inset-top)) 14px 10px; }
.cam-x { width: 34px; height: 34px; border: none; border-radius: 50%; background: rgba(0,0,0,.45); color: #fff; font-size: 20px; line-height: 1; display: flex; align-items: center; justify-content: center; }
.cam-bar { position: relative; z-index: 2; margin-top: auto; display: flex; align-items: center; justify-content: space-around; padding: 18px 30px calc(26px + env(safe-area-inset-bottom)); background: rgba(0,0,0,.35); }
.cam-shutter { width: 68px; height: 68px; border-radius: 50%; border: 4px solid #fff; background: #fff; box-shadow: 0 0 0 2px rgba(0,0,0,.2), inset 0 0 0 2px rgba(0,0,0,.1); cursor: pointer; }
.cam-shutter:active { transform: scale(.92); }
.cam-album { width: 44px; height: 44px; border-radius: 10px; border: none; background: rgba(255,255,255,.18) center/cover no-repeat; color: #fff; font-size: 11px; }
.cam-album::after { content: '相册'; display: block; margin-top: 26px; }
.cam-flip { width: 44px; height: 44px; border-radius: 50%; border: none; background: rgba(255,255,255,.18); color: #fff; display: flex; align-items: center; justify-content: center; }

.pe-mask { position: fixed; inset: 0; z-index: 460; background: #111; display: flex; flex-direction: column; }
.pe-top { display: flex; align-items: center; justify-content: space-between; padding: calc(10px + env(safe-area-inset-top)) 16px 10px; background: #111; color: #fff; }
.pe-cancel { border: none; background: none; color: #fff; font-size: 15px; }
.pe-title { font-size: 15px; font-weight: 600; }
.pe-done { border: none; border-radius: 14px; background: #07C160; color: #fff; font-size: 14px; font-weight: 700; padding: 7px 18px; }
.pe-done:active { opacity: .8; }
.pe-stage { flex: 1; min-height: 0; display: flex; align-items: center; justify-content: center; overflow: hidden; }
.pe-canvas { touch-action: none; max-width: 100%; max-height: 100%; box-shadow: 0 2px 18px rgba(0,0,0,.5); }
.pe-tools { display: flex; align-items: center; justify-content: space-around; padding: 10px 8px 6px; background: #1b1b1b; }
.pe-tool { border: none; background: none; color: #bbb; font-size: 11.5px; display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 4px 14px; }
.pe-tool.on { color: #07C160; }
.pe-tool .pt-ico { display: flex; }
.pe-undo { border: none; background: none; color: #bbb; font-size: 11.5px; display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 4px 14px; }
.pe-undo:active { color: #fff; }
.pe-sub { display: flex; align-items: center; gap: 14px; padding: 10px 18px calc(12px + env(safe-area-inset-bottom)); background: #1b1b1b; }
.pe-dot { width: 24px; height: 24px; border-radius: 50%; border: 2px solid transparent; box-shadow: 0 0 0 1px rgba(255,255,255,.35); cursor: pointer; flex: none; }
.pe-dot.on { border-color: #07C160; transform: scale(1.12); }
.pe-size { border: 1px solid rgba(255,255,255,.3); background: none; color: #ccc; border-radius: 12px; padding: 3px 12px; font-size: 12.5px; }
.pe-size.on { background: #07C160; border-color: #07C160; color: #fff; }
.pe-mini { border: 1px solid rgba(255,255,255,.3); background: none; color: #ccc; border-radius: 14px; padding: 6px 20px; font-size: 13.5px; }
.pe-mini.ok { background: #07C160; border-color: #07C160; color: #fff; font-weight: 700; }
@keyframes ccPulse { 0%,100% { opacity: .75; } 50% { opacity: 1; } }

/* ===== 个人信息页（views/profile.js）===== */
.pf-row-right { display: flex; align-items: center; gap: 6px; min-width: 0; }
.pf-row-text { font-size: 13px; color: var(--sub); max-width: 46vw; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pf-tip { text-align: center; font-size: 11.5px; color: var(--faint); padding: 14px 16px 24px; }
.pf-emoji-mask { position: fixed; inset: 0; background: rgba(0,0,0,.45); z-index: 300; display: flex; align-items: flex-end; justify-content: center; }
.pf-emoji-sheet { width: 100%; max-width: 480px; background: var(--card); border-radius: 16px 16px 0 0; padding: 16px 16px calc(16px + env(safe-area-inset-bottom)); }
.pf-emoji-title { font-size: 15px; font-weight: 600; margin-bottom: 12px; text-align: center; }
.pf-emoji-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 10px; }
.pf-emoji { height: 52px; padding: 0; border: none; background: var(--card-2); border-radius: var(--radius-md); cursor: pointer; overflow: hidden; }
.pf-emoji img { width: 100%; height: 100%; object-fit: contain; display: block; }
.pf-emoji:active { transform: scale(.92); }
.pf-emoji-mask .pf-prompt { margin: auto; border-radius: 16px; width: calc(100% - 48px); max-width: 340px; padding: 18px 16px 14px; display: flex; flex-direction: column; gap: 12px; }
.pf-input { height: 42px; border: 1px solid var(--border); background: var(--card-2); border-radius: var(--radius-md); padding: 0 12px; font-size: 15px; color: var(--text); outline: none; }
.pf-input:focus { border-color: var(--brand); }
.pf-prompt-ops { display: flex; gap: 10px; }
.pf-btn { flex: 1; height: 40px; border: none; border-radius: var(--radius-md); background: var(--brand); color: var(--on-brand); font-size: 14.5px; font-weight: 600; cursor: pointer; }
.pf-btn.ghost { background: var(--card-2); color: var(--sub); }
.me-head-link { cursor: pointer; }
.me-head-link:active { opacity: .8; }

/* 报备随行人员标签 */
.md-comp { display: inline-flex; align-items: center; gap: 6px; background: var(--card); border: 1px solid var(--border-soft); border-radius: 14px; padding: 4px 6px 4px 10px; font-size: 12px; color: var(--text); }
.md-comp-x { cursor: pointer; color: var(--sub); padding: 0 4px; font-size: 13px; }
.md-comp-x:hover { color: var(--down); }

/* 司机任务卡片（司机专属频道，开始/结束任务按钮）；2026-10-25 老板：派单卡加大——占满通道 + 行级负边距外扩 */
.driver-task-card { background: var(--card); border: 1px solid var(--border); border-radius: 10px; padding: 14px; max-width: none; }
.msg-col.wide { max-width: 100%; }
.msg-row.wide { margin-left: -6px; margin-right: -6px; }
/* GEO 内部任务提醒卡片（「内部任务助手」私聊）+「我」页员工 cell 角标（M2） */
.gi-card { background: var(--card); border: 1px solid var(--border); border-radius: 10px; padding: 12px 12px 0; width: min(280px, 72vw); cursor: pointer; -webkit-tap-highlight-color: transparent; }
.gi-card:active { background: var(--card-2); }
.gi-card-title { font-size: 15px; font-weight: 600; color: var(--text); line-height: 1.4; word-break: break-word; }
.gi-card-desc { font-size: 13px; color: var(--sub); line-height: 1.55; margin-top: 6px; word-break: break-word; white-space: pre-line; }
.gi-card-foot { display: flex; justify-content: space-between; align-items: center; margin-top: 10px; padding: 9px 0 10px; border-top: 1px solid var(--border-soft); font-size: 12.5px; color: var(--sub); }
.gi-card-foot svg { opacity: .7; }
/* 审批提醒卡片（「审批助手」私聊，apprv1020 M3）：沿用内部任务卡片骨架 + 种类标签 */
.ap-tag { display: inline-block; font-size: 11.5px; line-height: 1; padding: 4px 7px; border-radius: 6px; margin-bottom: 7px; font-weight: 600; }
.ap-tag-todo { color: #fff; background: var(--brand, #07c160); }
.ap-tag-done { color: var(--brand, #07c160); background: rgba(7, 193, 96, .1); }
.ap-tag-off { color: var(--sub); background: var(--card-2); }
.ap-tag-warn { color: #A05000; background: rgba(250, 140, 22, .12); }   /* 设计修复批E：#d46b08→#A05000（浅底对比达标） */
.mx-geoint-badge { display: inline-block; min-width: 18px; height: 18px; line-height: 18px; padding: 0 5px; margin-left: 8px; border-radius: 9px; background: var(--down); color: #fff; font-size: 11px; font-weight: 600; text-align: center; vertical-align: 2px; box-sizing: border-box; }
.dt-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; font-size: 15.5px; gap: 8px; }
.dt-pill { font-size: 12px; padding: 2px 8px; border-radius: 9px; white-space: nowrap; }
.dt-pill.assigned { background: rgba(240,185,11,.15); color: var(--gold-text); }   /* 设计修复批E：金字走 --gold-text（深 #F0B90B / 浅 #8A6A00） */
.dt-pill.started { background: rgba(7,193,96,.15); color: var(--brand); }
.dt-pill.finished { background: rgba(74,144,217,.15); color: #4A90D9; }
.dt-fields { border-top: 1px solid var(--border-soft); }
.dt-row { display: flex; font-size: 13.5px; padding: 7px 0; border-bottom: 1px dashed var(--border-soft); }
.dt-row .k { color: var(--sub); flex: none; width: 100px; white-space: nowrap; }   /* 2026-10-25 老板：以「到达考察点时间」为列线，标签不折行 */
/* min-width:0 允许值列收缩换行（多人/长地址不再撑爆卡片）；pre-line 让考察人员按 \n 一人一行 */
.dt-row .v { color: var(--text); flex: 1; min-width: 0; word-break: break-all; white-space: pre-line; }
.dt-ops { margin-top: 10px; display: flex; justify-content: center; }
.dt-btn { width: 100%; border: none; border-radius: 8px; padding: 10px; font-size: 15px; font-weight: 600; cursor: pointer; }
.dt-btn.start { background: var(--brand); color: #fff; }
.dt-btn.finish { background: var(--down); color: #fff; }
.dt-btn:disabled { opacity: .6; }
.dt-done { text-align: center; color: var(--brand); font-size: 13px; padding: 6px 0; }

/* —— 登录页 v149：验证码/账号密码双 tab + 自动 SSO 提示 —— */
.login-seg { display: flex; gap: 0; margin-bottom: 12px; border: 1px solid var(--border); border-radius: 8px; overflow: hidden; }
.seg-btn { flex: 1; padding: 9px 0; font-size: 14px; border: none; background: var(--bg); color: var(--sub); cursor: pointer; }
.seg-btn.on { background: var(--brand); color: #fff; font-weight: 600; }
.login-row { display: flex; gap: 8px; }
.login-row input { flex: 1; min-width: 0; }
.login-row .btn-code { flex-shrink: 0; width: 96px; border: none; border-radius: 8px; background: var(--brand); color: #fff; font-size: 13px; cursor: pointer; }
.login-row .btn-code:disabled { opacity: .55; }
.login-tip { margin: 0 0 10px; padding: 9px 12px; border-radius: 8px; background: var(--down-bg); color: var(--down); font-size: 13px; text-align: center; }
.login-reg-link { display: block; text-align: center; font-size: 14px; color: var(--brand); font-weight: 600; padding: 4px 0; text-decoration: none; }

/* —— 密码框小眼睛（2026-10-01 需求#2，微信式显示/隐藏切换）—— */
.pwd-eye-wrap { position: relative; display: flex; align-items: center; flex: 1; min-width: 0; }
.pwd-eye-wrap input { flex: 1; min-width: 0; width: 100%; box-sizing: border-box; padding-right: 40px; }
.pwd-eye { position: absolute; right: 4px; top: 50%; transform: translateY(-50%); border: none; background: none; padding: 8px; display: flex; align-items: center; cursor: pointer; color: var(--sub); opacity: .8; }
.pwd-eye:active { opacity: 1; }
.as-dlg .pwd-eye-wrap { flex: none; width: 100%; margin-bottom: 10px; }
.as-dlg .pwd-eye-wrap input { margin-bottom: 0; }
.pwd-masked { -webkit-text-security: disc; }   /* text 型密码打码：与主站 PasswordInput 同源，密码管理器全套弹框不再出现 */
.pwd-eye-wrap input::-ms-reveal, .pwd-eye-wrap input::-ms-clear { display: none; }

/* ===== 切换账号（会话58）===== */
.as-empty { padding: 36px 16px; text-align: center; color: var(--sub); font-size: 13px; line-height: 1.7; }
.as-row { gap: 12px; align-items: center; }
.as-row:active { background: var(--bg); }
.as-cur { background: rgba(7, 193, 96, .07); }
.as-badge { margin-left: 6px; font-size: 11px; background: #07C160; color: #fff; border-radius: 4px; padding: 2px 6px; font-weight: 700; vertical-align: 2px; }   /* 设计修复批A：10→11px */
.as-ops { display: flex; gap: 6px; }
.as-op { position: relative; width: 30px; height: 30px; border-radius: 50%; border: 1px solid var(--border-soft); background: transparent; color: var(--sub); font-size: 13px; cursor: pointer; }
.as-op::after { content: ''; position: absolute; inset: -5px; }   /* 设计修复批D：热区外扩到 40px，视觉不变 */
.as-danger { color: var(--down); }
.as-add { display: block; width: calc(100% - 24px); margin: 4px 12px 10px; }
.as-tips { padding: 4px 16px 24px; text-align: center; color: var(--sub); font-size: 12px; line-height: 1.8; }
.as-mask { position: fixed; inset: 0; background: rgba(0,0,0,.45); display: flex; align-items: center; justify-content: center; z-index: 300; }
.as-dlg { width: min(86vw, 330px); background: var(--card); border-radius: 14px; padding: 18px 16px 14px; }
.as-dlg h3 { margin: 0 0 8px; font-size: 16px; }
.as-dlg-tip { font-size: 12px; color: var(--sub); margin-bottom: 10px; line-height: 1.5; }
.as-input { width: 100%; box-sizing: border-box; margin-bottom: 10px; padding: 10px 12px; border-radius: 8px; border: 1px solid var(--border-soft); background: var(--bg); color: var(--text); font-size: 14px; }
.as-dlg-btns { display: flex; gap: 10px; }
.as-dlg-btns .btn-wx-primary, .as-dlg-btns button { flex: 1; }
.btn-wx-ghost { border: none; border-radius: 8px; background: var(--bg); color: var(--text); height: 40px; font-size: 14px; font-weight: 600; cursor: pointer; }
.btn-wx-ghost:active { opacity: .8; }

/* ===== 修复：评论输入栏大字体手机撑满挤掉发送键 + 超长评论部分机型溢出屏幕（2026-09-03） =====
   ① 输入框：<input> 在 flex 行内默认 min-width:auto（intrinsic 宽度随系统字号放大，
      大字体手机可达 300px+）会把整行撑破、发送键被推出屏外——min-width:0 允许收缩，
      发送键 flex:none 固定宽度（须用 .modal .m-foot .comment-send 三级选择器压过
      「.modal .m-foot button { flex:1 }」的 0,2,1 特异性，否则按钮仍会被拉扯）；
   ② 超长评论：信息流预览行 .mc-text 原本无任何断行规则；弹层 .mc-content 原用
      非标准值 word-break:break-word（不认该值的 WebView 引擎整条丢弃→完全不断行）。
      统一标准 word-break:break-all + overflow-wrap:anywhere 双保险；
   ③ 兜底：body 禁横向溢出，任何极端内容（长URL/连续emoji等）都不允许溢出画面。 */
.comment-input { flex: 1 1 0; min-width: 0; }
.comment-foot .verify-input { min-width: 0; }
.modal .m-foot .comment-send { flex: none; white-space: nowrap; }
.mc-text { word-break: break-all; overflow-wrap: anywhere; }
.wx-cmt-main .mc-content { word-break: break-all; overflow-wrap: anywhere; }
.moment-likes .ml-names { min-width: 0; word-break: break-all; }
html, body { overflow-x: hidden; }

/* ===== v1197 轻动效（ui-arsenal 工作台首批）：仅 transform/opacity，动画结束不占布局 ===== */
/* 新消息进场：略微上浮淡入（appendMessage 加 msg-in 类；历史消息 renderAll 不加，防长列表整体抖动） */
@keyframes msgIn { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
.msg-in { animation: msgIn .32s cubic-bezier(.22, 1, .36, 1); }
/* 发送中小转环（替代原静态 🔄 emoji）：与 ✓✓ 已送达同行的状态指示 */
@keyframes sndSpin { to { transform: rotate(360deg); } }
.snd-ring { display: inline-block; width: 10px; height: 10px; border-radius: 50%; border: 1.5px solid var(--faint); border-top-color: var(--info); vertical-align: -1px; margin-right: 4px; animation: sndSpin .9s linear infinite; }


/* —— 司机任务卡片 · 底部操作区（单列全宽）：窄屏卡片仅 ~140px 宽，双列按钮文字必折行；
   改为纵向堆叠——状态条/轨迹/结束任务各占整行，任何宽度不折行不挤压 —— */
.dt-ops { margin-top: 10px; display: flex; flex-direction: column; gap: 8px; }
.dt-ops .dt-btn { width: 100%; }
.dt-tracking { text-align: center; font-size: 12px; color: var(--brand); background: rgba(7,193,96,.1); border-radius: 8px; padding: 5px 0; }
.dt-btn.track { background: rgba(7,193,96,.12); color: var(--brand); }

/* 通用多选勾选行（chat.js 转发选择等复用；动效已回退为普通样式） */
.mxg-pick-row { display: flex; align-items: center; gap: 12px; padding: 10px 8px; border-bottom: 1px solid var(--border-soft); cursor: pointer; }
.mxg-pick-row:active { background: var(--card); }
.mxg-check { width: 22px; height: 22px; border-radius: 50%; border: 1.5px solid var(--border); flex-shrink: 0; display: flex; align-items: center; justify-content: center; background: var(--card); }
.mxg-pick-row.on .mxg-check { background: #07C160; border-color: #07C160; }
.mxg-check svg { opacity: 0; }
.mxg-pick-row.on .mxg-check svg { opacity: 1; }

/* ============ 问题反馈通道（2026-09-06）：hub / 提交 / 详情 ============ */
.fb-body { padding: 0 0 46px; }
.fb-tabs { display: flex; gap: 8px; padding: 10px 14px 0; }
.fb-tab { flex: 1; text-align: center; padding: 9px 0; border-radius: 10px; background: var(--card); color: var(--sub); font-size: 14px; position: relative; }
.fb-tab.on { background: #07C160; color: #fff; font-weight: 600; }
.fb-tab-badge { position: absolute; top: -6px; right: -6px; min-width: 18px; height: 18px; line-height: 18px; padding: 0 5px; border-radius: 9px; background: var(--down); color: #fff; font-size: 11px; font-weight: 600; }
.fb-filters { display: flex; gap: 6px; padding: 10px 14px 0; flex-wrap: wrap; align-items: center; }
.fb-chip { padding: 5px 12px; border-radius: 999px; background: var(--chip-bg); color: var(--chip-text); font-size: 12.5px; border: none; }
.fb-chip.on { background: rgba(7,193,96,.16); color: #07C160; font-weight: 600; }
.fb-chip.go { background: #07C160; color: #fff; }
.fb-search { flex: 1; min-width: 100px; margin-left: auto; padding: 6px 10px; border-radius: 8px; border: none; background: var(--card); color: var(--text); font-size: 13px; outline: none; }
.fb-card { display: flex; gap: 10px; margin: 10px 14px 0; padding: 12px; border-radius: 12px; background: var(--card); }
.fb-card.unread { box-shadow: inset 3px 0 0 #07C160; }
.fb-card-main { flex: 1; min-width: 0; }
.fb-card-top { display: flex; align-items: center; gap: 8px; }
.fb-st { padding: 1px 8px; border-radius: 6px; font-size: 11px; font-weight: 600; background: var(--chip-bg); color: var(--sub); flex-shrink: 0; }
.fb-st.pending { background: rgba(250,158,21,.16); color: #F79E15; }
html.light .fb-st.pending { color: #B26A00; }   /* 设计修复批E：浅色下 #F79E15 对比不足，加深 */
.fb-st.processing { background: rgba(74,144,217,.18); color: #5AA9F0; }
.fb-st.resolved { background: rgba(7,193,96,.16); color: #07C160; }
.fb-st.closed { background: var(--chip-bg); color: var(--sub); }
.fb-cat { font-size: 12px; color: var(--sub); white-space: nowrap; }
.fb-dot { font-size: 11px; color: var(--down); font-weight: 600; }
.fb-time { margin-left: auto; font-size: 11px; color: var(--faint); flex-shrink: 0; }
.fb-card-pv { margin-top: 6px; font-size: 13.5px; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fb-member { color: #07C160; }
.fb-card-imgs { margin-top: 8px; display: flex; align-items: center; gap: 6px; }
.fb-card-imgs img { width: 44px; height: 44px; border-radius: 6px; object-fit: cover; }
.fb-img-n { font-size: 11px; color: var(--faint); }
.fb-loading, .fb-empty { text-align: center; color: var(--sub); padding: 40px 20px; font-size: 14px; }
.fb-empty-sub { font-size: 12.5px; color: var(--faint); margin-top: 4px; }
.fb-form-card { margin: 12px 14px 0; padding: 14px; border-radius: 12px; background: var(--card); }
.fb-label { font-size: 13px; font-weight: 600; margin-bottom: 8px; }
.fb-req { color: var(--down); margin-left: 3px; }
.fb-cat-row { display: flex; flex-wrap: wrap; gap: 8px; }
.fb-ta { width: 100%; box-sizing: border-box; min-height: 110px; padding: 10px 12px; border-radius: 10px; border: 1px solid rgba(255,255,255,.12); background: var(--bg-soft); color: var(--text); font-size: 14px; line-height: 1.6; resize: vertical; outline: none; font-family: inherit; transition: border-color .15s ease; }
.fb-counter { display: block; text-align: right; font-size: 11px; color: var(--faint); margin-top: 4px; }
.fb-img-grid { display: flex; flex-wrap: wrap; gap: 8px; }
.fb-img-grid.big { margin-top: 10px; }
.fb-img-cell { position: relative; width: 72px; height: 72px; border-radius: 8px; overflow: hidden; background: var(--bg-soft); }
.fb-img-grid.big .fb-img-cell { width: 96px; height: 96px; }
.fb-img-cell img { width: 100%; height: 100%; object-fit: cover; display: block; }
.fb-img-del { position: absolute; top: 2px; right: 2px; width: 18px; height: 18px; border-radius: 50%; border: none; background: rgba(0,0,0,.55); color: #fff; font-size: 11px; line-height: 18px; padding: 0; }
.fb-img-del::after { content: ''; position: absolute; inset: -11px; }   /* 设计修复批D：热区外扩到 40px，视觉不变（父格 overflow:hidden 裁至格内） */
.fb-img-add { width: 72px; height: 72px; border-radius: 8px; border: 1px dashed var(--faint); background: none; color: var(--sub); font-size: 24px; }
.fb-img-add.fb-uping { border-style: solid; font-size: 12px; }
.fb-contact-tip { font-size: 12px; color: var(--faint); margin: 8px 0 2px; }
.fb-input { width: 100%; box-sizing: border-box; margin-top: 8px; padding: 9px 12px; border-radius: 10px; border: 1px solid rgba(255,255,255,.12); background: var(--bg-soft); color: var(--text); font-size: 14px; outline: none; transition: border-color .15s ease; }
.fb-submit { display: block; margin: 16px 14px 0; width: calc(100% - 28px); }
.fb-foot-tip { text-align: center; font-size: 11.5px; color: var(--faint); margin: 14px 20px 0; }
.fb-detail-head { margin: 12px 14px 0; padding: 14px; border-radius: 12px; background: var(--card); }
.fb-detail-head.st-resolved { box-shadow: inset 3px 0 0 #07C160; }
.fb-detail-head.st-pending { box-shadow: inset 3px 0 0 #F79E15; }
.fb-detail-head.st-processing { box-shadow: inset 3px 0 0 #5AA9F0; }
.fb-dh-top { display: flex; align-items: center; gap: 10px; }
.fb-dh-meta { margin-top: 8px; font-size: 12.5px; color: var(--sub); display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.fb-content { font-size: 14.5px; line-height: 1.7; white-space: pre-wrap; word-break: break-word; overflow-wrap: anywhere; word-break: break-all; }   /* 设计修复批B：长串双保险断行，同 :1420 */
.fb-timeline { margin: 14px 14px 0; display: flex; flex-direction: column; gap: 14px; }
.fb-msg { display: flex; gap: 8px; }
.fb-msg.user { flex-direction: row-reverse; }
.fb-msg-ava.official { width: 32px; height: 32px; border-radius: 8px; background: #07C160; color: #fff; font-size: 13px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.fb-msg-bubble { max-width: 78%; background: var(--card); border-radius: 10px; padding: 8px 11px; }
.fb-msg.user .fb-msg-bubble { background: rgba(7,193,96,.14); }
.fb-msg-name { font-size: 12px; color: var(--faint); margin-bottom: 3px; }   /* 设计修复批A：11→12px */
.fb-msg.user .fb-msg-name { text-align: right; }
.fb-msg-text { font-size: 14px; line-height: 1.6; white-space: pre-wrap; word-break: break-word; overflow-wrap: anywhere; word-break: break-all; }   /* 设计修复批B：长串双保险断行，同 :1420 */
.fb-msg-time { font-size: 12px; color: var(--faint); margin-top: 4px; text-align: right; }   /* 设计修复批A：10.5→12px */
.fb-ops { flex-shrink: 0; padding: 10px 14px calc(14px + env(safe-area-inset-bottom, 0px)); background: var(--bg); border-top: 1px solid rgba(255,255,255,.06); }   /* 微信聊天式：滚动区外固定底部（原 sticky 在短内容时悬空贴不到底，已重构为 page 尾兄弟） */
/* 留言输入栏可见化（2026-09-06 老板报障"输入区透明、客户不知道能打字"）：
   卡片底+描边贴在页面底色上明确可辨，placeholder 提亮、聚焦描边变绿 */
.fb-input-bar { display: flex; gap: 8px; align-items: stretch; padding: 8px; border-radius: 14px; background: var(--card); border: 1px solid rgba(255,255,255,.08); }
.fb-input.reply { margin-top: 0; flex: 1; background: var(--bg-soft); border: 1px solid rgba(255,255,255,.12); font-size: 15px; }
.fb-input:focus, .fb-ta:focus, .fb-input.reply:focus { border-color: rgba(7,193,96,.6); }
.fb-input::placeholder, .fb-ta::placeholder { color: var(--sub); opacity: 1; }
.fb-send { padding: 0 18px; border-radius: 10px; border: none; background: #07C160; color: #fff; font-size: 14px; font-weight: 600; }
.fb-send:disabled { opacity: .5; }
.fb-op-btn { margin-top: 10px; margin-right: 8px; padding: 7px 14px; border-radius: 999px; border: 1px solid var(--border-soft); background: none; color: var(--text); font-size: 13px; }
.fb-op-btn.ok { border-color: #07C160; color: #07C160; }
.fb-op-btn.danger { border-color: var(--down); color: var(--down); }
.fb-closed-tip { text-align: center; font-size: 13px; color: var(--sub); padding: 6px 0; }

/* ============ 群聊体验升级（2026-09-06）：新消息提示条 / 回底徽标 / 多选 / 合并转发 / 拍一拍 / 群头像九宫格 / @所有人 / [有人@我] ============ */
/* 新消息提示条（微信式：翻历史时来新消息，点条回底+清计数；纯 transform 进场不占布局） */
.new-msg-bar {
  position: absolute; left: 50%; transform: translateX(-50%); bottom: 96px; z-index: 24;   /* 设计修复批H：26→24，低于 @浮层(z:30)等面板 */
  background: var(--card); color: var(--brand); font-size: 13px; font-weight: 600;
  padding: 8px 16px; border-radius: 999px; box-shadow: var(--shadow-2); cursor: pointer;
  animation: newBarIn .18s ease-out; white-space: nowrap;
}
@keyframes newBarIn { from { transform: translateX(-50%) translateY(8px); opacity: 0; } }
/* 进入会话未读跳转胶囊（2026-11-01 老板需求，微信式）：进入落最新、未读在上方——右上角「↑ N条新消息」，
   点它跳回第一条未读。与 .new-msg-bar 同款胶囊造型（白底绿字），方向相反、一上一下互不冲突 */
.unread-jump-bar {
  position: absolute; right: 12px; top: 64px; z-index: 24;   /* 锚点是 #page（含 52px 导航栏）：64=导航下方 12px，不压导航（老板 2026-11-01 验收反馈"太靠上"） */
  display: flex; align-items: center; gap: 3px;
  background: var(--card); color: var(--brand); font-size: 13px; font-weight: 600;
  padding: 8px 15px; border-radius: 999px; box-shadow: var(--shadow-2); cursor: pointer;
  animation: unreadPillIn .2s ease-out; white-space: nowrap;
}
.unread-jump-bar svg { display: block; }
@keyframes unreadPillIn { from { transform: translateY(-8px); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .unread-jump-bar { animation: none; } }
/* 回底浮动钮的新消息计数徽标（橙色=有未读新消息） */
.jump-badge {
  position: absolute; top: -6px; right: -7px; min-width: 17px; height: 17px; padding: 0 4px;
  border-radius: 999px; background: #E07817; color: #fff; font-size: 11px; line-height: 17px;
  text-align: center; font-weight: 700; font-style: normal;
}   /* 设计修复批A/E：10→11px；底 #FA9D3B→#E07817（白字对比 ≥4.5） */
/* 拍一拍：头像原地弹跳（十式式2 spring 曲线） */
.pat-pop { animation: patPop .5s cubic-bezier(.34,1.56,.64,1); }
@keyframes patPop { 30% { transform: scale(1.28) rotate(-8deg); } }
/* @浮层"所有人"行（仅群主/管理员） */
.mention-ico { font-size: 18px; width: 30px; text-align: center; flex-shrink: 0; }
.mention-tip { font-size: 11px; color: var(--sub); flex-shrink: 0; }
/* 多选模式：勾选圈统一钉在行左缘（mine 行是 row-reverse，用绝对定位不受 flex 顺序影响） */
.chat-page.selecting .msg-row { position: relative; padding-left: 26px; }
.sel-dot {
  position: absolute; left: 0; top: 12px; width: 20px; height: 20px; border-radius: 50%;
  border: 1.5px solid var(--border); background: var(--card);
  display: flex; align-items: center; justify-content: center;
}
.msg-row.sel-on .sel-dot { background: var(--brand); border-color: var(--brand); }
.msg-row.sel-on .sel-dot::after { content: '✓'; color: #fff; font-size: 12px; font-weight: 700; }
.select-bar {
  display: flex; align-items: center; gap: 8px; padding: 10px 12px calc(10px + env(safe-area-inset-bottom));
  background: var(--card); border-top: 1px solid var(--border-soft);
}
.sel-count { font-size: 13px; color: var(--sub); margin-right: auto; }
.btn-sel {
  border: none; border-radius: 8px; padding: 9px 14px; font-size: 13.5px; cursor: pointer;
  background: var(--card-2); color: var(--text); min-height: 38px;
}
.btn-sel.strong { background: var(--brand); color: var(--on-brand, #fff); font-weight: 600; }
.btn-sel.danger { color: var(--down); }
.btn-sel:disabled { opacity: .45; }
/* 合并转发卡片（聊天记录） */
.merged-card { width: 224px; max-width: 64vw; background: var(--card-2); border-radius: 8px; padding: 8px 10px; cursor: pointer; }
.mc-title { font-size: 12.5px; color: var(--sub); margin-bottom: 4px; }
.mc-line { font-size: 13px; line-height: 1.45; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mc-name { color: var(--sub); }
.mc-foot { font-size: 11.5px; color: var(--faint); margin-top: 4px; }
.merged-row { display: flex; gap: 8px; padding: 8px 0; border-bottom: 1px solid var(--border-soft); font-size: 13.5px; text-align: left; }
.merged-row:last-child { border-bottom: none; }
/* 会话列表 [有人@我]：橙色前缀 + 角标转橙（穿透免打扰灰） */
.at-me { color: #FA9D3B; font-weight: 600; margin-right: 2px; flex-shrink: 0; }
.badge.atme-badge { background: #FA9D3B; }
/* 群头像九宫格（1 单图回落 avatarEl / 2 左右 / 3 品字 / 4 田字） */
.gavatar { display: grid; gap: 1px; padding: 2px; background: var(--card-2); overflow: hidden; box-sizing: border-box; place-items: center; }
.gavatar.n2 { grid-template-columns: repeat(2, 1fr); }
.gavatar.n3 { grid-template-columns: repeat(2, 1fr); }
.gavatar.n3 > :first-child { grid-column: 1 / -1; }
.gavatar.n4 { grid-template-columns: repeat(2, 1fr); }

/* ===== 登录协议勾选行 + 用户协议/隐私政策文档页（2026-09-08 iOS 上架合规前置·5.1.1） ===== */
.login-agree { display: flex; align-items: flex-start; gap: 8px; margin-top: 14px; font-size: 12.5px; color: var(--sub); line-height: 1.55; cursor: pointer; }
.login-agree input { width: 16px; height: 16px; margin-top: 2px; flex: none; accent-color: var(--brand); }
.login-agree a { color: var(--brand); font-weight: 600; text-decoration: none; }
.mx-doc { padding: 18px 18px 46px; max-width: 600px; margin: 0 auto; }
.mx-doc h1 { font-size: 20px; font-weight: 700; color: var(--text); text-align: center; margin: 6px 0 4px; }
.mx-doc .doc-meta { font-size: 12px; color: var(--sub); text-align: center; margin-bottom: 18px; }
.mx-doc section { margin-bottom: 18px; }
.mx-doc h3 { font-size: 15px; font-weight: 700; color: var(--text); margin-bottom: 6px; padding-left: 9px; border-left: 3px solid var(--brand); line-height: 1.4; }
.mx-doc p { font-size: 13.5px; color: var(--text); line-height: 1.8; margin-bottom: 6px; text-align: justify; }
.mx-doc ul { margin: 2px 0 10px; padding-left: 20px; }
.mx-doc li { font-size: 13.5px; color: var(--text); line-height: 1.75; margin-bottom: 4px; }
.mx-doc .doc-foot { font-size: 12px; color: var(--sub); text-align: center; margin-top: 22px; }

/* ===== AI 客服活猫头像（2026-09-28）：noeyes 底图 + SVG 动态眼层，背景/尺寸沿用原头像 ===== */
/* border-radius:inherit（2026-10-15）：外层 .conv-avatar 的内联圆角须经 span 传给底图——
   此前 span 无圆角，img 的 inherit 落到 0px，AI 客服头像呈直角方块 */
.live-kefu { position: relative; display: block; width: 100%; height: 100%; border-radius: inherit; }
.live-kefu > img { width: 100%; height: 100%; object-fit: cover; border-radius: inherit; display: block; }
.live-kefu-eyes { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.live-kefu-pupil { fill: #fff; }   /* 纯白眼珠无描边（2026-09-28 需求） */
/* 头顶思考点（think 态）：白点+描边保证金/橙底可读 */
.live-kefu-fx-dot { fill: #fff; stroke: rgba(59, 42, 22, .4); stroke-width: .5; }
/* AI 客服思考行（20260929 需求）：文字 + 动态省略号（三个点逐个跳动，手机可见） */
.lk-thinking-txt { color: var(--sub); }
.lk-thinking-txt .lk-td {
  display: inline-block;
  width: .26em; height: .26em;
  border-radius: 50%;
  background: currentColor;
  margin-left: .14em;
  vertical-align: middle;
  animation: lk-td-bounce 1.2s ease-in-out infinite;
}
.lk-thinking-txt .lk-td:nth-of-type(2) { animation-delay: .2s; }
.lk-thinking-txt .lk-td:nth-of-type(3) { animation-delay: .4s; }
@keyframes lk-td-bounce { 0%, 60%, 100% { transform: translateY(0); opacity: .35; } 30% { transform: translateY(-0.22em); opacity: 1; } }

/* ===== 全屏媒体查看器（2026-10-08 老板需求 #2/#3：图片+视频微信式左右滑）===== */
/* z-index 890：低于 .modal-mask(900)——查看器内长按弹的「保存图片」确认框必须压在其上；
   高于相机(450)/抽屉(401)等业务层 */
.media-viewer { position: fixed; inset: 0; z-index: 890; background: #000; display: flex; }
/* 公告视频全屏批（2026-10-27）：从公告强制弹层（.mx-notice-forced 1200）内打开的查看器提级 1250
   盖过弹层；与 .mx-asheet-mask(1250) 同级不同屏；内部长按保存确认框由 confirmDialog 的 z 参数提级 1251 */
.media-viewer.raised { z-index: 1250; }
/* 2026-10-12 mximg：同 lb-close——灰底白边圆钮可辨识（原 rgba(0,0,0,.4) 黑底圆在纯黑上不可辨）+44px 触达 */
.mv-close { position: absolute; top: calc(6px + env(safe-area-inset-top)); right: 12px; z-index: 4; color: #fff; font-size: 22px; background: rgba(70,70,70,.55); border: 1px solid rgba(255,255,255,.5); border-radius: 50%; width: 44px; height: 44px; display: flex; align-items: center; justify-content: center; padding: 0; }
.mv-track { flex: 1; display: flex; overflow-x: auto; overflow-y: hidden; scroll-snap-type: x mandatory; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.mv-track::-webkit-scrollbar { display: none; }
.mv-item { flex: 0 0 100%; width: 100%; height: 100%; scroll-snap-align: center; scroll-snap-stop: always; display: flex; align-items: center; justify-content: center; overflow: hidden; }
.mv-item img { max-width: 100%; max-height: 100%; object-fit: contain; transition: transform .15s; touch-action: pan-x; -webkit-user-drag: none; user-select: none; }
.mv-item video { max-width: 100%; max-height: 100%; }

/* 聊天视频气泡（微信式，2026-10-08 需求#3）：封面+居中播放角标+右下时长，点开进全屏查看器 */
.msg-video { position: relative; cursor: pointer; max-width: min(64vw, 240px); }
/* 2026-10-12 视频对齐微信批 A：黑底圆角卡片（去掉文字气泡的绿 / 白底、内边距与小尖角），比例由 JS 写 aspect-ratio */
.msg-bubble.msg-video { padding: 0 !important; background: #000 !important; border-radius: 8px !important; overflow: hidden; box-shadow: none; line-height: 0; }
.msg-bubble.msg-video::before { display: none !important; }
.msg-video .v-thumb { position: relative; max-width: min(64vw, 240px); background: #000; overflow: hidden; }
.msg-video .v-thumb img, .msg-video .v-thumb video { width: 100%; height: 100%; max-height: none; object-fit: cover; display: block; border-radius: 0; }
.v-play { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 44px; height: 44px; border-radius: 50%;
  background: rgba(0,0,0,.42); color: #fff; display: flex; align-items: center; justify-content: center;
  font-size: 18px; padding-left: 3px; border: 1.5px solid rgba(255,255,255,.9); pointer-events: none; z-index: 2; }
.v-dur { position: absolute; right: 6px; bottom: 6px; z-index: 2; border-radius: 3px; padding: 1px 5px; line-height: 16px;
  font-size: 11px; color: #fff; background: rgba(0,0,0,.45); pointer-events: none; font-variant-numeric: tabular-nums; }
/* 发送中：见下方 .v-sending（压暗 + 白转圈）；失败：气泡左侧红色感叹号（我的消息在左、对方不会出现） */
/* 发送中（r2 微信式）：缩略图整体压暗 + 中央白色转圈，不显示百分比 */
.v-sending { position: absolute; inset: 0; z-index: 3; background: rgba(0,0,0,.4); pointer-events: none;
  display: flex; align-items: center; justify-content: center; }
.v-spinner { width: 28px; height: 28px; border-radius: 50%; box-sizing: border-box;
  border: 2.5px solid rgba(255,255,255,.3); border-top-color: #fff; animation: vSpin .8s linear infinite; }
@keyframes vSpin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .v-spinner { animation-duration: 2.4s; } }
.msg-bubble.msg-video:has(.v-fail) { overflow: visible; }
.v-fail { position: absolute; left: -30px; top: 50%; transform: translateY(-50%); width: 22px; height: 22px; border-radius: 50%; z-index: 3;
  border: 0; padding: 0; background: #fa5151; color: #fff; font-size: 15px; font-weight: 700; line-height: 22px; text-align: center; cursor: pointer; }
.snd-failed { color: #fa5151; }
.snd-retry { color: var(--info); cursor: pointer; margin-left: 2px; }

/* 全屏视频播放器（video-player.js，2026-10-12 视频对齐微信批 B）：画面 contain、顶栏返回 + 时长、底栏进度条 + 时间 */
.mv-item.mv-video { position: relative; }
.media-viewer.mv-on-video .mv-close { display: none; }
.vp { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; background: #000; user-select: none; -webkit-user-select: none; }
.vp-video { width: 100%; height: 100%; object-fit: contain; background: #000; display: block; }
.vp-big-play { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 64px; height: 64px; border-radius: 50%;
  background: rgba(0,0,0,.45); border: 2px solid rgba(255,255,255,.9); color: #fff; display: none; align-items: center; justify-content: center; padding-left: 4px; pointer-events: none; }
.vp.paused .vp-big-play { display: flex; }
.vp-tip { position: absolute; left: 50%; top: 58%; transform: translateX(-50%); padding: 5px 12px; border-radius: 14px; background: rgba(0,0,0,.6); color: #fff; font-size: 13px; display: none; pointer-events: none; }
.vp-tip.show { display: block; }
.vp-top { position: absolute; left: 0; right: 0; top: 0; display: flex; align-items: center; gap: 8px; padding: calc(8px + env(safe-area-inset-top)) 12px 18px;
  background: linear-gradient(rgba(0,0,0,.55), transparent); color: #fff; z-index: 2; }
.vp-back { width: 36px; height: 36px; border: 0; border-radius: 50%; background: transparent; color: #fff; display: flex; align-items: center; justify-content: center; cursor: pointer; padding: 0; }
.vp-back:hover { background: rgba(255,255,255,.12); }
.vp-top-dur { font-size: 14px; opacity: .9; font-variant-numeric: tabular-nums; }
.vp-bottom { position: absolute; left: 0; right: 0; bottom: 0; display: flex; align-items: center; gap: 10px; padding: 20px 14px calc(14px + env(safe-area-inset-bottom));
  background: linear-gradient(transparent, rgba(0,0,0,.6)); color: #fff; z-index: 2; }
.vp-time { font-size: 12px; min-width: 34px; text-align: center; font-variant-numeric: tabular-nums; }
.vp-bar-hit { flex: 1; height: 24px; display: flex; align-items: center; cursor: pointer; touch-action: none; }
.vp-bar { position: relative; flex: 1; height: 3px; border-radius: 2px; background: rgba(255,255,255,.28); }
.vp-buf { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 2px; background: rgba(255,255,255,.5); width: 0; }
.vp-played { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 2px; background: #fff; width: 0; }
.vp-knob { position: absolute; top: 50%; left: 0; width: 12px; height: 12px; margin: -6px 0 0 -6px; border-radius: 50%; background: #fff; box-shadow: 0 0 4px rgba(0,0,0,.4); transition: transform .1s; }
.vp.seeking .vp-knob, .vp-bar-hit:hover .vp-knob { transform: scale(1.35); }
.vp.seeking .vp-bar, .vp-bar-hit:hover .vp-bar { height: 5px; }

/* ===== 2026-10-10 二梯队打磨：聊天加载骨架 / 空会话占位 / 发送键禁用态 ===== */
/* 断网重连提示条（.net-bar）已随 2026-10-16 老板定稿撤除：断线自愈全程静默（ws.js 同日注释） */

/* 聊天页加载骨架：三条灰块气泡（对方两条+自己一条），shimmer 微光；数据回来 renderAll 整体重建清除 */
.chat-skel { padding: 16px 12px; display: flex; flex-direction: column; gap: 14px; }
.cs-row { display: flex; gap: 8px; align-items: flex-start; }
.cs-row.me { justify-content: flex-end; }
.cs-ava { width: 38px; height: 38px; border-radius: 6px; background: var(--card-2); flex: none; }
.cs-bub { height: 40px; border-radius: 10px; background: var(--card-2); }
.cs-ava, .cs-bub { position: relative; overflow: hidden; }
.cs-ava::after, .cs-bub::after { content: ''; position: absolute; inset: 0; transform: translateX(-100%);
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .06), transparent);
  animation: cs-sweep 1.4s ease infinite; }
html.light .cs-ava::after, html.light .cs-bub::after { background: linear-gradient(90deg, transparent, rgba(0, 0, 0, .05), transparent); }
@keyframes cs-sweep { 100% { transform: translateX(100%); } }

/* 空会话占位 */
.chat-empty { text-align: center; color: var(--faint); font-size: 12.5px; padding: 44px 16px 0; }

/* 发送键禁用态补字色（底色原已有 brand-dim）：置灰时字也压暗，禁用语义完整 */
.input-bar .btn-send:disabled { background: var(--brand-dim); color: rgba(255, 255, 255, .55); cursor: default; }

/* 动效克制（无障碍底线）：用户偏好减动效时停装饰动画（骨架扫光） */
@media (prefers-reduced-motion: reduce) {
  .cs-ava::after, .cs-bub::after { animation: none; }
}

/* ===== 2026-10-10 emoji 图标化配套 ===== */
/* 上下文菜单图标列（util.js contextMenu 的 it.icon → .mi-ic） */
.ctx-menu .mi .mi-ic { display: inline-flex; flex: none; }
.ctx-menu .mi .mi-ic svg { width: 18px; height: 18px; display: block; }
/* 标题行内联图标（群公告/聊天记录卡/弹层头） */
.a-ic, .mc-ic, .mh-ic { display: inline-flex; flex: none; }
/* 语音气泡波形：文本圆点 → SVG 波形条后的布局收口 */
.msg-voice .wave { display: inline-flex; align-items: center; }
.msg-voice .wave svg { display: block; }
/* 视频播放角标：SVG 三角版（字符 ▶ 的 padding-left 偏移对 SVG 不需要） */
.v-play svg { display: block; }
.v-play { padding-left: 0; }
/* 回底浮动钮 SVG */
.jump-bottom svg { display: block; }
/* 位置消息图钉：emoji → 内联 SVG data-uri（绿色品牌 pin） */
.msg-location .map::after { content: ''; position: absolute; left: 50%; top: 46%; transform: translate(-50%,-50%);
  width: 26px; height: 26px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2.8c-3.6 0-6.5 2.9-6.5 6.5 0 4.8 6.5 11.9 6.5 11.9s6.5-7.1 6.5-11.9c0-3.6-2.9-6.5-6.5-6.5z' fill='%2307C160'/%3E%3Ccircle cx='12' cy='9.3' r='2.6' fill='%23fff'/%3E%3C/svg%3E") center / contain no-repeat; }

/* —— 拖拽发送高亮层（2026-10-12）：文件拖入聊天窗口时的全页提示，z-index 在 lightbox(1100) 之下、toast(1200) 之下 —— */
.drop-mask {
  position: fixed; inset: 0; z-index: 1150;
  /* pointer-events:none（Opus 审计 P2-4）：拖拽被 ESC 异常中断而没收到 dragleave/drop 时，
     遮罩即使残影也不挡任何点击——配合 js 侧 8s 自愈定时器双保险 */
  pointer-events: none;
  background: rgba(4, 6, 9, .66);
  display: flex; align-items: center; justify-content: center;
  border: 2px dashed var(--brand, #f08a30);
  animation: drop-fade .14s ease-out;
}
html.light .drop-mask { background: rgba(250, 250, 252, .72); }
.drop-card {
  background: var(--card, #171b21); border-radius: 16px; padding: 22px 34px;
  box-shadow: 0 12px 40px rgba(0, 0, 0, .45);
  font-size: 17px; font-weight: 600; text-align: center; pointer-events: none;
}
.drop-sub { margin-top: 6px; font-size: 12.5px; font-weight: 400; color: var(--sub, #8a93a0); }
@keyframes drop-fade { from { opacity: 0; } to { opacity: 1; } }

/* ============ 平台公告（2026-10-12 mxgg 批）：列表 / 详情 / 强制弹层 / 角标 ============ */
.mx-notice-list { padding: 10px 12px; }
.mx-notice-row { display: flex; gap: 12px; align-items: center; padding: 13px 12px; margin-bottom: 8px;
  background: var(--card); border-radius: 10px; cursor: pointer; }
.mx-notice-row:active { background: var(--card-2); }
.mx-notice-row.read { opacity: .78; }
.mx-notice-thumb { width: 46px; height: 46px; border-radius: 8px; object-fit: cover; flex: none; background: var(--card-2); }
.mx-notice-thumb-ph { display: flex; align-items: center; justify-content: center; color: var(--sub); }
.mx-notice-row-main { flex: 1; min-width: 0; }
.mx-notice-row-title { display: flex; align-items: center; gap: 6px; }
.mx-notice-row-tt { flex: 1; min-width: 0; font-size: 15px; font-weight: 600; color: var(--text);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mx-notice-row.read .mx-notice-row-tt { font-weight: 400; }
.mx-notice-dot { flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--down); }
.mx-notice-pin { flex: none; font-size: 11px; color: var(--warn); border: 1px solid var(--warn);
  border-radius: 4px; padding: 0 3px; line-height: 15px; }   /* 设计修复批A：10→11px */
.mx-notice-row-sub { display: flex; align-items: center; gap: 6px; margin-top: 5px; }
.mx-notice-tag { font-size: 11px; border-radius: 4px; padding: 0 4px; line-height: 16px; }   /* 设计修复批A：10→11px */
.mx-notice-tag.forced { color: var(--down); background: var(--down-bg); }
.mx-notice-tag.confirm { color: var(--brand); background: rgba(7,193,96,.12); }
.mx-notice-tag.internal { color: #9A8CFF; background: rgba(123,97,255,.14); }   /* 设计修复批E：深底提亮 #7B61FF→#9A8CFF；浅色见下行覆盖 */
html.light .mx-notice-tag.internal { color: #5B48E8; }
.mx-notice-row-time { font-size: 12px; color: var(--faint); margin-left: auto; }
.mx-notice-empty { padding: 72px 0; text-align: center; color: var(--faint); font-size: 13px; }
.mx-notice-empty span { display: inline-flex; opacity: .5; }
.mx-notice-empty div { margin-top: 10px; }
.mx-notice-loading { padding: 60px 0; text-align: center; color: var(--faint); font-size: 13px; }

.mx-notice-detail { padding: 16px 16px 88px; }
.mx-notice-d-title { font-size: 19px; font-weight: 700; color: var(--text); line-height: 1.45; }
.mx-notice-d-meta { display: flex; align-items: center; gap: 8px; margin: 10px 0 14px; font-size: 12.5px; color: var(--faint); }
.mx-notice-d-from { color: var(--sub); font-weight: 600; }
.mx-notice-content p { font-size: 15.5px; line-height: 1.75; color: var(--text); margin: 0 0 12px; word-break: break-word; overflow-wrap: anywhere; word-break: break-all; white-space: pre-wrap; }   /* 设计修复批B：长串双保险断行，同 :1420 */
.mx-notice-detail .moment-grid { margin-top: 4px; }

/* 「我已阅读」底栏（详情页；强制/阅读确认公告未读时显示） */
.mx-notice-confirm-bar { position: fixed; left: 0; right: 0; bottom: 0; padding: 10px 16px calc(10px + env(safe-area-inset-bottom));
  background: var(--bg); border-top: 1px solid var(--border-soft); z-index: 1150; }
.mx-notice-confirm-btn { width: 100%; height: 46px; border: none; border-radius: 10px;
  background: var(--brand); color: #fff; font-size: 16px; font-weight: 600; cursor: pointer; }
.mx-notice-confirm-btn:disabled { opacity: .6; }

/* 强制公告弹层（遮罩不可关；挂 #modal-root 不随路由清空） */
.mx-notice-forced { z-index: 1200; }
.mx-notice-forced-box { max-height: 78vh; display: flex; flex-direction: column; }
.mx-notice-head-ic { display: inline-flex; margin-right: 6px; vertical-align: -2px; color: var(--warn); }
.mx-notice-forced-body { overflow-y: auto; -webkit-overflow-scrolling: touch; }
.mx-notice-f-title { font-size: 16.5px; font-weight: 700; color: var(--text); line-height: 1.4; }
.mx-notice-f-time { font-size: 12px; color: var(--faint); margin: 6px 0 12px; }
.mx-notice-forced .moment-grid { margin-top: 6px; }
.mx-notice-forced .moment-grid img { border-radius: 6px; }

/* ===== 平台公告富文本（2026-10-13 notice-richtext M1）：共享渲染 notice-render.js（App 详情/弹层/列表 + console 预览同一份） ===== */
.mx-notice-content ul.mx-nlist, .mx-notice-content ol.mx-nlist { margin: 0 0 12px; padding-left: 1.4em; font-size: 15.5px; line-height: 1.75; color: var(--text); }
.mx-notice-content .mx-nlist li { white-space: pre-wrap; word-break: break-word; }
.mx-notice-content blockquote.mx-nquote { margin: 0 0 12px; padding: 6px 12px; border-left: 3px solid var(--border); background: var(--card-2); border-radius: 0 6px 6px 0; }
.mx-notice-content blockquote.mx-nquote p { margin: 4px 0; color: var(--sub); }
.mx-notice-content p:empty::before { content: '\200b'; }
.mx-notice-content hr.mx-nhr { border: none; border-top: 1px solid var(--border); margin: 14px 0; }
.mx-nlink { color: var(--wx-link); word-break: break-all; text-decoration: underline; text-underline-offset: 2px; }
.mx-ncopy { position: relative; margin: 0 0 12px; padding: 12px 12px 12px; padding-right: 86px; background: var(--card-2); border-radius: 8px; cursor: pointer; -webkit-tap-highlight-color: transparent; transition: background .3s; }
.mx-ncopy:active, .mx-ncopy.copied { background: rgba(7,193,96,.16); }
.mx-ncopy-text { font-size: 14.5px; line-height: 1.6; color: var(--text); white-space: pre-wrap; word-break: break-all; }
.mx-ncopy-tag { position: absolute; top: 9px; right: 10px; display: inline-flex; align-items: center; gap: 3px; font-size: 11.5px; color: var(--brand); }
.mx-nimgs { display: grid; gap: 4px; margin: 0 0 12px; }
.mx-nimgs.n1 { grid-template-columns: 1fr; }
.mx-nimgs.n2 { grid-template-columns: 1fr 1fr; }
.mx-nimgs.n3 { grid-template-columns: 1fr 1fr 1fr; }
.mx-nimgs img { display: block; width: 100%; height: auto; max-width: 100%; object-fit: cover; border-radius: 6px; background: var(--card-2); cursor: zoom-in; }
/* 公告视频块（M3）：先见封面，点居中播放钮才加载并内联播放（微信文章式）；播放后交给原生 controls */
.mx-nvideo { position: relative; margin: 0 0 12px; width: 100%; max-height: 72vh; border-radius: 8px; overflow: hidden; background: #111; }
.mx-nvideo-el { display: block; width: 100%; height: 100%; object-fit: contain; background: #111; }
.mx-nvideo-cover { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; padding: 0; border: none; background: linear-gradient(to top, rgba(0,0,0,.38), rgba(0,0,0,0) 38%); cursor: pointer; -webkit-tap-highlight-color: transparent; transition: opacity .2s; }
.mx-nvideo-play { display: flex; align-items: center; justify-content: center; width: 56px; height: 56px; border-radius: 50%; background: rgba(0,0,0,.46); color: #fff; box-shadow: 0 2px 12px rgba(0,0,0,.28); backdrop-filter: blur(2px); -webkit-backdrop-filter: blur(2px); }
.mx-nvideo-play svg { margin-left: 3px; }
.mx-nvideo-cover:active .mx-nvideo-play { transform: scale(.94); }
.mx-nvideo-dur { position: absolute; right: 8px; bottom: 7px; padding: 1px 6px; border-radius: 4px; font-size: 12px; line-height: 18px; color: #fff; background: rgba(0,0,0,.5); font-variant-numeric: tabular-nums; }
.mx-nvideo.playing .mx-nvideo-cover { opacity: 0; pointer-events: none; }
.mx-nvideo.ph { background: var(--card-2); }
.mx-nvideo.ph .mx-nvideo-el { visibility: hidden; }
.mx-nvideo-ph-ic { position: absolute; left: 10px; top: 9px; color: var(--faint); }
.mx-nvideo.ph.playing .mx-nvideo-el { visibility: visible; }
.mx-nvideo-err { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; padding: 0 16px; font-size: 13px; color: #ddd; text-align: center; background: rgba(0,0,0,.72); }
.mx-notice-row-sum { margin-top: 3px; font-size: 12.5px; color: var(--faint); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mx-notice-thumb { width: 56px; height: 56px; }
.mx-notice-thumb-icon { background: none; border-radius: 0; }   /* 内置头像 SVG 自带品牌色圆角方底 */
.mx-notice-forced-body { max-height: 70vh; }
.mx-notice-forced-body .mx-notice-content.doc { text-align: left; }
/* 链接选择框：底部弹出，层级在强制弹层（1200）之上、lightbox（1300）之下同级 */
.mx-asheet-mask { z-index: 1250; align-items: flex-end; }
.mx-asheet { width: 100%; max-width: 520px; margin: 0 auto; background: var(--card); border-radius: 14px 14px 0 0; padding-bottom: env(safe-area-inset-bottom); overflow: hidden; animation: sheetUp .22s ease-out; }
.mx-asheet-title { padding: 14px 16px 12px; font-size: 13px; color: var(--sub); text-align: center; word-break: break-all; line-height: 1.5; border-bottom: 1px solid var(--border-soft); }
.mx-asheet-title.full { user-select: text; -webkit-user-select: text; color: var(--text); }
.mx-asheet-btn { display: block; width: 100%; height: 52px; border: none; background: none; font-size: 16px; color: var(--text); border-bottom: 1px solid var(--border-soft); }
.mx-asheet-btn:active { background: var(--card-2); }
.mx-asheet-btn.cancel { border-bottom: none; border-top: 6px solid var(--card-2); color: var(--sub); }

/* tabbar「我」红点：只有红点不带数字（区别于消息角标；公告未读>0 时显示） */
.mx-tab-me-dot { min-width: 0; width: 10px; height: 10px; padding: 0; border-radius: 50%; line-height: 10px; }

/* ============ 企宣素材库（员工内部通道，2026-10-14 老板实测补样式） ============ */
.px-gate { padding: 0 20px; }
.px-input { display: block; width: 100%; box-sizing: border-box; height: 46px; border: 1px solid var(--border); border-radius: var(--radius-md); padding: 0 14px; font-size: 15px; background: var(--bg-soft); color: var(--text); transition: border-color .15s, box-shadow .15s; }
.px-input:focus { border-color: var(--brand); box-shadow: var(--glow-brand); outline: none; }
textarea.px-input { height: auto; min-height: 96px; padding: 12px 14px; line-height: 1.6; resize: vertical; font-family: inherit; }
.px-btn { height: 46px; width: 100%; background: var(--brand); color: var(--on-brand); border: none; border-radius: var(--radius-md); font-size: 16px; font-weight: 650; letter-spacing: .06em; transition: filter .15s; }
.px-btn:active { filter: brightness(.88); }
.px-btn:disabled { background: var(--brand-dim); cursor: not-allowed; }
.px-btn.ghost { background: var(--card-2); color: var(--text); border: 1px solid var(--border); font-weight: 500; }
.px-link { text-align: center; font-size: 13px; color: var(--brand); padding: 12px 0; }
.px-tip { background: var(--chip-bg); border-radius: var(--radius-md); padding: 10px 14px; font-size: 12px; color: var(--sub); line-height: 1.8; text-align: center; margin-top: 14px; }

/* ============ 朋友圈全平台升级 M2（2026-10-14）：分页 / 发布器计数 / 谁可以看 / 选人器 / 好友分组 / 可见范围标签 ============ */
/* 只新增选择器，不改动既有样式 */
.moments-more { padding: 14px 0 22px; text-align: center; }
.mm-more-btn { border: 1px solid var(--border); background: var(--card); color: var(--sub); border-radius: 16px; padding: 6px 18px; font-size: 13px; }
.mm-more-tip, .mm-more-err { color: var(--faint); font-size: 12.5px; padding: 4px 0 8px; }
.mm-more-err { color: var(--down); }
.moment-aud { margin-left: 8px; font-size: 12px; color: var(--sub); max-width: 46%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display: inline-block; vertical-align: bottom; cursor: pointer; }
.composer-count { text-align: right; font-size: 12px; color: var(--faint); margin: 2px 2px 6px; font-variant-numeric: tabular-nums; }
.composer-count.over { color: var(--down); font-weight: 600; }
.moment-composer .m-foot button[disabled] { opacity: .45; pointer-events: none; }
.mm-err-body { white-space: pre-wrap; word-break: break-word; line-height: 1.6; }
.aud-done, .fg-new, .fg-save { background: none; border: none; color: var(--brand); font-size: 15px; font-weight: 600; padding: 6px 4px 6px 10px; }
.fg-save[disabled] { opacity: .45; }
/* 选人器 */
.pk-body { padding-bottom: 8px; }
.pk-list .mxg-pick-row { background: var(--card); padding: 10px 14px; }
.mxg-pick-row.locked .mxg-check { background: var(--faint); border-color: var(--faint); }
.mxg-pick-row.locked .mxg-check svg { opacity: 1; }
.mxg-pick-row.locked .pk-name { color: var(--sub); }
.pk-main { flex: 1; min-width: 0; }
.pk-name { font-size: 15px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pk-sub { font-size: 12px; color: var(--sub); margin-top: 2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pk-gico { width: 38px; height: 38px; border-radius: 9px; background: #6467F0; color: #fff; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.pk-hint { padding: 12px 14px; font-size: 12.5px; color: var(--sub); background: var(--card); }
.pk-retry { margin-top: 12px; border: 1px solid var(--border); background: var(--card); color: var(--text); border-radius: 8px; padding: 6px 18px; font-size: 13px; }
.pk-bar { display: flex; align-items: center; gap: 10px; padding: 8px 14px calc(8px + env(safe-area-inset-bottom, 0px)); background: var(--card); border-top: 1px solid var(--border-soft); flex-shrink: 0; }
.pk-bar-gap { flex: 1; }
.pk-newgroup { background: none; border: none; color: var(--brand); font-size: 14px; padding: 6px 0; white-space: nowrap; }
.pk-newgroup.dim { color: var(--faint); }
.pk-done { background: var(--brand); color: #fff; border: none; border-radius: 6px; padding: 8px 16px; font-size: 14px; font-weight: 600; white-space: nowrap; }
.pk-done[disabled] { opacity: .45; }
/* 谁可以看 / 可见范围名单 */
.aud-body { padding-top: 10px; }
.aud-row { background: var(--card); padding: 12px 14px; }
.aud-summary { display: flex; align-items: center; gap: 6px; padding: 8px 14px 12px 48px; background: var(--card); border-bottom: 1px solid var(--border-soft); color: var(--brand); font-size: 13px; cursor: pointer; }
.aud-sum-text { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.aud-foot { padding: 12px 16px 24px; font-size: 12.5px; color: var(--sub); line-height: 1.8; text-align: center; }
.aud-foot-warn { color: var(--down); }
.aud-head { padding: 14px 16px; }
.aud-head-title { font-size: 17px; font-weight: 600; }
.aud-cell { cursor: default; min-height: 50px; }
/* 好友分组 */
.fg-body { padding-bottom: 24px; }
.fg-ico { background: #6467F0; }
.fg-ico.add { background: #07C160; }
.fg-name { max-width: 50%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fg-rm { flex-shrink: 0; border: 1px solid var(--border); background: var(--card); color: var(--sub); border-radius: 14px; padding: 3px 12px; font-size: 12.5px; }
.fg-del { display: block; width: calc(100% - 28px); margin: 18px 14px 0; }
.fg-empty-sub { font-size: 12.5px; margin-top: 8px; line-height: 1.7; }
.fg-empty-btn { margin-top: 16px; width: auto; padding: 0 24px; }
.fg-of-right { max-width: 52%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ===== 朋友圈对齐微信 M1（2026-10-15）===== */
/* M1-1 九宫格：只作用于朋友圈卡片内（.moment-main），公告页复用的 .moment-grid 保持原样。
   格子恒为「3 列网格的格子大小」：2 张 / 4 张也是 1/3 宽（右侧留空，2×2），3 张与 5–9 张 3 列流式排 */
.moment-main .moment-grid { --mg-gap: 4px; gap: var(--mg-gap); max-width: 330px; }
.moment-main .moment-grid, .moment-main .moment-grid.n3, .moment-main .moment-grid.n5, .moment-main .moment-grid.n6,
.moment-main .moment-grid.n7, .moment-main .moment-grid.n8, .moment-main .moment-grid.n9 { grid-template-columns: repeat(3, 1fr); }
.moment-main .moment-grid.n2, .moment-main .moment-grid.n4 { grid-template-columns: repeat(2, calc((100% - 2 * var(--mg-gap)) / 3)); }
/* M1-2 单图：框的宽 / 宽高比由 JS 按原图写（sizeMediaBox）；图 cover 填满，极端比例居中裁 */
.moment-single { position: relative; margin-top: 6px; width: 66%; aspect-ratio: 1; max-width: 250px; border-radius: 4px; overflow: hidden; background: var(--card-2); cursor: zoom-in; }
.moment-single img { display: block; width: 100%; height: 100%; object-fit: cover; }
/* M1-4 正文 6 行折叠 */
/* 6 行折叠（2026-10-15 加固）：-webkit-line-clamp 为主（带省略号），max-height 兜底——个别老内核
   line-clamp 与 white-space:pre-wrap 组合失效时仍按 6 行裁切（1.5em=行高×字号，与 foldText 判定同口径） */
.moment-content.clamped { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 6; line-clamp: 6; max-height: calc(6 * 1.5em); overflow: hidden; }
.moment-fold { display: inline-block; margin-top: 4px; color: var(--wx-link); font-size: 14.5px; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.moment-fold[hidden] { display: none; }
/* M1-3 查看器小圆点页码（openMediaViewer opts.dots；聊天不传 = 不显示） */
.mv-dots { position: absolute; left: 0; right: 0; bottom: calc(22px + env(safe-area-inset-bottom)); z-index: 3; display: flex; justify-content: center; gap: 7px; pointer-events: none; }
.mv-dots i { width: 6px; height: 6px; border-radius: 50%; background: rgba(255, 255, 255, .35); transition: background .15s; }
.mv-dots i.on { background: #fff; }
/* M1-8 评论弹层删除钮 */
.mc-del-btn { color: var(--wx-link); font-size: 12px; font-weight: 500; cursor: pointer; }
/* M1-9 下拉刷新：左上角彩色圆环，跟手下移 + 旋转；刷新中原地转 */
.moments-body { position: relative; overscroll-behavior-y: contain; }
.mm-ptr { position: absolute; left: 18px; top: -32px; z-index: 6; width: 28px; height: 28px; opacity: 0; pointer-events: none; will-change: transform; }
.mm-ptr-ring { display: block; width: 100%; height: 100%; border-radius: 50%;
  background: conic-gradient(#f5c33b, #f06a57, #a174f0, #3db4f2, #4cd07d, #f5c33b);
  -webkit-mask: radial-gradient(circle, transparent 8px, #000 9px); mask: radial-gradient(circle, transparent 8px, #000 9px); }
.mm-ptr.mm-ptr-spin .mm-ptr-ring { animation: vSpin .7s linear infinite; }
.mm-ptr.mm-ptr-back { transition: transform .25s ease-out, opacity .25s; }

/* ===== UI 质感批1（2026-10-23）：数字防抖/聚焦双环统一/防孤字/动效降级（UI-STANDARD §三 F/G/H） ===== */
body { font-variant-numeric: tabular-nums; }
p, li { text-wrap: pretty; }
h1, h2, h3, h4 { text-wrap: balance; }
input:focus, textarea:focus, select:focus,
.pf-input:focus, .fb-input:focus, .fb-ta:focus, .fb-input.reply:focus, .modal .m-input:focus {
  box-shadow: var(--glow-brand, 0 0 0 1px rgba(255, 103, 0, .9));
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
}

/* ===== 流式打字（UI批5·老板已批 2026-10-23）：AI 客服回复逐字淡入 ===== */
.twx { opacity: 0; filter: blur(4px); display: inline; }
.twx.on { opacity: 1; filter: blur(0); transition: opacity .24s cubic-bezier(.215,.61,.355,1), filter .24s cubic-bezier(.215,.61,.355,1); }
.twx-caret { display: inline-block; width: 2px; height: 1em; background: currentColor; opacity: .75; vertical-align: -2px; margin-left: 1px; animation: twx-blink .8s steps(1) infinite; }
@keyframes twx-blink { 50% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .twx { opacity: 1; filter: none; transition: none; } .twx-caret { display: none; } }

/* ===== 行内字段错误（2026-10-23 设计修复批·铁律2）=====
   表单校验失败的 toast 改为输入框下方行内红字（util.js fieldErr 渲染）；
   input 事件自动清除。--danger 在本库未定义，恒回落微信红 #FA5151（与 --down 同值）。 */
.field-err { font-size: 12px; color: var(--danger, #FA5151); margin: 4px 0 0; }

/* ===== 字体大小（2026-10-27 老板需求：我的页·外观下「字体」设置，中号=现状 / 大号=全站放大） =====
   大号用 zoom 等比放大：字号/间距/图标同比，整页布局不破版（WebView 全支持 zoom）。
   html 级 class——app.js 启动按 localStorage('mx_font') 应用，me.js 开关即时切换。 */
html.mx-lg-font { zoom: 1.15; }
/* 字体档位分段切换按钮（2026-10-27 老板二轮：我的页·字体行右侧「中号｜大号」分段直选）：
   选中段品牌色实底白字，未选中段灰字；深浅主题随既有变量联动 */
.mx-font-seg { display: inline-flex; border: 1px solid var(--border); border-radius: 8px; overflow: hidden; }
.mx-font-seg button { border: 0; background: none; color: var(--sub); font-size: 13px; line-height: 1; padding: 6px 14px; cursor: pointer; font-family: inherit; }
.mx-font-seg button.on { background: var(--brand); color: var(--on-brand, #fff); font-weight: 600; }
/* ===== 自绘下拉/单选（2026-10-30 老板令：灵感AI去原生 select/radio）===== */
.mx-select { display: flex; align-items: center; gap: 6px; height: 34px; padding: 0 10px;
  border: 1px solid var(--border); border-radius: 6px; background: var(--card); color: var(--text);
  font-size: 13px; min-width: 96px; max-width: 220px; cursor: pointer; }
.mx-select.empty .mx-sel-label { color: var(--faint); }
.mx-select .mx-sel-label { flex: 1; min-width: 0; text-align: left; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mx-select .mx-sel-chev { width: 14px; height: 14px; flex: none; color: var(--sub); transition: transform .15s; }
.mx-select.open { border-color: var(--brand); }
.mx-select.open .mx-sel-chev { transform: rotate(180deg); color: var(--brand); }
.mx-sel-pop { position: fixed; z-index: 99999; min-width: 132px; max-width: 260px; max-height: 248px; overflow-y: auto;
  background: var(--card); border: 1px solid var(--border-soft); border-radius: 10px;
  box-shadow: 0 8px 28px rgba(0,0,0,.16); padding: 4px; }
.mx-sel-opt { display: flex; align-items: center; justify-content: space-between; gap: 8px;
  padding: 9px 10px; border-radius: 7px; font-size: 13px; color: var(--text); cursor: pointer; }
.mx-sel-opt:active { background: var(--card-2); }
.mx-sel-opt.on { color: var(--brand); font-weight: 600; }
.mx-sel-tick { width: 14px; height: 14px; flex: none; }
/* 自绘单选圆点（保留原生 input 逻辑，仅换外观）：加 class="mx-radio" 即生效 */
input.mx-radio { -webkit-appearance: none; appearance: none; width: 20px; height: 20px; flex: none;
  border-radius: 50%; border: 2px solid var(--border-strong, #c8c8c8); background: var(--card);
  position: relative; cursor: pointer; transition: border-color .12s; margin: 0; }
input.mx-radio:checked { border-color: var(--brand); }
input.mx-radio:checked::after { content: ''; position: absolute; left: 50%; top: 50%; width: 10px; height: 10px;
  border-radius: 50%; background: var(--brand); transform: translate(-50%, -50%); }

/* 云贝红包（GW-261106-032；GW-261107-002 仿微信质感重做，全部原创）：卡片 / 发送面板 / 红包正面 / 详情页 / 云贝余额面板。
   动效只用 transform / opacity（UI-STANDARD-v1）；封面动效在聊天卡片上只播 2 轮（不留常驻循环），减弱动效下全部归零 */
[data-cover] { --rp-a: #E2533F; --rp-b: #D64A37; --rp-card: #FA9D3B; --rp-ink: #FCE3BC; }
[data-cover="gold"] { --rp-a: #A3171C; --rp-b: #8E1217; --rp-card: #B8262A; --rp-ink: #F6D79A; }
[data-cover="star"] { --rp-a: #4A1D4F; --rp-b: #3B1640; --rp-card: #5B2560; --rp-ink: #F3DDF0; }
[data-cover="firework"] { --rp-a: #C9242C; --rp-b: #B31E25; --rp-card: #E0473A; --rp-ink: #FFE6B8; }
[data-cover="paw"] { --rp-a: #EE7A3A; --rp-b: #E06C2E; --rp-card: #F28A45; --rp-ink: #FFF1DE; }

/* 封面装饰层 */
.rp-deco { position: absolute; inset: 0; overflow: hidden; pointer-events: none; border-radius: inherit; }
[data-cover="gold"] .rp-deco { background: radial-gradient(120% 60% at 50% 0%, rgba(246, 215, 154, .22), transparent 60%); }
[data-cover="gold"] .rp-deco::before { content: ''; position: absolute; top: -20%; bottom: -20%; left: 0; width: 38%;
  background: linear-gradient(100deg, transparent, rgba(255, 228, 160, .42), transparent); transform: translateX(-140%) skewX(-18deg);
  animation: rpShine 2.8s cubic-bezier(.45, .05, .35, 1) .3s infinite; }
@keyframes rpShine { 0% { transform: translateX(-140%) skewX(-18deg); } 55%, 100% { transform: translateX(330%) skewX(-18deg); } }
[data-cover="star"] .rp-deco { background: radial-gradient(90% 50% at 70% 10%, rgba(196, 120, 220, .28), transparent 70%); }
[data-cover="star"] .rp-deco .s { position: absolute; width: 3px; height: 3px; border-radius: 50%; background: #FFF6E0; box-shadow: 0 0 6px 1px rgba(255, 240, 210, .8);
  opacity: .25; animation: rpTwinkle 1.8s ease-in-out infinite alternate; }
.rp-deco .s0 { left: 12%; top: 14%; } .rp-deco .s1 { left: 78%; top: 9%; animation-delay: .4s !important; } .rp-deco .s2 { left: 56%; top: 30%; animation-delay: .9s !important; }
.rp-deco .s3 { left: 26%; top: 44%; animation-delay: 1.3s !important; } .rp-deco .s4 { left: 86%; top: 52%; animation-delay: .2s !important; }
.rp-deco .s5 { left: 40%; top: 72%; animation-delay: 1.1s !important; } .rp-deco .s6 { left: 66%; top: 84%; animation-delay: .6s !important; }
@keyframes rpTwinkle { from { opacity: .2; transform: scale(.6); } to { opacity: 1; transform: scale(1.15); } }
[data-cover="firework"] .rp-deco .f { position: absolute; width: 64px; height: 64px; margin: -32px 0 0 -32px; border-radius: 50%;
  border: 2px dotted rgba(255, 214, 140, .9); opacity: 0; transform: scale(.15); animation: rpBurst 2.4s cubic-bezier(.2, .7, .3, 1) infinite; }
.rp-deco .f0 { left: 24%; top: 20%; } .rp-deco .f1 { left: 76%; top: 16%; animation-delay: .8s !important; } .rp-deco .f2 { left: 52%; top: 46%; animation-delay: 1.6s !important; }
@keyframes rpBurst { 0% { opacity: 0; transform: scale(.15); } 12% { opacity: 1; } 70%, 100% { opacity: 0; transform: scale(1.5); } }
[data-cover="paw"] .rp-deco { opacity: .1;
  background-image: radial-gradient(circle at 50% 62%, #fff 0 7px, transparent 8px), radial-gradient(circle at 34% 40%, #fff 0 3px, transparent 4px),
    radial-gradient(circle at 46% 32%, #fff 0 3px, transparent 4px), radial-gradient(circle at 58% 32%, #fff 0 3px, transparent 4px), radial-gradient(circle at 70% 40%, #fff 0 3px, transparent 4px);
  background-size: 58px 58px; }
/* 聊天卡片上的动效只播 2 轮（满屏卡片不常驻动画） */
.rp-card .rp-deco::before, .rp-card .rp-deco i { animation-iteration-count: 2 !important; }

/* 聊天卡片 */
.rp-card { position: relative; width: min(232px, 64vw); border-radius: 6px; overflow: hidden; background: var(--rp-card); color: #fff; cursor: pointer;
  -webkit-tap-highlight-color: transparent; transition: transform .12s cubic-bezier(.2, .8, .3, 1); }
.rp-card:active { transform: scale(.97); }
.rp-card.done::after { content: ''; position: absolute; inset: 0; background: rgba(255, 255, 255, .38); pointer-events: none; }
.rp-card-main { position: relative; display: flex; align-items: center; gap: 10px; padding: 13px 12px 12px; }
.rp-card-icon { position: relative; flex: 0 0 30px; height: 38px; border-radius: 3px; background: #F2553E; box-shadow: 0 1px 2px rgba(0, 0, 0, .12); overflow: hidden; }
.rp-card-icon::before { content: ''; position: absolute; left: -6px; right: -6px; top: -14px; height: 26px; border-radius: 50%; background: #F87A5E; }
.rp-card-icon::after { content: ''; position: absolute; left: 50%; top: 8px; width: 10px; height: 10px; margin-left: -5px; border-radius: 50%; background: #F6CD7E; }
.rp-card-text { position: relative; min-width: 0; }
.rp-card-greet { font-size: 15px; line-height: 1.35; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rp-card-state { font-size: 12px; opacity: .88; margin-top: 2px; min-height: 16px; }
.rp-card-foot { position: relative; margin: 0 12px; padding: 4px 0 5px; border-top: 1px solid rgba(255, 255, 255, .28); color: rgba(255, 255, 255, .78); font-size: 11px; }

/* 发红包整页 v2（GW-261107-007 第一性重做）：整页一张红纸；唯一焦点 = 金额；8pt 栅格；零位移——
   金额区 / 提示槽 / 按钮都是固定高度，报错只改提示槽文字，按钮四态几何不变；封面在右上角入口进子页 */
.rp-pin { flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; min-width: 18px; padding: 0 3px; box-sizing: border-box; height: 18px; border-radius: 3px; background: #E9A23B; color: #fff; font-size: 11px; font-weight: 600; }
.rp-pin.sm { min-width: 16px; height: 16px; margin-left: 6px; vertical-align: -0.125em; font-size: 10px; }
.rp-hint { font-size: 12px; color: var(--sub); line-height: 1.6; margin-top: 6px; }
.rp-hint.sub { padding: 0 14px; }
.rp-hint.center { text-align: center; padding: 0 12px; }
.rp-pwd { width: 100%; box-sizing: border-box; padding: 10px 12px; margin-top: 10px; border: 1px solid var(--border, #e2e2e2); border-radius: 8px; font-size: 18px; letter-spacing: 8px; text-align: center; outline: none; }
.rp2 { position: relative; flex: 1; min-height: 0; display: flex; flex-direction: column; color: var(--rp-ink); background-color: var(--rp-a);
  background-image: linear-gradient(180deg, rgba(255, 255, 255, .10), rgba(255, 255, 255, 0) 38%, rgba(0, 0, 0, .10)); overflow: hidden; }
.navbar.rp2-nav { background: transparent; border-bottom: 0; }
.navbar.rp2-nav .nav-title, .navbar.rp2-nav .nav-action { color: var(--rp-ink); }
.rp2-body { flex: 1; min-height: 0; overflow-y: auto; width: 100%; max-width: 440px; margin: 0 auto; box-sizing: border-box; padding: 16px 24px calc(24px + env(safe-area-inset-bottom)); }
.rp2-line { display: flex; align-items: center; gap: 8px; height: 48px; padding: 0 16px; margin-bottom: 16px; border-radius: 8px; background: rgba(255, 255, 255, .12); }
.rp2-line-k, .rp2-line-u { flex: 0 0 auto; font-size: 15px; }
.rp2-inline-input { flex: 1; min-width: 0; height: 48px; border: 0; outline: none; background: transparent; color: #FFF6E6; font-size: 16px; text-align: right; font-variant-numeric: tabular-nums; }
.rp2-inline-input.wide { text-align: left; }
.rp2-inline-input:focus-visible, .rp2-amt:focus-visible { outline: none; }   /* 红纸上不套全局描边框：聚焦改为整行提亮（只换底色，不占位） */
.rp2-line:focus-within { background: rgba(255, 255, 255, .2); }
.rp2-amt-wrap:focus-within { border-bottom-color: rgba(255, 238, 214, .75); }
.rp2-inline-input::placeholder, .rp2-amt::placeholder { color: rgba(255, 238, 214, .55); }
.rp2-amt-block { display: grid; grid-template-rows: 24px 72px 24px; row-gap: 8px; margin: 8px 0 8px; }
.rp2-amt-label { font-size: 14px; line-height: 24px; text-align: center; opacity: .88; }
.rp2-amt-wrap { position: relative; height: 72px; border-bottom: 1px solid rgba(255, 255, 255, .3); }
.rp2-unit { position: absolute; left: 0; bottom: 16px; font-size: 15px; line-height: 24px; opacity: .88; pointer-events: none; }
.rp2-amt { display: block; width: 100%; height: 72px; box-sizing: border-box; padding: 0 56px; border: 0; outline: none; background: transparent; color: #FFF6E6;
  font-size: 48px; font-weight: 600; line-height: 72px; text-align: center; font-variant-numeric: tabular-nums; caret-color: #F7D58C; }
.rp2-amt-wrap.roll .rp2-amt { animation: rp2Roll .16s cubic-bezier(.2, .8, .3, 1); }
@keyframes rp2Roll { from { transform: translateY(6px); opacity: .55; } }
.rp2-msg { height: 24px; line-height: 24px; font-size: 13px; text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; opacity: .85; }
.rp2-msg.warn { color: #FFE08A; font-weight: 600; opacity: 1; }
.rp2-modeline { height: 24px; margin-bottom: 8px; text-align: center; }
.rp2-mode { height: 24px; padding: 0; border: 0; background: none; color: var(--rp-ink); font-size: 13px; text-decoration: underline; text-underline-offset: 3px; }
.rp2-chips { display: flex; justify-content: center; gap: 8px; height: 32px; margin-bottom: 16px; }
.rp2-chip { height: 32px; padding: 0 16px; border: 1px solid rgba(255, 255, 255, .42); border-radius: 16px; background: transparent; color: var(--rp-ink); font-size: 14px;
  font-variant-numeric: tabular-nums; transition: transform .12s cubic-bezier(.34, 1.56, .64, 1); }
.rp2-chip:active { transform: scale(.94); }
.rp2-cta { position: relative; display: block; width: 100%; max-width: 320px; height: 48px; margin: 24px auto 16px; padding: 0; border: 0; border-radius: 8px;
  background: #F7D58C; color: #5A2A12; font-size: 17px; font-weight: 600; transition: opacity .15s, transform .12s; -webkit-tap-highlight-color: transparent; }
.rp2-cta:active:not(:disabled) { transform: scale(.98); }
.rp2-cta:disabled { opacity: .45; }
.rp2-cta.loading:disabled, .rp2-cta.ok:disabled { opacity: 1; }
.rp2-cta-label { display: block; line-height: 48px; }
.rp2-cta-spin, .rp2-cta-ok { position: absolute; left: 50%; top: 50%; display: none; }
.rp2-cta-spin { width: 20px; height: 20px; margin: -10px 0 0 -10px; box-sizing: border-box; border: 2px solid rgba(90, 42, 18, .25); border-top-color: #5A2A12; border-radius: 50%; animation: rp2Spin .8s linear infinite; }
.rp2-cta-ok { width: 24px; height: 24px; margin: -12px 0 0 -12px; font-size: 22px; line-height: 24px; text-align: center; }
.rp2-cta.loading .rp2-cta-label, .rp2-cta.ok .rp2-cta-label { visibility: hidden; }
.rp2-cta.loading .rp2-cta-spin, .rp2-cta.ok .rp2-cta-ok { display: block; }
@keyframes rp2Spin { to { transform: rotate(360deg); } }
.rp2-bal { display: block; height: 24px; margin: 0 auto; padding: 0 8px; border: 0; background: none; color: var(--rp-ink); font-size: 13px; line-height: 24px; font-variant-numeric: tabular-nums; }
.rp2-bal::after { content: ' \203A'; }
.rp2-rules { display: flex; justify-content: center; align-items: center; gap: 8px; height: 24px; margin-top: 8px; font-size: 12px; opacity: .75; }
.rp2-rules-link { height: 24px; padding: 0; border: 0; background: none; color: var(--rp-ink); font-size: 12px; text-decoration: underline; text-underline-offset: 3px; }
.rp2-cover-entry { padding: 0 8px; }
.rp2-cover-mini { position: relative; display: block; width: 20px; height: 28px; border-radius: 3px; background: var(--rp-a); box-shadow: 0 0 0 1.5px rgba(255, 255, 255, .85); overflow: hidden; }
/* 封面子页 */
.rp2-cv { position: absolute; inset: 0; z-index: 20; display: flex; flex-direction: column; background: var(--bg); color: var(--text); animation: rp2CvIn .26s cubic-bezier(.16, 1, .3, 1); }
@keyframes rp2CvIn { from { transform: translateX(100%); } }
.rp2-cv.out { transform: translateX(100%); transition: transform .22s ease-in; }
.rp2-cv .navbar.rp2-nav .nav-title, .rp2-cv .navbar.rp2-nav .nav-action { color: var(--text); }
.rp2-cv-body { flex: 1; min-height: 0; overflow-y: auto; width: 100%; max-width: 440px; margin: 0 auto; box-sizing: border-box; padding: 8px 24px calc(24px + env(safe-area-inset-bottom)); }
.rp2-cv-preview { position: relative; width: 120px; aspect-ratio: 2 / 3; margin: 8px auto 8px; border-radius: 8px; background: var(--rp-a); overflow: hidden; box-shadow: 0 8px 24px rgba(0, 0, 0, .18); }
.rp2-cv-note { height: 24px; margin-bottom: 16px; font-size: 13px; line-height: 24px; text-align: center; color: var(--sub); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }   /* 固定高度提示槽：购买说明 / 报错只换文字 */
.rp2-cv-note.warn { color: var(--down); font-weight: 600; }
.rp2-cv-tag { height: 16px; margin-top: -4px; font-size: 11px; line-height: 16px; text-align: center; color: #C9861F; font-variant-numeric: tabular-nums; white-space: nowrap; }
.rp2-cv-tag.own { color: var(--sub); }
.rp2-cv-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.rp2-cv-tile { display: flex; flex-direction: column; align-items: stretch; gap: 8px; padding: 0; border: 0; background: none; color: inherit; -webkit-tap-highlight-color: transparent; }
.rp2-cv-face { position: relative; display: block; aspect-ratio: 2 / 3; border-radius: 8px; background: var(--rp-a); overflow: hidden; }
.rp2-cv-face::after { content: ''; position: absolute; inset: 0; z-index: 3; border-radius: 8px; box-shadow: inset 0 0 0 3px transparent; transition: box-shadow .15s; }
.rp2-cv-tile.on .rp2-cv-face::after { box-shadow: inset 0 0 0 3px #E9A23B; }   /* 选中描边画在内侧：不占位、不位移 */
.rp2-cv-badge { position: absolute; top: 8px; right: 8px; z-index: 4; width: 28px; height: 16px; border-radius: 4px; background: rgba(0, 0, 0, .38); color: #fff;
  font-size: 9px; font-style: normal; line-height: 16px; text-align: center; overflow: hidden; white-space: nowrap; }
.rp2-cv-name { height: 20px; font-size: 13px; line-height: 20px; text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rp2-cv-tile.on .rp2-cv-name { font-weight: 600; }
.rp2-cv-face::before, .rp2-cv-preview::before, .rp2-cover-mini::before { content: ''; position: absolute; left: -20%; right: -20%; top: 44%; height: 30%; border-radius: 50%; background: var(--rp-b); transform: translateY(40%); }
.rp2-cv-face .seal, .rp2-cv-preview .seal, .rp2-cover-mini .seal { position: absolute; z-index: 1; left: 50%; top: 60%; width: 30%; aspect-ratio: 1; margin-left: -15%; border-radius: 50%; background: #F1CC86; }
.rp2-cv-body > .rp2-cta { margin-top: 32px; }
@media (prefers-reduced-motion: reduce) {
  .rp2-amt-wrap.roll .rp2-amt, .rp2-cv { animation: none; }
  .rp2-cv.out, .rp2-chip, .rp2-cta, .rp2-cv-face::after { transition: none; }
}

/* 红包正面（点卡片立刻弹出；「開」转圈；拆开 = 上下两半分离） */
.rp-env-mask { background: rgba(0, 0, 0, .62); }
.rp-env-mask.out { opacity: 0; transition: opacity .2s ease .04s; }
.rp-env-mask.out:has(.rp-env.opening) { transition: opacity .34s ease .08s; }
.rp-env { position: relative; width: min(300px, 80vw); height: calc(min(300px, 80vw) * 1.6); max-height: 78vh; animation: rpEnvIn .34s cubic-bezier(.34, 1.36, .64, 1); }
@keyframes rpEnvIn { from { opacity: 0; transform: scale(.82); } }
.rp-env-top { position: absolute; left: 0; right: 0; top: 0; height: 66%; z-index: 2; background: var(--rp-a); border-radius: 12px 12px 0 0;
  display: flex; flex-direction: column; align-items: center; color: var(--rp-ink); transition: transform .4s cubic-bezier(.6, 0, .35, 1); }
.rp-env-top::after { content: ''; position: absolute; left: 0; right: 0; bottom: -30px; height: 30px; border-radius: 0 0 50% 50% / 0 0 100% 100%; background: var(--rp-a);
  box-shadow: 0 4px 5px rgba(0, 0, 0, .16); z-index: -1; }   /* 封口弧收在红包宽度内 */
.rp-env-top .rp-deco { border-radius: 12px 12px 0 0; }
.rp-env-bot { position: absolute; left: 0; right: 0; bottom: 0; top: 60%; z-index: 1; background: var(--rp-b); border-radius: 0 0 12px 12px;
  display: flex; align-items: flex-end; justify-content: center; padding-bottom: 22px; transition: transform .4s cubic-bezier(.6, 0, .35, 1); }
.rp-env-from { position: relative; display: flex; align-items: center; gap: 8px; margin-top: 52px; font-size: 16px; min-height: 26px; max-width: 86%; }
.rp-env-from span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rp-env-greet { position: relative; margin: 20px 22px 0; font-size: 22px; line-height: 1.4; text-align: center; word-break: break-all; }
.rp-env-note { position: relative; margin: 6px 22px 0; font-size: 20px; text-align: center; }
.rp-env-link { display: none; align-items: center; gap: 4px; border: 0; background: none; color: var(--rp-ink); font-size: 14px; opacity: .92; }
.rp-env-link span { font-size: 18px; line-height: 1; }
.rp-env.ended .rp-env-link { display: inline-flex; }
.rp-open { position: absolute; left: 50%; top: 66%; z-index: 3; width: 92px; height: 92px; margin: -16px 0 0 -46px; padding: 0; border: 0; border-radius: 50%;
  background: radial-gradient(circle at 36% 30%, #FBE5B4, #E9C27A 62%, #D9A95A); color: #3B2716; box-shadow: 0 4px 10px rgba(0, 0, 0, .22);
  transition: transform .14s cubic-bezier(.34, 1.56, .64, 1), opacity .2s; -webkit-tap-highlight-color: transparent; }
.rp-open-face { display: block; font-size: 38px; font-weight: 600; line-height: 92px; font-family: "Songti SC", "STSong", "Noto Serif CJK SC", serif; }
.rp-open-face.long { font-size: 19px; font-family: inherit; }   /* 英 / 韩「Open / 열기」 */
.rp-open:active:not(:disabled) { transform: scale(.93); }
.rp-open:disabled:not(.spinning) { opacity: .7; }
.rp-open.spinning { animation: rpFlip .72s linear infinite; }
@keyframes rpFlip { from { transform: perspective(300px) rotateY(0); } to { transform: perspective(300px) rotateY(360deg); } }
.rp-env.opening .rp-env-top { transform: translateY(-112%); }
.rp-env.opening .rp-env-bot { transform: translateY(112%); }
.rp-env.opening .rp-open { opacity: 0; transform: scale(.6); }
.rp-env.opening .rp-env-close { opacity: 0; }
.rp-env-close { position: absolute; left: 50%; bottom: -58px; width: 36px; height: 36px; margin-left: -18px; padding: 0; border: 1.5px solid rgba(255, 255, 255, .78);
  border-radius: 50%; background: none; color: #fff; display: flex; align-items: center; justify-content: center; transition: opacity .2s; }

/* 详情页 */
.navbar.rp-nav { background: #D9533F; border-bottom: 0; }
.navbar.rp-nav .nav-title, .navbar.rp-nav .nav-action { color: #FCE3BC; }
.rp-detail { padding: 0 0 24px; background: var(--card); min-height: 100%; }
.rp-dhead { position: relative; height: 46px; background: #D9533F; }
.rp-dhead::after { content: ''; position: absolute; left: -12%; right: -12%; bottom: -26px; height: 52px; border-radius: 50%; background: #D9533F; }
.rp-dcard { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 44px 16px 22px; }
.rp-detail-from { display: flex; align-items: center; font-size: 17px; font-weight: 600; color: var(--text); margin-top: 4px; }
.rp-detail-greet { font-size: 14px; color: var(--sub); text-align: center; word-break: break-all; }
.rp-detail-amt { display: flex; align-items: baseline; gap: 6px; margin-top: 14px; color: #C79A4E; }
.rp-detail-amt b { font-size: 50px; font-weight: 500; line-height: 1; font-variant-numeric: tabular-nums; }
.rp-detail-amt span { font-size: 15px; }
.rp-wallet-link { display: inline-flex; align-items: center; gap: 2px; margin-top: 6px; border: 0; background: none; color: var(--wx-link, #576B95); font-size: 13px; padding: 4px 6px; }
.rp-wallet-link span { font-size: 17px; line-height: 1; }
.rp-detail-state { display: flex; align-items: center; gap: 8px; padding: 14px 16px 8px; font-size: 13px; color: var(--sub); border-top: 10px solid var(--bg); }
.rp-tag { font-size: 11px; padding: 0 6px; border: 1px solid var(--border); border-radius: 4px; }
.rp-claims { background: var(--card); }
.rp-claim-row { display: flex; align-items: center; gap: 12px; padding: 11px 16px; border-bottom: 1px solid var(--border-soft); }
.rp-claim-who { flex: 1; min-width: 0; }
.rp-claim-who .n { font-size: 15px; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rp-claim-who .rp-hint { margin-top: 2px; }
.rp-claim-amt { font-size: 15px; color: var(--text); font-variant-numeric: tabular-nums; display: flex; align-items: center; gap: 6px; }
/* 手气王（2026-11-07 群管理改版·红包补强）：随机群红包最高者金色标 */
.rp-best { font-size: 11px; font-weight: 700; color: #F0B90B; background: rgba(240,185,11,.14); border: 1px solid rgba(240,185,11,.38); border-radius: 4px; padding: 1.5px 5px; white-space: nowrap; }
/* 详情页停留期间新领取行淡入（动效仅 opacity/transform，合成层友好） */
.rp-claim-new { animation: rpClaimIn .45s ease both; }
@keyframes rpClaimIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .rp-claim-new { animation: none; } }
/* 红包过期/冻结退回灰条（金色可点，同 msg-system 居中形态） */
.msg-system.rp-refund-bar { color: #f5c86e; background: rgba(240,185,11,.10); border-radius: 6px; padding: 5px 10px; margin: 10px auto; max-width: 86%; cursor: pointer; }
html.light .msg-system.rp-refund-bar { color: #8a6a1f; background: rgba(240,185,11,.16); }
.msg-system.rp-refund-bar:active { opacity: .7; }
.rp-hint.foot { text-align: center; padding: 16px; }

/* 我的云贝面板 */
.rp-ybs { padding: 6px 20px calc(18px + env(safe-area-inset-bottom)); text-align: center; }
.rp-ybs-grab { width: 36px; height: 4px; margin: 4px auto 12px; border-radius: 2px; background: var(--border); }
.rp-ybs-title { font-size: 15px; color: var(--sub); }
.rp-ybs-num { margin: 10px 0 4px; font-size: 38px; font-weight: 600; color: var(--text); font-variant-numeric: tabular-nums; }
.rp-ybs-sub { font-size: 12px; color: var(--sub); }
.rp-ybs-btn { display: block; width: 100%; height: 46px; margin-top: 22px; border: 0; border-radius: 8px; background: #E2533F; color: #fff; font-size: 16px; }
.rp-ybs-close { display: block; width: 100%; height: 44px; margin-top: 8px; border: 0; background: none; color: var(--sub); font-size: 15px; }

@media (prefers-reduced-motion: reduce) {
  .rp-deco::before, .rp-deco i { animation: none !important; opacity: .7; transform: none; }
  .rp-env { animation: none; }
  .rp-open.spinning { animation-duration: 2.4s; }
  .rp-env-top, .rp-env-bot, .rp-open, .rp-card { transition: none; }
}