/* =====================================================================
   GoldChat · 移动端 UI（微信风格 IM）
   ===================================================================== */
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }

:root {
  --green: #07c160;
  --green-dark: #06ad56;
  --gold: #c99a2e;
  --gold-soft: #f6e6bd;
  --bg: #f2f3f5;
  --card: #ffffff;
  --line: #e8e9eb;
  --line-soft: #f0f1f3;
  --text: #16181c;
  --text-2: #6b7280;
  --text-3: #9aa0a6;
  --bubble-other: #ffffff;
  --bubble-self: #95ec69;
  --chat-bg: #f1f3f4;
  --safe-ex: 10px;
  --nav-h: 48px;
  --tab-h: 54px;
  --radius: 14px;
  --shadow-1: 0 1px 2px rgba(16, 24, 40, .05);
  --shadow-2: 0 6px 20px rgba(16, 24, 40, .08);
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
}

html, body {
  margin: 0; padding: 0; min-height: 100%;
  background: var(--bg); color: var(--text);
  font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "Helvetica Neue",
               "Microsoft YaHei", "Segoe UI", Roboto, sans-serif;
  font-size: 16px; -webkit-font-smoothing: antialiased;
}
body { overscroll-behavior-y: none; }
button, input, textarea, select { font-family: inherit; }

/* 关键：作者样式里的 display 会覆盖 hidden 属性的默认 display:none，
   这里统一兜底，避免“默认隐藏”的面板（表情/更多功能）一直显示。 */
[hidden] { display: none !important; }

/* ---------------- 页面容器 ---------------- */
.page { display: none; }
.page.active { display: block; }
/* v11 关键修复：app-page（聊天页）必须是「定高 + flex 列容器」，
   否则内部的 .chat-view / .wx-body 拿不到确定高度，
   .wx-body 的 overflow-y:auto 就没有可滚动区域 —— 表现就是「聊天记录无法滚动」。
   之前这里是 display:block，配合后面 #page-chat 的 overflow:hidden，整页被锁死。 */
.page.app-page.active {
  display: flex; flex-direction: column;
  height: 100vh; height: 100dvh; overflow: hidden;
}
.page.tab-page.active { display: flex; flex-direction: column; height: 100vh; height: 100dvh; }

.tab-body { flex: 1 1 auto; overflow-y: auto; -webkit-overflow-scrolling: touch; }
.tab-body-pad { height: calc(var(--tab-h) + 18px + var(--safe-bottom)); }

/* ---------------- 顶部导航 ---------------- */
.app-nav {
  flex: 0 0 auto; display: flex; align-items: center; gap: 10px;
  height: calc(var(--nav-h) + var(--safe-top)); padding: var(--safe-top) 16px 0;
  background: rgba(255, 255, 255, .92);
  backdrop-filter: saturate(180%) blur(12px);
  border-bottom: 1px solid var(--line);
  position: sticky; top: 0; z-index: 12;
}
.app-nav-title { font-size: 17px; font-weight: 600; letter-spacing: .3px; }
.app-nav-user {
  margin-left: auto; display: flex; align-items: center; gap: 6px;
  font-size: 12.5px; color: var(--text-2);
}
.app-nav-user .dot {
  width: 7px; height: 7px; border-radius: 50%; background: var(--green);
  box-shadow: 0 0 0 3px rgba(7, 193, 96, .15);
}

/* ---------------- 底部 Tab ---------------- */
.app-tabbar {
  flex: 0 0 auto; display: flex; background: rgba(255, 255, 255, .96);
  backdrop-filter: saturate(180%) blur(12px);
  border-top: 1px solid var(--line);
  padding-bottom: var(--safe-bottom); z-index: 12;
}
.app-tabbar button {
  position: relative; flex: 1; border: 0; background: transparent;
  padding: 7px 0 6px; display: flex; flex-direction: column; align-items: center; gap: 2px;
  color: #8b8f96; font-size: 10.5px; letter-spacing: .2px;
}
.app-tabbar button svg { width: 23px; height: 23px; display: block; }
.app-tabbar button.active { color: var(--green); }
.tab-dot {
  position: absolute; top: 6px; right: calc(50% - 17px);
  width: 8px; height: 8px; border-radius: 50%; background: #fa5151;
}

/* ---------------- 按钮 ---------------- */
.btn-primary {
  display: block; width: 100%; margin-top: 14px; padding: 13px 16px;
  border: 0; border-radius: 12px; color: #fff; font-size: 16.5px; font-weight: 600;
  background: linear-gradient(135deg, #2fd07a 0%, var(--green) 100%);
  box-shadow: 0 6px 16px rgba(7, 193, 96, .22);
  letter-spacing: 2px;
}
.btn-primary:active { filter: brightness(.95); transform: translateY(1px); }
.btn-primary:disabled { opacity: .55; box-shadow: none; }
.btn-text {
  display: block; width: 100%; margin-top: 10px; padding: 11px;
  border: 0; background: transparent; color: var(--text-2); font-size: 14px;
}

/* ---------------- 表单 ---------------- */
.field { margin-top: 14px; text-align: left; }
.field label { display: block; font-size: 12.5px; color: var(--text-2); margin-bottom: 6px; }
.field input {
  width: 100%; padding: 13px 14px; font-size: 16px; color: var(--text);
  border: 1px solid var(--line); border-radius: 11px; background: #fafbfc; outline: none;
  transition: border-color .15s, background .15s;
}
.field input:focus { border-color: var(--green); background: #fff; }

/* ---------------- 登录页 ---------------- */
.page.auth-page.active {
  display: flex; align-items: center; justify-content: center;
  min-height: 100vh; min-height: 100dvh; padding: 24px;
  background: linear-gradient(180deg, #fffdf5 0%, #f2f3f5 60%);
}
.auth-box {
  width: 100%; max-width: 420px; padding: 30px 22px 24px;
  background: #fff; border-radius: 20px; text-align: center; box-shadow: var(--shadow-2);
}
.auth-logo { font-size: 26px; font-weight: 700; letter-spacing: 2px; color: #8a6a00; }
.auth-sub { margin-top: 6px; font-size: 13px; color: var(--text-3); }
.auth-msg { min-height: 20px; margin-top: 10px; font-size: 13.5px; color: #fa5151; }
.auth-msg.ok { color: var(--green); }
.auth-note { margin-top: 16px; font-size: 12px; color: #b3b8be; line-height: 1.6; }

/* =====================================================================
   聊天 · 会话列表（微信首页风格）
   ===================================================================== */
.chat-view { display: none; height: 100%; }
.chat-view.active { display: flex; flex-direction: column; }

.conv-scroll {
  flex: 1 1 auto; overflow-y: auto; -webkit-overflow-scrolling: touch;
  background: #fff; padding-bottom: calc(var(--tab-h) + var(--safe-bottom));
}
.conv-item {
  display: flex; align-items: center; gap: 12px; padding: 12px 16px;
  border-bottom: 1px solid var(--line-soft); position: relative;
}
.conv-item:active { background: #f6f7f9; }
.conv-avatar {
  flex: 0 0 auto; width: 48px; height: 48px; border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
  color: #fff; font-size: 16px; font-weight: 600; overflow: hidden;
  box-shadow: var(--shadow-1);
}
.conv-avatar img { width: 100%; height: 100%; object-fit: cover; }
.conv-main { flex: 1 1 auto; min-width: 0; }
.conv-top { display: flex; align-items: baseline; gap: 8px; }
.conv-name {
  font-size: 16px; font-weight: 500; color: var(--text);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.conv-time { margin-left: auto; font-size: 11.5px; color: var(--text-3); flex: 0 0 auto; }
.conv-bottom { display: flex; align-items: center; gap: 8px; margin-top: 4px; }
.conv-preview {
  flex: 1 1 auto; min-width: 0; font-size: 13.5px; color: var(--text-3);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.conv-badge {
  flex: 0 0 auto; min-width: 19px; height: 19px; padding: 0 6px; border-radius: 10px;
  background: #fa5151; color: #fff; font-size: 11.5px; line-height: 19px; text-align: center;
}
.conv-empty { padding: 60px 24px; text-align: center; color: var(--text-3); font-size: 14px; line-height: 2; }

/* =====================================================================
   聊天 · 对话（微信聊天页风格）
   ===================================================================== */
.wx-nav {
  flex: 0 0 auto; display: flex; align-items: center;
  height: calc(var(--nav-h) + var(--safe-top)); padding: var(--safe-top) 6px 0;
  background: var(--chat-bg); border-bottom: 1px solid rgba(0, 0, 0, .06);
  position: relative; z-index: 5;
}
.wx-back {
  flex: 0 0 auto; width: 40px; height: 40px; border: 0; background: transparent;
  color: #191919; display: flex; align-items: center; justify-content: center;
}
.wx-back svg { width: 24px; height: 24px; }
.wx-back:active { opacity: .5; }
/* v12：标题只显示用户名（去掉账号类型标签），字号加大 */
.wx-nav-title {
  flex: 1 1 auto; display: flex; flex-direction: column; align-items: center;
  justify-content: center; line-height: 1.25; min-width: 0;
}
.wx-nav-title span {
  font-size: 19px; font-weight: 600; max-width: 62vw;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.wx-nav-title small { display: none !important; }   /* 不再显示账户类型/在线标签那一行 */
.wx-nav-right {
  flex: 0 0 auto; min-width: 40px; padding-right: 8px; text-align: right;
  font-size: 11.5px; color: #8a8f95;
}
.wx-nav-right.online { color: var(--green); }

/* v12：右上角「变声」开关（有变声权限的账号可见，位置紧邻在线状态） */
.vc-chip {
  flex: 0 0 auto; margin-right: 8px; padding: 0 9px; height: 24px;
  border-radius: 12px; border: 1px solid #d7dade; background: #fff;
  color: #8a8f95; font-size: 11.5px; font-weight: 600; line-height: 1;
  display: inline-flex; align-items: center; gap: 4px;
}
.vc-chip::before {
  content: ""; width: 6px; height: 6px; border-radius: 50%; background: #c8ccd0;
}
.vc-chip.on {
  border-color: #bfe6cd; background: #eaf7ee; color: #0a8f4d;
}
.vc-chip.on::before { background: var(--green); }
.vc-chip:active { filter: brightness(.96); }

.wx-body {
  flex: 1 1 auto; overflow-y: auto; -webkit-overflow-scrolling: touch;
  padding: 14px 14px 20px; background: var(--chat-bg);
}
.wx-loading { text-align: center; color: var(--text-3); font-size: 13px; padding: 24px 0; }

.time-divider { text-align: center; margin: 16px 0 12px; }
.time-divider span {
  display: inline-block; padding: 3px 10px; border-radius: 6px;
  background: rgba(0, 0, 0, .10); color: #fff; font-size: 11.5px; letter-spacing: .3px;
}
.expired-divider {
  margin: 22px 0 10px; padding-top: 10px; border-top: 1px dashed #d9bc72;
  text-align: center; font-size: 11.5px; color: #a5822a;
}

.msg-row { display: flex; align-items: flex-start; margin: 16px 0; }
.msg-row.self { flex-direction: row-reverse; }
/* v12：去掉昵称，气泡与头像同一排对齐 */
.msg-main { max-width: 74%; margin: 0 11px; display: flex; flex-direction: column; }
.msg-row.self .msg-main { align-items: flex-end; }
.msg-row.other .msg-main { align-items: flex-start; }
.msg-name { display: none; }

/* v9：长按气泡 = 撤回菜单，必须屏蔽系统自带的长按菜单（拷贝/查询/翻译）
   与文本选中，否则 iOS/Android 会盖住我们自己的二次确认弹窗。
   v12 关键：**不要用 touchstart.preventDefault() 去屏蔽**，那会把滚动也一起废掉。
   这里是纯 CSS 方案，并显式声明 touch-action: pan-y（垂直滚动交给浏览器）。 */
.wx-body, .wx-nav, .wx-inputbar, .channel-bar {
  -webkit-touch-callout: none;
  -webkit-user-select: none; user-select: none;
}
.wx-body { touch-action: pan-y; }
.bubble, .msg-name, .time-divider, .expired-divider, .recalled-tag, .req-card, .msg-row {
  -webkit-touch-callout: none;
  -webkit-user-select: none; user-select: none;
  touch-action: pan-y;      /* 允许从气泡上开始上下滑动 */
}
/* v12.3：文字气泡必须可以手动拖选（IM 最基础能力）。
   只对纯文字气泡放行选择；系统长按菜单依然由 -webkit-touch-callout: none 屏蔽，
   「复制 / 全选」由我们自己的长按菜单提供。 */
.bubble .bubble-text, .bubble.media .voice-len, .quote-block {
  -webkit-user-select: text; user-select: text;
  -webkit-touch-callout: none;
}
.bubble-text { white-space: pre-wrap; word-break: break-word; }

/* v12.5：引用层 —— 严格按微信样式
   [首字方块] 名字：引用内容……
   整块 #e1e1e1 浅灰底 + 4px 小圆角，名字与内容同一行，内容最多 2 行 */
.quote-block {
  display: flex; align-items: flex-start; gap: 6px;
  margin-bottom: 7px; padding: 6px 8px;
  border: 0; border-radius: 4px;
  background: #e1e1e1;
  font-size: 14px; line-height: 1.45; color: #5b6167;
  max-width: 100%; overflow: hidden;
}
.msg-row.self .quote-block { background: #e1e1e1; }
.quote-block .quote-avatar {
  flex: 0 0 auto; width: 17px; height: 17px; margin-top: 2px;
  border-radius: 3px; background: #c9ccd0; color: #fff;
  font-size: 11px; line-height: 17px; text-align: center;
}
.quote-block .quote-line {
  flex: 1 1 auto; min-width: 0;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden; word-break: break-word;
}
.quote-block .quote-who { color: #8a9199; }
.quote-block .quote-content { color: #4f555b; }
.bubble img, .bubble video { -webkit-touch-callout: none; pointer-events: auto; }

/* 聊天页整体禁用系统长按菜单与文本选择（改用我们自己的长按撤回交互） */
body.chat-only, body.chat-only * {
  -webkit-touch-callout: none;
  -webkit-user-select: none; user-select: none;
}
body.chat-only #msg-input { -webkit-user-select: text; user-select: text; }

.avatar {
  flex: 0 0 auto; width: 42px; height: 42px; border-radius: 8px;
  display: flex; align-items: center; justify-content: center;
  font-size: 14px; font-weight: 600; color: #fff; overflow: hidden;
  box-shadow: 0 1px 3px rgba(16, 24, 40, .10);
}
.avatar img { width: 100%; height: 100%; object-fit: cover; }

/* 气泡：更接近主流 IM 的圆角与留白（v12.4：去掉阴影，纯平面） */
.bubble {
  position: relative; display: inline-block; padding: 11px 14px;
  border-radius: 12px; background: var(--bubble-other);
  font-size: 16.5px; line-height: 1.52; word-break: break-word; white-space: pre-wrap;
  box-shadow: none;
  text-align: left; letter-spacing: .1px;
}
.msg-row.self .bubble {
  background: linear-gradient(180deg, #9cf07a 0%, #8ae86c 100%);
  box-shadow: none;
}
.bubble::after {
  content: ""; position: absolute; top: 14px; width: 0; height: 0;
  border: 7px solid transparent;
}
.msg-row.other .bubble::after { left: -12px; border-right-color: var(--bubble-other); }
.msg-row.self .bubble::after { right: -12px; border-left-color: #8ae86c; }

.bubble.media { padding: 0; background: transparent !important; box-shadow: none; overflow: hidden; }
.bubble.media::after { display: none; }
.bubble.media img, .bubble.media video {
  max-width: 220px; max-height: 280px; border-radius: 12px; display: block; background: #000;
  box-shadow: 0 2px 10px rgba(16, 24, 40, .12);
}
.bubble.media .media-fallback {
  display: block; padding: 11px 14px; border-radius: 12px; background: #fff;
  color: var(--text-2); font-size: 14px;
}
.bubble.pending { opacity: .66; }

.msg-meta { margin-top: 5px; display: flex; gap: 8px; justify-content: flex-end; }

.expired-tag {
  display: inline-flex; align-items: center; margin-left: 6px; padding: 1px 7px;
  border-radius: 10px; background: #fff3cd; color: #a5822a; border: 1px solid #f0dfa8;
  font-size: 11px; vertical-align: middle;
}
.msg-row.expired .bubble { opacity: .84; filter: grayscale(.18); }

/* ---------------- 输入栏（v9：1-2px 圆角、无半圆胶囊、无多余透明圆角框） ---------------- */
.wx-inputbar {
  flex: 0 0 auto; display: flex; align-items: center; gap: 8px;
  padding: 8px 12px;
  /* iPhone 全面屏：底部留出 Home Indicator 的安全区，聊天内容与输入框整体上移 */
  padding-bottom: calc(8px + var(--safe-bottom));
  background: #f7f7f8; border-top: 1px solid var(--line);
  box-shadow: 0 -1px 0 rgba(16, 24, 40, .03);
}

/* 图标按钮（语音 / 表情 / 更多），图标本身是 PNG */
.wx-ico {
  flex: 0 0 auto; width: 34px; height: 34px; padding: 0;
  border: 0; background: transparent; border-radius: 0;
  display: flex; align-items: center; justify-content: center;
}
.wx-ico:active { opacity: .55; }

/* 输入框：带一点圆角（v12：从 2px 调到 8px，微信那种微圆角） */
.wx-pill {
  flex: 1 1 auto; min-width: 0; display: flex; align-items: center;
  min-height: 38px; padding: 0 10px;
  background: #fff; border-radius: 8px; border: 1px solid #e3e5e8;
}
.wx-pill:focus-within { border-color: var(--green); }
#msg-input {
  flex: 1 1 auto; min-width: 0; min-height: 22px; max-height: 96px;
  padding: 8px 0; border: 0; background: transparent; outline: none;
  font-size: 16px; line-height: 1.35; resize: none; color: var(--text);
}

/* 按住说话（语音模式） */
.wx-hold {
  flex: 1 1 auto; min-height: 38px; border: 1px solid #e3e5e8; border-radius: 8px;
  background: #fff; font-size: 15px; color: #3f444b;
  user-select: none; -webkit-user-select: none; touch-action: none;
}
.wx-hold.recording { background: #eaf7ee; border-color: var(--green); color: #0a8f4d; }
.wx-hold:active { background: #f0f1f3; }

/* 发送按钮（有文字时才出现，替换“更多”） */
.wx-send {
  flex: 0 0 auto; padding: 0 14px; height: 34px; border: 0; border-radius: 8px;
  background: var(--green); color: #fff; font-size: 15px; font-weight: 600;
}
.wx-send:active { background: var(--green-dark); }

.wx-inputbar.voice-mode .wx-pill { display: none; }
.wx-inputbar:not(.voice-mode) .wx-hold { display: none; }
.wx-inputbar.text-mode .wx-ico.more { display: none; }
.wx-inputbar:not(.text-mode) .wx-send { display: none; }
.wx-inputbar.voice-mode .wx-send { display: none; }

/* 表情面板（v9：紧贴输入区下方，自身独立滚动，输入框组整体上移） */
.emoji-panel {
  flex: 0 0 auto; height: 220px; overflow-y: auto; -webkit-overflow-scrolling: touch;
  padding: 10px 10px calc(10px + var(--safe-bottom));
  background: #f7f7f8; border-top: 1px solid var(--line);
}
.emoji-grid { display: grid; grid-template-columns: repeat(8, 1fr); gap: 4px; }
.emoji-grid button {
  border: 0; background: transparent; font-size: 24px; line-height: 1;
  padding: 7px 0; border-radius: 6px;
}
.emoji-grid button:active { background: #e9eaec; }

/* + 号面板 / 变声设置面板（内联在输入区下方，无遮罩、无留白） */
#actions-panel, .voice-sheet {
  flex: 0 0 auto; padding: 16px 14px calc(16px + var(--safe-bottom));
  background: #f7f7f8; border-top: 1px solid var(--line);
}
#actions-panel .sheet-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
#actions-panel .sheet-grid button {
  border: 0; background: #fff; border-radius: 10px; padding: 16px 6px;
  font-size: 12.5px; color: var(--text-2); display: flex; flex-direction: column;
  align-items: center; gap: 9px; box-shadow: 0 1px 2px rgba(16, 24, 40, .05);
}
#actions-panel .sheet-grid button:active { background: #f0f1f3; }

.voice-sheet .sheet-title { text-align: center; font-size: 13px; color: var(--text-3); margin-bottom: 12px; }
.voice-row {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 9px 2px; font-size: 13.5px; color: var(--text-2);
}
.voice-row input[type="range"] { flex: 1 1 auto; margin-left: 10px; }
.voice-presets { display: flex; flex-wrap: wrap; gap: 8px; padding: 4px 2px 8px; }
.voice-presets button {
  padding: 6px 12px; border-radius: 2px; border: 1px solid var(--line);
  background: #fff; font-size: 12.5px; color: var(--text-2);
}
.voice-presets button.active { border-color: var(--green); color: #0a8f4d; background: #eaf7ee; }
.voice-sheet .sheet-cancel {
  width: 100%; margin-top: 6px; padding: 12px; border: 0; border-radius: 2px;
  background: var(--green); color: #fff; font-size: 15px; font-weight: 600;
}

/* 旧版绝对定位表情面板已由 v9 的内联面板替代（见上方 .emoji-panel 定义） */

/* ---------------- 二次确认弹窗（关闭通道 / 撤回消息） ---------------- */
.dialog-mask {
  position: fixed; inset: 0; background: rgba(0, 0, 0, .45);
  display: flex; align-items: center; justify-content: center;
  padding: 24px; z-index: 200;
}
.dialog {
  width: 100%; max-width: 300px; background: #fff; border-radius: 14px;
  overflow: hidden; text-align: center; animation: toastIn .16s ease-out;
}
.dialog h4 { margin: 0; padding: 22px 18px 8px; font-size: 16px; color: var(--text); }
.dialog p { margin: 0; padding: 0 18px 20px; font-size: 13.5px; color: var(--text-2); line-height: 1.6; }
.dialog .dlg-actions { display: flex; border-top: 1px solid var(--line); }
.dialog .dlg-actions button {
  flex: 1; padding: 14px; border: 0; background: #fff; font-size: 16px; color: var(--text-2);
}
.dialog .dlg-actions button + button { border-left: 1px solid var(--line); }
.dialog .dlg-actions .danger { color: #d93a37; font-weight: 600; }
.dialog .dlg-actions .primary { color: var(--green); font-weight: 600; }

/* ---------------- 管理端：通道功能按钮组（管理端聊天界面使用） ---------------- */
.channel-bar {
  flex: 0 0 auto; display: flex; align-items: center; gap: 8px;
  padding: 9px 12px;
  background: #fffaf0; border-bottom: 1px solid #f2e6c8;
}
.channel-bar .cb-name {
  font-size: 13px; color: #7a5c00; font-weight: 600;
  max-width: 30vw; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.channel-bar .cb-state {
  flex: 0 0 auto; font-size: 11px; line-height: 1; padding: 4px 8px; border-radius: 9px;
  background: #f0f1f3; color: #6b7280; white-space: nowrap;
}
.channel-bar .cb-state.on { background: #e6f7ee; color: #0a8f4d; }
.channel-bar .cb-state.off { background: #fdecec; color: #c0392b; }
.channel-bar .cb-spacer { flex: 1 1 auto; min-width: 4px; }
.channel-bar .cb-btns { display: flex; align-items: center; gap: 8px; flex: 0 0 auto; }
.channel-bar button {
  flex: 0 0 auto; padding: 0 12px; height: 30px; border-radius: 15px; border: 0;
  font-size: 12.5px; font-weight: 600; white-space: nowrap;
  display: inline-flex; align-items: center; justify-content: center;
}
.channel-bar .cb-open { background: var(--green); color: #fff; }
.channel-bar .cb-close { background: #fff; color: #c0392b; border: 1px solid #f0cccc; }
.channel-bar button:active { filter: brightness(.95); }
.channel-bar .cb-settings { padding: 0 10px; height: 30px; }

/* ---------------- 图片查看器（微信式：点击放大，再点消失） ---------------- */
.lightbox {
  position: fixed; inset: 0; background: #000; z-index: 80;
  display: flex; align-items: center; justify-content: center; overflow: hidden;
  touch-action: none;
}
.lightbox img, .lightbox video {
  max-width: 100%; max-height: 100%; display: block;
  transition: transform .16s ease-out; transform-origin: center center;
}
.lightbox img.zoomed { cursor: zoom-out; }
.lb-close {
  position: absolute; top: calc(10px + var(--safe-top)); right: 14px;
  width: 34px; height: 34px; border-radius: 50%;
  background: rgba(255, 255, 255, .18); color: #fff;
  display: flex; align-items: center; justify-content: center; font-size: 17px;
}

/* ---------------- 开启聊天请求卡片（管理端可直接同意/拒绝） ---------------- */
.req-card {
  display: inline-block; min-width: 210px; max-width: 100%;
  padding: 12px 14px; border-radius: 9px; background: #fff;
  border: 1px solid #f0e3bd; box-shadow: 0 1px 2px rgba(0, 0, 0, .05);
}
.req-row.self .req-card { background: #fffdf5; }
.req-head { font-size: 14.5px; font-weight: 600; color: #7a5c00; margin-bottom: 8px; }
.req-line { font-size: 12.5px; color: var(--text-2); line-height: 1.8; word-break: break-all; }
.req-line b { color: var(--text); font-weight: 600; }
.req-actions { display: flex; gap: 8px; margin-top: 10px; }
.req-actions button {
  flex: 1; padding: 8px 10px; border: 0; border-radius: 8px; font-size: 13.5px; font-weight: 600;
}
.req-accept { background: var(--green); color: #fff; }
.req-reject { background: #f2f3f5; color: #c0392b; }
.req-status {
  margin-top: 10px; font-size: 12.5px; font-weight: 600;
}
.req-status.approved { color: #0a8f4d; }
.req-status.rejected { color: #c0392b; }
.req-status.pending { color: #b0742a; }

/* ---------------- v12：按住说话浮层（微信式） ---------------- */
.rec-overlay {
  position: fixed; inset: 0; z-index: 250;
  background: rgba(0, 0, 0, .30);
  display: flex; align-items: center; justify-content: center;
  flex-direction: column;
  pointer-events: none;                 /* 不拦手势，滚动/滑动判定全靠 JS */
  -webkit-user-select: none; user-select: none;
  -webkit-touch-callout: none;
}
.rec-panel {
  min-width: 180px; max-width: 78vw;
  padding: 22px 26px 18px; border-radius: 16px;
  background: rgba(70, 78, 70, .92); color: #fff;
  display: flex; flex-direction: column; align-items: center; gap: 12px;
  box-shadow: 0 12px 40px rgba(0, 0, 0, .3);
  transition: background-color .15s ease;
}
/* 声波条：由 JS 逐条点亮，做出"在收音"的动效 */
.rec-wave { display: flex; align-items: flex-end; gap: 4px; height: 34px; }
.rec-wave i {
  display: block; width: 4px; border-radius: 2px;
  background: rgba(255, 255, 255, .45);
  transition: height .12s ease, background-color .12s ease;
}
.rec-wave i.on { background: #8ae86c; }
.rec-timer { font-size: 15px; letter-spacing: .5px; color: rgba(255, 255, 255, .92); }
.rec-hint { font-size: 13px; color: rgba(255, 255, 255, .72); }

/* 进入「取消」状态：面板变红，文案变成「松开手指 取消发送」 */
.rec-overlay.cancel .rec-panel { background: rgba(190, 60, 55, .95); }
.rec-overlay.cancel .rec-wave i.on { background: #ffd9d7; }
.rec-overlay.cancel .rec-hint { color: #ffe9e8; font-weight: 600; }

/* 快到 60 秒上限时提醒 */
.rec-overlay.limit .rec-panel { background: rgba(176, 116, 42, .95); }

/* ---------------- v12：长按消息菜单（仿微信深色操作条） ----------------
   只含 复制 / 全选 / 撤回 / 引用；不含转发、收藏、搜一搜。 */
.msg-menu {
  position: fixed; z-index: 240; min-width: 220px; max-width: 320px;
  padding: 4px; border-radius: 10px;
  background: #4c4c4c; box-shadow: 0 10px 30px rgba(0, 0, 0, .35);
  animation: menuIn .12s ease-out;
}
@keyframes menuIn { from { opacity: 0; transform: scale(.96); } to { opacity: 1; transform: scale(1); } }
.mm-grid { display: flex; align-items: stretch; }
.mm-item {
  flex: 1 1 0; min-width: 56px; padding: 10px 6px 8px;
  border: 0; background: transparent; color: #fff;
  display: flex; flex-direction: column; align-items: center; gap: 6px;
}
.mm-item + .mm-item { border-left: 1px solid rgba(255, 255, 255, .12); }
.mm-item:active { background: rgba(255, 255, 255, .1); }
.mm-label { font-size: 11.5px; color: #f2f2f2; white-space: nowrap; }

/* 菜单里的图标：用 CSS 画（可整体替换为 PNG，规则集中在这里） */
.mm-ico {
  width: 22px; height: 22px; display: block; position: relative;
  border-radius: 4px; border: 1.6px solid #f2f2f2; box-sizing: border-box;
}
/* 复制：两张叠起来的纸 */
.mm-copy::before {
  content: ""; position: absolute; left: 3px; top: 3px; right: -4px; bottom: -4px;
  border: 1.6px solid #f2f2f2; border-radius: 4px; background: #4c4c4c;
}
/* 全选：方框 + 勾 */
.mm-all::after {
  content: ""; position: absolute; left: 5px; top: 3px; width: 5px; height: 10px;
  border-right: 2px solid #7ddc6a; border-bottom: 2px solid #7ddc6a;
  transform: rotate(40deg);
}
/* 撤回：回旋箭头 */
.mm-recall { border-color: transparent; }
.mm-recall::before {
  content: ""; position: absolute; left: 2px; top: 4px; width: 15px; height: 15px;
  border: 1.8px solid #f2f2f2; border-radius: 50%; border-top-color: transparent;
  border-left-color: transparent; transform: rotate(-45deg);
}
.mm-recall::after {
  content: ""; position: absolute; left: 1px; top: 1px;
  border: 5px solid transparent; border-right-color: #f2f2f2;
}
/* 引用：PNG 图标（icon 中心用 background-size 适配，替换图片即可换样式） */
.mm-ico.png {
  border: 0; background-color: transparent;
  background-repeat: no-repeat; background-position: center;
  background-size: contain;
}

/* ---------------- v12：引用预览条（输入框上方） ---------------- */
.quote-bar {
  flex: 0 0 auto; display: flex; align-items: center; gap: 6px;
  padding: 7px 12px; background: #f2f3f5; border-top: 1px solid var(--line);
}
.quote-bar .quote-who {
  flex: 0 0 auto; font-size: 12.5px; color: #0a8f4d; font-weight: 600;
  padding-left: 8px; border-left: 3px solid var(--green);
}
.quote-bar .quote-text {
  flex: 1 1 auto; min-width: 0; font-size: 12.5px; color: var(--text-2);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.quote-bar .quote-close {
  flex: 0 0 auto; width: 24px; height: 24px; border: 0; border-radius: 50%;
  background: #e3e5e8; color: #6b7280; font-size: 12px; line-height: 1;
}

/* ---------------- v12.5：预报口令悬浮弹层（醒目大气） ---------------- */
.fc-pwd-mask {
  position: fixed; inset: 0; z-index: 260;
  display: flex; align-items: center; justify-content: center;
  padding: 24px;
  background: rgba(0, 0, 0, .45);
  animation: toastIn .16s ease-out;
}
.fc-pwd-card {
  width: 100%; max-width: 330px;
  padding: 26px 22px 20px; border-radius: 18px;
  background: #fff; text-align: center;
  box-shadow: 0 18px 50px rgba(0, 0, 0, .28);
}
.fc-pwd-badge {
  width: 54px; height: 54px; margin: 0 auto 14px;
  border-radius: 50%; background: #eaf7ee; color: var(--green);
  font-size: 26px; line-height: 54px;
}
.fc-pwd-title { font-size: 18px; font-weight: 700; color: var(--text); }
.fc-pwd-desc { margin-top: 6px; font-size: 13px; color: var(--text-3); line-height: 1.6; }
.fc-input-lg { margin: 18px 0 6px; }
.fc-input-lg input {
  width: 100%; height: 50px; padding: 0 14px; text-align: center;
  font-size: 20px; letter-spacing: 6px;
  border: 2px solid #e3e5e8; border-radius: 12px; background: #fafbfc;
  outline: none; transition: border-color .15s ease, background-color .15s ease;
}
.fc-input-lg input:focus { border-color: var(--green); background: #fff; }
.fc-pwd-actions { display: flex; gap: 10px; margin-top: 16px; }
.fc-pwd-actions button { flex: 1; height: 46px; border-radius: 12px; font-size: 15.5px; }
.fc-pwd-hint { margin-top: 12px; font-size: 11.5px; color: #b6bbc1; }

/* ---------------- Toast（居中悬浮，自动消失，不使用系统 alert） ---------------- */
.toast {
  position: fixed; left: 50%; top: 46%; transform: translate(-50%, -50%);
  max-width: 74vw; padding: 12px 20px; border-radius: 10px;
  background: rgba(0, 0, 0, .82); color: #fff; font-size: 14.5px;
  text-align: center; z-index: 300; line-height: 1.55;
  box-shadow: 0 10px 30px rgba(0, 0, 0, .22);
  animation: toastIn .16s ease-out;
  pointer-events: none; word-break: break-word;
}
.toast.rich { padding: 16px 20px; max-width: 80vw; text-align: left; }
.toast .t-title { font-size: 15px; font-weight: 600; margin-bottom: 6px; }
.toast .t-body { font-size: 13.5px; opacity: .88; line-height: 1.65; }
@keyframes toastIn { from { opacity: 0; transform: translate(-50%, -46%); } to { opacity: 1; } }

/* ---------------- v9/v12：撤回标签 / 语音气泡 / 滚动优化 ----------------
   v12.4：撤回标签与气泡「同圆角、同尺寸字号」，浅红底 + 红字 */

/* ---------------- v12.4：撤回标签（与气泡同圆角、浅红底） ----------------
   要求：和消息气泡一样的圆角尺寸（12px），浅红背景好辨认 */
.recalled-tag {
  display: inline-block; margin-top: 6px; padding: 8px 13px; border-radius: 12px;
  background: #fdecec; color: #c0392b; border: 1px solid #f7d4d3;
  font-size: 14.5px; line-height: 1.45;
}
.msg-row.self .recalled-tag { background: #fdeaea; }
/* ---------------- v11：语音气泡（微信式点击播放） ----------------
   .v-sound = 三条声波，播放时按秒依次点亮；.v-len = 时长；红点 = 未播放 */
.bubble.media.voice {
  display: inline-flex !important; align-items: center; justify-content: space-between;
  gap: 10px; min-width: 92px; max-width: 236px;
  padding: 10px 14px !important; cursor: pointer;
  background: #fff !important; border: 1px solid #e6e8ea; box-shadow: none !important;
}
.msg-row.self .bubble.media.voice { background: #eafbe4 !important; border-color: #cdeec4; }
.bubble.media.voice:active { filter: brightness(.97); }
.bubble.media.voice.playing { border-color: var(--green); background: #f7fdf4 !important; }

/* 声波：三条竖线，未点亮时是浅灰短条，点亮后变绿变高 */
.v-sound { display: inline-flex; align-items: center; gap: 3px; height: 18px; }
.v-bar {
  display: block; width: 3px; height: 7px; border-radius: 2px;
  background: #c8ccd0; transition: height .18s ease, background-color .18s ease;
}
.bubble.media.voice.playing .v-bar.on { background: var(--green); }
.bubble.media.voice.playing .v-bar:nth-child(2) { height: 13px; }
.bubble.media.voice.playing .v-bar:nth-child(3) { height: 17px; }
.v-bar.on { height: 11px; }

.v-len { font-size: 13.5px; color: var(--text-2); letter-spacing: .2px; }
/* 未播放的小红点（微信同款）：只显示在对方发来的语音上 */
.bubble.media.voice.unread::before {
  content: ""; position: absolute; top: 50%; left: -14px; margin-top: -4px;
  width: 8px; height: 8px; border-radius: 50%; background: #fa5151;
}
.msg-row.self .bubble.media.voice.unread::before { display: none; }
/* 语音气泡不需要文字气泡的尖角 */
.bubble.media.voice::after { display: none; }

/* 聊天区域独立滚动：页面本身不滚动，避免“记录少时整页跟着上下动” */
html, body { height: 100%; overflow: hidden; }
.page.tab-page.active, .page.app-page.active { height: 100%; overflow: hidden; }
#page-chat .chat-view.active { height: 100%; overflow: hidden; }
/* v11：flex 安全收缩 + iOS 惯性滚动，做到微信那样「丝滑」 */
.chat-view.active, .page.app-page.active, #page-chat { min-height: 0; }
.wx-body { min-height: 0; flex: 1 1 auto; overflow-y: auto; -webkit-overflow-scrolling: touch; }
.wx-body, .conv-scroll, .tab-body { overscroll-behavior: contain; -webkit-overflow-scrolling: touch; }