/* ============================================================
   猫信 · 设计系统 V3 —— 「微信绿」IM 语言（与千云猫主站金色金融风
   刻意分离：主站=金色金融，猫信=国民 IM 的熟悉与安心）
   ------------------------------------------------------------
   THESIS: IM 的第一印象是"熟悉可靠"——微信绿是十亿人的肌肉记忆，
           企业 IM 借用这份信任感，而非另起炉灶让用户重新学习。
   OWN-WORLD: 品牌绿 #07C160 唯一强调色；浅色（默认）= 微信经典
           #EDEDED 灰基底 + 白卡片 + 自己的气泡 #95EC69；深色 =
           微信深色 #111111 基底 + 自己的气泡 #3EB575（白字）。
           功能色仅用于状态语义，不作装饰。
   STORY: 用户从金色的千云猫主站点进猫信，明确感知"进入了一个
           专注聊天的独立空间"——像从公众号点进了微信聊天。
   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: #F6465D; --down-bg: rgba(246,70,93,.14);
  --warn: #FCD535; --warn-bg: rgba(252,213,53,.10);
  --info: #4B9EF8; --info-bg: rgba(75,158,248,.12);
  --orange: #FF9F0A;

  /* 气泡（微信深色：自己=暗绿白字，对方=深灰） */
  --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: #9A9A9A;

  --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: #E5384F; --down-bg: rgba(229,56,79,.10);
  --warn: #C9A200; --warn-bg: rgba(201,162,0,.10);
  --info: #2F6BFF; --info-bg: rgba(47,107,255,.08);
  --orange: #E8720C;

  --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; }
.search-tools input[type=date] {
  height: 28px; border: 1px solid var(--border); border-radius: 6px; font-size: 12px;
  padding: 0 6px; background: var(--card); color: var(--sub);
}
.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: 40px; height: 40px; font-size: 22px; border-radius: 11px; cursor: pointer; }
.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: 10px; color: var(--sub); background: var(--chip-bg); border-radius: 4px; padding: 0 4px; flex-shrink: 0; }
.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; }
.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: 11px; color: var(--chip-text); background: var(--chip-bg); border-radius: 5px; padding: 2px 7px; font-variant-numeric: tabular-nums; }

.msg-row { display: flex; gap: 9px; margin: 10px 0; align-items: flex-start; }
.msg-row.mine { flex-direction: row-reverse; }
.msg-col { max-width: 74%; display: flex; flex-direction: column; }
.msg-row.mine .msg-col { align-items: flex-end; }
.msg-sender { font-size: 11px; color: var(--sub); margin-bottom: 3px; padding: 0 4px; }
.msg-bubble {
  position: relative; padding: 9px 13px; border-radius: var(--radius-lg); font-size: 15.5px;
  line-height: 1.5; word-break: break-word;
  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); }
.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: 11px; color: var(--faint); margin-top: 4px; padding: 0 4px; display: flex; gap: 5px; align-items: center; }
.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;
}
.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; }
.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: 86%; margin-left: auto; margin-right: auto;
}
.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: 88%; margin-left: auto; margin-right: auto; box-shadow: var(--shadow-1);
}
.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; }
.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;
}
.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); }
.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 .18s ease;
}
@keyframes modalIn { from { opacity: 0; transform: scale(.92); } }
.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); }

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

/* 安全拦截弹窗 */
.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;
}

/* 群信息抽屉 */
.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: 82%; max-width: 360px;
  background: var(--card); z-index: 401; display: flex; flex-direction: column;
  box-shadow: var(--shadow-2); animation: slideIn .2s ease;
}
@keyframes slideIn { from { transform: translateX(100%); } }
.drawer-head { padding: 18px 16px 12px; border-bottom: 1px solid var(--border-soft); }
.drawer-head .g-name { font-size: 17px; font-weight: 650; display: flex; align-items: center; gap: 8px; }
.drawer-head .g-sub { font-size: 12px; color: var(--sub); margin-top: 4px; }
.drawer-body { flex: 1; overflow-y: auto; padding: 8px 0; }
.drawer-sec { padding: 12px 16px 4px; font-size: 12px; color: var(--faint); letter-spacing: .06em; }
/* 群成员网格：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: 4px 8px; 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: 11px; color: var(--sub); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%; min-width: 0; }
.role-tag { font-size: 9px; border-radius: 4px; padding: 0 4px; font-weight: 600; }
.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); }
.drawer-op { display: flex; justify-content: space-between; align-items: center; padding: 13px 16px; border-bottom: 1px solid var(--border-soft); font-size: 14px; min-width: 0; flex-wrap: wrap; row-gap: 4px; }
.drawer-op.col { flex-direction: column; align-items: stretch; }
.drawer-op .hint { font-size: 12px; color: var(--faint); }
.drawer-op input[type=text] { border: 1px solid var(--border); background: var(--bg-soft); border-radius: 6px; padding: 6px 8px; font-size: 13px; min-width: 0; }
.drawer-op button { border: 1px solid var(--brand); color: var(--brand); border-radius: 6px; padding: 4px 12px; font-size: 12px; flex: none; }
/* 8.31v2-X2：抽屉内长文本窄屏防溢出（成员昵称防溢出已并入上方 member 规则） */
.drawer-head .g-sub { word-break: break-all; }

/* 置底按钮 */
.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: 4px 12px; font-size: 12px; }
.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; }

/* 图片查看器 */
.lightbox { position: fixed; inset: 0; background: rgba(2,3,5,.94); z-index: 1100; display: flex; align-items: center; justify-content: center; overflow: hidden; }
.lightbox img { max-width: 96vw; max-height: 90vh; transition: transform .15s; }
.lightbox .lb-close { position: absolute; top: 14px; right: 16px; color: #fff; font-size: 26px; }

/* 桌面端适配 */
@media (min-width: 521px) {
  body { background: var(--outside); }
}

.login-ver { text-align: center; font-size: 11px; color: var(--faint); margin-top: 14px; letter-spacing: .05em; }

/* ============ 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: 10.5px; letter-spacing: 0; }
.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: #FA5151; color: #fff; font-size: 10px; line-height: 16px; text-align: center;
}
.page-body.has-tabbar { padding-bottom: 0; }

/* —— C位凸起圆钮（猫道出行）：渐变绿圆钮浮出底栏 —— */
.tab-item.tab-center .tab-ico { height: 34px; align-items: flex-start; }
.tab-center-circle {
  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; }

/* —— 微信式导航（标题居中，两侧按钮区等宽占位） —— */
.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; }

/* —— 新的朋友：请求按钮 —— */
.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: #576B95; 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: 11.5px; color: var(--sub); margin-top: 4px; word-break: break-all; }
.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; }
.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: #FA5151; 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); }
.moments-cover-img { position: absolute; inset: 0; }
.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: #576B95; 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: #576B95; margin-top: 4px; }
.moment-time { font-size: 11.5px; color: var(--faint); margin-top: 4px; }
.moment-del { color: #576B95; 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; }
.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: #576B95; 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: #576B95; font-weight: 500; }
.mc-more { color: #576B95; font-size: 12.5px; margin-top: 4px; }
.mc-reply { color: #576B95; 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; }
.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; }
.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: #576B95; 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: #576B95; font-weight: 500; }
.mc-more { color: #576B95; 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: 11px; color: var(--faint); display: flex; gap: 12px; align-items: center; }
.mc-reply-btn { color: #576B95; }
.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: #FA5151; color: #fff; font-size: 10px; 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; }

/* —— 朋友圈消息页（微信式：互动通知列表） —— */
.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: #576B95; font-weight: 600; }
.mn-act { color: var(--text-2); }
.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: 10px; color: var(--sub); display: flex; align-items: center; justify-content: center; padding: 4px; overflow: hidden; box-sizing: border-box; line-height: 1.3; text-align: center; }

/* —— 点赞评论区微信式精修：有点赞也有评论时中间细线，评论行间距 —— */
.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: 11.5px; color: var(--faint); }
.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: #576B95; 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: #576B95; font-weight: 600; }
.mc-row .mc-text { color: var(--text); }
.mc-more { color: #576B95; 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 .22s ease-out; }
@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: 11px; color: var(--faint); display: flex; align-items: center; gap: 12px; }
.mc-reply-btn { color: #576B95; 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: #576B95; margin-top: 4px; }


/* ===== v139：朋友圈赞/评论改微信同款「··」两点按钮 + 横向弹出胶囊菜单 =====
   取代历代 .moment-acts 常驻胶囊（v126 绝对定位版/v128 行内版/v129 加大版均已删）：
   操作收进「··」按钮，点击弹出深色横条「♡ 赞 | 💬 评论」，点外部任意处收起 */
.moment-time { position: relative; }
.mm-toggle { 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 i { width: 4px; height: 4px; border-radius: 50%; background: #576B95; }
.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: #FF6700; color: #fff; font-size: 13px; font-weight: 700; padding: 8px 18px; cursor: pointer; }
.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: #E64340; }

/* 司机任务卡片（司机专属频道，开始/结束任务按钮） */
.driver-task-card { background: var(--card); border: 1px solid var(--border); border-radius: 10px; padding: 12px; max-width: 320px; }
.dt-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; font-size: 14px; gap: 8px; }
.dt-pill { font-size: 11px; padding: 2px 8px; border-radius: 9px; white-space: nowrap; }
.dt-pill.assigned { background: rgba(240,185,11,.15); color: #F0B90B; }
.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: 12.5px; padding: 4px 0; border-bottom: 1px dashed var(--border-soft); }
.dt-row .k { color: var(--sub); flex: none; width: 68px; }
/* 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: 9px; font-size: 14px; font-weight: 600; cursor: pointer; }
.dt-btn.start { background: var(--brand); color: #fff; }
.dt-btn.finish { background: #E64340; 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: rgba(230, 67, 64, .08); color: #E64340; 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; }

/* ===== 切换账号（会话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: 10px; background: #07C160; color: #fff; border-radius: 4px; padding: 2px 6px; font-weight: 700; vertical-align: 2px; }
.as-ops { display: flex; gap: 6px; }
.as-op { width: 30px; height: 30px; border-radius: 50%; border: 1px solid var(--border-soft); background: transparent; color: var(--sub); font-size: 13px; cursor: pointer; }
.as-danger { color: #E64340; }
.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: 11px; color: var(--brand); background: rgba(7,193,96,.1); border-radius: 8px; padding: 4px 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: #FA5151; 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; }
.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: #FA5151; 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: #FA5151; 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-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; }
.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: 11px; color: var(--faint); margin-bottom: 3px; }
.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; }
.fb-msg-time { font-size: 10.5px; color: var(--faint); margin-top: 4px; text-align: right; }
.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: #FA5151; color: #FA5151; }
.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: 26;
  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; } }
/* 回底浮动钮的新消息计数徽标（橙色=有未读新消息） */
.jump-badge {
  position: absolute; top: -6px; right: -7px; min-width: 17px; height: 17px; padding: 0 4px;
  border-radius: 999px; background: #FA9D3B; color: #fff; font-size: 10px; line-height: 17px;
  text-align: center; font-weight: 700; font-style: normal;
}
/* 拍一拍：头像原地弹跳（十式式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 动态眼层，背景/尺寸沿用原头像 ===== */
.live-kefu { position: relative; display: block; width: 100%; height: 100%; }
.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; } }