/* 聊天框页：顶栏 / 消息气泡 / 底栏 / 通话页 / 消息菜单 / 弹层（原 index.html 第 1912-2814 行） */

/* ============================================================
   聊天框页：顶栏 / 消息区 / 底栏（输入行 + 功能行）
   ============================================================ */
.talk-view{
  background:var(--bg);
  background-size:cover; background-position:center; background-repeat:no-repeat;
}
/* 顶栏透明：能透出下面的壁纸 */
.talk-head{
  flex:0 0 auto;
  position:relative;
  display:flex; align-items:center; gap:2px;
  padding:var(--head-top) 10px 5px;
  border-bottom:none;
  background:transparent;
}
.talk-head .back-btn,
.talk-head .icon-btn{
  width:36px; height:36px;
  min-width:36px; min-height:36px;
  flex:0 0 auto;
}
.talk-head .back-btn svg{ width:20px; height:20px; }
/* 报错记录挪到返回键右边；右侧那组图标靠 margin-left:auto 顶到最右 */
.talk-head .talk-err-btn{ margin-right:2px; }
.talk-err-btn svg{ width:19px; height:19px; }
.talk-head .talk-calllog-btn{ margin-left:auto; }
.talk-title{
  /* 顶栏上内边距含了状态栏安全区，标题要在「安全区以下」的那段里居中，所以往下补一半安全区 */
  position:absolute; left:50%; top:calc(50% + var(--sat) / 2);
  transform:translate(-50%,-50%);
  /* 左边返回 + 报错、右边三个图标，留出两侧各 120px 才不会压到图标上 */
  max-width:calc(100% - 240px);
  text-align:center;
  font-size:15.5px; font-weight:600;
  margin:0;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
  pointer-events:none;
}
/* 顶栏右侧图标：离线长文本 / 更多 */
.talk-more svg{ width:20px; height:20px; }
.talk-offline-btn svg{ width:19px; height:19px; }
.talk-offline-btn.on{ color:var(--accent); }
.talk-calllog-btn svg{ width:19px; height:19px; }

/* ============ 通话页（语音 / 视频，全屏覆盖层） ============ */
.call-screen{
  position:absolute; inset:0;
  z-index:96;
  display:none;
  flex-direction:column;
  background:#141418;
  color:#fff;
  padding-top:env(safe-area-inset-top);
  overflow:hidden;
}
.call-screen.show{ display:flex; animation:viewIn .3s var(--ease-out) both; }
.call-screen.video::before{
  content:'';
  position:absolute; inset:0;
  background:var(--call-bg) center/cover no-repeat;
  filter:blur(28px) brightness(.45);
  transform:scale(1.15);
  z-index:0;
}
.call-screen > *{ position:relative; z-index:1; }
.call-head{
  flex:0 0 auto;
  display:flex; align-items:center; justify-content:space-between;
  padding:10px 12px 0;
}
.call-mode-tag{
  font-size:12px; color:rgba(255,255,255,.7);
  background:rgba(255,255,255,.12);
  padding:5px 12px; border-radius:999px;
}
.call-mini-btn{
  width:38px; height:38px;
  border:none; border-radius:50%;
  background:rgba(255,255,255,.12); color:#fff;
  display:flex; align-items:center; justify-content:center;
  cursor:pointer;
}
.call-mini-btn svg{ width:19px; height:19px; fill:none; stroke:currentColor; stroke-width:1.9; stroke-linecap:round; stroke-linejoin:round; }
.call-hero{
  flex:0 0 auto;
  display:flex; flex-direction:column; align-items:center;
  padding:22px 20px 10px;
}
.call-avatar, .call-avatar-initial{
  width:96px; height:96px; border-radius:32px;
  object-fit:cover;
  box-shadow:0 14px 34px rgba(0,0,0,.4);
}
.call-avatar-initial{
  display:flex; align-items:center; justify-content:center;
  background:#2A2A32; color:#fff;
  font-size:38px; font-weight:600;
}
.call-screen.ringing .call-avatar,
.call-screen.ringing .call-avatar-initial{ animation:callPulse 1.6s ease-in-out infinite; }
@keyframes callPulse{
  0%,100%{ transform:scale(1); }
  50%{ transform:scale(1.05); }
}
.call-name{ margin-top:14px; font-size:19px; font-weight:600; }
.call-status{
  margin-top:5px;
  font-size:13px; color:rgba(255,255,255,.62);
  font-variant-numeric:tabular-nums;
}
.call-body{
  flex:1; min-height:0;
  overflow-y:auto;
  padding:8px 20px 12px;
  display:flex; flex-direction:column; gap:10px;
}
.call-body::-webkit-scrollbar{ width:0; }
.call-line{
  font-size:14.5px; line-height:1.65;
  color:rgba(255,255,255,.92);
  word-break:break-word; white-space:pre-wrap;
  animation:msgIn .3s var(--ease-out) both;
  cursor:pointer;
  border-radius:10px;
  padding:2px 4px;
  margin:0 -4px;
}
.call-line.me{ color:rgba(255,255,255,.62); text-align:right; }
.call-line b{ font-weight:600; opacity:.7; margin-right:6px; font-size:12.5px; }
.call-line.ta b{ margin-right:6px; }
.call-line.editable:active{ background:rgba(255,255,255,.08); }
.call-line .call-voice-mark{
  display:inline-block; margin-left:6px; font-size:11px; opacity:.55; vertical-align:middle;
}
.call-line.aside{
  align-self:center;
  text-align:center;
  font-size:12.5px; font-style:italic;
  color:rgba(255,255,255,.55);
  background:rgba(255,255,255,.08);
  padding:6px 14px; border-radius:12px;
}
.call-line.sys{ align-self:center; font-size:12px; color:rgba(255,255,255,.45); }
.call-empty{
  margin:auto; text-align:center;
  font-size:13px; color:rgba(255,255,255,.4);
  line-height:1.8;
}
.call-typing{ display:flex; gap:4px; padding:4px 0; }
.call-typing span{
  width:6px; height:6px; border-radius:50%;
  background:rgba(255,255,255,.6);
  animation:typingDot 1.1s ease-in-out infinite;
}
.call-typing span:nth-child(2){ animation-delay:.16s; }
.call-typing span:nth-child(3){ animation-delay:.32s; }
@keyframes typingDot{ 0%,80%,100%{ opacity:.3; transform:translateY(0); } 40%{ opacity:1; transform:translateY(-3px); } }
.call-foot{
  flex:0 0 auto;
  padding:10px 16px calc(16px + env(safe-area-inset-bottom));
  display:flex; flex-direction:column; gap:12px;
}
.call-input-row{ display:flex; align-items:flex-end; gap:8px; }
.call-input{
  flex:1; min-width:0;
  border:none; outline:none; resize:none;
  background:rgba(255,255,255,.12);
  color:#fff;
  font-family:inherit; font-size:14.5px; line-height:1.5;
  padding:11px 14px;
  border-radius:18px;
  max-height:96px;
}
.call-input::placeholder{ color:rgba(255,255,255,.4); }
.call-act-btn{
  flex:0 0 auto;
  height:42px; padding:0 15px;
  border:none; border-radius:999px;
  background:rgba(255,255,255,.14); color:#fff;
  font-family:inherit; font-size:13.5px; font-weight:500;
  cursor:pointer;
  transition:transform .18s var(--spring), background .18s;
}
.call-act-btn:active{ transform:scale(.94); }
.call-act-btn.primary{ background:#fff; color:#0B0B0F; }
.call-edit-input{
  display:block; width:calc(100% - 32px); margin:4px 16px 0;
  box-sizing:border-box; min-height:96px; resize:vertical;
  border:none; border-radius:14px; padding:12px 14px;
  background:var(--fill); color:var(--ink);
  font:14.5px/1.6 inherit;
}
.call-btn-row{ display:flex; align-items:center; justify-content:center; gap:46px; }
.call-round{
  display:flex; flex-direction:column; align-items:center; gap:7px;
  border:none; background:transparent; color:rgba(255,255,255,.8);
  font-family:inherit; font-size:12px;
  cursor:pointer;
}
.call-round i{
  width:62px; height:62px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  background:rgba(255,255,255,.14);
  transition:transform .18s var(--spring);
}
.call-round:active i{ transform:scale(.92); }
.call-round i svg{ width:28px; height:28px; fill:none; stroke:#fff; stroke-width:1.9; stroke-linecap:round; stroke-linejoin:round; }
.call-round.hang i{ background:var(--danger); }
.call-round.answer i{ background:#34C759; }
.call-screen.ringing .call-input-row{ display:none; }
.call-screen.ringing .call-body{ display:none; }
.call-screen.ringing .call-hero{ flex:1; justify-content:center; }
.call-screen:not(.incoming) .call-round.answer{ display:none; }
.call-screen:not(.incoming) .call-round.reject{ display:none; }
.call-screen.incoming .call-round.hang{ display:none; }

/* 群聊通话：多头像 */
.call-avatars{
  display:flex; flex-wrap:wrap; justify-content:center; gap:10px;
  max-width:280px;
}
.call-avatars .call-av{
  width:56px; height:56px; border-radius:18px;
  object-fit:cover;
  box-shadow:0 8px 20px rgba(0,0,0,.35);
  background:#2A2A32;
}
.call-avatars .call-av.me{
  box-shadow:0 0 0 2px rgba(52,199,89,.7), 0 8px 20px rgba(0,0,0,.35);
}
.call-screen.ringing .call-avatars .call-av{ animation:callPulse 1.6s ease-in-out infinite; }
.call-screen.group .call-hero .call-avatar,
.call-screen.group .call-hero > .call-avatar-initial{ display:none; }
.call-joined-tip{
  margin-top:8px;
  font-size:11.5px; color:rgba(255,255,255,.5);
  text-align:center; max-width:280px; line-height:1.5;
}

/* 群聊邀请面板 */
.gcall-pick{
  display:flex; flex-direction:column; gap:8px;
  max-height:42vh; overflow-y:auto;
  margin-bottom:4px;
}
.gcall-pick::-webkit-scrollbar{ width:0; }
.gcall-pick-item{
  display:flex; align-items:center; gap:10px;
  padding:10px 12px;
  border:none; border-radius:14px;
  background:var(--bg);
  font-family:inherit; font-size:14px; color:var(--ink);
  text-align:left; cursor:pointer;
}
.gcall-pick-item img{
  width:36px; height:36px; border-radius:50%; object-fit:cover; flex:0 0 auto;
}
.gcall-pick-item span{ flex:1; min-width:0; font-weight:500; }
.gcall-pick-item i{
  width:22px; height:22px; border-radius:50%;
  border:1.5px solid var(--hairline);
  flex:0 0 auto;
  font-style:normal;
}
.gcall-pick-item.on i{
  border-color:var(--tint);
  background:var(--tint);
  box-shadow:inset 0 0 0 4px var(--bg);
}

/* 缩小后的小窗：右上角悬浮 */
.call-mini{
  position:absolute;
  top:calc(58px + env(safe-area-inset-top)); right:12px;
  z-index:95;
  display:none;
  align-items:center; gap:8px;
  padding:6px 12px 6px 6px;
  border:none; border-radius:999px;
  background:#141418; color:#fff;
  box-shadow:0 12px 30px rgba(0,0,0,.28);
  cursor:pointer;
  font-family:inherit;
  animation:viewIn .3s var(--ease-out) both;
}
.call-mini.show{ display:flex; }
.call-mini img, .call-mini .call-mini-ico, .call-mini .call-mini-initial{
  width:34px; height:34px; border-radius:50%;
  object-fit:cover;
  display:flex; align-items:center; justify-content:center;
  background:rgba(255,255,255,.14);
  font-size:14px; font-weight:600;
}
.call-mini .call-mini-ico svg{ width:18px; height:18px; fill:none; stroke:#fff; stroke-width:1.9; stroke-linecap:round; stroke-linejoin:round; }
.call-mini.ringing .call-mini-ico,
.call-mini.ringing img, .call-mini.ringing .call-mini-initial{ animation:callPulse 1.4s ease-in-out infinite; }
.call-mini-text{ display:flex; flex-direction:column; line-height:1.25; }
.call-mini-text b{ font-size:12px; font-weight:600; max-width:90px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.call-mini-text span{ font-size:11px; color:rgba(255,255,255,.62); font-variant-numeric:tabular-nums; }

/* 聊天框里的通话卡片 */
.msg-call{ display:flex; align-items:center; gap:10px; min-width:150px; cursor:pointer; }
.msg-call svg{ width:20px; height:20px; flex:0 0 auto; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
.msg-call span{ font-size:13.5px; }
.msg-call small{ display:block; font-size:11px; opacity:.6; margin-top:2px; }

/* 通话记录页 */
.calllog-tabs{ display:flex; gap:3px; margin:14px 0 12px; background:var(--fill); border-radius:14px; padding:3px; }
#callLogList{ overflow-anchor:none; }
.calllog-item{ margin:0 0 10px; background:var(--fill); border-radius:20px; overflow:hidden; }
.calllog-head{
  display:flex; align-items:center; gap:12px;
  width:100%;
  padding:14px 16px;
  border:none; background:transparent;
  font-family:inherit; text-align:left;
  cursor:pointer;
}
.calllog-ico{
  width:36px; height:36px; border-radius:12px; flex:0 0 auto;
  background:var(--bg);
  display:flex; align-items:center; justify-content:center;
}
.calllog-ico svg{ width:18px; height:18px; fill:none; stroke:var(--ink); stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
.calllog-item.missed .calllog-ico svg{ stroke:var(--danger); }
.calllog-word{ flex:1; min-width:0; }
.calllog-word b{ display:block; font-size:14px; font-weight:500; }
.calllog-word span{ display:block; font-size:11.5px; color:var(--gray-2); margin-top:3px; }
.calllog-arrow{ width:16px; height:16px; flex:0 0 auto; fill:none; stroke:var(--gray-2); stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; transition:transform .2s; }
.calllog-item.open .calllog-arrow{ transform:rotate(90deg); }
.calllog-lines{ display:none; padding:2px 16px 14px; }
.calllog-item.open .calllog-lines{ display:block; }
.calllog-line{ font-size:13px; line-height:1.65; color:var(--ink); padding:4px 0; white-space:pre-wrap; word-break:break-word; }
.calllog-line + .calllog-line{ box-shadow:inset 0 1px 0 rgba(11,11,15,.05); }
.calllog-line b{ font-weight:600; color:var(--gray-1); margin-right:6px; }
.calllog-line.aside{ color:var(--gray-1); font-style:italic; text-align:center; }
.calllog-line.none{ color:var(--gray-2); text-align:center; }
.calllog-empty{ text-align:center; font-size:13px; color:var(--gray-2); line-height:1.8; padding:40px 20px; }

/* 表情包分组多选 */
.stk-pick{ display:flex; flex-wrap:wrap; gap:8px; padding:6px 16px 14px; }
.stk-pick button{
  border:none; border-radius:999px;
  background:var(--bg); color:var(--gray-1);
  font-family:inherit; font-size:12.5px; font-weight:500;
  padding:7px 13px;
  cursor:pointer;
}
.stk-pick button.on{ background:var(--ink); color:var(--on-ink); }
.stk-pick .stk-none{ font-size:12px; color:var(--gray-2); padding:4px 0; }

/* 消息区 */
.talk-body{
  flex:1; min-height:0;
  overflow-x:hidden;
  overflow-y:auto;
  overflow-anchor:none;
  overscroll-behavior:contain;
  padding:18px 16px 10px;
  display:flex; flex-direction:column; gap:14px;
  background:transparent;
}
.talk-body::-webkit-scrollbar{ width:0; }
/* 时间戳：两条消息相隔 5 分钟以上时出现（.msg-day 为旧别名，兼容自定义 CSS） */
.msg-stamp,
.msg-day{
  align-self:center;
  font-size:11px; color:var(--gray-2);
  background:rgba(var(--tint-rgb),.05);
  padding:4px 12px;
  border-radius:999px;
}
/* 旁白：类似时间戳 / 系统框，居中浅底 */
.msg-aside{
  align-self:center;
  max-width:86%;
  text-align:center;
  font-size:12.5px; color:var(--gray-1);
  line-height:1.65;
  background:rgba(var(--tint-rgb),.06);
  padding:7px 14px;
  border-radius:12px;
  white-space:pre-wrap; word-break:break-word;
  animation:msgIn .3s var(--ease-out) both;
}
.msg-aside.picked{ outline:2px solid var(--ink); }
/* 旁白的译文：紧跟正文，斜体浅色带括号 */
.msg-aside-trans{ display:block; margin-top:3px; font-style:italic; color:var(--gray-2); font-size:12px; }
/* ============ 翻译气泡（聊天设置 → 翻译）：挂在 TA 气泡下方的小气泡 ============ */
.msg-stack{ display:flex; flex-direction:column; align-items:flex-start; gap:5px; max-width:73%; min-width:0; }
.msg.mine .msg-stack{ align-items:flex-end; }
.msg-stack > .msg-who{ margin-bottom:-2px; }   /* 群聊发言人名字紧贴在气泡上方 */
.msg-stack > .msg-quote{ max-width:100%; }
.msg-stack > .msg-bubble{ max-width:100%; }
.msg-stack > .msg-think{ max-width:100%; width:100%; }
.msg-stack > .msg-sticker{ max-width:100%; }
/* 每条气泡下方的发送时间（聊天设置 → 美化 → 显示气泡时间，默认开） */
.msg-time{
  display:block;
  font-size:10.5px; line-height:1.2;
  color:var(--gray-2);
  padding:0 2px;
  user-select:none;
}
.msg.mine .msg-time{ text-align:right; }
.msg-trans{
  position:relative;
  max-width:100%;
  padding:6px 10px 6px 28px;
  border-radius:14px;
  border-top-left-radius:6px;
  font-size:12.5px; line-height:1.55;
  color:var(--sk-trans-ink, var(--gray-1));
  background:var(--sk-trans-bg, rgba(var(--tint-rgb),.045));
  border:1px dashed rgba(var(--tint-rgb),.14);
  white-space:pre-wrap; word-break:break-word;
  animation:msgIn .3s var(--ease-out) both;
  cursor:pointer;
}
.msg-trans.hidden,
.msg-aside-trans.hidden{ display:none; }
.msg-bubble.has-trans{ cursor:pointer; }
.msg-trans svg{
  position:absolute; left:9px; top:7px;
  width:13px; height:13px;
  fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round;
  opacity:.7;
}
.msg.grp-cont .msg-stack > .msg-bubble{ border-top-left-radius:7px; }
.msg.grp-more .msg-stack > .msg-bubble{ border-bottom-left-radius:7px; }
/* 组内最后一条：底部贴头像侧恢复大圆角（收束），不再沿用中间条的小圆角 */
.msg.grp-cont:not(.grp-more) .msg-stack > .msg-bubble{
  border-bottom-left-radius:var(--sk-talk-radius, 20px);
}
.msg.mine.grp-cont .msg-stack > .msg-bubble{
  border-top-left-radius:var(--sk-talk-radius, 20px);
  border-top-right-radius:7px;
}
.msg.mine.grp-more .msg-stack > .msg-bubble{
  border-bottom-left-radius:var(--sk-talk-radius, 20px);
  border-bottom-right-radius:7px;
}
.msg.mine.grp-cont:not(.grp-more) .msg-stack > .msg-bubble{
  border-bottom-right-radius:var(--sk-talk-radius, 20px);
}
/* 撤回提示：居中一行；点击可展开查看原文 */
.msg-recall{
  align-self:center;
  display:flex;
  flex-direction:column;
  align-items:center;
  max-width:86%;
  font-size:11.5px; color:var(--gray-2);
  padding:3px 12px;
  cursor:pointer;
  -webkit-tap-highlight-color:transparent;
  user-select:none;
}
.msg-recall-tip{
  display:inline-flex;
  align-items:center;
  gap:6px;
}
.msg-recall-tip i{
  font-style:normal;
  font-size:10.5px;
  opacity:.7;
}
.msg-recall-body{
  margin-top:6px;
  padding:8px 12px;
  max-width:100%;
  border-radius:12px;
  background:rgba(var(--tint-rgb),.07);
  color:var(--gray-1);
  font-size:12.5px;
  line-height:1.55;
  white-space:pre-wrap;
  word-break:break-word;
  text-align:left;
}
.msg-recall-body[hidden]{ display:none; }
.msg-recall-body img{
  display:block;
  max-width:140px;
  max-height:140px;
  border-radius:10px;
  object-fit:contain;
}
.msg-recall-cap{
  display:block;
  margin:0 0 4px;
  font-size:11.5px;
  color:var(--gray-2);
}
/* 线下模式：长篇小说式正文（不走气泡） */
.msg-novel{
  width:100%; max-width:100%;
  padding:16px 18px;
  background:rgba(var(--paper-rgb),.82);
  border-radius:18px;
  font-size:13.5px; line-height:1.9; color:var(--ink);
  white-space:pre-wrap; word-break:break-word;
  text-align:justify;
}
.msg.mine .msg-novel{
  background:rgba(var(--tint-rgb),.05);
  font-style:italic;
}
/* ============ 线下页（独立视图：小说式正文） ============ */
.off-view{
  background-color:var(--sk-off-bg, #F5F1EA);
  background-size:cover; background-position:center;
}
/* 线下壁纸透明度：--sk-off-wp-alpha（0~1，由 js 写入）。
   壁纸本身是 background-image 没法直接调 opacity，改成在壁纸上盖一层「页面底色」，
   底色的不透明度 = 1 - 壁纸透明度；用 ::after 避免与夜间压暗层 ::before 冲突 */
.off-view.has-wallpaper{ position:relative; isolation:isolate; }
.off-view.has-wallpaper::after{
  content:'';
  position:absolute; inset:0;
  background:var(--sk-off-bg, #F5F1EA);
  opacity:calc(1 - var(--sk-off-wp-alpha, 1));
  pointer-events:none;
  z-index:-1;
}
.off-head{
  flex:0 0 auto;
  position:relative;
  display:flex; align-items:center; gap:4px;
  padding:var(--head-top) 10px 8px;          /* --head-top 已含顶部安全区 */
  background:transparent;                    /* 与线上一致：透出壁纸 */
  border-bottom:none;
}
.off-head .back-btn{ flex:0 0 auto; }
/* 标题绝对居中：左边返回键 + 报错记录、右边 3 个功能键，flex:1 会被挤偏，改成和线上聊天页一样绝对定位 */
.off-title{
  position:absolute; left:50%;
  top:calc(var(--head-top) + 16px);
  transform:translate(-50%,-50%);
  max-width:calc(100% - 228px);
  margin:0; text-align:center;
  font-size:15px; font-weight:600; letter-spacing:.02em;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
  pointer-events:none;
}
/* 报错记录挪到返回键右边；右侧那组图标靠 margin-left:auto 顶到最右 */
.off-head .off-err-btn{ flex:0 0 auto; }
.off-err-btn svg{ width:18px; height:18px; }
.off-head .off-online-btn{ margin-left:auto; }
.off-head .icon-btn{ width:32px; height:32px; flex:0 0 auto; }
.off-online-btn svg{ width:19px; height:19px; }
.off-set-btn svg{ width:19px; height:19px; }
.off-hist-btn svg{ width:19px; height:19px; }
.off-hist-btn:disabled{ opacity:.4; }
.off-body{
  flex:1; min-height:0;
  overflow-y:auto;
  overscroll-behavior:contain;
  padding:18px 18px 12px;
  display:flex; flex-direction:column; gap:14px;
}
.off-body::-webkit-scrollbar{ width:0; }
.off-empty{
  margin:auto 0;
  padding:26px 22px;
  text-align:center;
  font-size:13px; line-height:1.85; color:var(--gray-1);
  background:rgba(var(--paper-rgb),.7);
  border-radius:20px;
}
.off-empty b{ display:block; margin-bottom:8px; font-size:15px; color:var(--ink); }
/* 正文段：TA 的段落是小说正文，我的段落是斜体动作 */
.off-entry{
  width:100%;
  padding:16px 18px;
  border-radius:var(--sk-off-radius, 18px);
  font-size:var(--sk-off-font, 14px); line-height:1.95; color:var(--sk-off-ink, var(--ink));
  white-space:pre-wrap; word-break:break-word;
  text-align:justify;
  animation:msgIn .3s var(--ease-out) both;
}
.off-entry.off-novel{ background:rgba(var(--paper-rgb),var(--sk-off-alpha, .84)); }
.off-entry.off-me{
  background:rgba(var(--tint-rgb),calc(var(--sk-off-alpha, .84) * .08));
  font-style:italic; color:var(--gray-1);
}
.off-entry.off-writing{ display:flex; align-items:center; min-height:52px; }
.off-entry.off-live{ cursor:pointer; -webkit-tap-highlight-color:transparent; }
/* 段落上方的头像 / 网名：默认隐藏，由美化开关（.off-view 上的 class）控制 */
.off-meta{ display:none; align-items:center; gap:8px; margin-bottom:8px; white-space:normal; font-style:normal; }
.off-view.off-show-avatar .off-meta, .off-view.off-show-name .off-meta{ display:flex; }
.off-meta-avatar{ width:28px; height:28px; border-radius:50%; object-fit:cover; display:none; background:var(--fill); }
.off-meta-name{ font-size:12px; font-weight:600; color:var(--sk-off-accent, #C0392B); display:none; }
.off-view.off-show-avatar .off-meta-avatar{ display:block; }
.off-view.off-show-name .off-meta-name{ display:inline; }
.off-entry.off-me .off-meta-name{ color:var(--gray-1); }
/* 正文美化：台词 / 心理 / 强调 / 环境 */
.off-say{ font-weight:600; color:var(--sk-off-accent, #C0392B); font-style:normal; }
.off-think{ font-style:italic; color:var(--gray-1); }
.off-em{ font-weight:700; text-decoration:underline; text-decoration-thickness:1px; text-underline-offset:3px; }
.off-env{ font-size:12.5px; color:var(--gray-2); }
/* （译：……）→ 台词的译文：括号和内容一起斜体、换色（聊天设置 → 翻译 开启时 TA 会写） */
.off-trans{ font-style:italic; font-weight:400; color:var(--sk-trans-ink, #7A6F9B); }
/* 整段译文：挂在这一段正文下面 */
.off-trans-block{
  margin-top:12px;
  padding:8px 12px;
  border-radius:12px;
  font-size:12.5px; line-height:1.75; font-style:italic; font-weight:400;
  color:var(--sk-trans-ink, var(--gray-1));
  background:var(--sk-trans-bg, rgba(var(--tint-rgb),.045));
  border:1px dashed rgba(var(--tint-rgb),.14);
  white-space:pre-wrap; word-break:break-word;
}
/* 每个楼层：长按 / 右键弹出的操作菜单（复用 .msg-menu 的样式） */
.off-entry.off-picked{ outline:2px solid var(--ink); outline-offset:-2px; }
.off-body.selecting .off-entry{ cursor:pointer; position:relative; padding-left:44px; }
.off-body.selecting .off-entry::before{
  content:'';
  position:absolute; left:14px; top:18px;
  width:19px; height:19px; border-radius:50%;
  border:1.6px solid var(--gray-3);
  background:transparent;
}
.off-body.selecting .off-entry.off-picked::before{
  background:var(--ink); border-color:var(--ink);
  background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:center; background-size:12px;
}
.off-select-bar{ flex:0 0 auto; }
/* 楼层内联编辑框 */
.off-edit-area{
  width:100%; min-height:120px;
  border:none; outline:none; resize:vertical;
  background:rgba(var(--paper-rgb),.95);
  border-radius:14px;
  padding:12px 14px;
  font-family:inherit; font-size:14px; line-height:1.9; color:var(--ink);
  box-shadow:0 0 0 1.5px var(--ink);
}
.off-edit-acts{ display:flex; gap:8px; justify-content:flex-end; margin-top:8px; }
.off-edit-acts button{
  border:none; border-radius:999px;
  padding:7px 16px;
  font-family:inherit; font-size:12.5px; font-weight:500;
  background:rgba(var(--tint-rgb),.06); color:var(--gray-1);
  cursor:pointer;
}
.off-edit-acts button.primary{ background:var(--ink); color:var(--on-ink); }
/* 回复建议面板：一行一条，完整显示 */
.off-replies{
  display:flex; flex-direction:column; gap:6px;
  animation:msgIn .25s var(--ease-out) both;
}
.off-replies[hidden]{ display:none; }
.off-reply{
  border:none; text-align:left;
  background:rgba(var(--paper-rgb),.9);
  border-radius:14px;
  padding:9px 11px;
  font-family:inherit; font-size:12px; line-height:1.55; color:var(--ink);
  cursor:pointer;
  transition:transform .18s var(--spring);
}
.off-reply:active{ transform:scale(.97); }
.off-reply b{ display:block; font-size:10.5px; color:var(--gray-2); margin-bottom:2px; font-weight:500; }
.off-reply span{
  display:block; white-space:pre-wrap; word-break:break-word;
}
.off-act.on{ background:var(--ink); color:var(--on-ink); }
/* 过往记录卡 */
.off-hist-card{
  background:var(--fill);
  border-radius:18px;
  padding:13px 16px;
  margin-bottom:10px;
}
.off-hist-head{ display:flex; align-items:center; gap:10px; cursor:pointer; }
.off-hist-head b{ flex:1; min-width:0; font-size:13.5px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.off-hist-head small{ flex:0 0 auto; font-size:11px; color:var(--gray-2); }
.off-hist-body{
  margin-top:10px; padding-top:10px;
  border-top:1px solid var(--hairline);
  font-size:12.5px; line-height:1.85; color:var(--ink);
  white-space:pre-wrap; word-break:break-word;
  max-height:50vh; overflow-y:auto;
}
.off-hist-body[hidden]{ display:none; }
.off-hist-acts{ display:flex; gap:8px; margin-top:10px; }
.off-hist-acts button{
  flex:1; height:34px;
  border:1px solid var(--hairline); border-radius:12px;
  background:var(--bg); color:var(--gray-1);
  font-family:inherit; font-size:12.5px; font-weight:500;
  cursor:pointer;
}
.off-hist-acts button.danger{ color:var(--danger); }
.off-hist-empty{ font-size:12.5px; color:var(--gray-3); text-align:center; padding:40px 0; }
/* 文风预设列表 */
.off-style-row{
  display:flex; align-items:center; gap:8px;
  padding:9px 12px;
  background:var(--bg);
  border-radius:12px;
  margin-bottom:6px;
}
.off-style-row .name{
  flex:1; min-width:0;
  border:none; background:transparent; text-align:left;
  font-family:inherit; font-size:13px; color:var(--ink);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
  cursor:pointer;
}
.off-style-row .sub{ flex:0 0 auto; font-size:11px; color:var(--gray-2); max-width:38%; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.off-style-row .del{
  flex:0 0 auto;
  border:none; background:transparent;
  font-family:inherit; font-size:12px; color:var(--danger);
  padding:4px 6px; cursor:pointer;
}
.off-style-row .tag{
  flex:0 0 auto;
  font-size:10px; font-weight:600; color:var(--gray-2);
  padding:2px 7px; border-radius:999px;
  background:rgba(var(--tint-rgb),.06);
}
.off-dots{ display:inline-flex; gap:5px; }
.off-dots span{
  width:6px; height:6px; border-radius:50%;
  background:var(--gray-2);
  animation:offDot 1.1s ease-in-out infinite;
}
.off-dots span:nth-child(2){ animation-delay:.18s; }
.off-dots span:nth-child(3){ animation-delay:.36s; }
@keyframes offDot{ 0%,80%,100%{ opacity:.25; transform:translateY(0); } 40%{ opacity:1; transform:translateY(-3px); } }
/* 底栏：输入行 + 三个动作键（透明，透出壁纸） */
.off-foot{
  flex:0 0 auto;
  padding:8px 12px calc(8px + env(safe-area-inset-bottom));
  display:flex; flex-direction:column; gap:8px;
  background:transparent;
  border-top:none;
}
.off-foot .talk-input{ background:rgba(var(--paper-rgb),.9); max-height:120px; }
/* 线下：发送键常显在输入框右侧（回车只换行） */
.off-foot .talk-send,
.off-foot .talk-input-row .talk-send{
  width:42px;
  opacity:1;
  transform:none;
}
.off-foot .talk-send:disabled{
  opacity:.35;
  cursor:default;
}
.off-actions{ display:flex; gap:8px; }
.off-act{
  flex:1; min-width:0;
  display:flex; align-items:center; justify-content:center; gap:5px;
  height:34px;
  border:none; border-radius:999px;
  background:rgba(var(--tint-rgb),.06);
  color:var(--gray-1);
  font-family:inherit; font-size:12px;
  cursor:pointer;
  transition:transform .18s var(--spring), opacity .18s;
}
.off-act:active{ transform:scale(.96); }
.off-act:disabled{ opacity:.4; cursor:default; }
.off-act.danger{ color:var(--danger); }
.off-act svg{
  width:15px; height:15px; flex:0 0 auto;
  fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round;
}
.off-act span{ white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }

/* 线下归档卡：结束线下后收纳成一张可展开的卡片 */
.msg-novelpack{
  width:100%;
  padding:13px 16px;
  background:var(--fill);
  border:1px dashed rgba(var(--tint-rgb),.18);
  border-radius:16px;
  cursor:pointer;
}
.msg-novelpack b{ display:block; font-size:13px; }
.msg-novelpack small{ display:block; margin-top:3px; font-size:11px; color:var(--gray-2); }
.msg-novelpack .np-body{
  margin-top:10px; padding-top:10px;
  border-top:1px solid var(--hairline);
  font-size:12.5px; line-height:1.85;
  white-space:pre-wrap; word-break:break-word;
}
.msg-novelpack .np-body[hidden]{ display:none; }
.msg.msg-novelpack{ text-align:left; color:var(--ink); }
.msg.msg-novelpack .np-body{ max-height:46vh; overflow-y:auto; }

/* 思维链：正文气泡上方，点击展开 / 合上 */
.msg-think{
  max-width:73%;
  margin:0 0 6px;
  font-size:11.5px;
  color:var(--gray-2);
  align-self:flex-start;
}
.msg.mine .msg-think{ margin-left:auto; text-align:right; }
.msg-think-tog{
  display:inline-flex;
  align-items:center;
  gap:5px;
  margin:0; padding:2px 0;
  border:0; background:transparent;
  color:inherit; font:inherit;
  cursor:pointer;
  -webkit-tap-highlight-color:transparent;
}
.msg-think-tog svg{
  width:13px; height:13px; flex:0 0 auto;
  fill:none; stroke:currentColor; stroke-width:1.6;
  stroke-linecap:round; stroke-linejoin:round;
  opacity:.85;
}
.msg-think-tog i{
  font-style:normal;
  font-size:10.5px;
  opacity:.75;
}
.msg-think-body{
  margin-top:5px;
  padding:8px 10px;
  border-radius:12px;
  background:rgba(var(--tint-rgb),.07);
  color:var(--gray-1);
  font-size:12px;
  line-height:1.55;
  white-space:pre-wrap;
  word-break:break-word;
  text-align:left;
}
.msg-think-body[hidden]{ display:none; }
.off-cot{
  margin:0 0 8px;
  font-size:12px;
  color:var(--gray-2);
}
.off-cot-tog{
  display:inline-flex;
  align-items:center;
  gap:6px;
  margin:0; padding:2px 0;
  border:0; background:transparent;
  color:inherit; font:inherit;
  cursor:pointer;
}
.off-cot-tog i{ font-style:normal; font-size:11px; opacity:.75; }
.off-cot-body{
  margin-top:6px;
  padding:10px 12px;
  border-radius:12px;
  background:rgba(var(--tint-rgb),.06);
  color:var(--gray-1);
  font-size:12.5px;
  line-height:1.65;
  white-space:pre-wrap;
  word-break:break-word;
}
.off-cot-body[hidden]{ display:none; }

/* 线下楼层：状态栏（心声 / 生图 / 环境） */
.off-statusbar{
  margin:12px 0 2px;
  border-radius:14px;
  background:rgba(var(--tint-rgb),.05);
  overflow:hidden;
}
.off-sb-label{
  padding:8px 12px 2px;
  font-size:11px; font-weight:600;
  color:var(--gray-2); letter-spacing:.04em;
}
.off-sb-row + .off-sb-row{ box-shadow:inset 0 1px 0 rgba(11,11,15,.06); }
.off-sb-tog{
  display:flex; align-items:center; justify-content:space-between;
  width:100%; margin:0; padding:10px 12px;
  border:0; background:transparent;
  color:var(--ink); font:inherit; font-size:13.5px; font-weight:560;
  cursor:pointer; text-align:left;
}
.off-sb-tog i{ font-style:normal; font-size:11.5px; color:var(--gray-2); font-weight:500; }
.off-sb-body{
  padding:0 12px 12px;
  color:var(--gray-1);
  font-size:13px; line-height:1.65;
}
.off-sb-body[hidden]{ display:none; }
.off-sb-field{ margin:0 0 10px; }
.off-sb-field:last-child{ margin-bottom:0; }
.off-sb-field b{
  display:block; margin-bottom:4px;
  font-size:11px; font-weight:600; color:var(--gray-2);
}
.off-sb-field p{ margin:0; white-space:pre-wrap; word-break:break-word; color:var(--ink); }
.off-sb-trans{ margin-top:4px !important; font-size:12px; color:var(--gray-2); font-style:italic; }
.off-sb-fav{
  display:flex; align-items:center; gap:10px; margin-top:6px;
}
.off-sb-fav-bar{
  flex:1; height:8px; border-radius:999px;
  background:rgba(11,11,15,.1); overflow:hidden;
}
.off-sb-fav-bar i{
  display:block; height:100%; border-radius:inherit;
  background:linear-gradient(90deg, rgba(var(--tint-rgb),.4), rgba(var(--tint-rgb),.9));
}
.off-sb-fav span{
  flex:0 0 auto;
  font-size:12.5px; font-weight:600; color:var(--ink);
  min-width:28px; text-align:right;
}
.off-sb-empty{ margin:0; color:var(--gray-2); font-size:12.5px; }
.off-sb-cap{
  margin:0 0 8px; font-size:12px; color:var(--gray-2);
  white-space:pre-wrap; word-break:break-word;
}
.off-sb-ph, .off-sb-link{
  display:block; width:100%;
  border:none; border-radius:12px;
  background:var(--fill); color:var(--ink);
  font:inherit; font-size:13px;
  padding:12px 14px; cursor:pointer; text-align:center;
}
.off-sb-ph:disabled{ opacity:.65; cursor:default; }
.off-sb-link{
  margin-top:8px; background:transparent;
  color:var(--gray-1); font-size:12.5px; padding:6px;
  box-shadow:inset 0 0 0 1px rgba(11,11,15,.08);
}
.off-sb-img{
  display:block; width:100%; padding:0; border:none;
  background:transparent; border-radius:12px; overflow:hidden; cursor:pointer;
  position:relative;
}
.off-sb-img img{
  display:block; width:100%; max-height:280px; object-fit:cover;
  border-radius:12px;
}
.off-sb-img-idx{
  position:absolute; right:8px; bottom:8px;
  padding:2px 7px; border-radius:999px;
  background:rgba(0,0,0,.55); color:#fff;
  font-size:11px; line-height:1.4; pointer-events:none;
}
.off-sb-env, .off-sb-ifs{ list-style:none; margin:0; padding:0; }
.off-sb-env li, .off-sb-ifs li{
  margin:0 0 8px; padding:8px 10px;
  border-radius:10px; background:var(--bg);
}
.off-sb-env li:last-child, .off-sb-ifs li:last-child{ margin-bottom:0; }
.off-sb-env b, .off-sb-ifs b{
  display:block; margin-bottom:3px;
  font-size:11.5px; color:var(--gray-2);
}
.off-sb-env span, .off-sb-ifs span{ color:var(--ink); white-space:pre-wrap; word-break:break-word; }
.off-sb-ifs b{ color:var(--ink); font-weight:600; }

/* 群聊：发言人名字显示在气泡上方 */
.msg-who{
  display:block;
  font-size:10.5px; color:var(--gray-2);
  margin:0 0 3px 2px;
}
/* 表情包消息：没有任何气泡效果；尺寸强制锁定，避免自定义皮肤把图撑很大 */
.msg-sticker{
  max-width:73%;
  padding:0; background:transparent; box-shadow:none;
}
.msg-sticker .sticker-cap{
  display:block; margin-top:3px;
  font-size:11px; color:var(--gray-2);
  text-align:center;
  max-width:72px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.msg-sticker img{
  display:block !important;
  width:72px !important; height:72px !important;
  max-width:72px !important; max-height:72px !important;
  object-fit:contain !important;
}
.talk-empty{
  margin:auto;
  text-align:center;
  font-size:13px; color:var(--gray-2);
  line-height:1.8;
}
/* 顶部：展开更早 / 已收入记忆的消息 */
.talk-hist-more{
  align-self:center;
  border:none;
  background:var(--fill);
  color:var(--gray-1);
  font:500 12.5px/1 var(--font-body);
  padding:9px 16px;
  border-radius:999px;
  cursor:pointer;
  margin:2px 0 6px;
  transition:transform .18s var(--spring), background .18s;
}
.talk-hist-more:active{ transform:scale(.96); }
@media (hover: hover) and (pointer: fine){
.talk-hist-more:hover{ background:rgba(var(--tint-rgb),.08); }
}

.msg{
  display:flex; align-items:flex-end; gap:9px;
  max-width:100%;
  position:relative;
  animation:msgIn .3s var(--ease-out) both;
}
/* 左滑引用：内容跟着手指走，右侧露出回复标 */
.msg.swiping{ user-select:none; -webkit-user-select:none; }
.msg.swiping > *{ transform:translateX(var(--swipe-x, 0px)); }
.msg.swipe-back > *{ transition:transform .18s ease-out; }
.msg.swiping::before{
  content:'';
  position:absolute;
  right:4px; top:50%;
  width:28px; height:28px;
  margin-top:-14px;
  border-radius:50%;
  background-color:var(--fill);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236c6c70' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 14 4 10l5-4'/%3E%3Cpath d='M5 10h8a6 6 0 0 1 6 6v1'/%3E%3C/svg%3E");
  background-repeat:no-repeat;
  background-position:center;
  background-size:15px;
  opacity:var(--swipe-p, 0);
  transform:scale(calc(.7 + .3 * var(--swipe-p, 0)));
  pointer-events:none;
}
.msg.swipe-ready::before{
  background-color:var(--ink);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 14 4 10l5-4'/%3E%3Cpath d='M5 10h8a6 6 0 0 1 6 6v1'/%3E%3C/svg%3E");
}
@keyframes msgIn{
  from{ opacity:0; transform:translateY(8px); }
  to  { opacity:1; transform:none; }
}
.msg.mine{ flex-direction:row-reverse; }
.msg.msg-aside{ display:block; max-width:86%; align-self:center; }
.msg-avatar{
  flex:0 0 auto;
  width:var(--sk-talk-avatar-size, 38px); height:var(--sk-talk-avatar-size, 38px);
  border-radius:50%;
  object-fit:cover;
  background:var(--fill);
}
.msg-avatar-initial{
  flex:0 0 auto;
  width:var(--sk-talk-avatar-size, 38px); height:var(--sk-talk-avatar-size, 38px);
  border-radius:50%;
  background:var(--fill); color:var(--ink);
  display:flex; align-items:center; justify-content:center;
  font-size:15px; font-weight:600;
}
.msg-bubble{
  max-width:73%;
  padding:var(--sk-talk-pad-y, 8px) var(--sk-talk-pad-x, 11px);
  border-radius:20px;
  font-size:14.5px;
  line-height:1.62;
  color:var(--ink);
  background:var(--fill);
  border-bottom-left-radius:7px;
  white-space:pre-wrap;
  word-break:break-word;
  box-shadow:0 1px 2px rgba(0,0,0,.04);
}
/* 气泡外引用（长按 / 左滑「引用」后发出的消息，挂在气泡上方） */
.msg-quote{
  display:block;
  font-size:11.5px;
  line-height:1.45;
  color:var(--gray-2);
  border-left:2px solid var(--gray-3);
  padding:1px 0 1px 8px;
  margin:0 2px;
  white-space:pre-wrap;
  word-break:break-word;
}
.msg.mine .msg-quote{
  border-left:none;
  border-right:2px solid var(--gray-3);
  padding-left:0;
  padding-right:8px;
  text-align:right;
}
.msg-quote-who{ font-weight:600; color:var(--gray-1); }
.msg.mine .msg-bubble{
  background:var(--ink); color:var(--on-ink);
  border-bottom-left-radius:20px;
  border-bottom-right-radius:7px;
}
/* ============ 连续气泡分组（美化 → 聊天页 → 气泡分组） ============
   grp-cont：不是这一组的第一条；grp-more：不是这一组的最后一条
   圆角规则（贴头像一侧）：
   · 第一条：顶大、底小（往下连）
   · 中间条：顶小、底小
   · 最后一条：顶小、底大（收束成完整圆角；单条消息仍用默认小尾巴） */
.msg.grp-cont{ margin-top:-9px; }                     /* 组内间距收紧（.talk-body gap 是 14px） */
.msg-avatar-ph{ background:transparent !important; visibility:hidden; }   /* 占位：不显示头像但保留对齐 */
/* —— 对方（左侧）—— */
.msg.grp-cont .msg-bubble{ border-top-left-radius:7px; }
.msg.grp-more .msg-bubble{ border-bottom-left-radius:7px; }
.msg.grp-cont:not(.grp-more) .msg-bubble{
  border-bottom-left-radius:var(--sk-talk-radius, 20px);
}
/* —— 我（右侧）—— */
.msg.mine.grp-cont .msg-bubble{
  border-top-left-radius:var(--sk-talk-radius, 20px);
  border-top-right-radius:7px;
}
.msg.mine.grp-more .msg-bubble{
  border-bottom-left-radius:var(--sk-talk-radius, 20px);
  border-bottom-right-radius:7px;
}
.msg.mine.grp-cont.grp-more .msg-bubble{
  border-top-right-radius:7px;
  border-bottom-right-radius:7px;
}
/* 组内最后一条：底部贴头像侧恢复大圆角（覆盖默认 7px 小尾巴） */
.msg.mine.grp-cont:not(.grp-more) .msg-bubble{
  border-top-right-radius:7px;
  border-bottom-right-radius:var(--sk-talk-radius, 20px);
  border-bottom-left-radius:var(--sk-talk-radius, 20px);
  border-top-left-radius:var(--sk-talk-radius, 20px);
}
/* 头像开关关掉：气泡直接贴边 */
.msg.no-avatar{ padding-left:2px; }
.msg.mine.no-avatar{ padding-left:0; padding-right:2px; }
/* 输入中的省略号气泡 */
.msg-typing-row{ cursor:pointer; -webkit-tap-highlight-color:transparent; }
.msg-typing{ display:flex; gap:5px; padding:14px; }
.msg-typing span{
  width:7px; height:7px; border-radius:50%;
  background:var(--gray-3);
  animation:dotJump 1.05s infinite;
}
.msg-typing span:nth-child(2){ animation-delay:.16s; }
.msg-typing span:nth-child(3){ animation-delay:.32s; }
@keyframes dotJump{
  0%,60%,100%{ transform:translateY(0); opacity:.55; }
  30%{ transform:translateY(-5px); opacity:1; }
}

/* ============ 底栏：上行输入 / 下行功能键 ============ */
.talk-foot{
  flex:0 0 auto;
  background:transparent;           /* 底栏透明：透出壁纸 */
  border-top:none;
  padding:12px 12px calc(4px + var(--foot-bottom));   /* 输入栏整体往下：底部安全区只留一点（--foot-bottom） */
  display:flex; flex-direction:column; gap:8px;
}
/* 表情包面板 */
.sticker-panel{
  display:flex; flex-direction:column; gap:8px;
  padding:6px 0 2px;
  animation:msgIn .26s var(--ease-out) both;
  touch-action:pan-y;
}
.sticker-panel[hidden]{ display:none; }
.sticker-groups{
  display:flex; align-items:center; gap:6px;
  overflow-x:auto; padding:0 2px;
  -webkit-overflow-scrolling:touch;
}
.sticker-groups::-webkit-scrollbar{ height:0; }
.sticker-group-btn{
  flex:0 0 auto;
  border:none; background:var(--fill);
  color:var(--gray-1);
  font-family:inherit; font-size:12px;
  padding:6px 12px; border-radius:999px;
  cursor:pointer; white-space:nowrap;
}
.sticker-group-btn.on{ background:var(--ink); color:var(--on-ink); }
.sticker-group-btn.tool{ background:transparent; color:var(--gray-2); padding:6px 8px; }
.sticker-grid{
  display:grid;
  grid-template-columns:repeat(4, minmax(0, 1fr));
  gap:6px;
  max-height:min(38vh, 260px);
  overflow-y:auto;
  overflow-x:hidden;
  padding:2px;
  -webkit-overflow-scrolling:touch;
  overscroll-behavior:contain;
}
.sticker-grid::-webkit-scrollbar{ width:0; }
.sticker-cell{
  border:none; background:rgba(var(--tint-rgb),.035);
  border-radius:10px;
  padding:4px 2px 3px;
  cursor:pointer;
  display:flex; flex-direction:column; align-items:center; justify-content:flex-start;
  gap:2px;
  min-width:0;
  transition:transform .18s var(--spring), background .18s;
  -webkit-user-select:none; user-select:none;
  -webkit-touch-callout:none;
}
.sticker-cell:active{ transform:scale(.92); }
.sticker-cell img{
  width:100% !important;
  height:44px !important;
  max-height:44px !important;
  object-fit:contain !important;
  display:block;
  pointer-events:none;
  flex:0 0 auto;
}
/* 表情包配字：显示在图片下面 */
.sticker-cell-cap{
  flex:0 0 auto; max-width:100%;
  font-size:9px; line-height:1.2; color:var(--gray-2);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
  pointer-events:none;
}
.sticker-cell.add{ color:var(--gray-2); font-size:26px; min-height:64px; justify-content:center; }
.sticker-empty{
  grid-column:1 / -1;
  text-align:center; font-size:12px; color:var(--gray-2);
  padding:22px 0;
}
/* 表情包预览 */
.sticker-preview-img{
  display:block; margin:8px auto 4px;
  width:200px; height:200px; object-fit:contain;
}
/* 上行：输入栏 + 发送键 */
.talk-input-row{ display:flex; align-items:flex-end; gap:8px; }
.talk-input{
  flex:1; min-width:0;
  min-height:42px; max-height:104px;
  padding:11px 16px;
  border:none;
  border-radius:21px;
  background:var(--fill);
  color:var(--ink);
  font-family:inherit;
  font-size:14.5px;
  line-height:1.45;
  resize:none;
  overflow-y:auto;
}
.talk-input::placeholder{ color:var(--gray-3); }
.talk-input::-webkit-scrollbar{ width:0; }
/* 发送键：正在输入时从右侧出现 */
.talk-send{
  flex:0 0 auto;
  width:0; height:42px;
  padding:0; border:none;
  border-radius:50%;
  background:var(--ink); color:var(--on-ink);
  display:flex; align-items:center; justify-content:center;
  cursor:pointer;
  opacity:0;
  transform:scale(.4);
  overflow:hidden;
  transition:width .26s var(--spring), opacity .2s, transform .3s var(--spring);
}
.talk-input-row.typing .talk-send{
  width:42px;
  opacity:1;
  transform:none;
}
.talk-send svg{
  width:20px; height:20px;
  fill:none; stroke:currentColor;
  stroke-width:1.9; stroke-linecap:round; stroke-linejoin:round;
}
.talk-send:active{ transform:scale(.9); }
/* 下行：功能键（纯线条图标、无文字） */
.talk-actions{
  display:flex; align-items:center;
  justify-content:space-between;
  padding:0 4px 2px;
}
.talk-act{
  width:40px; height:40px;
  border:none; background:transparent;
  color:var(--gray-1);
  border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  cursor:pointer;
  transition:background .18s, color .18s, transform .18s var(--spring);
}
@media (hover: hover) and (pointer: fine){
.talk-act:hover{ background:rgba(var(--tint-rgb),.05); color:var(--ink); }
}

.talk-act:active{ transform:scale(.86); }
.talk-act.on{ color:var(--ink); background:var(--fill); }
.talk-act svg{
  width:23px; height:23px;
  fill:none; stroke:currentColor;
  stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round;
}
.talk-act.plus svg{ stroke-width:1.9; }

/* 加号展开的功能面板 */
.talk-panel{
  display:grid;
  grid-template-columns:repeat(4, 1fr);
  gap:4px 0;
  padding:6px 0 2px;
  animation:msgIn .26s var(--ease-out) both;
}
.talk-panel[hidden]{ display:none; }
.tp-item{
  border:none; background:transparent;
  display:flex; flex-direction:column; align-items:center; gap:7px;
  padding:10px 0;
  cursor:pointer;
  font-family:inherit;
  font-size:11.5px; color:var(--gray-1);
  border-radius:16px;
  transition:background .18s, transform .18s var(--spring);
}
@media (hover: hover) and (pointer: fine){
.tp-item:hover{ background:rgba(var(--tint-rgb),.035); }
}

.tp-item:active{ transform:scale(.94); }
.tp-icon{
  width:48px; height:48px;
  border-radius:17px;
  background:var(--fill);
  color:var(--ink);
  display:flex; align-items:center; justify-content:center;
}
.tp-icon svg{
  width:22px; height:22px;
  fill:none; stroke:currentColor;
  stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round;
}

/* ============ 系统提示（居中灰字） ============ */
.msg-system{
  align-self:center;
  max-width:82%;
  text-align:center;
  font-size:11.5px; color:var(--gray-2);
  line-height:1.6;
  background:rgba(var(--tint-rgb),.045);
  padding:5px 12px;
  border-radius:9px;
  animation:msgIn .3s var(--ease-out) both;
}
/* 系统提示也能长按 / 多选：它带 .msg 类，这里把 .msg 的横向布局改回居中块 */
.msg.msg-system{ display:block; max-width:82%; align-self:center; }
.msg-system.picked{ outline:2px solid var(--ink); }

/* ============ 语音气泡 ============ */
.msg-voice{
  display:flex; flex-direction:column;
  min-width:150px;
  cursor:pointer;
}
.voice-main{ display:flex; align-items:center; gap:10px; }
.voice-play{
  flex:0 0 auto;
  width:24px; height:24px;
  border-radius:50%;
  background:rgba(127,127,127,.16);
  display:flex; align-items:center; justify-content:center;
  transition:background .16s, transform .16s;
}
.voice-play:active{ transform:scale(.92); }
.voice-play svg{
  width:13px; height:13px;
  margin-left:1px;
  fill:currentColor; stroke:none;
}
/* 播放中：播放键变成暂停 */
.msg-voice.playing .voice-play svg path{ d:path("M7.5 5.5h3v13h-3zM13.5 5.5h3v13h-3z"); }
.msg-voice.loading .voice-play{ animation:voicePulse 1s infinite; }
@keyframes voicePulse{ 0%,100%{ opacity:1; } 50%{ opacity:.4; } }
/* 转文字键 */
.voice-tt{
  flex:0 0 auto;
  width:24px; height:24px;
  margin-left:2px;
  border-radius:8px;
  display:flex; align-items:center; justify-content:center;
  opacity:.62;
  transition:background .16s, opacity .16s;
}
.voice-tt svg{
  width:15px; height:15px;
  fill:none; stroke:currentColor;
  stroke-width:1.9; stroke-linecap:round;
}
@media (hover: hover) and (pointer: fine){
.voice-tt:hover{ opacity:.9; }
}

.voice-tt.on{ opacity:1; background:rgba(127,127,127,.18); }
.voice-wave{
  flex:1;
  display:flex; align-items:center; gap:2.5px;
  height:18px;
}
.voice-wave i{
  display:block;
  width:2.5px; border-radius:2px;
  background:currentColor;
  opacity:.5;
}
.msg-voice.playing .voice-wave i{ animation:waveJump .9s infinite; }
@keyframes waveJump{
  0%,100%{ transform:scaleY(.55); opacity:.4; }
  50%    { transform:scaleY(1.25); opacity:.95; }
}
.voice-dur{
  flex:0 0 auto;
  font-size:12px; opacity:.72;
  font-variant-numeric:tabular-nums;
}
.voice-text{
  margin-top:9px;
  padding-top:9px;
  border-top:1px solid rgba(127,127,127,.28);
  font-size:13.5px; line-height:1.6;
}

/* 真实录音面板 */
.voice-rec-body{
  display:flex; flex-direction:column; align-items:center;
  gap:12px; padding-bottom:6px;
}
.voice-rec-btn{
  width:76px; height:76px; border-radius:50%;
  border:none; cursor:pointer;
  background:rgba(var(--tint-rgb), .14);
  color:var(--ink);
  display:flex; align-items:center; justify-content:center;
  transition:transform .16s, background .16s, box-shadow .16s;
}
.voice-rec-btn svg{
  width:30px; height:30px;
  fill:none; stroke:currentColor;
  stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round;
}
.voice-rec-btn:active{ transform:scale(.94); }
.voice-rec-btn.on{
  background:rgba(220, 60, 60, .18);
  color:#d03a3a;
  box-shadow:0 0 0 6px rgba(220, 60, 60, .08);
  animation:voiceRecPulse 1.2s ease-in-out infinite;
}
.voice-rec-btn.busy{ opacity:.55; pointer-events:none; }
@keyframes voiceRecPulse{
  0%,100%{ box-shadow:0 0 0 6px rgba(220, 60, 60, .06); }
  50%{ box-shadow:0 0 0 12px rgba(220, 60, 60, .12); }
}
.voice-rec-time{
  font-size:22px; font-weight:600;
  font-variant-numeric:tabular-nums;
  letter-spacing:.02em;
}
.voice-rec-status{
  min-height:1.4em;
  font-size:12.5px; color:var(--gray-2);
  text-align:center; line-height:1.5;
}
.voice-rec-body .pad-input{ width:100%; }
.voice-rec-body .pad-row{ width:100%; margin-top:4px; }

/* ============ 红包气泡：扁平，无外发光 ============ */
.msg-red{
  position:relative;
  padding:0; overflow:hidden;
  background:#E85A48;
  color:#fff;
  min-width:212px; max-width:240px;
  cursor:pointer;
  border-radius:12px !important;
  box-shadow:none;
  transition:transform .18s var(--spring);
}
.msg-red:active{ transform:scale(.98); }
.msg.mine .msg-red{ background:#E85A48; color:#fff; }
.msg-red::before, .msg-red::after{ display:none; }
.red-top{
  position:relative; z-index:1;
  display:flex; align-items:center; gap:10px;
  padding:12px 12px 11px;
}
.red-ico{
  flex:0 0 auto;
  width:36px; height:36px;
  border-radius:8px;
  background:#F6E3B2;
  box-shadow:none;
  display:flex; align-items:center; justify-content:center;
}
.red-ico i{
  font-style:normal; font-weight:700;
  font-size:16px; line-height:1;
  color:#C2412E;
  font-family:"Noto Serif SC", "Songti SC", "STSong", serif;
  letter-spacing:.02em;
}
.red-word{ flex:1; min-width:0; }
.red-word b{
  display:block; font-size:14.5px; font-weight:600;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
  text-shadow:none;
}
.red-word span{ display:block; font-size:11.5px; opacity:.82; margin-top:2px; }
.red-foot{
  position:relative; z-index:1;
  display:flex; align-items:center; justify-content:space-between;
  padding:5px 12px 6px;
  background:#D44C3B;
  font-size:10.5px; letter-spacing:.04em;
  opacity:1;
}
.red-foot em{ font-style:normal; font-family:var(--font-num), inherit; font-weight:600; letter-spacing:0; font-size:11.5px; }
.msg-red.done{
  background:#E7B7AD;
  box-shadow:none;
}
.msg-red.done .red-foot{ background:#D9A79C; }
.msg-red.done .red-ico{ background:#F4E6C8; box-shadow:none; }
.msg-red.done .red-ico i{ color:#A56A5E; }

/* ============ 转账气泡：扁平，无外发光 ============ */
.msg-transfer{
  position:relative;
  padding:0; overflow:hidden;
  background:#F09A3A;
  color:#fff;
  min-width:212px; max-width:240px;
  cursor:pointer;
  border-radius:12px !important;
  box-shadow:none;
  transition:transform .18s var(--spring);
}
.msg-transfer:active{ transform:scale(.98); }
.msg.mine .msg-transfer{ background:#F09A3A; color:#fff; }
.msg-transfer::before, .msg-transfer::after{ display:none; }
.tr-top{
  position:relative; z-index:1;
  display:flex; align-items:center; gap:10px;
  padding:12px 12px 11px;
}
.tr-ico{
  flex:0 0 auto;
  width:36px; height:36px;
  border-radius:50%;
  background:rgba(255,255,255,.22);
  box-shadow:none;
  display:flex; align-items:center; justify-content:center;
}
.tr-ico svg{
  width:18px; height:18px;
  fill:none; stroke:#fff;
  stroke-width:1.9; stroke-linecap:round; stroke-linejoin:round;
}
.tr-word{ flex:1; min-width:0; }
.tr-word b{
  display:block;
  font-size:20px; font-weight:650;
  font-family:var(--font-num), inherit;
  font-variant-numeric:tabular-nums;
  letter-spacing:-.01em; line-height:1.15;
  text-shadow:none;
}
.tr-word b small{ font-size:13px; font-weight:600; margin-right:1px; }
.tr-word span{
  display:block; font-size:11.5px; opacity:.88; margin-top:2px;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.tr-foot{
  position:relative; z-index:1;
  display:flex; align-items:center; justify-content:space-between;
  padding:5px 12px 6px;
  background:#E08A2C;
  font-size:10.5px; letter-spacing:.04em;
  opacity:1;
}
.msg-transfer.done{
  background:#E4C09A;
  box-shadow:none;
}
.msg-transfer.done .tr-foot{ background:#D4AE88; }
.msg-transfer.back{
  background:#C5C8D0;
  box-shadow:none;
}
.msg-transfer.back .tr-foot{ background:#B4B8C2; }

/* ============ 长按气泡：浮动功能栏 ============ */
.msg-menu{
  position:absolute;
  z-index:95;
  display:flex;
  background:var(--ink);
  border-radius:14px;
  padding:4px;
  box-shadow:0 10px 30px rgba(0,0,0,.26);
  transform:scale(.86);
  opacity:0;
  pointer-events:none;
  transition:opacity .16s, transform .24s var(--spring);
}
.msg-menu.show{ transform:none; opacity:1; pointer-events:auto; }
.msg-menu button{
  border:none; background:transparent;
  color:var(--on-ink);
  font-family:inherit;
  font-size:12.5px;
  padding:8px 11px;
  border-radius:10px;
  cursor:pointer;
  white-space:nowrap;
  transition:background .16s;
}
@media (hover: hover) and (pointer: fine){
.msg-menu button:hover{ background:rgba(255,255,255,.14); }
}

.msg-menu button:active{ background:rgba(255,255,255,.22); }
@media (hover: hover) and (pointer: fine){
/* 深色下菜单本身是浅底，hover 用墨色半透明 */
html[data-theme="dark"] .msg-menu button:hover{ background:rgba(0,0,0,.1); }
}

html[data-theme="dark"] .msg-menu button:active{ background:rgba(0,0,0,.18); }

/* 多选：气泡前的勾选圈 */
.msg-pick{
  flex:0 0 auto;
  width:21px; height:21px;
  border-radius:50%;
  border:1.6px solid var(--gray-3);
  display:flex; align-items:center; justify-content:center;
  align-self:center;
}
.msg-pick svg{
  width:13px; height:13px;
  fill:none; stroke:#fff;
  stroke-width:2.4; stroke-linecap:round; stroke-linejoin:round;
  opacity:0;
}
.msg.picked .msg-pick{ background:var(--ink); border-color:var(--ink); }
.msg.picked .msg-pick svg{ opacity:1; }
.talk-body.selecting .msg{ cursor:pointer; }

/* 多选操作栏（替换底栏） */
.talk-select-bar{
  display:flex; align-items:center; gap:10px;
  padding:12px 16px calc(12px + env(safe-area-inset-bottom));
  border-top:1px solid var(--hairline);
  background:var(--bg);
}
.talk-select-bar[hidden]{ display:none; }
.tsb-count{ flex:1; font-size:13px; color:var(--gray-1); }
.tsb-btn{
  border:none; background:var(--fill);
  color:var(--ink);
  font-family:inherit; font-size:13px; font-weight:500;
  padding:9px 16px;
  border-radius:999px;
  cursor:pointer;
  transition:background .18s, transform .18s var(--spring);
}
.tsb-btn:active{ transform:scale(.95); }
.tsb-btn.danger{ background:var(--danger); color:#fff; }
.tsb-btn.ghost{ background:transparent; color:var(--gray-1); }

/* 重回方向弹窗：快捷方向标签 */
.regen-tags{ display:flex; flex-wrap:wrap; gap:6px; margin:6px 0 12px; }
.regen-tag{
  border:none; background:var(--fill);
  color:var(--gray-1);
  font-family:inherit; font-size:12px;
  padding:6px 11px;
  border-radius:999px;
  cursor:pointer;
  transition:background .18s, color .18s, transform .18s var(--spring);
}
.regen-tag:active{ transform:scale(.95); }
.regen-tag.on{ background:var(--ink); color:var(--bg); }
.regen-keep{
  display:flex; align-items:flex-start; gap:8px;
  margin:2px 0 12px;
  font-size:13px; line-height:1.45; color:var(--ink);
  cursor:pointer;
}
.regen-keep input{
  flex:0 0 auto; margin-top:2px;
  width:16px; height:16px;
  accent-color:var(--ink);
}
.regen-pick{
  display:flex; align-items:center; gap:4px;
  margin-bottom:6px;
  padding:6px 6px 6px 4px;
  background:var(--fill);
  border-radius:14px;
}
.regen-pick[hidden]{ display:none !important; }
.regen-pick > button:not(.tsb-btn){
  flex:0 0 auto;
  width:32px; height:32px;
  border:none; background:transparent;
  color:var(--ink);
  font-size:20px; line-height:1;
  cursor:pointer;
}
.regen-pick > button:disabled{ opacity:.28; cursor:default; }
.regen-pick > span{
  flex:1; min-width:0;
  text-align:center;
  font-size:12.5px; color:var(--gray-1);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.regen-pick .tsb-btn{ flex:0 0 auto; padding:6px 10px; font-size:12px; }

/* 输入栏上方的引用条 / 编辑条 */
.talk-quote-bar{
  display:flex; align-items:center; gap:10px;
  padding:8px 12px;
  background:var(--fill);
  border-radius:14px;
  margin-bottom:2px;
}
.talk-quote-bar[hidden]{ display:none; }
.tqb-line{
  flex:0 0 auto;
  width:2.5px; height:26px;
  border-radius:2px;
  background:var(--ink);
  opacity:.5;
}
.tqb-text{
  flex:1; min-width:0;
  font-size:12.5px; color:var(--gray-1);
  line-height:1.5;
  overflow:hidden;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical;
}
.tqb-text b{ color:var(--ink); font-weight:600; }
.tqb-close{
  flex:0 0 auto;
  width:26px; height:26px;
  border:none; background:transparent;
  color:var(--gray-2);
  border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  cursor:pointer;
}
.tqb-close svg{
  width:15px; height:15px;
  fill:none; stroke:currentColor;
  stroke-width:2; stroke-linecap:round;
}
@media (hover: hover) and (pointer: fine){
.tqb-close:hover{ background:rgba(var(--tint-rgb),.06); color:var(--ink); }
}


/* ============ 编辑消息弹窗（居中） ============ */
.msg-edit-card{
  max-width:340px;
  max-height:82%;
  padding-bottom:16px;
}
.msg-edit-body{ padding:12px 18px 0; }
.msg-edit-input{
  min-height:108px;
  max-height:28vh;
  resize:vertical;
  font-size:15px;
  line-height:1.65;
  padding:14px 15px;
  border-radius:18px;
  background:var(--fill);
  box-shadow:inset 0 0 0 1px transparent;
  transition:box-shadow .18s;
}
.msg-edit-input:focus{
  outline:none;
  box-shadow:inset 0 0 0 1.5px var(--ink);
}
.msg-edit-types{
  display:flex; flex-wrap:wrap; gap:8px;
  margin-top:14px;
}
.msg-edit-type{
  border:none;
  background:var(--fill);
  color:var(--ink);
  font:inherit; font-size:12.5px; font-weight:560;
  padding:7px 12px;
  border-radius:999px;
  cursor:pointer;
  box-shadow:inset 0 0 0 1px transparent;
  transition:background .15s, color .15s, box-shadow .15s;
}
.msg-edit-type:active{ transform:scale(.97); }
.msg-edit-type.on{
  background:var(--ink);
  color:var(--on-ink);
}
.msg-edit-type[data-conv="split"].on{
  background:var(--ink);
  color:var(--on-ink);
}
.msg-edit-actions{
  display:flex; gap:8px;
  margin-top:16px;
}
.msg-edit-actions .save-btn{ flex:1; margin:0; }

.loc-chips{
  display:flex; flex-wrap:wrap; gap:8px;
  margin:0 0 12px;
}
.loc-chip{
  border:none; border-radius:999px;
  background:var(--fill); color:var(--ink);
  font-family:inherit; font-size:12.5px; font-weight:600;
  padding:7px 12px; cursor:pointer;
  max-width:100%;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.loc-chip:active{ transform:scale(.96); }
.loc-here-btn{
  width:100%; margin-top:10px;
  height:40px; border:none; border-radius:14px;
  background:var(--fill); color:var(--ink);
  font-family:inherit; font-size:14px; font-weight:600;
  cursor:pointer;
}
.loc-here-btn:disabled{ opacity:.5; }
.loc-here-btn:active{ transform:scale(.98); }

/* 语音输入面板 / 金额输入面板 */
.pad-body{ padding:4px 20px 8px; }
.pad-input{
  width:100%;
  border:none;
  background:var(--fill);
  color:var(--ink);
  font-family:inherit;
  font-size:15px;
  line-height:1.55;
  padding:13px 15px;
  border-radius:16px;
  resize:none;
  box-sizing:border-box;
}
.pad-input::placeholder{ color:var(--gray-3); }
.pad-amount{
  width:100%;
  border:none; border-bottom:1.5px solid var(--hairline);
  background:transparent;
  color:var(--ink);
  font-family:inherit;
  font-size:34px; font-weight:600;
  letter-spacing:.01em;
  padding:6px 0 12px;
  text-align:center;
  font-variant-numeric:tabular-nums;
  box-sizing:border-box;
}
.pad-amount::placeholder{ color:var(--gray-3); font-weight:500; }
.pad-amount:focus{ outline:none; border-bottom-color:var(--ink); }
.pad-hint{
  font-size:12px; color:var(--gray-2);
  text-align:center;
  margin:12px 0 0;
  line-height:1.65;
}
.pad-row{ display:flex; align-items:center; gap:10px; margin-top:16px; }
.pad-row .pad-input{ flex:1; font-size:14px; padding:11px 14px; }
.pad-dur{
  flex:0 0 auto;
  font-size:12px; color:var(--gray-2);
  font-variant-numeric:tabular-nums;
}

/* ============ 虚拟图片（TA 用文字描述的「图片」）：纯文字气泡 ============ */
.msg-photo-text{ white-space:pre-wrap; word-break:break-word; }
.msg-photo-text .photo-mark{ opacity:.55; font-weight:600; }

/* ============ 线下邀请卡 ============ */
.msg-offinv{
  padding:0; overflow:hidden; min-width:210px; max-width:250px;
  background:linear-gradient(160deg, #FFF7EE 0%, #F7EBDD 60%, #EFDFCB 100%);
  color:#3B2A1A; cursor:pointer;
  box-shadow:0 8px 24px -10px rgba(120,80,40,.35), inset 0 0 0 1px rgba(120,80,40,.12);
  border-radius:20px !important;
}
.msg.mine .msg-offinv{ background:linear-gradient(160deg, #FFF7EE 0%, #F7EBDD 60%, #EFDFCB 100%); color:#3B2A1A; }
html[data-theme="dark"] .msg-offinv,
html[data-theme="dark"] .msg.mine .msg-offinv{
  background:linear-gradient(160deg, #3A322A 0%, #2E2822 60%, #26211C 100%);
  color:#F0E6DA;
  box-shadow:0 8px 24px -10px rgba(0,0,0,.45), inset 0 0 0 1px rgba(240,230,218,.12);
}
html[data-theme="dark"] .msg-offinv .oi-head{ border-bottom-color:rgba(240,230,218,.18); }
html[data-theme="dark"] .msg-offinv .oi-head small{ color:rgba(240,230,218,.55); }
.msg-offinv:active{ transform:scale(.98); }
.msg-offinv .oi-head{
  display:flex; align-items:center; gap:9px;
  padding:11px 13px 9px;
  border-bottom:1px dashed rgba(120,80,40,.22);
}
.msg-offinv .oi-avatar{ width:32px; height:32px; border-radius:50%; object-fit:cover; flex:0 0 auto; box-shadow:0 0 0 2px rgba(255,255,255,.8); }
.msg-offinv .oi-head span{ flex:1; min-width:0; display:flex; flex-direction:column; }
.msg-offinv .oi-head b{ font-size:13.5px; font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.msg-offinv .oi-head small{ font-size:11px; color:rgba(59,42,26,.6); margin-top:1px; }
.msg-offinv .oi-ico{ width:20px; height:20px; flex:0 0 auto; fill:none; stroke:#B8763A; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; }
.msg-offinv .oi-body{ padding:11px 13px 10px; }
.msg-offinv .oi-say{ margin:0; font-size:14px; line-height:1.6; white-space:pre-wrap; word-break:break-word; }
.msg-offinv .oi-meta{ display:flex; flex-wrap:wrap; gap:6px 12px; margin-top:9px; }
.msg-offinv .oi-meta span{ display:inline-flex; align-items:center; gap:5px; font-size:12px; color:rgba(59,42,26,.75); }
.msg-offinv .oi-meta i{
  width:12px; height:12px; flex:0 0 auto;
  background:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23B8763A' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 21.5s7-6.1 7-11a7 7 0 1 0-14 0c0 4.9 7 11 7 11z'/%3E%3Ccircle cx='12' cy='10.2' r='2.6'/%3E%3C/svg%3E") center/contain no-repeat;
}
.msg-offinv .oi-meta i.t{
  background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23B8763A' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='8.5'/%3E%3Cpath d='M12 7.5V12l3 2'/%3E%3C/svg%3E");
}
.msg-offinv .oi-foot{
  display:flex; align-items:center; justify-content:space-between;
  padding:7px 13px 8px;
  background:rgba(184,118,58,.10);
  font-size:10.5px; color:rgba(59,42,26,.6);
}
.msg-offinv .oi-foot em{ font-style:normal; font-weight:600; color:#B8763A; }
.msg-offinv.done{ filter:saturate(.75); opacity:.92; }
.msg-offinv.done .oi-foot em{ color:#7A8A5E; }
.msg-offinv.no .oi-foot em{ color:#9A6B5E; }

/* 备忘录打开时卸掉消息列表。键盘会改整页高度，底下几百条气泡跟着重排，
   iOS 主屏幕网页经常卡一下就被杀掉。关掉面板后再显示。 */
html.memo-open #talkBody{ display:none !important; }

/* ============ 共享备忘录悬浮球 / 面板 ============ */
.memo-float,
.memo-float-preview{
  --memo-float-size: 52px;
  --memo-float-radius: 50%;
  --memo-float-bg: var(--ink);
  --memo-float-fg: #fff;
  width: var(--memo-float-size);
  height: var(--memo-float-size);
  border-radius: var(--memo-float-radius);
  background-color: var(--memo-float-bg, var(--ink));
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  box-shadow: 0 10px 24px -8px rgba(11,11,15,.55);
  display: none;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  touch-action: none;
  position: relative;
  overflow: hidden;
  flex: 0 0 auto;
}
.memo-float{
  position: absolute;
  z-index: 94;
}
.memo-float.snap{
  transition: left .24s cubic-bezier(.2,.75,.2,1), top .24s cubic-bezier(.2,.75,.2,1), opacity .24s ease;
}
.memo-float.will-dock{ opacity: .72; }
.memo-float.show{ display: flex; }
.memo-float-preview{
  display: flex;
  cursor: default;
  touch-action: auto;
  box-shadow: 0 6px 16px -6px rgba(11,11,15,.4);
}
.memo-float svg,
.memo-float-preview svg{
  width: 42%;
  height: 42%;
  fill: none;
  stroke: var(--memo-float-fg, #fff);
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
  pointer-events: none;
}
.memo-float.has-img svg,
.memo-float-preview.has-img svg{ display: none; }
.memo-float.has-img,
.memo-float-preview.has-img{
  background-color: transparent;
}
.memo-float[data-count]:not([data-count=""])::after,
.memo-float-preview[data-count]:not([data-count=""])::after{
  content: attr(data-count);
  position: absolute; top: -2px; right: -2px;
  min-width: 18px; height: 18px; padding: 0 5px;
  border-radius: 999px;
  background: #E5342B; color: #fff;
  font-size: 10px; font-weight: 600; line-height: 18px; text-align: center;
  box-sizing: border-box;
  z-index: 1;
}
.memo-float.no-badge[data-count]::after,
.memo-float-preview.no-badge[data-count]::after{ display: none; }
.memo-float.docked.dock-right[data-count]:not([data-count=""])::after{
  right: auto;
  left: -2px;
}
.memo-card .cc-title{
  display:grid; grid-template-columns:32px 1fr 32px;
  align-items:center; gap:6px;
}
.memo-card .cc-title span{
  min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
  text-align:center;
}
.memo-close, .memo-back{
  width:32px; height:32px;
  border:none; background:transparent; color:var(--gray-1);
  display:inline-flex; align-items:center; justify-content:center;
  cursor:pointer; border-radius:10px; padding:0;
}
.memo-card .memo-back[hidden]{
  display:inline-flex !important; visibility:hidden; pointer-events:none;
}
.memo-close svg, .memo-back svg{ width:18px; height:18px; stroke:currentColor; stroke-width:1.9; fill:none; }
.memo-body{ padding-bottom:18px !important; }
.memo-list{
  display:flex; flex-direction:column; gap:8px;
  max-height:min(34vh, 260px); overflow:auto;
  margin-bottom:10px;
}
.memo-empty{
  margin:8px 0 14px; text-align:center;
  font-size:13px; color:var(--gray-2); line-height:1.6;
}
.memo-empty[hidden]{ display:none; }
.memo-item{
  display:flex; align-items:center; gap:10px;
  width:100%; padding:10px 12px;
  border:none; background:var(--fill);
  border-radius:14px; text-align:left;
  font:inherit; color:inherit; cursor:pointer;
}
.memo-item:active{ opacity:.82; }
.memo-item-main{ flex:1; min-width:0; }
.memo-item-text{
  margin:0; font-size:14px; font-weight:600; line-height:1.4;
  color:var(--ink); white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.memo-item-meta{
  display:block; margin-top:3px;
  font-size:11px; font-weight:450; color:var(--gray-2);
}
.memo-item-num{
  flex:0 0 auto; font-size:20px; font-weight:650; letter-spacing:-.03em;
  font-variant-numeric:tabular-nums; color:var(--ink);
}
.memo-count{
  margin:0 0 10px; text-align:center;
  font-size:22px; font-weight:650; letter-spacing:-.02em; color:var(--ink);
}
.memo-rename{ display:flex; gap:6px; align-items:center; margin-bottom:10px; }
.memo-rename .pad-input{ flex:1; margin:0; padding:10px 12px; font-size:14px; }
.memo-textbtn{
  flex:0 0 auto; border:none; background:transparent;
  color:var(--gray-1); font:inherit; font-size:13px; font-weight:600;
  padding:8px 4px; cursor:pointer;
}
.memo-textbtn.danger{ color:#E5342B; }
.memo-log{
  display:flex; gap:10px; align-items:flex-start;
  padding:10px 12px; background:var(--fill); border-radius:14px;
}
.memo-log-delta{
  flex:0 0 auto; min-width:42px;
  font-size:15px; font-weight:650; font-variant-numeric:tabular-nums;
  color:var(--ink); white-space:nowrap;
}
.memo-log-delta.down{ color:#E5342B; }
.memo-log-note{
  margin:0; font-size:13px; line-height:1.5;
  color:var(--ink); white-space:pre-wrap; word-break:break-word;
}
.memo-log-note.muted{ color:var(--gray-2); }
.memo-log-meta{
  display:block; margin-top:3px;
  font-size:11px; color:var(--gray-2);
}
.memo-addbar{ display:flex; justify-content:flex-end; margin-top:2px; }
.memo-plus{
  width:36px; height:36px; border-radius:50%;
  border:none; background:var(--ink); color:var(--on-ink);
  display:inline-flex; align-items:center; justify-content:center;
  cursor:pointer; padding:0;
}
.memo-plus svg{
  width:18px; height:18px; stroke:currentColor; fill:none;
  stroke-width:2; stroke-linecap:round;
  transition:transform .2s;
}
.memo-plus.open{ background:var(--fill); color:var(--ink); }
.memo-plus.open svg{ transform:rotate(45deg); }
.memo-compose{ display:flex; flex-direction:column; gap:8px; margin-top:10px; }
.memo-compose[hidden]{ display:none; }
.memo-log-body{ flex:1; min-width:0; }
.memo-log-side{ flex:0 0 auto; padding:0; font-size:12px; }
.memo-log.editing{ flex-direction:column; gap:8px; }
.memo-log.editing .save-btn{ flex:1; width:auto; margin:0; height:40px; font-size:14px; }
.memo-compose-row{ display:flex; gap:8px; align-items:center; }
.memo-compose .pad-input{ margin:0; }
.memo-num{
  width:88px; flex:0 0 88px; text-align:center;
  padding:11px 8px; font-size:16px; font-weight:600;
}
.memo-unit{ width:76px; flex:0 0 76px; text-align:center; padding:11px 8px; font-size:14px; }
.memo-note{ font-size:14px; min-height:64px; }
.memo-compose .save-btn{ margin-top:2px; height:44px; font-size:15px; }
.memo-compose-row .save-btn{
  flex:1; width:auto; margin:0; height:44px; font-size:15px;
}