/* 情感陪伴 Web 端：微信风格聊天页 + 仿微信语音通话页（共用） */
* { margin: 0; padding: 0; box-sizing: border-box; -webkit-tap-highlight-color: transparent; }

html, body {
  height: 100%;
  font-family: system-ui, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
  background: #FDF6F2;
  color: #3D3A38;
}
/* 2026-09-16 她最终需求（三轮澄清）：输入栏在底部原位；打字弹键盘时输入栏连着键盘
   一起往上弹出、消息区收缩在键盘上方。做法：聊天页/草稿本给 .shell/.page 加 .pin-view
   钉在视口里(四周贴边)，键盘弹出时由 chat.js/drafts.js 量出键盘高度、把容器底边抬高
   同值(输入栏贴键盘上沿)；安卓 Chrome 配 interactive-widget=resizes-content 自动收缩
   时量出 0，不重复抬。
   2026-09-16 晚修复：position:fixed 曾写在 .shell/.page 本身上，误伤所有同款页面
   （主页/人物页等整个页面钉死、无法上下滚动）。现在 fixed 只放在 .pin-view 里，
   聊天页与草稿本单独使用，其余页面恢复文档流滚动。 */
.shell { max-width: 560px; margin: 0 auto; background: #FDF6F2; }
.pin-view { position: fixed; top: 0; left: 0; right: 0; bottom: 0; }
@supports (height: 100dvh) {
  html, body { height: 100dvh; }
}

/* ============ 聊天页 ============ */
.chat { display: flex; flex-direction: column; height: 100%; position: relative; }

/* 2026-09-18：加刘海/小白条避让。加到主屏幕（PWA 独立全屏）或安卓全面屏时，
   48px 顶栏会被状态栏压住、底部输入栏会被手势条压住——env() 在普通浏览器里
   取值为 0，加了不影响原样。Android Chrome 需 viewport 带 viewport-fit=cover 才生效。 */
.nav {
  display: flex; align-items: center; justify-content: space-between;
  height: calc(48px + env(safe-area-inset-top)); padding: env(safe-area-inset-top) 8px 0;
  background: #FDF6F2; border-bottom: 1px solid #EEE6E1;
  flex-shrink: 0;
}
.nav-btn { width: 40px; height: 40px; border: 0; background: none; font-size: 22px; color: #3D3A38; cursor: pointer; }
.nav-title { font-size: 17px; font-weight: 600; }
/* 微信同款「对方正在输入…」：等待回复时标题变小变灰 */
.nav-title.typing { font-size: 13px; font-weight: 400; color: #9A9A9A; }

.msgs { flex: 1; overflow-y: auto; padding: 16px 12px; }
.row { display: flex; margin-bottom: 14px; align-items: flex-end; }
.row.me { justify-content: flex-end; }
/* 微信同款居中时间条（间隔>5分钟/跨天/首条时显示） */
.time-chip { text-align: center; font-size: 11px; color: #B8AFA8; margin: 4px 0 10px; }
.avatar {
  width: 36px; height: 36px; border-radius: 50%; background: #FFF3F0;
  display: flex; align-items: center; justify-content: center;
  font-size: 20px; margin-right: 8px; flex-shrink: 0;
}
.bubble {
  max-width: 70%; padding: 10px 14px; border-radius: 14px;
  font-size: 15px; line-height: 1.5; word-break: break-all; white-space: pre-wrap;
}
/* 专业模式整段方案气泡（2026-09-15 她要求）：宽一点、字小一号，长结构化内容不局促 */
.bubble.pro { max-width: 92%; font-size: 14px; }
.bubble.assistant { background: #fff; border-bottom-left-radius: 4px; }
.bubble.user { background: #F29A9A; color: #fff; border-bottom-right-radius: 4px; }
.bubble.typing { color: #8A817C; font-size: 13px; }
/* 「正在思考」三个呼吸点（2026-09-21 她拍板「先字+开关」的等待态） */
.t-dots { display: inline-flex; gap: 3px; margin-left: 4px; vertical-align: 1px; }
.t-dots i { width: 4px; height: 4px; border-radius: 50%; background: #B5ADA8; animation: tdot 1.2s infinite; }
.t-dots i:nth-child(2) { animation-delay: .2s; }
.t-dots i:nth-child(3) { animation-delay: .4s; }
@keyframes tdot { 0%, 60%, 100% { opacity: .35; } 30% { opacity: 1; } }
/* 思考过程折叠块（2026-09-21「先字+开关」+ 当晚 UI 反馈）：参考 DeepSeek——
   气泡顶部、默认收起、点开才看；极简灰阶排版，无框线，chevron 展开时旋转 90° */
.reason { margin-bottom: 10px; }
.reason-head {
  display: flex; align-items: center; gap: 5px;
  color: #8A817C; font-size: 13px; cursor: pointer; user-select: none;
  -webkit-tap-highlight-color: transparent;
}
/* 收起时「>」向右指，展开时旋转 90° 向下指（2026-09-21 她指定不要实心三角形，就用「>」） */
.reason-chev { font-size: 12px; line-height: 1; transition: transform .18s ease; }
.reason.open .reason-chev { transform: rotate(90deg); }
.reason-body {
  display: none; margin-top: 10px; padding-left: 10px;
  border-left: 2px solid #EFEBE7; color: #A29A94;
  font-size: 13px; line-height: 1.7; white-space: pre-wrap; word-break: break-all;
}
.reason.open .reason-body { display: block; }
.stream-cursor { color: #F29A9A; }

/* 微信同款语音条气泡：左声波图标 + 中部声波线 + 右侧 mm:ss 时长，宽度随秒数拉长 */
.vwrap { position: relative; display: flex; align-items: flex-end; }
.voice-bubble {
  position: relative; display: flex; align-items: center; gap: 8px;
  height: 42px; padding: 0 13px; border-radius: 12px;
  /* 宽度按内容自然撑开（秒数永不溢出、两侧间距恒定 13px），内联 min-width 再按秒数拉长 */
  width: max-content;
  flex-shrink: 0;
  cursor: pointer; user-select: none; -webkit-tap-highlight-color: transparent;
  /* 浅色模式默认：我的=微信消息绿平涂+极淡渐变，他的=纯白 */
  --vb-bg: #95EC69; --vb-bg2: #9CE97B; --vb-fg: #FFFFFF;
  --vb-mid: rgba(255,255,255,.62); --vb-play: #FFFFFF;
  --vb-shadow: 0 3px 8px rgba(0,0,0,.06);
}
.voice-bubble.assistant {
  --vb-bg: #FFFFFF; --vb-bg2: #FDFDFD; --vb-fg: #868686;
  --vb-mid: #C9C9C9; --vb-play: #262626;
}
/* 深色模式（聊天背景选「深色」时自动生效） */
.chat-bg-dark .voice-bubble.user {
  --vb-bg: #07C160; --vb-bg2: #0AC968; --vb-mid: #FFFFFF; --vb-play: #FFFFFF;
  --vb-shadow: inset 0 1px 2px rgba(0,0,0,.28), 0 0 8px rgba(7,193,96,.16);
}
.chat-bg-dark .voice-bubble.assistant {
  --vb-bg: #2F2F2F; --vb-bg2: #353535; --vb-fg: #B0B0B0;
  --vb-mid: #7E7E7E; --vb-play: #FFFFFF;
  --vb-shadow: inset 0 1px 2px rgba(0,0,0,.35);
}
.bubble.voice-bubble {
  background: linear-gradient(180deg, var(--vb-bg2), var(--vb-bg));
  box-shadow: var(--vb-shadow);
}
/* 气泡尾巴：我的右上角小尖角、他的左下角小尖角 */
.voice-bubble::after { content: ''; position: absolute; width: 0; height: 0; border: 0 solid transparent; }
.voice-bubble.user::after {
  top: 7px; right: -5px;
  border-left: 6px solid var(--vb-bg); border-top-width: 6px; border-bottom-width: 6px;
}
.voice-bubble.assistant::after {
  bottom: 7px; left: -5px;
  border-right: 6px solid var(--vb-bg); border-top-width: 6px; border-bottom-width: 6px;
}
.voice-bubble.user { border-top-right-radius: 4px; flex-direction: row-reverse; } /* 我的：秒数在左，声波靠右 */
.voice-bubble.user .v-wave { transform: scaleX(-1); } /* 我的声波镜像翻转 */
.voice-bubble.assistant { border-bottom-left-radius: 4px; }
.v-wave { flex-shrink: 0; display: block; color: var(--vb-mid); }
.v-sec { font-size: 13px; color: var(--vb-fg); white-space: nowrap; flex-shrink: 0; }
/* 播放中：波形条上下跳动、颜色变亮 */
.voice-bubble.playing .v-wave { color: var(--vb-play); }
.voice-bubble.playing .v-wave .v-bar { animation: v-jump .8s ease-in-out infinite; }
.v-bar { transform-box: fill-box; transform-origin: center; }
@keyframes v-jump { 0%, 100% { transform: scaleY(1); } 50% { transform: scaleY(.4); } }
.voice-bubble.loading { opacity: .55; pointer-events: none; }
/* 图片气泡（2026-09-14 图片聊天）：透明底圆角缩略图，点开大图查看 */
.bubble.img-bubble {
  padding: 0; background: transparent; border-radius: 12px; overflow: hidden; max-width: 62vw;
}
.bubble.img-bubble img { display: block; width: auto; max-width: 62vw; max-height: 46vh; border-radius: 12px; object-fit: cover; }
.img-viewer {
  position: fixed; inset: 0; background: rgba(0, 0, 0, .88); z-index: 60;
  align-items: center; justify-content: center;
}
.img-viewer img { max-width: 94vw; max-height: 92vh; border-radius: 8px; }
/* 断网提示条 + 「未送达」角标（2026-09-14 她手机断网误以为「他不回话」事故） */
.net-tip {
  align-items: center; justify-content: center; gap: 8px;
  background: #fdf0f0; color: #d64545; font-size: 12px; padding: 6px 12px;
  border-bottom: 1px solid rgba(214, 69, 69, .15);
}
.net-tip-btn {
  border: 1px solid #d64545; border-radius: 4px; background: #fff;
  color: #d64545; font-size: 12px; padding: 2px 12px;
}
.bubble.failed { position: relative; opacity: .8; }
.bubble.failed::after {
  content: '未送达'; position: absolute; top: -8px; right: -6px;
  background: #e74c3c; color: #fff; font-size: 10px; line-height: 16px;
  padding: 0 6px; border-radius: 8px;
}
/* 他的未听语音红点：气泡外右侧（点过一次消失并记住） */
.v-dot {
  position: absolute; right: -12px; top: 50%; transform: translateY(-50%);
  width: 8px; height: 8px; border-radius: 50%; background: #FA5151;
}

/* ---- 底部上滑面板（表情 / 加号功能，2026-09-16 她要求微信同款：贴输入栏上方滑出）---- */
.sheet {
  position: absolute; left: 0; right: 0; bottom: 55px; z-index: 1000;
  background: #FFF; border-top: 1px solid rgba(0, 0, 0, .05);
  border-radius: 16px 16px 0 0; box-shadow: 0 -4px 16px rgba(0, 0, 0, .06);
  animation: sheetRise .22s cubic-bezier(.22, 1, .36, 1);
}
@keyframes sheetRise { from { transform: translateY(100%); opacity: .5; } to { transform: none; opacity: 1; } }

/* ---- 表情面板：表头（分类 tab）在最上面，下面分栏左右滑动（scroll-snap） ---- */
.ep-sheet { padding: 0 6px 8px; }
.ep-tabs { display: flex; border-bottom: 1px solid rgba(0, 0, 0, .05); margin-bottom: 4px; }
.ep-tab {
  flex: 1; padding: 9px 0 8px; font-size: 17px; background: none;
  border: 0; cursor: pointer; opacity: .45; font-family: inherit;
}
.ep-tab.on { opacity: 1; }
.ep-tab.on::after {
  content: ''; display: block; width: 16px; height: 3px; border-radius: 2px;
  background: #07C160; margin: 5px auto -1px;
}
.ep-scroll {
  display: flex; overflow-x: auto; scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch; height: 200px;
}
.ep-scroll::-webkit-scrollbar { display: none; }
.ep-page {
  min-width: 100%; flex-shrink: 0; scroll-snap-align: start;
  display: grid; grid-template-columns: repeat(8, 1fr);
  grid-auto-rows: min-content; align-content: start;
  overflow-y: auto; -webkit-overflow-scrolling: touch;
}
.ep-emoji {
  font-size: 26px; padding: 7px 0; text-align: center;
  border: 0; background: none; cursor: pointer; font-family: inherit;
}
.ep-emoji:active { background: #F5F5F5; border-radius: 10px; }
.ep-custom-img { width: 42px; height: 42px; border-radius: 9px; object-fit: contain; background: #F5F5F5; }
.ep-add {
  display: flex; flex-direction: column; align-items: center; gap: 5px;
  border: 0; background: none; cursor: pointer; font-family: inherit;
}
.ep-add-box {
  width: 42px; height: 42px; border-radius: 10px; border: 1.5px dashed #D8D0CB;
  color: #B8AFAA; font-size: 22px; line-height: 40px;
}
.ep-add-label { font-size: 11px; color: #B8AFAA; }

/* ---- 加号功能面板：2 行 × 4 列（2026-09-16 她要求：对标微信大小、均匀排列、
       单色线条图标无彩色、图标占方块 40%） ---- */
.func-sheet { padding: 18px 12px 16px; }
.func-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px 12px; justify-items: center; }
.func-item {
  display: flex; flex-direction: column; align-items: center; gap: 7px;
  border: 0; background: none; cursor: pointer; padding: 0; font-family: inherit;
}
.func-sq {
  width: 60px; height: 60px; border-radius: 14px; background: #F5F5F5;
  display: flex; align-items: center; justify-content: center;
}
.func-sq:active { background: #EDEDED; }
.func-sq svg { width: 40%; height: 40%; } /* 线条图标占方块 40% */
.func-name { font-size: 12px; color: #6B6561; }

/* ---- 底部输入栏（微信同款：语音切换 | 输入框 | 表情 | 加号；打字时随键盘一起上弹）---- */
.inputbar {
  display: flex; align-items: center; background: #F7F7F7;
  border-top: 1px solid #E8E8E8;
  padding: 8px 10px calc(8px + env(safe-area-inset-bottom)); gap: 10px; flex-shrink: 0;
}
.tool-btn {
  width: 36px; height: 36px; display: flex; align-items: center; justify-content: center;
  font-size: 24px; border: 0; background: none; cursor: pointer; flex-shrink: 0;
}
/* 2026-09-16 她要求：表情图标比 ⊕ 再小一点 */
#emojiToggle { font-size: 20px; }
.input {
  flex: 1; height: 38px; background: #fff; border: 0; border-radius: 6px;
  padding: 0 12px; font-size: 16px; outline: none; font-family: inherit;
}
/* 2026-09-18 她实测反馈：长按会弹出系统「复制/按住说话」菜单，且按下没有触感。
   系统长按菜单靠三件事一起堵：touch-action:none（已有）+ user-select:none（已有）
   + -webkit-touch-callout:none（缺，iOS 的「拷贝」气泡就是它管）+ contextmenu 拦截（chat.js）。
   触感：能震的（安卓）在 chat.js 里 navigator.vibrate，不能震的（iPhone）靠这里的按压缩放。 */
.hold-talk {
  flex: 1; height: 38px; background: #fff; border: 0; border-radius: 6px;
  display: flex; align-items: center; justify-content: center;
  font-size: 15px; color: #3D3A38; cursor: pointer;
  touch-action: none; user-select: none; -webkit-user-select: none;
  -webkit-touch-callout: none; font-family: inherit;
  transition: background .12s, transform .12s, color .12s;
}
.hold-talk.active { background: #E8E3E0; color: #8A817C; transform: scale(.96); }
.send-btn {
  height: 34px; padding: 0 14px; border: 0; border-radius: 6px; flex-shrink: 0;
  background: #07C160; color: #fff; font-size: 14px; cursor: pointer; font-family: inherit;
}
.send-btn:active { background: #06AD56; }

/* ---- 录音浮层（微信同款：上滑取消）---- */
.record-mask {
  position: fixed; inset: 0; background: rgba(0,0,0,.45);
  display: none; align-items: center; justify-content: center; z-index: 99;
  touch-action: none; -webkit-touch-callout: none; -webkit-user-select: none; user-select: none;
}
.record-mask.show { display: flex; }
.record-tip {
  width: 160px; padding: 20px 0; background: rgba(0,0,0,.75); border-radius: 12px;
  display: flex; flex-direction: column; align-items: center; gap: 12px;
}
.record-tip.cancel { background: rgba(180,40,40,.8); }
/* 快到 60 秒上限（2026-09-21 她实测「快到 60 秒也没有提示」）：琥珀色提醒还能说几秒 */
.record-tip.warn { background: rgba(190,120,30,.85); }
.record-time { color: #fff; font-size: 16px; font-weight: 600; min-height: 18px; }
.record-text { color: #fff; font-size: 13px; }

/* ============ 独立分页（TheOne 式：每步一个页面） ============ */
/* 独立分页同样钉在视口里：键盘弹出时整页一起顶上去（草稿本等分页） */
.page { display: flex; flex-direction: column; height: 100%; }
.page-head {
  height: 48px; display: flex; align-items: center; justify-content: center;
  padding: 0 8px; border-bottom: 1px solid #EEE6E1; flex-shrink: 0; position: relative;
}
.page-head .nav-btn { position: absolute; left: 8px; }
.page-title { font-size: 17px; font-weight: 600; }
.page-body { flex: 1; overflow-y: auto; }
.page-foot {
  padding: 12px 16px calc(12px + env(safe-area-inset-bottom));
  border-top: 1px solid #EEE6E1; background: #FDF6F2; flex-shrink: 0;
}
.page-hint { font-size: 12px; color: #B8AFAA; text-align: center; padding: 14px 16px 4px; }
.page-hint.empty { padding-top: 40px; }

/* ---- 主按钮 / 文字按钮 ---- */
.btn-primary {
  width: 100%; height: 46px; border: 0; border-radius: 12px;
  background: #F29A9A; color: #fff; font-size: 16px; cursor: pointer; font-family: inherit;
}
.btn-primary:disabled { opacity: .5; }
.btn-link {
  width: 100%; border: 0; background: none; color: #8A817C; font-size: 13px;
  text-decoration: underline; cursor: pointer; font-family: inherit; padding: 8px 0 0;
}

/* ---- 步骤 1：角色库大卡横滑（TheOne 同款） ---- */
.role-tip { font-size: 13px; color: #8A817C; text-align: center; padding: 16px 0 4px; }
.role-carousel {
  display: flex; gap: 14px; overflow-x: auto; padding: 16px;
  scroll-snap-type: x mandatory; scrollbar-width: none;
}
.role-carousel::-webkit-scrollbar { display: none; }
.role-card {
  flex: 0 0 76%; max-width: 320px; scroll-snap-align: center;
  background: #fff; border: 2px solid transparent; border-radius: 20px;
  padding: 26px 18px 20px; text-align: center; cursor: pointer; font-family: inherit;
  box-shadow: 0 6px 24px rgba(90,60,50,.08);
}
.role-card.on { border-color: #F29A9A; background: #FDF3F3; }
.role-avatar {
  width: 96px; height: 96px; margin: 0 auto 14px; border-radius: 50%;
  background: linear-gradient(145deg, #FFF3F0, #FFE0DA);
  display: flex; align-items: center; justify-content: center; font-size: 52px;
  box-shadow: 0 0 0 4px rgba(242,154,154,.12);
}
.role-name { font-size: 19px; font-weight: 600; color: #4A4440; }
.role-card.on .role-name { color: #D97B7B; }
.role-meta { font-size: 12px; color: #8A817C; margin-top: 6px; }
.role-tag { font-size: 14px; color: #6B6561; margin-top: 10px; }
.role-desc {
  font-size: 12px; color: #A79E99; margin-top: 8px; line-height: 1.6;
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}

/* ---- 步骤 2：定制表单（2026-09-15 她要求美化：分组卡片 + 选中态渐变） ---- */
.form-groups { display: flex; flex-direction: column; gap: 14px; padding: 0 14px 32px; }
.form-card {
  background: #fff; border-radius: 18px; padding: 16px 16px 18px;
  display: flex; flex-direction: column; gap: 12px;
  box-shadow: 0 2px 14px rgba(93, 62, 51, .05);
}
.form-group-title {
  font-size: 12px; font-weight: 600; color: #D9887C; letter-spacing: 2px;
}
.form-row2 { display: flex; gap: 12px; }
.form-col { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 8px; }
.form-storage-note {
  text-align: center; font-size: 11.5px; color: #A79E99; line-height: 1.7;
  padding: 2px 16px 0;
}
.onboard-sub { font-size: 13px; color: #8A817C; }
.form-hint { font-size: 11px; color: #C9A09A; margin-top: 4px; }
.mini-btn { margin-top: 8px; padding: 8px 16px; border: none; border-radius: 20px;
  background: #F4C2BE; color: #7A3B34; font-size: 13px; font-weight: 600; cursor: pointer; }
.mini-btn:active { opacity: .8; }
.form-card input[type=text], .form-card input[type=number], .form-card input[type=time] {
  height: 42px; border: 1.5px solid #F0E6E1; border-radius: 12px; padding: 0 14px;
  font-size: 15px; outline: none; font-family: inherit; background: #FDFBFB;
  transition: border-color .15s, box-shadow .15s, background .15s;
}
.form-card input:focus, .form-card textarea:focus {
  border-color: #F29A9A; background: #fff;
  box-shadow: 0 0 0 3px rgba(242, 154, 154, .14);
}
.form-card textarea {
  border: 1.5px solid #F0E6E1; border-radius: 12px; padding: 10px 14px;
  font-size: 14px; line-height: 1.5; outline: none; font-family: inherit; resize: none;
  background: #FDFBFB; transition: border-color .15s, box-shadow .15s, background .15s;
}
/* 人生阶段引擎（2026-09-15）：阶段/子焦虑下拉与输入框同款 */
.form-card select {
  height: 42px; border: 1.5px solid #F0E6E1; border-radius: 12px; padding: 0 12px;
  font-size: 14px; outline: none; font-family: inherit; background: #FDFBFB; color: #4A4541;
  transition: border-color .15s, box-shadow .15s, background .15s;
  appearance: none; -webkit-appearance: none;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23C9A09A' stroke-width='2' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 12px center;
}
.form-card select:focus {
  border-color: #F29A9A; background-color: #fff;
  box-shadow: 0 0 0 3px rgba(242, 154, 154, .14);
}
.vibe-row { display: flex; gap: 8px; flex-wrap: wrap; }
.vibe-chip {
  padding: 9px 16px; border-radius: 999px; border: 1.5px solid #F0E6E1;
  background: #fff; font-size: 13px; cursor: pointer; color: #6B6561; font-family: inherit;
  transition: all .15s;
}
.vibe-chip:active { transform: scale(.95); }
.vibe-chip.on {
  background: linear-gradient(135deg, #F5AAA4, #F29A9A); color: #fff;
  border-color: transparent; font-weight: 600;
  box-shadow: 0 3px 10px rgba(242, 154, 154, .35);
}

/* ---- 首页「我的智能体」：标题区 / 活动卡片 / CTA / 智能体卡片 ---- */
.home { min-height: 100%; padding: 36px 0 8px; }
.home-head { padding: 0 24px; }
.home-title { font-size: 34px; font-weight: 700; color: #1A1A1A; }
.home-sub { margin-top: 13px; font-size: 17px; color: #777; line-height: 1.55; }

.notice-card {
  margin: 34px 20px 0; padding: 24px;
  background: #FFF8F5; border-radius: 26px;
  border: 1.5px solid #C8663F;
}
.notice-card + .notice-card { margin-top: 22px; }
.notice-tag {
  display: inline-block; padding: 5px 14px; border-radius: 12px;
  background: #E8CFC4; color: #9A6B5A; font-size: 13px;
}
.notice-title { margin-top: 13px; font-size: 21px; font-weight: 700; color: #1A1A1A; }
.notice-title.hot { color: #C8663F; }
.notice-body { margin-top: 9px; font-size: 15px; color: #666; line-height: 1.5; }
.notice-btn {
  width: 100%; height: 50px; margin-top: 22px; border: 0; border-radius: 21px;
  background: linear-gradient(180deg, #F0D9CF, #E8CFC4);
  color: #9A6B5A; font-size: 17px; font-weight: 500; cursor: pointer; font-family: inherit;
}
.notice-btn:active { opacity: .85; }

.cta-create {
  display: block; width: calc(100% - 40px); height: 54px; margin: 30px 20px 0;
  border: 0; border-radius: 27px; background: #3A2E28; color: #fff;
  font-size: 17px; font-weight: 500; cursor: pointer; font-family: inherit;
}
.cta-create:active { background: #2B211C; }

.home-agent-card {
  display: block; width: calc(100% - 40px); margin: 26px 20px 0; padding: 30px 24px;
  background: #fff; border: 0; border-radius: 26px; text-align: left;
  box-shadow: 0 2px 14px rgba(0,0,0,.04); cursor: pointer; font-family: inherit;
}
.home-agent-card:active { opacity: .85; }
.hac-head { display: flex; align-items: center; justify-content: space-between; }
.hac-name { font-size: 27px; font-weight: 700; color: #1A1A1A; }
.hac-status {
  padding: 7px 18px; border-radius: 15px; background: #E8E8E8;
  color: #888; font-size: 15px; flex-shrink: 0;
}
/* 2026-09-24 她要求：「在线」显示绿色（未激活仍灰色 #E8E8E8/#888） */
.hac-status.on { background: #E3F7E8; color: #07C160; }
.hac-progress-row { display: flex; align-items: center; gap: 10px; margin-top: 11px; }
.hac-progress-label { font-size: 17px; color: #888; flex-shrink: 0; }
.hac-bar { flex: 1; height: 8px; border-radius: 4px; background: #EFEDEB; overflow: hidden; }
.hac-bar-fill { display: block; height: 100%; border-radius: 4px; background: #07C160; }
.hac-pct { font-size: 13px; color: #07C160; flex-shrink: 0; }
.hac-date { margin-top: 38px; font-size: 17px; font-weight: 600; color: #3D3A38; }
.hac-updated { margin-top: 9px; font-size: 14px; color: #999; }

/* ---- 聊天页下拉提示（下拉进「我的他」） ---- */
.pull-tip {
  position: fixed; top: 56px; left: 50%; transform: translateX(-50%);
  background: rgba(0,0,0,.7); color: #fff; font-size: 12px;
  padding: 6px 14px; border-radius: 999px; z-index: 60;
  display: none; pointer-events: none;
}

/* ---- 捏人完成仪式（全屏 3 秒后自动进入聊天） ---- */
.done-mask {
  position: fixed; inset: 0; background: #17171B; z-index: 300;
  display: flex; align-items: center; justify-content: center;
}
.done-text {
  font-size: 22px; color: #F2ECE9; letter-spacing: 3px; line-height: 1.6;
  text-align: center; padding: 0 44px; animation: doneIn .9s ease;
}
@keyframes doneIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }

/* ---- 角色仓库页：标题区 + 纵向大卡列表 ---- */
.roles-page { min-height: 100%; padding-bottom: 32px; }
.roles-head { padding: 18px 24px 0; }
.roles-back {
  width: 44px; height: 44px; border: 0; border-radius: 50%;
  background: #EDE6DB; color: #2B2B2B; font-size: 24px;
  display: flex; align-items: center; justify-content: center; cursor: pointer;
}
.roles-title { margin-top: 22px; font-size: 38px; font-weight: 700; color: #2B2B2B; letter-spacing: -0.5px; }
.roles-sub { margin-top: 16px; font-size: 19px; color: #8A8580; line-height: 1.5; }

.roles-list { padding: 24px 20px 0; }
/* 2026-09-24 她要求：卡片改成预览弹窗那张卡的样式——顶部圆形框放默认角色照片
   （固定 132px，留好空位，没照片也不塌）、照片下方名字黑色粗体居中，其余内容与按钮不变 */
.role2-card {
  background: #F2EDE8; border-radius: 34px; padding: 38px 30px 30px;
  box-shadow: 0 10px 30px rgba(0,0,0,.10);
  /* 2026-09-24 她要求：加红棕边框突出卡片边缘（站内红棕参考色 #C8663F） */
  border: 2px solid #C8663F;
}
.role2-card + .role2-card { margin-top: 24px; }
.role2-hero { display: flex; justify-content: center; }
.role2-photo {
  width: 132px; height: 132px; border-radius: 50%; overflow: hidden; flex-shrink: 0;
  background: #F0E4DD; display: flex; align-items: center; justify-content: center;
  font-size: 56px; font-weight: 600; line-height: 1;
}
.role2-photo .avatar-ph { color: #C7B7AE; }
.role2-name { margin-top: 22px; font-size: 32px; font-weight: 700; color: #1A1A1A; text-align: center; }
.role2-meta { margin-top: 12px; font-size: 17px; color: #8A8580; line-height: 1.5; text-align: center; }
.role2-tags { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-top: 16px; }
.role2-tag {
  padding: 8px 16px; border-radius: 16px; background: #F0E0D8;
  color: #B08968; font-size: 16px; font-weight: 500; white-space: nowrap;
}
.role2-block { margin-top: 16px; padding: 16px; border-radius: 16px; background: #FFF; }
.role2-block-label { font-size: 14px; color: #B08968; }
.role2-block-text {
  margin-top: 6px; font-size: 15px; color: #555; line-height: 1.6;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.role2-actions { display: flex; align-items: center; gap: 14px; margin-top: 24px; }
.role2-preview {
  flex: 1; height: 52px; border: 0; border-radius: 24px;
  background: #FFF; color: #2B2B2B; font-size: 18px; font-weight: 500;
  cursor: pointer; font-family: inherit;
}
.role2-preview:active { opacity: .85; }
.role2-create {
  width: 72px; height: 72px; border: 0; border-radius: 50%; flex-shrink: 0;
  background: #2B2B2B; color: #fff; font-size: 18px; font-weight: 500;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  cursor: pointer; font-family: inherit; line-height: 1.3;
}
.role2-create:active { background: #1C1A19; }

/* ---- 「我们的记忆」页 ---- */
.memory-page { min-height: 100%; padding-bottom: 32px; }
.mem-card {
  margin: 24px 20px 0; padding: 28px 26px;
  background: #fff; border-radius: 26px;
  box-shadow: 0 2px 14px rgba(0,0,0,.04);
}
.mem-label { font-size: 14px; color: #B08968; }
.mem-label-row { display: flex; align-items: center; justify-content: space-between; }
.mem-clear { border: 1px solid #E5DDD6; background: transparent; color: #9C918A; font-size: 12px; padding: 4px 12px; border-radius: 999px; }
.mem-clear:disabled { opacity: .4; }
.mem-stage-row { display: flex; align-items: baseline; justify-content: space-between; margin-top: 10px; }
.mem-stage-name { font-size: 26px; font-weight: 700; color: #2B2B2B; }
.mem-pct { font-size: 15px; font-weight: 600; color: #07C160; }
.mem-bar { height: 8px; border-radius: 4px; background: #EFEDEB; overflow: hidden; margin-top: 12px; }
.mem-bar-fill { display: block; height: 100%; border-radius: 4px; background: #07C160; }
.mem-caption { margin-top: 14px; font-size: 14px; color: #8A8580; }
.mem-fact { margin-top: 20px; }
.mem-fact:first-of-type { margin-top: 16px; }
.mem-chips { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 10px; }
.mem-chip {
  padding: 7px 14px; border-radius: 14px; background: #F0E0D8;
  color: #B08968; font-size: 15px; font-weight: 500;
}
.mem-chip-name { background: #EDE6DB; color: #2B2B2B; }
.mem-text { margin-top: 10px; font-size: 16px; color: #555; line-height: 1.6; }
.mem-row { display: flex; gap: 12px; padding: 14px 0; border-bottom: 1px solid #F3EDE9; }
.mem-row:last-child { border-bottom: 0; padding-bottom: 0; }
.mem-dot { width: 8px; height: 8px; border-radius: 50%; background: #C8663F; margin-top: 8px; flex-shrink: 0; }
.mem-row-main { flex: 1; font-size: 15px; color: #3D3A38; line-height: 1.5; }
.mem-row-date { margin-top: 4px; font-size: 12px; color: #B8AFAA; }
.mem-del { flex-shrink: 0; align-self: center; border: 1px solid #C8663F; color: #C8663F; background: transparent; font-size: 12px; padding: 4px 12px; border-radius: 999px; }
.mem-del:disabled { opacity: .4; }

/* 关系卡数字滚动 */
.mem-num-day, .mem-num-msg { color: #C8663F; font-weight: 700; }

/* 聊天时段分布图（苹果屏幕时间风格） */
.act-chart { display: flex; align-items: flex-end; gap: 4px; height: 120px; padding: 16px 4px 4px; }
.act-col { flex: 1; height: 100%; display: flex; align-items: flex-end; }
.act-bar { width: 100%; background: linear-gradient(180deg, #C8663F, #D8906E); border-radius: 5px 5px 2px 2px; position: relative; min-height: 2px; transition: height .6s ease; }
.act-bar.zero { background: transparent; }
.act-bar i { position: absolute; top: -20px; left: 50%; transform: translateX(-50%); font-style: normal; font-size: 11px; color: #B08968; }
.act-axis { display: flex; justify-content: space-between; font-size: 12px; color: #B8AFAA; padding: 6px 2px 0; }

/* 画像 chip 可编辑/可删 */
.mem-chip-editable { display: inline-flex; align-items: center; gap: 6px; }
.chip-x { cursor: pointer; color: #B8AFAA; font-size: 13px; font-style: normal; font-weight: 700; line-height: 1; padding: 0 2px; }
.chip-x:hover { color: #C8663F; }
.chip-x-edit { color: #B08968; font-weight: 400; }
.chip-x-edit:hover { color: #C8663F; }
.mem-add-chip { cursor: pointer; border: 1px dashed #D8C6BA; color: #B08968; background: transparent; }
.mem-add-chip:hover { border-color: #C8663F; color: #C8663F; }
.mem-text-wrap { display: flex; align-items: flex-start; gap: 8px; }
.mem-text-wrap .mem-text { flex: 1; }
.mem-text-wrap .chip-x-edit { margin-top: 2px; }
.chip-gone { transform: scale(0.1) rotate(15deg); opacity: 0; transition: all .3s ease-in; }

/* 信件卡片 */
.letter-card { text-align: center; }
.letter-date { font-size: 13px; color: #B08968; letter-spacing: 2px; margin-bottom: 14px; }
.letter-art { font-size: 56px; line-height: 1.3; }
.letter-art-cap { font-size: 13px; color: #9A8B7F; margin: 6px 0 16px; }
.letter-body { font-size: 16px; color: #3D3A38; line-height: 2; text-align: left; white-space: pre-wrap; }
.mem-empty { padding: 22px 0 10px; font-size: 15px; color: #B8AFAA; line-height: 1.8; text-align: center; }

/* 预览弹层（复用创建弹窗外壳） */
.preview-sheet { padding-top: 30px; }
.pv-hero {
  margin-top: 22px; display: flex; align-items: center; justify-content: center;
}
.pv-emoji {
  width: 88px; height: 88px; border-radius: 50%; background: #F0E4DD;
  display: flex; align-items: center; justify-content: center; font-size: 44px;
}
.pv-meta { margin-top: 14px; text-align: center; font-size: 17px; color: #8A8580; }
.pv-tags { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-top: 14px; }
.pv-block { margin-top: 16px; padding: 16px; border-radius: 16px; background: #FFF; }
.pv-label { font-size: 14px; color: #B08968; }
.pv-text { margin-top: 6px; font-size: 15px; color: #555; line-height: 1.6; }

/* ---- 创建智能体弹窗（首页点「创建智能体」） ---- */
.create-mask {
  position: fixed; inset: 0; z-index: 260;
  background: rgba(138, 128, 120, .55);
  backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px);
  display: flex; align-items: center; justify-content: center;
  padding: 24px 0;
}
.create-sheet {
  width: min(88vw, 504px); max-height: 86vh; overflow-y: auto;
  background: #F2EDE8; border-radius: 34px;
  box-shadow: 0 12px 44px rgba(0,0,0,.25);
  padding: 38px 30px 30px;
}
.create-head { display: flex; align-items: center; justify-content: space-between; }
.create-title { font-size: 32px; font-weight: 700; color: #1A1A1A; }
.create-close {
  width: 46px; height: 46px; border-radius: 50%; border: 0; flex-shrink: 0;
  background: #E0DDD9; color: #555; font-size: 22px; font-weight: 300;
  display: flex; align-items: center; justify-content: center; cursor: pointer;
}
.create-sub { margin-top: 15px; font-size: 17px; color: #888; }
.create-opt {
  display: block; width: 100%; text-align: left; margin-top: 19px;
  background: #fff; border: 0; border-radius: 26px; padding: 28px 26px;
  box-shadow: 0 2px 10px rgba(0,0,0,.04); cursor: pointer; font-family: inherit;
}
.create-opt:active { opacity: .85; }
.create-icon {
  width: 68px; height: 68px; border-radius: 17px; background: #F0E4DD;
  display: flex; align-items: center; justify-content: center;
  font-size: 27px; font-weight: 700; color: #1A1A1A;
}
.create-opt-title { display: block; margin-top: 19px; font-size: 23px; font-weight: 700; color: #1A1A1A; }
.create-opt-desc { display: block; margin-top: 11px; font-size: 16px; color: #777; line-height: 1.5; }

/* ---- toast ---- */
.toast {
  position: fixed; left: 50%; top: 45%; transform: translate(-50%, -50%);
  background: rgba(0,0,0,.75); color: #fff; font-size: 14px;
  padding: 10px 18px; border-radius: 8px; z-index: 200;
  max-width: 70%; text-align: center; pointer-events: none;
}

/* ============ 通话页（仿微信语音通话）============ */
/* 聊天页内的通话浮层（2026-09-14 她要求：接受来电/拨出直接通话，挂断收浮层不跳页）。
   盖在 invite-mask(90)/record-mask(99) 之上，toast(200) 之下。
   2026-09-19 她实测「右边半个屏是我和他聊天的界面」后加固：四条边与宽高全部显式写死，
   并把深色底挪到浮层本体上——浮层自己就是不透明的，任何内核的半边渲染/视口算错都
   不可能透出下面的聊天页。 */
.call-mask {
  position: fixed; top: 0; left: 0; right: 0; bottom: 0;
  width: 100vw; height: 100vh; z-index: 150;
  background: linear-gradient(165deg, #31544A 0%, #1C3338 45%, #101B1F 100%);
}
/* ⚠️ 2026-09-19 真凶（她：「右边有分界线/有割裂感/不居中/跳转从左边出来」）：
   open() 把 .call-mask 设成 display:flex，.call-page 就成了 flex item，宽度按
   max-content 收缩到最长的子元素——那行通话提示文字，实测 274px（视口 390）。
   于是内容整体左偏 58px，且 .call-page 自己那份渐变按 274px 铺、浮层那份按 390px 铺，
   两者在 x=274 处接不上 → 一条竖直分界线。09-18 那轮误判成微信全屏 API 半实现，
   只把右边改成了「错位的渐变」，所以她说「还是」有分界线。
   修法：宽度钉死铺满（两份渐变等宽后自然对齐，接缝消失）。
   注意 .call-page 自己的渐变不能撤：call.html（旧独立通话页）是 .call-page 直挂
   .shell、没有 .call-mask 包着，撤了那页就白屏。 */
.call-mask .call-page { width: 100%; height: 100%; flex: none; }

.call-page {
  position: relative; height: 100%; overflow: hidden;
  background: linear-gradient(165deg, #31544A 0%, #1C3338 45%, #101B1F 100%);
  display: flex; flex-direction: column; align-items: center;
  user-select: none;
}
.call-deco { position: absolute; border-radius: 50%; filter: blur(60px); opacity: .25; }
.call-deco.d1 { width: 320px; height: 320px; background: #5F8A72; top: -80px; left: -60px; }
.call-deco.d2 { width: 260px; height: 260px; background: #3D6B73; bottom: 10%; right: -70px; }

.call-avatar {
  margin-top: 14vh; width: 118px; height: 118px; border-radius: 50%;
  background: linear-gradient(145deg, #FFF3F0, #FFE0DA);
  display: flex; align-items: center; justify-content: center; font-size: 60px;
  box-shadow: 0 0 0 6px rgba(255,255,255,.12), 0 0 0 14px rgba(255,255,255,.05);
  z-index: 1;
}
.call-avatar.thinking { animation: avatar-breathe 1.6s ease-in-out infinite; }
@keyframes avatar-breathe { 50% { transform: scale(1.06); } }
/* 她拨出去时的「等待对方接通…」拨号脉冲（2026-09-14 她要求有真实等待环节，同来电弹窗的 invite-pulse） */
.call-avatar.dialing { animation: invite-pulse 1.8s ease-in-out infinite; }

.call-name { margin-top: 22px; font-size: 22px; color: #fff; font-weight: 500; z-index: 1; }
.call-status { margin-top: 10px; font-size: 14px; color: rgba(255,255,255,.65); z-index: 1; min-height: 20px; }

/* 按住说话（半双工） */
.talk-zone { flex: 1; display: flex; align-items: center; z-index: 1; }
.talk-btn {
  width: 84px; height: 84px; border-radius: 50%; border: 0;
  background: rgba(255,255,255,.92); color: #1C3338; font-size: 15px; font-weight: 600;
  cursor: pointer; touch-action: none; font-family: inherit;
  box-shadow: 0 4px 20px rgba(0,0,0,.3);
}
.talk-btn:active { transform: scale(.94); }
.talk-btn:disabled { background: rgba(255,255,255,.35); color: rgba(255,255,255,.8); cursor: default; }
.talk-btn.playing { background: rgba(255,255,255,.35); color: rgba(255,255,255,.9); }

/* 通话控件 + 挂断 */
.call-controls { display: flex; align-items: center; gap: 34px; z-index: 1; }
.ctl {
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  background: none; border: 0; cursor: pointer;
}
.ctl-icon {
  width: 52px; height: 52px; border-radius: 50%;
  background: rgba(255,255,255,.14); color: #fff; font-size: 22px;
  display: flex; align-items: center; justify-content: center;
}
.ctl.on .ctl-icon { background: rgba(255,255,255,.85); color: #1C3338; }
.ctl-label { font-size: 12px; color: rgba(255,255,255,.75); }
.hangup {
  width: 62px; height: 62px; border-radius: 50%; border: 0; cursor: pointer;
  background: #F54545; color: #fff; font-size: 26px;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 4px 16px rgba(245,69,69,.4);
}

/* 通话中文字输入条 */
.call-inputbar {
  position: absolute; left: 12px; right: 12px; bottom: 0; z-index: 2;
  display: none; align-items: center; gap: 8px;
  padding: 10px 12px; padding-bottom: calc(10px + env(safe-area-inset-bottom));
  background: rgba(16,27,31,.92);
}
.call-inputbar.show { display: flex; }
.call-inputbar input {
  flex: 1; height: 38px; border: 0; border-radius: 6px; padding: 0 12px;
  font-size: 16px; outline: none; background: #fff; font-family: inherit;
}
.call-send {
  height: 38px; padding: 0 16px; border: 0; border-radius: 6px;
  background: #F29A9A; color: #fff; font-size: 15px; cursor: pointer; font-family: inherit;
}
.call-send:disabled { opacity: .5; }

/* 非安全上下文提示（安卓 Chrome http 局域网） */
.sec-banner {
  position: absolute; top: 0; left: 0; right: 0; z-index: 3;
  background: #C0392B; color: #fff; font-size: 12px; line-height: 1.5;
  padding: 8px 12px; text-align: center;
}

/* ---- 实时通话（2026-09-23）---- */
/* 开始通话遮罩：iOS AudioContext 无手势不启动，点大按钮再建 ctx/麦克风/WS */
.start-overlay {
  position: absolute; inset: 0; z-index: 4;
  background: rgba(16,27,31,.55); backdrop-filter: blur(3px);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 20px;
}
.start-btn {
  width: 96px; height: 96px; border-radius: 50%; border: 0;
  background: #7FBFA3; color: #fff; font-size: 16px; font-weight: 600;
  cursor: pointer; font-family: inherit;
  box-shadow: 0 6px 24px rgba(0,0,0,.35);
}
.start-btn:active { transform: scale(.94); }
.start-btn:disabled { opacity: .6; cursor: default; }
.start-note { font-size: 12px; color: rgba(255,255,255,.7); }

/* 使用提示 */
.call-hint { margin-top: 12px; font-size: 12px; color: rgba(255,255,255,.5); z-index: 1; }

/* 字幕面板：她的话=「你」行（灰），他的话=「他」行（暖白），自动滚动 */
.call-subtitle {
  width: 88%; max-width: 420px; z-index: 1;
  margin-top: 16px; max-height: 30vh; overflow-y: auto;
  background: rgba(255,255,255,.06); border-radius: 12px;
  padding: 10px 14px; box-sizing: border-box;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.call-subtitle::-webkit-scrollbar { display: none; }
.call-subtitle:empty { display: none; }
.sub-line { margin: 4px 0; font-size: 14px; line-height: 1.5; word-break: break-word; }
.sub-line.you { color: rgba(255,255,255,.55); }
.sub-line.he { color: #FFE9E2; font-weight: 500; }
.sub-line.sys { color: rgba(255,255,255,.42); font-size: 12px; }

/* 字幕与控件之间的弹性占位（替代旧 talk-zone） */
.call-spacer { flex: 1; min-height: 8px; z-index: 1; }

/* 他说话时头像呼吸光圈 */
.call-avatar.speaking { animation: avatar-pulse 1.1s ease-in-out infinite; }
@keyframes avatar-pulse {
  50% { box-shadow: 0 0 0 6px rgba(255,255,255,.12), 0 0 0 14px rgba(255,255,255,.05),
    0 0 32px 10px rgba(242,154,154,.35); }
}

/* 断线重连横幅 */
.call-banner {
  position: absolute; top: 8px; left: 50%; transform: translateX(-50%); z-index: 3;
  background: rgba(0,0,0,.6); color: #FFD9A0; font-size: 12px;
  padding: 6px 14px; border-radius: 14px; white-space: nowrap;
}

/* ============ 人物主页（用户指定 TheOne 排版，2026-09-07） ============ */
.profile-page .page-head { justify-content: flex-start; }
.brand-ph { display: flex; align-items: center; gap: 8px; margin-left: 4px; }
.logo-ph {
  width: 28px; height: 28px; border-radius: 8px;
  border: 1.5px dashed #D9C5BF; background: #F7ECE8; flex-shrink: 0;
}
.appname-ph { font-size: 14px; font-weight: 600; color: #B8AFAA; letter-spacing: 1px; }

/* 角色信息区：名字（全页最大）→ 状态 → 激活按钮 */
.hero2 { padding: 44px 16px 0; text-align: center; }
.hero2-name-row { display: flex; align-items: center; justify-content: center; gap: 8px; }
.hero2-name { font-size: 38px; font-weight: 700; color: #1A1A1A; line-height: 1.15; }
.name-edit {
  width: 34px; height: 34px; border: 0; border-radius: 50%;
  background: #F5E6E3; color: #B8705A; font-size: 16px; cursor: pointer;
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.hero2-status {
  margin-top: 9px; display: flex; align-items: center; justify-content: center;
  gap: 7px; font-size: 16px; color: #666;
}
.status-dot { width: 10px; height: 10px; border-radius: 50%; background: #34C759; display: inline-block; }
.hero2-btn {
  margin-top: 20px; padding: 11px 40px; border: 0; border-radius: 999px;
  background: #F29A9A; color: #fff; font-size: 16px; font-weight: 600; cursor: pointer;
  font-family: inherit; box-shadow: 0 4px 14px rgba(242,154,154,.35);
}

/* 主功能卡片区：左大右小不对称网格 */
.main-cards { display: flex; gap: 14px; padding: 34px 16px 0; align-items: stretch; }
.big-card {
  flex: 0 0 62%; background: #fff; border-radius: 26px;
  box-shadow: 0 8px 22px rgba(90,60,50,.07);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: 30px 12px;
}
.ic {
  width: 56px; height: 56px; border-radius: 50%; background: #ECECEC; color: #555;
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.ic svg { width: 26px; height: 26px; }
.ic.big { width: 76px; height: 76px; background: #F5E6E3; }
.ic.big svg { width: 34px; height: 34px; }
.ic.pink { background: #F5E0DB; color: #B8705A; }
.big-label { margin-top: 16px; font-size: 16px; color: #666; }
.big-num { margin-top: 2px; font-size: 58px; font-weight: 800; color: #1A1A1A; line-height: 1.15; }
.big-num small { font-size: 28px; font-weight: 800; margin-left: 2px; }
.big-sub { margin-top: 8px; font-size: 16px; color: #666; }
.side-cards { flex: 1; display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.side-card {
  flex: 1; background: #fff; border: 1px solid transparent; border-radius: 24px;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 10px; padding: 16px 6px; cursor: pointer; font-family: inherit; min-height: 0;
}
.side-card.on { background: #FFF5F2; border-color: #F0D9D2; }
.card-label { font-size: 16px; color: #444; }
.side-card.on .card-label { color: #333; }

/* 功能图标网格：3 列 × 2 行 */
.icon-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px 14px; padding: 26px 16px 0; }
.grid-card {
  background: #fff; border: 0; border-radius: 24px; aspect-ratio: 1 / 1.04;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 10px; cursor: pointer; font-family: inherit;
}
.grid-card .card-label { font-size: 16px; color: #444; }
.grid-card.empty { background: transparent; cursor: default; }

/* 底部：分割线 + 品牌 + 链接 */
.profile-divider { height: 1px; background: #DDD; margin: 38px 20px 0; }
.brand { padding: 22px 20px 0; text-align: left; }
.brand-name { font-size: 23px; font-weight: 600; color: #1A1A1A; }
.brand-slogan { margin-top: 7px; font-size: 16px; color: #777; }
.foot-links { display: flex; flex-wrap: wrap; align-items: center; padding: 20px 20px 32px; font-size: 14px; color: #888; }
.foot-links span { cursor: pointer; white-space: nowrap; }
.foot-links span + span::before { content: '|'; margin: 0 10px; color: #DDD; }

/* ---- 来电铃声（2026-09-18 她要求自定义歌曲，入口在设置页）---- */
.ring-sec { padding: 26px 16px 0; }
.ring-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.ring-title { font-size: 16px; color: #444; flex-shrink: 0; }
.ring-sub { font-size: 13px; color: #999; text-align: right; min-width: 0; }
.ring-acts { display: flex; gap: 10px; margin-top: 14px; flex-wrap: wrap; }
.ring-btn {
  flex: 1 1 0; min-width: 92px; height: 40px; border: 0; border-radius: 12px;
  background: #fff; color: #3D3A38; font-size: 15px; font-family: inherit; cursor: pointer;
}
.ring-btn.ghost { background: transparent; color: #8A817C; }
.ring-btn:disabled { opacity: .45; cursor: default; }
.ring-btn:not(:disabled):active { background: #F3EDEA; }
.ring-progress { margin-top: 10px; height: 4px; background: #EFE7E3; border-radius: 2px; overflow: hidden; }
.ring-progress i { display: block; height: 100%; width: 0; background: #F29A9A; transition: width .15s; }

/* 聊天页标题可点击 → 人物主页 */
.nav-title { cursor: pointer; }

/* ---- 人物主页：修改头像 / 昵称备注（点名字旁 ✏️ 弹出） ---- */
.edit-mask {
  position: fixed; inset: 0; background: rgba(0,0,0,.55);
  display: flex; align-items: flex-end; justify-content: center; z-index: 200;
}
.edit-card {
  width: 100%; max-width: 560px; background: #fff;
  border-radius: 16px 16px 0 0; padding: 12px 16px calc(16px + env(safe-area-inset-bottom));
  max-height: 82vh; overflow-y: auto;
}
.edit-head { display: flex; align-items: center; justify-content: space-between; padding-bottom: 6px; }
.edit-btn {
  border: 0; background: none; font-size: 15px; color: #6B6561;
  cursor: pointer; font-family: inherit; padding: 4px 8px;
}
.edit-btn.save { color: #F29A9A; font-weight: 600; }
.edit-title { font-size: 16px; font-weight: 600; }
.edit-preview { display: flex; justify-content: center; padding: 12px 0 4px; }
.edit-avatar {
  width: 76px; height: 76px; border-radius: 50%;
  background: linear-gradient(145deg, #FFF3F0, #FFE0DA);
  display: flex; align-items: center; justify-content: center; font-size: 42px;
}
.edit-sub { font-size: 13px; color: #8A817C; margin: 12px 0 6px; }
.edit-avatar-actions { display: flex; align-items: center; gap: 12px; }
.btn-secondary {
  flex: 1; height: 40px; border: 1px solid #F29A9A; background: #fff; color: #F29A9A;
  border-radius: 10px; font-size: 15px; cursor: pointer; font-family: inherit;
}
.btn-text {
  border: 0; background: none; color: #8A817C; font-size: 14px; cursor: pointer;
  font-family: inherit; padding: 0 4px; text-decoration: underline;
}
.edit-avatar img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; display: block; }
.edit-card input[type=text] {
  width: 100%; height: 40px; border: 1px solid #E8E8E8; border-radius: 8px;
  padding: 0 12px; font-size: 15px; outline: none; font-family: inherit; background: #FDFBFB;
}


/* 上传照片头像：覆盖所有头像位（聊天页/我的他/通话页/编辑预览） */
.avatar-img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; display: block; }
.avatar, .call-avatar { overflow: hidden; }

/* ---------- 聊天信息页（微信排版：头像/置顶开关/背景/查找） ---------- */
.info-page { display: flex; flex-direction: column; height: 100%; background: #F7F5F2; }
.info-top {
  display: flex; align-items: center; gap: 14px;
  padding: 20px 16px; background: #FDF6F2; border-bottom: 1px solid #EEE6E1;
}
.info-avatar {
  width: 60px; height: 60px; border-radius: 8px; border: 0; padding: 0;
  background: #FFF3F0; display: flex; align-items: center; justify-content: center;
  font-size: 32px; cursor: pointer; overflow: hidden;
}
.info-avatar .avatar-img { border-radius: 8px; }
.info-id { display: flex; flex-direction: column; gap: 3px; }
.info-name { font-size: 20px; font-weight: 700; color: #3D3A38; }
.info-sub { font-size: 12px; color: #A79A92; }

.info-list { margin: 12px; background: #fff; border-radius: 12px; overflow: hidden; }
.info-row {
  width: 100%; display: flex; align-items: center; justify-content: space-between;
  padding: 14px 16px; background: #fff; border: 0; border-bottom: 1px solid #F0EDEA;
  font-size: 15px; color: #3D3A38; cursor: pointer;
}
.info-row:last-child { border-bottom: 0; }
.info-arrow { color: #C5BCB6; font-size: 20px; line-height: 1; }

/* 微信同款绿色开关 */
.switch { position: relative; width: 48px; height: 28px; flex-shrink: 0; }
.switch input { opacity: 0; width: 0; height: 0; }
.switch .slider { position: absolute; inset: 0; background: #E4E0DC; border-radius: 28px; transition: .2s; }
.switch .slider::before {
  content: ''; position: absolute; width: 24px; height: 24px; left: 2px; top: 2px;
  background: #fff; border-radius: 50%; transition: .2s; box-shadow: 0 1px 3px rgba(0,0,0,.2);
}
.switch input:checked + .slider { background: #07C160; }
.switch input:checked + .slider::before { transform: translateX(20px); }

/* 聊天背景选择 */
.bg-picker { margin: 0 12px 12px; background: #fff; border-radius: 12px; padding: 16px; }
.bg-label { font-size: 13px; color: #A79A92; margin-bottom: 10px; }
.bg-grid { display: flex; gap: 12px; margin-bottom: 14px; }
.bg-thumb {
  flex: 1; height: 110px; border-radius: 10px; border: 2px solid transparent;
  display: flex; align-items: flex-end; padding: 8px; color: #fff; font-size: 13px; cursor: pointer;
}
.bg-thumb span { text-shadow: 0 1px 2px rgba(0,0,0,.4); }
.bg-thumb-dark { background: linear-gradient(135deg, #2E2A28, #5A5049 60%, #3A2E28); }
.bg-thumb-light { background: linear-gradient(135deg, #F7EDE4, #F2D9CC); color: #8A6B5B; }
.bg-thumb-light span { text-shadow: none; }
.bg-album, .bg-reset {
  display: block; width: 100%; padding: 11px; border-radius: 8px;
  border: 1px solid #C8663F; background: #fff; color: #C8663F; font-size: 14px;
  margin-bottom: 8px; cursor: pointer;
}
.bg-reset { border-color: #E4E0DC; color: #8A817C; }

/* 查找聊天内容 */
.search-view { flex: 1; display: flex; flex-direction: column; overflow: hidden; }
.search-box {
  display: flex; align-items: center; gap: 8px; margin: 12px; padding: 9px 12px;
  background: #fff; border-radius: 10px;
}
.search-icon { font-size: 14px; }
.search-box input { flex: 1; border: 0; outline: 0; font-size: 15px; background: none; }
.search-results { flex: 1; overflow-y: auto; padding: 0 12px 12px; }
.search-item { background: #fff; border-radius: 10px; padding: 12px 14px; margin-bottom: 10px; }
.search-item-head { display: flex; justify-content: space-between; margin-bottom: 6px; }
.search-role { font-size: 12px; color: #C8663F; font-weight: 600; }
.search-role.me { color: #8A817C; }
.search-time { font-size: 11px; color: #C5BCB6; }
.search-item-body { font-size: 14px; line-height: 1.6; color: #3D3A38; white-space: pre-wrap; word-break: break-all; }

/* 聊天页背景（聊天信息页设置，覆盖 .chat 容器，消息区透出） */
.chat-bg-dark { background: linear-gradient(180deg, #2E2A28, #4A413B 55%, #3A2E28) !important; }
.chat-bg-light { background: linear-gradient(180deg, #F7EDE4, #F4E0D5 55%, #F2D9CC) !important; }
.chat-bg-dark .nav, .chat-bg-dark .inputbar { background: #3A2E28; }
.chat-bg-dark .nav-btn, .chat-bg-dark .nav-title { color: #F5EDE7; }
.chat-bg-dark .nav-title.typing { color: rgba(255, 255, 255, .55); }
.chat-bg-dark .input { background: #4A413B; color: #F5EDE7; }
.chat-bg-dark .time-chip { color: rgba(255, 255, 255, .45); }
.chat-bg-dark .bubble.assistant:not(.voice-bubble) { background: #4A413B; color: #F5EDE7; }
.chat-bg-light .bubble.assistant:not(.voice-bubble) { background: #fffdf9; }

/* 聊天页头像可点（→ 他的主页） */
.msgs .avatar { cursor: pointer; }

/* ---------- 声音库页（2026-09-08 语音板块迁移：筛选/试听/配置/收藏/上传复刻） ---------- */
.vlib-tabs { display: flex; flex-wrap: wrap; gap: 8px; padding: 20px 20px 0; }
.vlib-upload {
  margin: 16px 20px 0; padding: 14px 16px;
  background: #FFF9F6; border: 1.5px dashed #F2C4BC; border-radius: 14px;
}
.vlib-upload-btn {
  display: block; width: 100%; border: 0; background: none;
  color: #C8663F; font-size: 14px; cursor: pointer; font-family: inherit; text-align: left;
}
.vlib-progress { margin-top: 8px; font-size: 13px; color: #F29A9A; text-align: center; }
.vlib-note { margin-top: 8px; font-size: 12px; color: #A79A92; }
.vlib-list { padding: 16px 20px 24px; }
.vlib-card {
  display: flex; align-items: center; gap: 14px;
  background: #fff; border-radius: 22px; padding: 16px;
  box-shadow: 0 2px 14px rgba(0,0,0,.04);
}
.vlib-card + .vlib-card { margin-top: 14px; }
/* 圆形播放按钮：▶ / ⏸ / 合成中转圈 */
.vlib-play {
  width: 52px; height: 52px; border-radius: 50%;
  border: 1.5px solid #F29A9A; background: #FFF6F3; color: #F29A9A;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; flex-shrink: 0; position: relative;
}
.vlib-play svg { width: 18px; height: 18px; fill: currentColor; }
.vlib-play .ic-pause, .vlib-play .ic-spin { display: none; }
.vlib-play.playing .ic-play { display: none; }
.vlib-play.playing .ic-pause { display: block; }
.vlib-play.loading .ic-play, .vlib-play.loading .ic-pause { display: none; }
.vlib-play.loading .ic-spin { display: block; }
.ic-spin {
  width: 18px; height: 18px; border-radius: 50%;
  border: 2px solid rgba(242, 154, 154, .3); border-top-color: #F29A9A;
  animation: vlib-spin .8s linear infinite;
}
@keyframes vlib-spin { to { transform: rotate(360deg); } }
.vlib-body { flex: 1; min-width: 0; }
/* 允许换行 + 名字不压缩（2026-09-18）：复刻卡名字长（「我的复刻声音（云端）」），
   语种标签又是 nowrap 的「中/英/粤/日/韩」，两者加起来超过正文宽度时，
   flex 会把唯一可压缩的名字挤成「一字一行」。让标签换行到第二行，名字保持整行。 */
.vlib-name-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.vlib-name { font-size: 16px; font-weight: 600; color: #3D3A38; flex-shrink: 0; }
.vlib-tag {
  padding: 2px 8px; border-radius: 999px; background: #F6E9E4;
  color: #C08A6B; font-size: 11px; white-space: nowrap;
}
/* 语种标记（2026-09-16 她要求：每个声音标清楚能说什么语种） */
.vlib-langs { background: #E9F0E6; color: #6F8F5E; }
.vlib-desc { margin-top: 5px; font-size: 13px; color: #8A817C; line-height: 1.5; }
.vlib-side { display: flex; flex-direction: column; align-items: center; gap: 10px; flex-shrink: 0; }
.vlib-fav {
  width: 32px; height: 32px; border-radius: 50%;
  border: 1px solid #E8E2DE; background: #fff; color: #C5BCB6;
  font-size: 15px; line-height: 1; cursor: pointer;
}
.vlib-fav.on { border-color: #F29A9A; background: #FFF1EF; color: #F29A9A; }
.vlib-config {
  border: 1px solid #F29A9A; background: #fff; color: #F29A9A;
  border-radius: 999px; padding: 6px 14px; font-size: 13px;
  cursor: pointer; white-space: nowrap; font-family: inherit;
}
.vlib-config.done { border-color: #07C160; background: #07C160; color: #fff; }
.vlib-empty { padding: 40px 20px; text-align: center; color: #B8AFAA; font-size: 14px; }

/* 声音库：上传复刻入口 + 声纹授权弹窗（2026-09-15 重新上架，A 档双通道） */
.vlib-upload-card { border: 1.5px dashed #F2B8AE; background: #FFFBF9; }
.vlib-upload-card.busy { opacity: .65; pointer-events: none; }
.upload-plus { background: #FFF1EF; }
.upload-plus svg { width: 22px; height: 22px; }
.consent-body { padding: 8px 0 12px; }
.consent-item { font-size: 14px; color: #5C554F; line-height: 1.7; margin: 8px 0; text-align: justify; }
.consent-btns { display: flex; gap: 12px; margin-top: 4px; }
.consent-btns .btn-secondary { flex: 1; height: 44px; }
.consent-ok {
  flex: 1.4; height: 44px; border: 0; border-radius: 10px;
  background: linear-gradient(135deg, #F29A9A, #E87F7F); color: #fff;
  font-size: 15px; font-weight: 600; cursor: pointer; font-family: inherit;
}

/* 声音库 2026-09-18：卡片文案可编辑 + 复刻声线可删除 + 版权备注 */
/* 编辑入口做成小字链接而不是按钮：它是次要操作，不该和「配置」抢视线 */
.vlib-card-edit {
  border: 0; background: none; color: #B8AFAA; font-size: 12px;
  text-decoration: underline; cursor: pointer; font-family: inherit;
  padding: 0 2px; margin-left: auto;
}
.vlib-card-edit:hover { color: #F29A9A; }
/* 删除：灰小字（破坏性操作，做低调，但要能被找到） */
.vlib-del {
  border: 0; background: none; color: #B8AFAA; font-size: 12px;
  text-decoration: underline; cursor: pointer; font-family: inherit; padding: 0;
}
.vlib-del:hover { color: #E87F7F; }
.vlib-del[disabled] { color: #D8D2CE; cursor: default; text-decoration: none; }
/* 列表末尾的版权备注：常驻可见，但她要求写明，所以不能只放在弹窗里 */
.vlib-copyright { text-align: center; padding: 6px 12px 2px; color: #B8AFAA; }
.edit-card textarea {
  width: 100%; border: 1px solid #E8E8E8; border-radius: 8px; padding: 10px 12px;
  font-size: 15px; outline: none; font-family: inherit; background: #FDFBFB;
  resize: none; line-height: 1.5; box-sizing: border-box;
}

/* ---------- 事件提醒页（2026-09-13 用户要求：主页表情包板块改事件提醒） ---------- */
.rem-group { margin-top: 14px; }
.rem-group-title { font-size: 14px; color: #B08968; padding: 10px 4px 8px; }
/* 卡片 = 外层（裁切 + 阴影）+ 左滑层 .rem-face + 背后的按钮抽屉 */
.rem-card {
  position: relative; overflow: hidden; border-radius: 24px; margin-top: 10px;
  box-shadow: 0 2px 10px rgba(43, 43, 43, .05);
  touch-action: pan-y; /* 允许竖向滚动，横向手势交给 JS 左滑 */
}
.rem-face { position: relative; background: #fff; padding: 18px 20px; transition: transform .25s; }
.rem-card.open .rem-face { transform: translateX(-180px); }
.rem-card.rem-off { opacity: .55; }
.rem-drawer { position: absolute; top: 0; right: 0; bottom: 0; display: flex; width: 180px; }
.rem-drawer-btn {
  width: 60px; height: 100%; border: 0; color: #fff; font-size: 14px;
  padding: 0; font-family: inherit; display: flex; align-items: center; justify-content: center;
}
.rem-drawer-edit { background: #B8AFAA; }
.rem-drawer-pin { background: #C8663F; }
.rem-drawer-del { background: #E64340; }
.rem-main { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.rem-title { font-size: 17px; font-weight: 600; color: #2B2B2B; }
.rem-pin { font-size: 14px; margin-right: 2px; }
.rem-badges { display: inline-flex; gap: 6px; }
.rem-badge {
  font-size: 11px; color: #8A8580; background: #F5F2EF; border-radius: 999px; padding: 2px 8px;
}
.rem-badge.auto { color: #B08968; background: #F8EFE7; }
.rem-badge.preset { color: #C8663F; background: #FBEDE8; }
.rem-badge.lunar { color: #4A6FA5; background: #EAF0F8; }
.rem-count { margin-top: 10px; font-size: 24px; font-weight: 700; color: #C8663F; letter-spacing: -0.3px; }
.rem-sub { margin-top: 6px; font-size: 13px; color: #8A8580; line-height: 1.6; }
/* 倒计时卡版式：标题 → 小字「几月几号」→ 大字「xx天」 */
.rem-sub-top { margin-top: 8px; }
.rem-note { margin-top: 4px; color: #B8AFAA; font-size: 12px; }
.rem-progress { height: 6px; border-radius: 3px; background: #EFEDEB; overflow: hidden; margin-top: 10px; }
.rem-progress-fill { display: block; height: 100%; border-radius: 3px; background: #07C160; transition: width .4s; }
.rem-actions { display: flex; align-items: center; gap: 16px; margin-top: 12px; }
.rem-actions .form-toggle { margin-left: auto; }
/* 番茄钟到点闹钟：全屏居中弹窗（手动关闭） */
.alarm-mask { align-items: center; }
.alarm-card {
  background: #fff; border-radius: 24px; padding: 34px 30px; text-align: center;
  width: min(320px, calc(100vw - 60px));
  animation: pop-in .25s;
}
.alarm-bell { font-size: 54px; line-height: 1; }
.alarm-title { font-size: 22px; font-weight: 700; color: #2B2B2B; margin-top: 14px; }
.alarm-sub { font-size: 14px; color: #8A8580; margin-top: 8px; line-height: 1.6; }
.alarm-close {
  margin-top: 26px; width: 100%; border: 0; border-radius: 999px; padding: 13px 0;
  background: #C8663F; color: #fff; font-size: 16px; font-weight: 600; font-family: inherit;
}
@keyframes pop-in { from { opacity: 0; transform: scale(.9); } to { opacity: 1; transform: none; } }
/* 番茄钟 hero */
.pomo-hero {
  background: linear-gradient(135deg, #C8663F, #E08A63); border-radius: 24px;
  padding: 20px; margin-top: 4px; color: #fff;
}
.pomo-hero .rem-label { color: rgba(255, 255, 255, .75); font-size: 14px; }
.pomo-time { font-size: 56px; font-weight: 700; letter-spacing: 2px; margin-top: 8px; font-variant-numeric: tabular-nums; }
.pomo-sub { margin-top: 6px; font-size: 14px; color: rgba(255, 255, 255, .85); }
.pomo-btns { display: flex; gap: 10px; margin-top: 14px; }
.pomo-btn {
  border: 0; background: rgba(255, 255, 255, .92); color: #C8663F; font-weight: 600;
  border-radius: 999px; padding: 10px 18px; font-size: 14px; font-family: inherit;
}
.pomo-custom { display: flex; gap: 8px; margin-top: 10px; }
.pomo-custom input {
  flex: 1; border: 0; border-radius: 999px; padding: 10px 14px; font-size: 14px;
  font-family: inherit; min-width: 0;
}
/* 悬浮添加按钮 */
.fab-add {
  position: fixed; right: 20px; bottom: calc(28px + env(safe-area-inset-bottom));
  width: 54px; height: 54px; border-radius: 50%; border: 0;
  background: #C8663F; color: #fff; font-size: 28px; line-height: 1;
  box-shadow: 0 6px 18px rgba(200, 102, 63, .4); z-index: 30;
}
/* 抽屉表单 */
.rem-form { padding: 18px 20px 24px; max-height: 82vh; overflow-y: auto; }
.form-body { padding-top: 10px; }
.form-row { display: flex; align-items: center; gap: 12px; padding: 10px 0; border-bottom: 1px solid #F3F0EE; }
.form-label { width: 76px; flex-shrink: 0; font-size: 14px; color: #2B2B2B; }
.form-row input[type=text], .form-row input[type=date], .form-row input[type=time], .form-row select {
  flex: 1; border: 0; background: #F7F5F3; border-radius: 10px; padding: 10px 12px;
  font-size: 15px; font-family: inherit; color: #2B2B2B; min-width: 0;
}
.form-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.form-chip {
  font-size: 13px; color: #8A8580; background: #F5F2EF; border-radius: 999px;
  padding: 6px 14px; border: 1px solid transparent;
}
.form-chip.on { color: #C8663F; background: #FBEDE8; border-color: #C8663F; font-weight: 600; }
/* iOS 风开关 */
.form-toggle { position: relative; display: inline-block; }
.form-toggle input { display: none; }
.form-toggle .toggle-track {
  display: block; width: 46px; height: 26px; border-radius: 13px; background: #DDD8D3;
  position: relative; transition: background .2s; cursor: pointer;
}
.form-toggle .toggle-track::after {
  content: ''; position: absolute; top: 2px; left: 2px; width: 22px; height: 22px;
  border-radius: 50%; background: #fff; transition: left .2s; box-shadow: 0 1px 3px rgba(0, 0, 0, .25);
}
.form-toggle input:checked + .toggle-track { background: #07C160; }
.form-toggle input:checked + .toggle-track::after { left: 22px; }
.form-toggle.mini .toggle-track { width: 38px; height: 22px; border-radius: 11px; }
.form-toggle.mini .toggle-track::after { width: 18px; height: 18px; }
.form-toggle.mini input:checked + .toggle-track::after { left: 18px; }

/* ---------- 他的来电邀请（2026-09-14 微信同款来电弹窗） ---------- */
.invite-mask { position: fixed; inset: 0; z-index: 90; display: flex; flex-direction: column;
  align-items: center; justify-content: space-between; padding: 20vh 0 13vh;
  background: rgba(17, 17, 24, .62); backdrop-filter: blur(22px); -webkit-backdrop-filter: blur(22px); }
.invite-body { display: flex; flex-direction: column; align-items: center; }
.invite-avatar { width: 96px; height: 96px; border-radius: 50%; overflow: hidden;
  display: flex; align-items: center; justify-content: center; font-size: 46px;
  background: rgba(255, 255, 255, .14); border: 2px solid rgba(255, 255, 255, .55);
  animation: invite-pulse 1.8s ease-in-out infinite; }
.invite-avatar .avatar-img { width: 100%; height: 100%; object-fit: cover; }
.invite-name { margin-top: 18px; color: #fff; font-size: 20px; font-weight: 600; }
.invite-label { margin-top: 8px; color: rgba(255, 255, 255, .88); font-size: 15px; }
.invite-btns { display: flex; gap: 88px; }
.invite-btn-col { display: flex; flex-direction: column; align-items: center; gap: 10px; }
.invite-btn { width: 68px; height: 68px; border-radius: 50%; border: none;
  display: flex; align-items: center; justify-content: center; cursor: pointer;
  transition: transform .12s; -webkit-tap-highlight-color: transparent; }
.invite-btn:active { transform: scale(.9); }
.invite-reject { background: #fa5151; }
.invite-accept { background: #07c160; }
.invite-btn-label { color: #fff; font-size: 13px; opacity: .92; }
@keyframes invite-pulse {
  0%, 100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(255, 255, 255, .3); }
  50% { transform: scale(1.04); box-shadow: 0 0 0 20px rgba(255, 255, 255, 0); }
}

/* ---------- 聊天页通话记录气泡（2026-09-14 她要求：挂断后微信同款一个气泡，图标+时长） ---------- */
/* 2026-09-15：通话气泡按发起方分侧——他打来=左侧白气泡，她拨出=右侧粉气泡
   （.bubble.assistant/.bubble.user 配色），图标去斜杠 */
/* 2026-09-21 她要求：通话气泡是**纯展示**，点一下什么都不发生（录音回放在「聊天记录」板块）
   ⇒ 去掉了 cursor:pointer（不再像可点）与 .playing/.loading 两条只在回放时才有的样式 */
.call-bubble { display: flex; align-items: center; gap: 6px; padding: 8px 14px;
  border-radius: 14px; font-size: 13px; line-height: 1.4; }
.call-bubble .call-icon { flex: none; display: block; }

/* ---------- 聊天记录板块（2026-09-14 她要求：通话录音+聊天记录独立板块+4 位 PIN） ---------- */
.records-page { padding-bottom: 60px; }
.rec-search { display: flex; align-items: center; gap: 8px; margin: 12px 0 4px;
  padding: 8px 12px; background: #F6F1ED; border-radius: 12px; }
.rec-search-icon { font-size: 14px; flex: none; }
.rec-search input { flex: 1; min-width: 0; border: 0; outline: 0; background: transparent;
  font-size: 14px; color: #3D3A38; }
.rec-search-btn { flex: none; border: 0; background: transparent; color: #576B95; font-size: 14px; }
.rec-row { display: flex; align-items: center; gap: 12px; padding: 13px 0; border-bottom: 1px solid #F3EDE9; }
.rec-row:last-child { border-bottom: 0; }
.rec-ic { width: 38px; height: 38px; border-radius: 50%; background: #F6F1ED; color: #8A8580;
  display: flex; align-items: center; justify-content: center; flex: none; }
.rec-main { flex: 1; min-width: 0; }
.rec-title { font-size: 15px; color: #3D3A38; line-height: 1.45; word-break: break-all; }
.rec-sub { margin-top: 3px; font-size: 12px; color: #B8AFAA; }
/* 2026-09-15 她反馈播放/暂停按钮不灵敏：加大点击区（负 margin 不撑高行），
   颜色深一点更像按钮 */
.rec-play {
  flex: none; border: 0; background: #F0F4FA; border-radius: 999px;
  font-size: 16px; color: #576B95; padding: 9px 13px; margin: -7px 0;
  min-width: 44px; text-align: center; -webkit-tap-highlight-color: transparent;
}
.rec-play:active { background: #E2EAF7; }
.rec-more { display: block; width: 100%; margin: 12px 0 4px; padding: 10px 0;
  border: 0; background: transparent; color: #576B95; font-size: 14px; }
.rec-pin-btn { display: block; margin: 20px auto 0; padding: 9px 24px; border: 1px solid #E5DDD6;
  border-radius: 20px; background: transparent; color: #8A8580; font-size: 13px; }

/* 4 位密码门（首次进入设置 / 每次进入解锁 / 修改密码共用） */
.pin-mask { position: fixed; inset: 0; background: rgba(255, 251, 247, .97);
  display: flex; align-items: center; justify-content: center; z-index: 90; }
.pin-card { width: 100%; max-width: 320px; padding: 0 36px; text-align: center; }
.pin-title { font-size: 20px; font-weight: 700; color: #2B2B2B; }
.pin-sub { margin-top: 8px; font-size: 13px; color: #8A8580; }
.pin-dots { display: flex; justify-content: center; gap: 18px; margin: 28px 0 0; }
.pin-dot { width: 12px; height: 12px; border-radius: 50%; border: 1.5px solid #C9BEB6;
  transition: background .15s; }
.pin-dot.on { background: #576B95; border-color: #576B95; }
.pin-err { min-height: 20px; margin: 8px 0 0; font-size: 13px; color: #E05B5B; }
.pin-pad { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px 16px; margin-top: 18px; }
.pin-key { height: 52px; border: 0; border-radius: 50%; background: #F3EDE9;
  font-size: 22px; color: #3D3A38; }
.pin-key:active { background: #E8DFD8; }
.pin-key-empty { visibility: hidden; }
.pin-key-del { background: transparent; font-size: 17px; color: #8A8580; }
.pin-cancel { margin-top: 24px; border: 0; background: transparent; color: #576B95; font-size: 15px; }

/* ---------- 设定页改版（2026-09-21 她拍板）：头像置顶居中 + 换头像面板 + Bark 绑定 ---------- */
/* 头像区：所有智能体的设定页最上方，圆形居中，点头像换照片 */
.set-avatar-sec { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 4px 0 2px; }
.set-avatar {
  width: 96px; height: 96px; border-radius: 50%; border: 0; padding: 0; overflow: hidden;
  background: linear-gradient(145deg, #FFF3F0, #FFE0DA);
  display: flex; align-items: center; justify-content: center;
  font-size: 40px; color: #D9887C; font-family: inherit; cursor: pointer;
  box-shadow: 0 4px 16px rgba(93, 62, 51, .12); -webkit-tap-highlight-color: transparent;
}
.set-avatar.no-photo { box-shadow: 0 0 0 1.5px #F5E3DD, 0 4px 16px rgba(93, 62, 51, .1); }
.set-avatar:active { transform: scale(.97); }
.set-avatar.small { width: 64px; height: 64px; font-size: 28px; }
.set-avatar.mini { width: 54px; height: 54px; font-size: 22px; flex: none; }
.set-avatar-tip { font-size: 12px; color: #B8AFA8; }

/* 没照片时的中性占位：圆形浅底 + 名字首字（font-size 跟随各头像位，与原来的 emoji 同尺寸） */
.avatar-ph {
  width: 100%; height: 100%; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  color: #C7B7AE; font-weight: 600; line-height: 1;
}
.call-avatar .avatar-ph { color: #D9887C; }
.info-avatar .avatar-ph { border-radius: 8px; }
.invite-avatar .avatar-ph { color: rgba(255, 255, 255, .9); }

/* 换头像面板（底部弹出，与主页原来的弹窗同一套 edit-head/edit-sub 样式） */
.avatar-mask {
  position: fixed; inset: 0; background: rgba(0, 0, 0, .55);
  display: flex; align-items: flex-end; justify-content: center; z-index: 200;
}
.avatar-panel {
  width: 100%; max-width: 560px; background: #fff; border-radius: 16px 16px 0 0;
  padding: 12px 16px calc(16px + env(safe-area-inset-bottom));
  max-height: 86vh; overflow-y: auto;
}
.edit-head-spacer { width: 44px; flex: none; }
.avatar-panel .set-avatar { margin: 2px auto 0; }
.avatar-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px 10px; }
.avatar-cand {
  border: 0; background: none; padding: 0; display: flex; flex-direction: column;
  align-items: center; gap: 5px; font-family: inherit; cursor: pointer;
  -webkit-tap-highlight-color: transparent; min-width: 0;
}
.avatar-cand-img { width: 100%; padding-top: 100%; position: relative; border-radius: 50%;
  overflow: hidden; background: #F3EDE9; }
.avatar-cand-img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.avatar-cand.on .avatar-cand-img { box-shadow: 0 0 0 2px #F29A9A; }
.avatar-cand-name { font-size: 11px; color: #B8AFA8; max-width: 100%;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.avatar-cand.on .avatar-cand-name { color: #E0837F; }
.avatar-grid-empty { grid-column: 1 / -1; font-size: 12.5px; color: #B8AFA8; line-height: 1.6; }
.avatar-acts { display: flex; align-items: center; gap: 12px; margin-top: 14px; }
.avatar-def-row { display: flex; align-items: center; gap: 12px; }
.avatar-def-acts { flex: 1; display: flex; align-items: center; gap: 12px; min-width: 0; }

/* 手机推送（Bark）绑定：设定页「主动早安晚安」下面 */
.bark-block { display: flex; flex-direction: column; gap: 8px; padding-top: 2px; }
.bark-row { display: flex; gap: 8px; }
.bark-row input { flex: 1; min-width: 0; }
.bark-row .btn-secondary { flex: none; padding: 0 16px; }
.bark-status { font-size: 12px; color: #B8AFA8; line-height: 1.55; }
.bark-clear { align-self: flex-start; font-size: 13px; }

/* 主动消息的时间点行（2026-09-24 她要求：早安/晚安时间段 + 自定义时间，换行排开）
   一行 = 小开关（复用 .form-toggle.mini）+ 文字 + 原生 time 选择器 */
.pro-slot { display: flex; align-items: center; gap: 10px; padding: 8px 0; flex-wrap: wrap; }
.pro-slot .onboard-sub { margin: 0; }
.pro-slot input[type="time"] { flex: none; width: auto; min-width: 112px; padding: 8px 10px; }
.pro-slot .form-toggle { flex: none; }

/* 铃声 / 思考开关两块从主页迁进设定页后套的是 form-card 外壳：
   原来 ring-sec 是独立分区（自带 26px 上距、白底按钮），放进卡片里要去掉外距、按钮换浅底 */
.form-card.ring-sec { padding: 16px; gap: 0; }
.form-card.ring-sec .ring-head { margin-bottom: 2px; }
.form-card.ring-sec .ring-btn { background: #FBF3F0; }
.form-card.ring-sec .ring-btn.ghost { background: transparent; }
.form-card.ring-sec .ring-acts { margin-top: 12px; align-items: center; }

/* ---------- 聊天信息页重做（2026-09-22 她拍板）：居中头像+在线标签 / 微信风格菜单 / 背景蒙版 / 全屏模式 ---------- */
/* 底色跟其他页统一（米白页面 + 白卡片 + 极浅灰细分割线） */
.info-page { background: #FDF6F2; }
.ci-scroll { flex: 1; overflow-y: auto; padding: 12px 12px calc(18px + env(safe-area-inset-bottom)); }

/* ① 人物信息区：72px 圆头像（粉白外框）→ 名字 → 在线标签，三者垂直等距 */
.ci-hero {
  background: #fff; border-radius: 12px; padding: 22px 16px; margin-bottom: 12px;
  display: flex; flex-direction: column; align-items: center; gap: 12px;
}
.ci-avatar {
  width: 72px; height: 72px; border-radius: 50%; border: 0; padding: 0; overflow: hidden;
  background: linear-gradient(145deg, #FFF3F0, #FFE0DA);
  box-shadow: 0 0 0 3px #FFE7E1, 0 4px 14px rgba(93, 62, 51, .10);
  display: flex; align-items: center; justify-content: center;
  font-size: 32px; color: #D9887C; cursor: pointer; -webkit-tap-highlight-color: transparent;
}
.ci-avatar:active { transform: scale(.97); }
.ci-name { font-size: 20px; font-weight: 700; color: #3D3A38; line-height: 1.2; }
.ci-chip {
  padding: 3px 10px; border-radius: 999px; background: #FBEDE8; color: #C8663F;
  font-size: 12px; line-height: 1.5;
}

/* ② 菜单行：左图标（豆沙红描线）+ 中间标题/小字 + 右控件（灰箭头 / 豆沙红开关） */
.ci-card { background: #fff; border-radius: 12px; overflow: hidden; margin-bottom: 12px; }
/* 背景选择面板：跟在「设置当前聊天背景」那一行下面【原地】展开
   （2026-09-22 她报「点不动」：以前挂在整张卡下面，手机上开在屏幕外，看着像没反应） */
.ci-card .bg-picker { margin: 0; border-radius: 0; padding: 14px 16px 16px; }
.ci-row {
  width: 100%; display: flex; align-items: center; gap: 12px; padding: 16px;
  background: #fff; border: 0; border-bottom: 1px solid #F0EDEA;
  font-size: 15px; font-family: inherit; color: #3D3A38; text-align: left; cursor: pointer;
}
.ci-row:last-child { border-bottom: 0; }
.ci-ic {
  width: 24px; height: 24px; flex: none; color: #D9887C;
  display: flex; align-items: center; justify-content: center;
}
.ci-ic svg { width: 22px; height: 22px; display: block; }
.ci-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.ci-title { font-size: 15px; color: #3D3A38; line-height: 1.35; }
.ci-sub { font-size: 12px; color: #A79A92; line-height: 1.35; }
.ci-arrow { flex: none; color: #C5BCB6; font-size: 20px; line-height: 1; }
/* 本页开关：开启 = 豆沙红底 + 白色圆滑块（只盖本页，不动全站微信绿） */
.info-page .switch input:checked + .slider { background: #C8663F; }
/* 蒙版行：没设照片背景时不可用（开关压暗，点了会提示先设背景） */
.ci-row-off .switch { opacity: .45; }
/* 危险项（删除他）：垃圾桶轮廓 + 文字都豆沙红，右侧箭头仍灰 */
.ci-ic.ci-danger { color: #C8663F; }
.ci-danger-text { color: #C8663F; }

/* ---------- 聊天页：背景蒙版（她 2026-09-22 定的深色遮罩版；只在有照片背景时可用） ---------- */
/* .chat 建层叠上下文；::before 压在他自己的背景之上、消息/导航/输入栏之下 */
.chat.mask-dark { z-index: 0; }
.chat.mask-dark::before {
  content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: rgba(0, 0, 0, .35);
}
/* 照片背景上浅色小字加阴影：不靠蒙版也读得清 */
.chat.has-photo .time-chip { color: rgba(255, 255, 255, .8); text-shadow: 0 1px 3px rgba(0, 0, 0, .45); }

/* ---------- 聊天页：全屏模式（她 2026-09-22 参考心伴定的版式） ---------- */
/* 导航栏/输入栏整块透明，背景图直接透出来；上下各压一层由深到透明的暗渐变，
   白字在照片、深色、浅色任何底上都读得清（她那版是深色主题，我们得自带这层） */
.chat.full-on .nav {
  background: linear-gradient(to bottom, rgba(0, 0, 0, .40), rgba(0, 0, 0, .14) 60%, rgba(0, 0, 0, 0));
  border-bottom-color: transparent;
}
.chat.full-on .nav-btn,
.chat.full-on .nav-title { color: #fff; text-shadow: 0 1px 3px rgba(0, 0, 0, .45); }
.chat.full-on .nav-title.typing { color: rgba(255, 255, 255, .72); }
.chat.full-on .inputbar {
  background: linear-gradient(to top, rgba(0, 0, 0, .40), rgba(0, 0, 0, .14) 60%, rgba(0, 0, 0, 0));
  border-top-color: transparent;
}
.chat.full-on .input { background: rgba(255, 255, 255, .22); color: #fff; }
.chat.full-on .input::placeholder { color: rgba(255, 255, 255, .75); }
.chat.full-on .hold-talk { background: rgba(255, 255, 255, .22); color: #fff; }

/* ---------- 主页会员面板 + 模型页（她 2026-09-22 拍板会员；2026-10-08 模型拆独立页、面板重设计） ---------- */
/* 面板骨架复用 .avatar-mask/.avatar-panel/.edit-head（style.css:1356 起），只加这几条 */
.member-hero {
  margin: 4px 2px 0; padding: 18px 16px; border-radius: 16px; text-align: center;
  background: linear-gradient(135deg, #FFF3F0, #FFE0DA);
}
.member-hero-title { font-size: 17px; font-weight: 700; color: #3D3A38; }
.member-hero-status { margin-top: 8px; font-size: 13px; color: #6B6561; }
.member-hero-status b { color: #C8663F; }
.member-perks { margin-top: 10px; font-size: 12px; color: #A79A92; line-height: 1.8; }
.member-plan-row { display: flex; gap: 10px; margin-top: 14px; }
.member-plan {
  flex: 1; border: 1.5px solid #F0E6E1; border-radius: 16px; padding: 14px 8px;
  text-align: center; background: #fff; cursor: pointer; transition: all .15s;
}
.member-plan.on { border-color: #F29A9A; background: #FFF8F5; }
.member-plan-name { font-size: 13px; color: #6B6561; }
.member-plan-price { margin-top: 6px; font-size: 20px; font-weight: 700; color: #C8663F; }
.member-plan-price small { font-size: 12px; font-weight: 500; }
#memberBuy { margin-top: 14px; }
.pay-area { margin-top: 14px; }
.pay-qr {
  width: 200px; height: 200px; margin: 0 auto; display: flex; align-items: center;
  justify-content: center; background: #fff; border: 1px solid #F0E6E1; border-radius: 12px;
}
.pay-qr:empty { display: none; }  /* mock 模式没有二维码，别留个空框 */
.pay-tip { margin-top: 10px; text-align: center; font-size: 12.5px; color: #B8AFA8; line-height: 1.6; }

/* ---------- 模型页（2026-10-08 她拍板：独立页，纵向卡片列表，全部免费） ---------- */
.model-hint-line { padding: 14px 16px 0; font-size: 12px; color: #C8663F; line-height: 1.6; }
.model-hint-line:empty { display: none; }
.model-list {
  display: flex; flex-direction: column; gap: 12px;
  padding: 14px 16px calc(24px + env(safe-area-inset-bottom));
}
.model-card {
  display: flex; align-items: center; gap: 10px; width: 100%;
  background: #fff; border: 1.5px solid #F0E6E1; border-radius: 16px;
  padding: 14px 16px; font-family: inherit; text-align: left; cursor: pointer; transition: all .15s;
}
.model-card:active { transform: scale(.98); }
.model-card.on { border-color: #F29A9A; background: #FFF8F5; }
.model-card.locked { opacity: .5; border-style: dashed; }  /* 结构预留：本轮无锁定模型 */
.model-card-main { flex: 1; min-width: 0; }
.model-name { font-size: 15px; font-weight: 600; color: #3D3A38; }
.model-card.on .model-name { color: #D97B7B; }
.model-desc { margin-top: 4px; font-size: 12px; color: #A79A92; line-height: 1.5; }
.model-tag {
  flex: none; padding: 3px 10px; border-radius: 999px;
  background: #F29A9A; color: #fff; font-size: 11.5px; font-weight: 600;
}
.model-foot { padding: 0 16px 30px; text-align: center; font-size: 12px; color: #B8AFA8; }