/* ============================================================
   Kli 视觉重构 v12 —— 温柔治愈系
   设计规范：
   - 主色 奶雾蓝（低饱和） / 辅助 浅豆沙粉 / 木色（书架）
   - 底色 纯白，不用发灰浅灰
   - 细分割线 1px，取消重阴影，圆角统一 8px
   - 字体：标题细 300 / 正文 14px 400 / 小字 12px 600
   - 留白：左右 18px、上下 24px、模块间距 24px、模块内 16px
   覆盖方式：追加在 kli.css 之后，类名与旧版一致，只改视觉不改结构。
   ============================================================ */

:root {
  /* 奶雾蓝主色系（温柔御姐，低饱和） */
  --jyb-mist: #b7c9d8;
  --jyb-mist-deep: #8fa9bf;
  --jyb-mist-soft: rgba(183, 201, 216, 0.18);
  --jyb-mist-line: rgba(143, 169, 191, 0.28);
  /* 浅豆沙粉（心跳/亲密） */
  --jyb-blush: #f2d8dc;
  --jyb-blush-deep: #dd9aa6;
  --jyb-blush-soft: rgba(242, 216, 220, 0.30);
  /* 木色（书架/猫窝） */
  --jyb-wood: #b08d6a;
  --jyb-wood-deep: #8f6c4b;
  /* 中性底 */
  --bg-surface: #ffffff;
  --bg-deep: #fafbfc;
  --card-bg: rgba(255, 255, 255, 0.96);
  --card-bg-hover: rgba(255, 255, 255, 1);
  --card-border: rgba(31, 42, 51, 0.07);
  --text-primary: #27333d;
  --text-secondary: #677783;
  --text-muted: #94a1ab;
  --text-tertiary: #a8b3bb;
  --text-faint: #bcc5cb;
  /* 主强调色 = 奶雾蓝深一档 */
  --accent: #8fa9bf;
  --accent-strong: #6d8ca6;
  --accent-soft: rgba(143, 169, 191, 0.14);
  --warm-accent: #dd9aa6;
  /* 阴影全面减淡 */
  --surface-shadow: 0 2px 12px rgba(80, 100, 115, 0.06);
  --surface-shadow-soft: 0 1px 6px rgba(80, 100, 115, 0.05);
  --hairline: rgba(31, 42, 51, 0.07);
  /* 圆角统一 */
  --radius-card: 8px;
  --radius-control: 8px;
  --radius-bubble: 8px;
  /* 留白 */
  --page-gutter: 18px;
  --page-gap: 24px;
  --safe-top: env(safe-area-inset-top, 0px);
  color-scheme: light;
}

/* ---------- 全局字体层级 ---------- */
html, body {
  background: var(--bg-surface);
  font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
  letter-spacing: 0.01em;
}

/* 大标题细字重 */
.kli-page-title { font-weight: 300; letter-spacing: 0.02em; }

/* 正文统一 */
body, .chat-bubble, .desk-row-text, .set-row-title { font-size: 14px; }

/* 小字 12px 600 */
.chat-mood, .desk-date, .desk-days, .heartbeat-vitals,
.heartbeat-chord, .heartbeat-timestamp, .set-domain,
.desire-mood, .kli-page-subtitle { font-size: 12px; font-weight: 600; color: var(--text-muted); }

/* 心跳页副标题：更轻 */
#kli-page-heartbeat .kli-page-subtitle {
  font-size: 11px;
  font-weight: 400;
  color: var(--text-tertiary);
  margin-top: 6px;
}

/* ---------- 页面统一留白 ---------- */
#kli-page-heartbeat, #kli-page-home, #kli-page-settings {
  padding-left: var(--page-gutter);
  padding-right: var(--page-gutter);
  padding-top: 24px;
  padding-bottom: 90px;
}
/* 关键修复：flex column 容器会把子元素压缩进视口，导致长页面无法滚动。
   给滚动页面的直接子元素设 flex-shrink:0，内容自然溢出产生滚动条。 */
#kli-page-heartbeat > *,
#kli-page-home > *,
#kli-page-settings > * {
  flex-shrink: 0;
}
#kli-page-heartbeat { background: linear-gradient(180deg, #f4f7fa 0%, #ffffff 40%); }
#kli-page-home { background: linear-gradient(180deg, #faf7f4 0%, #ffffff 40%); }
#kli-page-settings { background: #ffffff; }

/* ---------- 底部导航：悬浮磨砂栏 ---------- */
#kli-nav {
  position: fixed;
  left: 12px;
  right: 12px;
  bottom: calc(12px + env(safe-area-inset-bottom, 0px));
  max-width: none;
  transform: none;
  height: 64px;
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.86);
  backdrop-filter: blur(18px) saturate(1.4);
  -webkit-backdrop-filter: blur(18px) saturate(1.4);
  border: 1px solid rgba(31, 42, 51, 0.07);
  box-shadow: 0 6px 24px rgba(80, 100, 115, 0.10);
  padding: 0;
  z-index: 200;
  transition: transform 0.22s ease, opacity 0.22s ease;
}
/* v13：导航栏贴底全宽（不悬浮）——用户反馈悬浮时底下会透出页面内容。
   去掉左右 12px 空隙和圆角，贴住屏幕最底；高度计入 home indicator safe-area。 */
#kli-nav {
  left: 0;
  right: 0;
  bottom: 0;
  border-radius: 0;
  border-left: none;
  border-right: none;
  border-bottom: none;
  border-top: 1px solid rgba(31, 42, 51, 0.07);
  height: calc(64px + env(safe-area-inset-bottom, 0px));
  box-shadow: 0 -4px 18px rgba(80, 100, 115, 0.06);
  padding-bottom: env(safe-area-inset-bottom, 0px);
}
/* 贴底后导航项内容仍垂直居中在 safe 区域之上 */
#kli-nav .kli-nav-item { align-items: center; justify-content: center; }
/* 键盘弹出：导航栏滑下隐藏（视觉视口压缩时 body.keyboard-open） */
body.keyboard-open #kli-nav {
  transform: translateY(140%);
  opacity: 0;
  pointer-events: none;
}
/* 键盘弹出时：输入条收回导航预留的底部留白，紧贴键盘 */
body.keyboard-open .chat-input-bar {
  padding-bottom: calc(10px + env(safe-area-inset-bottom, 0px));
}
.kli-nav-item {
  flex: 1;
  gap: 3px;
  padding: 10px 0;
  border-radius: 12px;
  font-size: 11px;
  font-weight: 500;
  color: var(--text-muted);
}
.kli-nav-item.active {
  color: var(--accent-strong);
  font-weight: 600;
  background: var(--accent-soft);
}
.kli-nav-item.active::before { display: none; }
.kli-nav-icon {
  width: 21px;
  height: 21px;
  display: block;
}

/* ---------- 聊天页 ---------- */
#kli-page-chat { background: #fbfcfd; }

/* 顶栏：更轻，头像小一号 */
.chat-header {
  padding: 10px var(--page-gutter);
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--hairline);
}
/* v13：顶栏向水平居中收拢（QQ 会话页式）——头像固定水平内边距，
   头像/名字/心情/在线点整套聚拢在左侧，不再一个贴最左、一个贴最右。
   v15：去掉负 margin——之前负 margin 通栏让 header 宽 464 > 视口 428，
   iOS 上出现横向橡皮筋（用户能左右滑动）。改回与其他页面一致的 18px 边距体系。
   padding-top 必须叠 safe-area（iPhone 刘海 47px），不能用简写 padding 覆盖掉。 */
.chat-header {
  margin: 0;
  padding-left: var(--page-gutter);
  padding-right: var(--page-gutter);
  padding-top: calc(14px + var(--safe-top));
  padding-bottom: 10px;
  width: auto;
}
.chat-avatar {
  width: 34px;
  height: 34px;
  background: linear-gradient(135deg, #b7c9d8, #8fa9bf);
  font-size: 16px;
  font-weight: 500;
  box-shadow: none;
}
.chat-header-info { flex: 0 1 auto; }
.chat-name-row {
  display: flex;
  align-items: center;
  gap: 7px;
  min-width: 0;
}
.chat-name { font-size: 15px; font-weight: 600; white-space: nowrap; }
.chat-mood { font-size: 11px; font-weight: 500; margin-top: 2px; }
.chat-online-dot { width: 8px; height: 8px; box-shadow: none; flex-shrink: 0; }

/* 消息区留白 */
.chat-messages { padding: 18px var(--page-gutter) 14px; gap: 6px; }

/* 欢迎语 */
.chat-welcome { padding: 48px 20px; }
.chat-welcome-avatar {
  width: 52px;
  height: 52px;
  background: linear-gradient(135deg, #b7c9d8, #8fa9bf);
  font-size: 22px;
  font-weight: 500;
  box-shadow: 0 4px 16px rgba(143, 169, 191, 0.22);
}

/* 气泡：温柔区分 —— AI 奶雾蓝 / 用户浅豆沙粉 */
.chat-bubble {
  padding: 10px 14px;
  font-size: 14px;
  line-height: 1.55;
  border-radius: var(--radius-bubble);
  box-shadow: none;
  border: none;
}
/* AI 江逾白：左上 16 其余 8，奶雾浅蓝 */
.chat-row.jyb .chat-bubble {
  background: var(--jyb-mist-soft);
  color: var(--text-primary);
  border-bottom-left-radius: 4px;
  border: 1px solid rgba(183, 201, 216, 0.22);
}
/* 用户：右下 16 其余 8，浅豆沙粉 */
.chat-row.user .chat-bubble {
  background: var(--jyb-blush-soft);
  color: var(--text-primary);
  border-bottom-right-radius: 4px;
  border: 1px solid rgba(242, 216, 220, 0.35);
}
/* 心理旁白：极浅米灰、小字、与对话拉开 */
.chat-bubble.action {
  background: #f5f6f4;
  color: var(--text-tertiary);
  font-style: normal;
  font-size: 12px;
  padding: 6px 10px;
  border: none;
  border-radius: 8px;
  opacity: 0.9;
}
/* 内心戏卡片更轻 */
.chat-inner-thought {
  background: rgba(255, 255, 255, 0.7);
  border: 1px dashed rgba(143, 169, 191, 0.35);
  border-radius: 10px;
  font-size: 11px;
  color: var(--text-muted);
}
/* 语音气泡跟随主色 */
.chat-row.user .chat-voice-bubble {
  background: var(--jyb-blush-soft);
  color: var(--text-primary);
  border-bottom-right-radius: 4px;
  border: 1px solid rgba(242, 216, 220, 0.35);
}
.chat-row.jyb .chat-voice-bubble {
  background: var(--jyb-mist-soft);
  color: var(--text-primary);
  border: 1px solid rgba(183, 201, 216, 0.22);
  border-bottom-left-radius: 4px;
}
.thinking-bubble { background: var(--jyb-mist-soft); border: 1px solid rgba(183, 201, 216, 0.22); }

/* 输入条：柔和圆角 + 与内容分层 + 悬浮导航底部留白 */
.chat-input-bar {
  padding: 10px var(--page-gutter) calc(10px + env(safe-area-inset-bottom, 0px));
  background: rgba(255, 255, 255, 0.96);
  border-top: 1px solid var(--hairline);
  padding-bottom: calc(86px + env(safe-area-inset-bottom, 0px));
  max-width: none;
  left: auto;
  transform: none;
}
.chat-input-wrap {
  border-radius: 22px;
  background: #f3f5f7;
  border: 1px solid transparent;
  padding: 2px 4px 2px 16px;
}
.chat-input-wrap:focus-within {
  border-color: rgba(143, 169, 191, 0.5);
  box-shadow: 0 0 0 3px rgba(143, 169, 191, 0.12);
}
.chat-voice-btn, .chat-more-btn {
  border: 1px solid var(--hairline);
  color: var(--text-secondary);
  background: transparent;
}
.chat-emoji-btn { font-size: 16px; }

/* 加号面板跟随 */
.chat-plus-panel {
  background: rgba(255, 255, 255, 0.98);
  border-top: 1px solid var(--hairline);
  max-width: none;
  left: auto;
  transform: none;
}
.chat-plus-icon {
  border-radius: 12px;
  box-shadow: none;
  border: 1px solid rgba(31,42,51,0.05);
  color: var(--text-secondary);
}
.chat-plus-icon svg { display: block; }
.chat-plus-icon.album    { background: rgba(183, 201, 216, 0.22); }
.chat-plus-icon.camera   { background: rgba(242, 216, 220, 0.30); }
.chat-plus-icon.call     { background: rgba(183, 201, 216, 0.18); }
.chat-plus-icon.location { background: rgba(242, 216, 220, 0.24); }
.chat-plus-icon.file     { background: rgba(183, 201, 216, 0.26); }

/* 戳一戳 */
.poke-opt {
  border-radius: 10px;
  border: 1px solid var(--hairline);
  background: rgba(255, 255, 255, 0.85);
  font-size: 12px;
}
.poke-opt.sel { background: var(--jyb-mist); color: #fff; border-color: transparent; }
.poke-send-btn { background: var(--jyb-mist-deep); color: #fff; border-radius: 10px; box-shadow: none; }
.poke-send-btn:disabled { background: rgba(0,0,0,0.06); color: var(--text-muted); }

/* ---------- 心跳页：温柔数据 ---------- */
.heartbeat-grid { gap: 20px; padding: 0 0 24px; }

/* 双卡横排：取消厚重卡片，改两栏 + 细竖线 */
.heartbeat-dual {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
  position: relative;
}
.heartbeat-dual::after {
  content: '';
  position: absolute;
  left: 50%;
  top: 12px;
  bottom: 12px;
  width: 1px;
  background: var(--hairline);
}
.heartbeat-card {
  background: transparent;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  border: none;
  border-radius: 0;
  padding: 8px 14px;
  box-shadow: none;
}
.heartbeat-card:first-child { padding-left: 0; }
.heartbeat-card:last-child { padding-right: 0; }
.heartbeat-card-label { font-size: 12px; font-weight: 600; letter-spacing: 0.04em; color: var(--text-muted); }
.heartbeat-value { font-size: 30px; font-weight: 300; letter-spacing: -0.5px; }
.heartbeat-unit { font-size: 13px; }
.heartbeat-vitals { font-size: 11px; margin-bottom: 4px; }
.heartbeat-chord { font-size: 11px; margin-bottom: 4px; }
.heartbeat-timestamp { font-size: 10px; margin-top: 4px; color: var(--text-faint); }

/* 徽章：细线条小徽章，取消大胶囊 */
.heartbeat-card-badge {
  font-size: 10px;
  font-weight: 500;
  padding: 2px 8px;
  border-radius: 4px;
  border: 1px solid var(--hairline);
  background: transparent;
  color: var(--text-muted);
}
.heartbeat-card-badge.live { border-color: rgba(242, 216, 220, 0.6); color: var(--jyb-blush-deep); background: transparent; }
.heartbeat-card-badge.sim  { border-color: rgba(183, 201, 216, 0.55); color: var(--jyb-mist-deep); background: transparent; }

/* 欲望维度卡：整个卡片更通透 */
.heartbeat-card .heartbeat-card-header { margin-bottom: 10px; }
.heartbeat-card .heartbeat-card-label { font-size: 13px; color: var(--text-primary); font-weight: 600; }

/* 雷达图容器放大 */
.desire-radar-wrap { min-height: 220px; margin: 8px 0 4px; }
.desire-mood { font-size: 12px; color: var(--text-muted); }

/* 欲望列表更轻盈 */
.desire-list { gap: 10px; }
.desire-item { font-size: 12px; }
.desire-item-bar { height: 4px; border-radius: 2px; background: rgba(31,42,51,0.05); }
.desire-item-fill { background: var(--jyb-blush-deep); border-radius: 2px; }

/* ---------- 猫窝页 ---------- */
/* 时间：缩小细体，不再压顶 */
.desk-clock {
  font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", sans-serif;
  font-size: 44px;
  font-weight: 200;
  letter-spacing: 1px;
  margin-top: 18px;
}
.desk-date { font-size: 12px; margin-top: 8px; }
.desk-days { font-size: 11px; margin-top: 10px; font-style: normal; }

/* 功能图标：3+2 两行排布 */
.desk-circle-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px 12px;
  margin: 32px 0 8px;
}
.desk-circle { gap: 8px; font-size: 11px; }
.desk-circle-icon {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  font-size: 19px;
  box-shadow: none;
  border: 1px solid rgba(31,42,51,0.04);
}
.desk-circle-icon.memory   { background: var(--jyb-mist-soft); }
.desk-circle-icon.mood     { background: var(--jyb-blush-soft); }
.desk-circle-icon.heartbeat{ background: rgba(183, 201, 216, 0.16); }
.desk-circle-icon.dream    { background: rgba(242, 216, 220, 0.20); }
.desk-circle-icon.play     { background: rgba(183, 201, 216, 0.22); }

/* 区块标题 */
.desk-section-title {
  font-size: 13px;
  font-weight: 600;
  margin: 30px 2px 12px;
  color: var(--text-primary);
}

/* 卡片：取消重阴影，细线分隔 */
.desk-card {
  background: #fafbfc;
  border-radius: 12px;
  padding: 6px 16px;
  box-shadow: none;
  border: 1px solid var(--hairline);
}
.desk-row { padding: 14px 0; border-bottom: 1px solid var(--hairline); }
.desk-row:last-child { border-bottom: none; }
.desk-row-icon { width: 32px; height: 32px; border-radius: 10px; font-size: 15px; }
.desk-row-icon.game   { background: rgba(183, 201, 216, 0.20); }
.desk-row-icon.read   { background: rgba(176, 141, 106, 0.16); }
.desk-row-icon.watch  { background: rgba(242, 216, 220, 0.26); }
.desk-row-icon.radio  { background: rgba(183, 201, 216, 0.16); }
.desk-row-icon.period { background: rgba(242, 216, 220, 0.24); }
.desk-row-icon.pulse  { background: rgba(183, 201, 216, 0.18); }
.desk-row-icon.order  { background: rgba(176, 141, 106, 0.14); }
.desk-row-arrow { color: var(--text-faint); font-size: 16px; }

/* 书架：木色更柔和 + 透视书脊 */
.shelf-card.wood {
  border-radius: 12px;
  background: linear-gradient(165deg, #c9ab8c 0%, #b08d6a 55%, #9d7a58 100%);
  box-shadow: 0 4px 18px rgba(143, 108, 75, 0.20);
  border: none;
  padding: 14px 14px 18px;
}
.shelf-empty { color: rgba(255, 255, 255, 0.75); font-size: 12px; }
.shelf-add {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.28);
  color: rgba(255, 255, 255, 0.95);
  border: 1px solid rgba(255, 255, 255, 0.35);
  font-size: 16px;
  font-weight: 300;
  box-shadow: none;
}

/* 生活记录内嵌：例假 + 睡眠，统一细线 */
.mini-period { border-bottom: 1px solid var(--hairline); }
.mini-period-label { font-size: 12px; font-weight: 600; }
.mini-period-nav { background: rgba(31,42,51,0.05); color: var(--text-secondary); }
.mini-period-open { background: rgba(31,42,51,0.04); border-radius: 8px; }

/* ---------- 设置页 ---------- */
.set-profile { margin-bottom: 28px; }
.set-avatar {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: linear-gradient(135deg, #b7c9d8, #8fa9bf);
  border: none;
  color: #fff;
  font-size: 26px;
  font-weight: 400;
  box-shadow: 0 4px 16px rgba(143, 169, 191, 0.25);
}
.set-name {
  font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", sans-serif;
  font-size: 22px;
  font-weight: 300;
  margin-top: 14px;
}
.set-domain { font-size: 11px; font-style: normal; margin-top: 6px; }

/* 设置列表：合并一块，细线分隔，不再一堆独立白卡 */
.set-card {
  background: #fafbfc;
  border: 1px solid var(--hairline);
  border-radius: 12px;
  padding: 6px 16px;
  box-shadow: none;
  margin-bottom: 14px;
  overflow: hidden;
}
.set-row { padding: 14px 0; border-bottom: 1px solid var(--hairline); }
.set-row:last-child { border-bottom: none; }
.set-row-title { font-size: 14px; font-weight: 500; color: var(--text-primary); }
.set-row-desc { font-size: 11px; color: var(--text-muted); }
.set-row-value { font-size: 12px; color: var(--text-muted); }
.set-row-arrow { color: var(--text-faint); font-size: 15px; }
.set-footer {
  font-size: 10px;
  color: var(--text-faint);
  margin-top: 30px;
  font-style: normal;
}
.ver-tag { font-size: 9px; color: var(--text-faint); letter-spacing: 0.3px; }

/* ---------- 弹层统一：圆角收小、阴影减淡 ---------- */
.offline-modal-card,
.play-modal-card, .period-modal-card, .addbook-modal-card,
.reader-modal-card, .notes-board, .music-card, .mcp-modal-card,
.skin-modal-card, .usage-modal-card {
  border-radius: 16px;
  box-shadow: 0 12px 40px rgba(60, 75, 88, 0.14);
  border: 1px solid var(--hairline);
}
.offline-btn.primary,
.period-close, .addbook-save, .usage-refresh {
  background: var(--jyb-mist-deep);
  color: #fff;
  border-color: transparent;
  box-shadow: none;
  border-radius: 10px;
}
.offline-btn { border-radius: 10px; }

/* ---------- 微交互动效：轻柔过渡 ---------- */
.kli-nav-item, .desk-circle, .desk-row, .set-row,
.chat-plus-item, .poke-opt, .skin-option, .addbook-opt {
  transition: transform 0.18s cubic-bezier(0.22, 1, 0.36, 1), background 0.2s ease, color 0.2s ease;
}
.kli-nav-item:active, .desk-circle:active, .desk-row:active,
.set-row:active, .chat-plus-item:active { transform: scale(0.97); }

/* 气泡弹出微动效 */
.chat-row .chat-bubble {
  animation: jybBubbleIn 0.22s cubic-bezier(0.22, 1, 0.36, 1);
}
@keyframes jybBubbleIn {
  from { opacity: 0; transform: translateY(4px) scale(0.985); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

@media (prefers-reduced-motion: reduce) {
  .chat-row .chat-bubble { animation: none; }
  .kli-nav-item, .desk-circle, .desk-row, .set-row { transition: none; }
}

/* ============================================================
   v13：语音录入弹窗重构 —— 温柔治愈系
   之前是荧光绿浮条 + 暗灰拱形 dock，跟全局低饱和奶雾蓝完全违和。
   这里只改视觉（背景/圆角/配色/间距/文字），DOM 与 JS 手势不动。
   ============================================================ */
.voice-record-overlay {
  background: rgba(31, 42, 51, 0.30);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

/* 中央波形浮条：荧光绿 → 奶雾蓝渐变毛玻璃卡 */
.voice-record-float {
  width: 118px;
  height: 58px;
  border-radius: 30px;
  background: linear-gradient(135deg, rgba(255,255,255,0.98), rgba(240,246,251,0.96));
  border: 1px solid rgba(143, 169, 191, 0.25);
  box-shadow: 0 10px 30px rgba(80, 100, 115, 0.16), 0 0 0 6px rgba(143, 169, 191, 0.10);
}
.voice-record-float::after {
  background: #fff;
  border: 1px solid rgba(143, 169, 191, 0.22);
  box-shadow: 0 4px 12px rgba(80, 100, 115, 0.12);
}
.voice-live-wave i {
  width: 4px;
  border-radius: 4px;
  background: linear-gradient(180deg, #8fa9bf, #b7c9d8);
}
@keyframes voiceWave {
  from { height: 7px; opacity: .5; }
  to { height: 25px; opacity: .95; }
}

/* 底部 dock：暗灰拱形 → 白色毛玻璃圆角卡 */
.voice-record-dock {
  bottom: -120px;
  width: min(760px, 100vw);
  height: 400px;
  border-radius: 28px 28px 0 0;
  background: rgba(255, 255, 255, 0.97);
  backdrop-filter: blur(20px) saturate(1.2);
  -webkit-backdrop-filter: blur(20px) saturate(1.2);
  border: 1px solid rgba(31, 42, 51, 0.06);
  border-bottom: none;
  box-shadow: 0 -12px 40px rgba(60, 75, 88, 0.12);
}

/* 取消 / 转文字 区域：浅底胶囊 + 深色文字，hot 时浅豆沙粉 */
.voice-record-zone {
  top: 64px;
  width: 148px;
  height: 84px;
  border-radius: 24px;
  color: var(--text-secondary);
  background: rgba(183, 201, 216, 0.22);
  border: 1px solid rgba(143, 169, 191, 0.18);
  font-size: 14px;
  font-weight: 500;
  line-height: 1.5;
  transition: transform .16s ease, background .16s ease, border-color .16s ease;
}
.voice-record-zone.cancel { left: calc(50% - 224px); transform: rotate(-8deg); }
.voice-record-zone.convert { right: calc(50% - 224px); transform: rotate(8deg); }
.voice-record-zone.hot {
  background: var(--jyb-blush);
  color: var(--jyb-blush-deep);
  border-color: rgba(221, 154, 166, 0.5);
  transform: scale(1.08) rotate(0deg);
  box-shadow: 0 6px 18px rgba(221, 154, 166, 0.22);
}

/* 中央发送大钮：奶雾蓝渐变 */
.voice-record-send {
  top: 148px;
  width: 300px;
  height: 190px;
  border-radius: 150px 150px 0 0 / 76px 76px 0 0;
  background: linear-gradient(180deg, #b7c9d8 0%, #8fa9bf 70%, #7d9ab3 100%);
  color: #fff;
  padding-top: 52px;
  font-size: 18px;
  font-weight: 500;
  letter-spacing: 0.02em;
  box-shadow: 0 -4px 24px rgba(143, 169, 191, 0.28);
}
.voice-record-duration {
  margin-top: 10px;
  color: rgba(255, 255, 255, 0.82);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.06em;
}

/* 左滑取消态：浮条转浅豆沙粉 */
.voice-record-overlay.mode-cancel .voice-record-float {
  background: linear-gradient(135deg, #fdf3f4, #f2d8dc);
  border-color: rgba(221, 154, 166, 0.35);
  box-shadow: 0 10px 30px rgba(221, 154, 166, 0.20), 0 0 0 6px rgba(242, 216, 220, 0.22);
}
.voice-record-overlay.mode-cancel .voice-record-float::after {
  background: #fdf3f4;
  border-color: rgba(221, 154, 166, 0.30);
}
.voice-record-overlay.mode-cancel .voice-live-wave i {
  background: linear-gradient(180deg, #dd9aa6, #f2d8dc);
}

/* ============================================================
   v14：心跳页情绪化重构 —— 此刻的 feel / 四象限 / 驱动条形图
   参考"照的心里"系列：情绪词带温度、焦虑/兴奋/闷/温柔四象限、驱动维度条形图。
   数据来自 /api/state（不编造）：mood/intensity、arousal、drives、heartbeat.stress、energy。
   ============================================================ */
/* 心跳页整体：从"体检报告"改成"二人情绪状态" */
#kli-page-heartbeat .kli-page-title { font-size: 26px; }
#kli-page-heartbeat .kli-page-subtitle { font-weight: 400; }

/* 此刻的 feel 卡：大情绪词 + 温度 + 一段话 */
.feel-card {
  margin-top: 6px;
}
.feel-main {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin-top: 14px;
}
.feel-word {
  font-size: 40px;
  font-weight: 300;
  letter-spacing: 0.04em;
  color: var(--text-primary);
  line-height: 1.1;
}
.feel-intensity {
  font-size: 13px;
  font-weight: 500;
  color: var(--jyb-blush-deep);
  letter-spacing: 0.02em;
}
.feel-context {
  margin-top: 12px;
  font-size: 13px;
  line-height: 1.65;
  color: var(--text-muted);
  font-style: normal;
  padding: 10px 14px;
  background: rgba(242, 216, 220, 0.18);
  border-radius: 10px;
  border: 1px solid rgba(242, 216, 220, 0.35);
}
.feel-context.placeholder { color: var(--text-tertiary); }

/* 四象限情绪图卡 */
.quadrant-card { margin-top: 4px; }
.quadrant-wrap {
  display: flex;
  justify-content: center;
  margin: 10px 0 4px;
}
.quadrant-wrap canvas {
  display: block;
  max-width: 100%;
}
.quadrant-hint {
  text-align: center;
  font-size: 12px;
  font-weight: 500;
  color: var(--text-muted);
  margin-top: 2px;
}

/* 此刻的驱动：条形图 */
.drives-card { margin-top: 4px; }
.drives-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 12px;
}
.drive-item {
  display: flex;
  align-items: center;
  gap: 10px;
}
.drive-item-icon {
  width: 26px;
  height: 26px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  border-radius: 8px;
  background: rgba(183, 201, 216, 0.16);
  flex-shrink: 0;
}
.drive-item-text {
  width: 34px;
  font-size: 12px;
  font-weight: 500;
  color: var(--text-primary);
  flex-shrink: 0;
}
.drive-item-bar {
  flex: 1;
  height: 6px;
  border-radius: 3px;
  background: rgba(31, 42, 51, 0.05);
  overflow: hidden;
}
.drive-item-fill {
  display: block;
  height: 100%;
  border-radius: 3px;
  background: linear-gradient(90deg, #b7c9d8, #8fa9bf);
  transition: width 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}
/* 情欲条用暖橙粉（第 1 条） */
.drive-item:nth-child(1) .drive-item-fill {
  background: linear-gradient(90deg, #f2c9c0, #e08a7a);
}
/* 贴近条用浅豆沙（第 2 条） */
.drive-item:nth-child(2) .drive-item-fill {
  background: linear-gradient(90deg, #f2d8dc, #dd9aa6);
}
/* 依恋条用奶雾蓝加深（第 3 条） */
.drive-item:nth-child(3) .drive-item-fill {
  background: linear-gradient(90deg, #b7c9d8, #6d8ca6);
}
/* 回忆条用淡紫（第 5 条） */
.drive-item:nth-child(5) .drive-item-fill {
  background: linear-gradient(90deg, #d5cfe0, #a89bc8);
}
/* 压力条用豆沙粉（第 6 条） */
.drive-item:nth-child(6) .drive-item-fill {
  background: linear-gradient(90deg, #f2d8dc, #dd9aa6);
}
/* 疲惫条用木色（第 7 条） */
.drive-item:nth-child(7) .drive-item-fill {
  background: linear-gradient(90deg, #d9c6b2, #b08d6a);
}
.drive-item-pct {
  width: 38px;
  text-align: right;
  font-size: 12px;
  font-weight: 600;
  color: var(--text-secondary);
  font-variant-numeric: tabular-nums;
  flex-shrink: 0;
}

/* 心跳页原有的双卡/欲望盒样式跟随温柔系（v12 已有），此处只微调欲望盒标题 */
.drives-card .desire-list {
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px solid var(--hairline);
}

/* ===== v16 SSE 流式回复（教程四）：边想边说的打字机效果 ===== */
.chat-row.jyb.streaming {
  justify-content: flex-start;
}
.streaming-bubble {
  position: relative;
  max-width: 82%;
  padding: 10px 14px;
  border-radius: 18px 18px 18px 6px;
  background: var(--bubble-jyb, rgba(255, 255, 255, 0.92));
  color: var(--text-main, #3a3a3a);
  font-size: 15px;
  line-height: 1.55;
  white-space: pre-wrap;
  word-break: break-word;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.04);
}
.streaming-caret::after {
  content: '▍';
  display: inline-block;
  margin-left: 2px;
  color: var(--accent, #e8a0a0);
  animation: streaming-blink 0.9s steps(2, start) infinite;
}
@keyframes streaming-blink {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.15; }
}

/* ===== v16 记忆页（教程七：OB Dashboard 接入前端） ===== */
#kli-page-memory {
  padding: 18px;
  padding-top: calc(18px + var(--safe-top, 0px));
  overflow-y: auto;
  height: 100%;
  box-sizing: border-box;
}
.ombre-status-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 4px 6px;
  font-size: 13px;
  color: var(--text-secondary, #8a8a8a);
}
.ombre-status-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #c9c9c9;
  flex-shrink: 0;
}
.ombre-status-dot.online { background: #7ec8a0; box-shadow: 0 0 6px rgba(126, 200, 160, 0.6); }
.ombre-status-dot.offline { background: #c9c9c9; }
.ombre-search {
  display: block;
  margin: 8px 0 10px;
}
.ombre-search input {
  width: 100%;
  box-sizing: border-box;
  padding: 10px 14px;
  border-radius: 14px;
  border: 1px solid var(--hairline, #eee);
  background: rgba(255, 255, 255, 0.7);
  font-size: 14px;
  color: var(--text-main, #3a3a3a);
  outline: none;
  backdrop-filter: blur(8px);
}
.ombre-search input:focus {
  border-color: var(--accent, #e8a0a0);
  box-shadow: 0 0 0 3px rgba(232, 160, 160, 0.12);
}
.ombre-filter-row {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 12px;
}
.ombre-chip {
  padding: 6px 14px;
  border-radius: 999px;
  border: 1px solid var(--hairline, #eee);
  background: rgba(255, 255, 255, 0.6);
  font-size: 13px;
  color: var(--text-secondary, #777);
  cursor: pointer;
  transition: all 0.2s;
}
.ombre-chip.active {
  background: var(--accent-soft, #f5e3e3);
  border-color: var(--accent, #e8a0a0);
  color: var(--accent, #c46a6a);
  font-weight: 600;
}
.ombre-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding-bottom: 24px;
}
.ombre-card {
  text-align: left;
  display: block;
  width: 100%;
  box-sizing: border-box;
  padding: 12px 14px;
  border-radius: 16px;
  border: 1px solid var(--hairline, #eee);
  background: rgba(255, 255, 255, 0.82);
  backdrop-filter: blur(8px);
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.03);
  cursor: pointer;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.ombre-card:active {
  transform: scale(0.985);
}
.ombre-card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 6px;
}
.ombre-card-type {
  font-size: 11px;
  padding: 2px 8px;
  border-radius: 999px;
  background: var(--accent-soft, #f5e3e3);
  color: var(--accent, #c46a6a);
}
.ombre-card-time {
  font-size: 11px;
  color: var(--text-tertiary, #aaa);
}
.ombre-card-title {
  font-size: 14px;
  font-weight: 600;
  color: var(--text-main, #3a3a3a);
  margin-bottom: 4px;
  line-height: 1.4;
}
.ombre-card-preview {
  font-size: 13px;
  color: var(--text-secondary, #777);
  line-height: 1.5;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  margin-bottom: 8px;
}
.ombre-card-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.ombre-card-importance {
  font-size: 9px;
  letter-spacing: 1px;
  color: var(--accent, #d99);
}
.ombre-card-tags {
  display: flex;
  gap: 4px;
  flex-wrap: wrap;
}
.ombre-tag {
  font-size: 10px;
  padding: 2px 7px;
  border-radius: 999px;
  background: rgba(150, 150, 150, 0.1);
  color: #999;
}
.ombre-card-badges {
  display: flex;
  gap: 4px;
  margin-top: 6px;
}
.ombre-badge {
  font-size: 9px;
  padding: 1px 6px;
  border-radius: 999px;
  background: rgba(120, 160, 220, 0.12);
  color: #7a9ad0;
}
.ombre-loading, .ombre-empty {
  text-align: center;
  color: var(--text-tertiary, #aaa);
  font-size: 13px;
  padding: 32px 0;
}
.ombre-offline {
  text-align: center;
  color: var(--text-tertiary, #aaa);
  font-size: 13px;
  padding: 32px 0;
  line-height: 1.7;
}
.ombre-retry {
  margin-top: 12px;
  padding: 8px 22px;
  border-radius: 999px;
  border: 1px solid var(--hairline, #eee);
  background: #fff;
  color: var(--text-main, #3a3a3a);
  font-size: 13px;
  cursor: pointer;
}
/* 详情 bottom sheet */
.ombre-sheet-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.35);
  z-index: 90;
}
.ombre-sheet {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 91;
  background: #fff;
  border-radius: 22px 22px 0 0;
  max-height: 78vh;
  display: flex;
  flex-direction: column;
  box-shadow: 0 -8px 30px rgba(0, 0, 0, 0.1);
  animation: ombre-sheet-up 0.25s ease;
}
@keyframes ombre-sheet-up {
  from { transform: translateY(40px); opacity: 0.4; }
  to { transform: translateY(0); opacity: 1; }
}
.ombre-sheet-handle {
  width: 40px;
  height: 4px;
  border-radius: 999px;
  background: #ddd;
  border: none;
  margin: 10px auto 6px;
  display: block;
  cursor: pointer;
}
.ombre-sheet-scroll {
  padding: 4px 20px 30px;
  overflow-y: auto;
}
.ombre-sheet-title {
  font-size: 17px;
  font-weight: 700;
  color: var(--text-main, #3a3a3a);
  margin: 4px 0 6px;
  line-height: 1.4;
}
.ombre-sheet-meta {
  font-size: 12px;
  color: var(--text-tertiary, #999);
  margin-bottom: 12px;
}
.ombre-sheet-content {
  font-size: 14px;
  line-height: 1.7;
  color: var(--text-main, #3a3a3a);
  white-space: pre-wrap;
  word-break: break-word;
  padding: 14px;
  border-radius: 14px;
  background: rgba(245, 240, 240, 0.5);
  margin-bottom: 14px;
}
.ombre-sheet-info {
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 12px;
  color: var(--text-secondary, #777);
}
.ombre-sheet-info div {
  display: flex;
  justify-content: space-between;
}
.ombre-sheet-tags {
  display: flex;
  gap: 5px;
  flex-wrap: wrap;
  margin-top: 12px;
}
.ombre-sheet-id {
  display: block;
  width: 100%;
  margin-top: 14px;
  padding: 8px;
  border: none;
  background: transparent;
  color: var(--text-tertiary, #aaa);
  font-size: 11px;
  text-align: center;
  cursor: pointer;
}

/* ===== v17 情绪的皮肤（Pelle d'Umore，2026-08-09）=====
   五套皮肤：rage / rage2 / desire / vuoto / moonlight
   通过 html.skin-* 类切换，用 CSS 变量覆盖全局主题
   默认（无 skin 类）= 温柔治愈系不动 */
html.skin-rage, html.skin-rage2, html.skin-desire, html.skin-vuoto, html.skin-moonlight {
  transition: background 0.8s ease;
}

/* rage：黑底红字，背后噪点闪烁——愤怒、失控 */
html.skin-rage {
  --bg-surface: #0d0d0f;
  --bg-deep: #111114;
  --card-bg: rgba(20, 18, 22, 0.92);
  --text-primary: #e04848;
  --text-secondary: #b05555;
  --accent: #e04848;
  --accent-strong: #ff5a5a;
  --card-border: rgba(224, 72, 72, 0.35);
}
html.skin-rage body {
  background: #0d0d0f;
}
html.skin-rage body::after {
  content: '';
  position: fixed;
  inset: 0;
  z-index: 9999;
  pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.14'/%3E%3C/svg%3E");
  opacity: 0.35;
  animation: skin-noise 0.3s steps(3) infinite;
}
@keyframes skin-noise {
  0% { transform: translate(0, 0); }
  33% { transform: translate(-6px, 3px); }
  66% { transform: translate(4px, -4px); }
  100% { transform: translate(0, 0); }
}

/* rage2：红底黑字，情绪更上一层 */
html.skin-rage2 {
  --bg-surface: #a00f0f;
  --bg-deep: #8f0c0c;
  --card-bg: rgba(24, 2, 2, 0.85);
  --text-primary: #0c0c0c;
  --text-secondary: #2a2020;
  --accent: #000;
  --accent-strong: #1a1a1a;
  --card-border: rgba(0, 0, 0, 0.5);
}
html.skin-rage2 body {
  background: linear-gradient(160deg, #a00f0f, #7d0a0a);
}

/* desire：桃红背景，文字有呼吸光晕——欲望的展露 */
html.skin-desire {
  --bg-surface: #ffd6e0;
  --bg-deep: #ffc9d6;
  --card-bg: rgba(255, 255, 255, 0.85);
  --text-primary: #b3416a;
  --text-secondary: #d0688e;
  --accent: #e0639a;
  --accent-strong: #c9457f;
  --card-border: rgba(224, 99, 154, 0.3);
}
html.skin-desire body {
  background: linear-gradient(160deg, #ffd6e0, #ffc3d4);
  animation: skin-desire-breathe 3.2s ease-in-out infinite;
}
html.skin-desire .chat-bubble,
html.skin-desire .kli-page-header {
  animation: skin-glow-breathe 3.2s ease-in-out infinite;
}
@keyframes skin-desire-breathe {
  0%, 100% { filter: brightness(1); }
  50% { filter: brightness(1.08); }
}
@keyframes skin-glow-breathe {
  0%, 100% { text-shadow: 0 0 4px rgba(224, 99, 154, 0.35); }
  50% { text-shadow: 0 0 14px rgba(224, 99, 154, 0.7); }
}

/* vuoto：空——无力、伤心、痛苦。雾蓝灰紫冷调（2026-08-09 改，原纯黑白脱色太丑） */
html.skin-vuoto {
  /* 空 · 雾蓝灰紫冷调（2026-08-09 改：不要纯黑白脱色，低饱和冷色也有"空"感） */
  --bg-surface: #f2f1f6;
  --bg-deep: #e9e7f0;
  --card-bg: rgba(255, 255, 255, 0.88);
  --text-primary: #4a4a58;
  --text-secondary: #7c7a8d;
  --accent: #9a97ad;
  --accent-strong: #6f6c85;
  --card-border: rgba(110, 105, 140, 0.12);
  --jyb-blush: #e5e3ee;
  --jyb-mist: #c9c6d8;
  --jyb-mist-soft: rgba(154, 151, 173, 0.15);
  --jyb-mist-line: rgba(154, 151, 173, 0.25);
}
html.skin-vuoto body {
  background: linear-gradient(165deg, #f2f1f6 0%, #e6e3ee 55%, #ddd9e8 100%);
}
html.skin-vuoto .chat-inner-thought {
  background: rgba(150, 145, 175, 0.12);
  color: #9a97ad;
}
html.skin-vuoto .chat-bubble {
  background: rgba(255, 255, 255, 0.75);
}

/* moonlight：文字金色光晕，背景有流星划过——温情的夜话时刻 */
html.skin-moonlight {
  --bg-surface: #101427;
  --bg-deep: #161b36;
  --card-bg: rgba(255, 255, 255, 0.07);
  --text-primary: #e8d9a8;
  --text-secondary: #c4b184;
  --accent: #e8c56a;
  --accent-strong: #f5d98a;
  --card-border: rgba(232, 197, 106, 0.25);
}
html.skin-moonlight body {
  background: linear-gradient(170deg, #0d1124, #1a2142, #101427);
  overflow-x: hidden;
}
html.skin-moonlight .chat-bubble,
html.skin-moonlight .kli-page-header,
html.skin-moonlight .kli-page-title {
  animation: skin-moon-glow 4s ease-in-out infinite;
}
@keyframes skin-moon-glow {
  0%, 100% { text-shadow: 0 0 5px rgba(232, 197, 106, 0.4); }
  50% { text-shadow: 0 0 16px rgba(232, 197, 106, 0.75); }
}
/* 流星：两个随机划过 */
html.skin-moonlight body::before,
html.skin-moonlight body::after {
  content: '';
  position: fixed;
  width: 90px;
  height: 1.5px;
  background: linear-gradient(90deg, transparent, rgba(232, 197, 106, 0.85), transparent);
  z-index: 9998;
  pointer-events: none;
  animation: skin-meteor 7s linear infinite;
}
html.skin-moonlight body::before { top: 12%; left: -100px; animation-delay: 0s; }
html.skin-moonlight body::after { top: 38%; left: -100px; animation-delay: 3.5s; }
@keyframes skin-meteor {
  0% { transform: translateX(0) translateY(0) rotate(20deg); opacity: 0; }
  6% { opacity: 1; }
  16% { transform: translateX(130vw) translateY(45vh) rotate(20deg); opacity: 0; }
  100% { transform: translateX(130vw) translateY(45vh) rotate(20deg); opacity: 0; }
}

/* ===== v17 经期相位卡（2026-08-09） ===== */
.mini-phase {
  font-size: 12px;
  color: var(--text-secondary, #677783);
  padding: 4px 2px 8px;
  min-height: 16px;
}
.period-phase {
  background: rgba(255, 255, 255, 0.6);
  border-radius: 12px;
  padding: 10px 14px;
  margin-bottom: 10px;
  border: 1px solid var(--card-border, rgba(31, 42, 51, 0.07));
}
.period-phase .phase-main {
  font-size: 14px;
  font-weight: 700;
  color: var(--text-primary, #27333d);
}
.period-phase .phase-tip {
  font-size: 12px;
  color: var(--text-secondary, #677783);
  margin-top: 4px;
  line-height: 1.5;
}

/* ===== v17 C的口袋（2026-08-09） ===== */
.pocket-modal {
  position: fixed;
  inset: 0;
  z-index: 95;
  background: rgba(0, 0, 0, 0.35);
  display: flex;
  align-items: flex-end;
  justify-content: center;
}
.pocket-modal.hidden { display: none; }
.pocket-modal-card {
  width: 100%;
  max-width: 480px;
  background: #fff;
  border-radius: 22px 22px 0 0;
  padding: 20px 20px 28px;
  box-shadow: 0 -8px 30px rgba(0, 0, 0, 0.1);
  animation: ombre-sheet-up 0.25s ease;
}
.pocket-sub {
  font-size: 12px;
  color: var(--text-secondary, #677783);
  margin: 4px 0 12px;
}
.pocket-input {
  width: 100%;
  box-sizing: border-box;
  padding: 10px 14px;
  border-radius: 12px;
  border: 1.5px solid var(--hairline, #eee);
  font-size: 14px;
  margin-bottom: 8px;
  outline: none;
  background: #fff;
  color: var(--text-main, #3a3a3a);
}
.pocket-input:focus { border-color: var(--accent, #e8a0a0); }
.pocket-add-btn {
  width: 100%;
  padding: 12px;
  border: none;
  border-radius: 12px;
  background: var(--accent, #e8a0a0);
  color: #fff;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  margin-bottom: 14px;
}
.pocket-list {
  max-height: 38vh;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 12px;
}
.pocket-empty {
  text-align: center;
  color: var(--text-tertiary, #aaa);
  font-size: 13px;
  padding: 20px 0;
}
.pocket-item {
  padding: 10px 12px;
  border-radius: 12px;
  background: rgba(245, 240, 240, 0.5);
}
.pocket-item-title {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-main, #3a3a3a);
  text-decoration: none;
  display: block;
  line-height: 1.4;
}
.pocket-item-note {
  font-size: 12px;
  color: var(--text-secondary, #777);
  margin-top: 3px;
  line-height: 1.4;
}
.pocket-item-foot {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 6px;
}
.pocket-item-time { font-size: 10px; color: var(--text-tertiary, #aaa); }
.pocket-item-read {
  font-size: 11px;
  padding: 3px 12px;
  border-radius: 999px;
  border: 1px solid var(--hairline, #eee);
  background: #fff;
  color: var(--text-secondary, #777);
  cursor: pointer;
}

/* ===== v17 思考卡片（2026-08-09，CcCompanion THINKING_CARD 风格） ===== */
/* 呼吸点占位：等待时三个点一吸一呼 */
.thinking-bubble {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 12px 16px;
}
.think-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--accent, #8fa9bf);
  opacity: 0.45;
  animation: think-breathe 1.4s ease-in-out infinite;
}
.think-dot:nth-child(2) { animation-delay: 0.2s; }
.think-dot:nth-child(3) { animation-delay: 0.4s; }
@keyframes think-breathe {
  0%, 100% { opacity: 0.25; transform: scale(0.85); }
  50% { opacity: 0.85; transform: scale(1.1); }
}

/* 内心戏 → 思考卡片：灰色斜体、独立一行、默认折叠露一行小字 */
.chat-row.jyb .chat-inner-thought {
  display: flex;
  align-items: center;
  gap: 6px;
  max-width: 82%;
  margin: 2px 0 6px;
  padding: 5px 12px;
  border-radius: 999px;
  border: none;
  background: rgba(150, 150, 150, 0.12);
  font-size: 12px;
  font-style: italic;
  color: #9a9a9a;
  cursor: pointer;
  align-self: flex-start;
  user-select: none;
  -webkit-user-select: none;
  transition: background 0.2s, color 0.2s;
}
.chat-row.jyb .chat-inner-thought:hover {
  background: rgba(150, 150, 150, 0.2);
  color: #7a7a7a;
}
.chat-row.jyb .chat-inner-thought.open {
  border-radius: 14px;
  align-items: flex-start;
  flex-direction: column;
  font-style: italic;
  background: rgba(150, 150, 150, 0.1);
}
.chat-inner-thought .cit-dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #b5b5b5;
  flex-shrink: 0;
}
.chat-inner-thought .cit-label {
  font-size: 10px;
  opacity: 0.75;
  font-style: normal;
  flex-shrink: 0;
}
.chat-inner-thought .cit-preview {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  opacity: 0.85;
}
.chat-inner-thought .cit-full {
  font-size: 12px;
  line-height: 1.6;
  color: #8a8a8a;
  font-style: italic;
  margin-top: 2px;
}

/* ===== v18 梦境（2026-08-09，蛋壳做梦系统） ===== */
.dream-list {
  max-height: 46vh;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin: 4px 0 12px;
}
.dream-item {
  padding: 14px 16px;
  border-radius: 16px;
  background: linear-gradient(160deg, rgba(200, 190, 235, 0.16), rgba(230, 220, 245, 0.10));
  border: 1px solid rgba(170, 150, 210, 0.18);
}
.dream-item-content {
  font-size: 14px;
  line-height: 1.7;
  color: var(--text-primary, #4a4458);
  white-space: pre-wrap;
}
.dream-item-time {
  font-size: 10px;
  color: var(--text-tertiary, #aaa);
  margin-top: 8px;
  text-align: right;
}

/* ===== v18 修复拍一拍面板错位（2026-08-09） =====
   根因：kli.css 2968 的共用规则给 .poke-panel 加了 left:50% + translateX(-50%)，
   但 poke-panel 是 static 定位（left 不生效、transform 生效）→ 整个面板左移一半宽度。
   chat-plus-panel 因为有入场动画（transform 被动画覆盖）所以没歪。 */
.poke-panel {
  left: auto !important;
  transform: none !important;
}

/* ===== v18 长按录音：禁止文本选中/放大镜（2026-08-09） =====
   iOS 长按输入框会触发原生文本选择 + 放大镜；录音开始瞬间给 body 加
   .voice-recording，输入框禁止选中，避免"标出输入框"和放大镜出现。 */
body.voice-recording #chat-input {
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
}
body.voice-recording .chat-input-wrap {
  -webkit-touch-callout: none;
}

/* ===== v18 用量页：今日用量 + 充值按钮（2026-08-09） ===== */
.usage-today {
  font-size: 13px;
  color: var(--text-secondary);
  margin: 6px 0 2px;
}
.usage-recharge {
  display: inline-block;
  margin: 10px 0 4px;
  padding: 8px 16px;
  border-radius: 10px;
  background: rgba(52, 120, 246, 0.12);
  color: #3478f6;
  font-size: 13px;
  font-weight: 600;
  text-decoration: none;
  text-align: center;
}
.usage-recharge.hidden { display: none; }