:root {
  --composer-height: 156px;
  --bg: #ffffff;
  --text: #0d0d0d;
  --text-2: #6e6e73;
  --text-3: #a1a1a6;
  --bubble: #f4f4f4;
  --line: rgba(0, 0, 0, 0.08);
  --line-strong: rgba(0, 0, 0, 0.14);
  --tint: #0d0d0d;

  --c-money: #0f6e56;
  --c-food: #8f5a08;
  --c-health: #185fa5;
  --c-life: #534ab7;
  --c-todo: #a32d2d;

  --nav-h: 48px;
  /* 化身尺寸（设置项 avatar_size 会覆盖；默认 40px）。
     顶栏 / 底栏 / 消息对齐三处共用，保持严格一致。 */
  --avatar-size: 40px;

  /* 对话列最大宽度。手机默认 100% = 无操作，保持原有整宽布局；
     桌面（≥900px）覆盖为固定像素，把聊天回合 / 分隔 / 待确认 / 主动消息 /
     输入区收敛到居中对话列。列宽只此一处控制，见文件末尾「桌面居中对话列」。 */
  --chat-col-max: 100%;
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }

/* 修复：hidden 属性必须强制隐藏。否则 .type-row 等元素的 display:flex 会覆盖
   UA 默认的 [hidden]{display:none}，导致本应隐藏的元素一直显示。 */
[hidden] { display: none !important; }

html, body {
  margin: 0;
  padding: 0;
  height: 100%;
}

body {
  display: flex;
  flex-direction: column;
  height: 100vh;
  height: 100dvh;
  overflow: hidden;
  background: var(--bg);
  color: var(--text);
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue",
               "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
  font-size: 16px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

button { font-family: inherit; font-size: inherit; border: none; background: none; color: inherit; cursor: pointer; }
h1, h2, h3, p { margin: 0; }

/* ---------------------------------------------------------- 顶栏 */
.nav {
  flex-shrink: 0;
  padding-top: env(safe-area-inset-top);
  background: rgba(255, 255, 255, 0.82);
  backdrop-filter: saturate(180%) blur(20px);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  border-bottom: 0.5px solid var(--line);
  z-index: 20;
}
.nav-inner {
  height: var(--nav-h);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 14px;
}
.nav-brand {
  user-select: none;
}
.nav-actions { display: flex; align-items: center; gap: 6px; }
.nav-btn {
  width: 34px;
  height: 34px;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 9px;
  color: var(--text-2, #52525b);
  background: transparent;
  border: none;
  cursor: pointer;
  transition: all 0.15s ease;
}
.nav-btn:hover {
  background: var(--surface-2, rgba(0, 0, 0, 0.05));
  color: var(--text, #18181b);
}
.nav-btn:active {
  background: var(--bubble, rgba(0, 0, 0, 0.09));
  transform: scale(0.94);
}
.nav-btn svg {
  display: block;
  width: 19px;
  height: 19px;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
  fill: none;
}
.nav-btn:disabled { opacity: 0.35; }

/* ---------------------------------------------------------- 对话流 */
.feed {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-y: contain;
  padding: 12px 14px 52px 0;
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.feed::-webkit-scrollbar {
  display: none;
  width: 0;
  height: 0;
}

.empty {
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 0 32px;
  text-align: center;
}
.hero-avatar-host {
  width: 108px;
  height: 108px;
  margin-bottom: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: transform 0.25s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
.hero-avatar-host:hover {
  transform: scale(1.05);
}
.hero-avatar-host:active {
  transform: scale(0.95);
}
.empty h2 { font-size: 30px; font-weight: 600; letter-spacing: -0.6px; margin-bottom: 6px; }
.empty p { font-size: 16px; color: var(--text-3); margin-bottom: 26px; }
.chips { display: flex; flex-direction: column; gap: 8px; width: 100%; max-width: 340px; }
.chip {
  padding: 11px 16px;
  border-radius: 14px;
  background: var(--bubble);
  font-size: 14px;
  color: var(--text-2);
  text-align: left;
  transition: background 0.15s;
}
.chip:active { background: #ebebeb; }

.day-sep {
  text-align: center;
  font-size: 12px;
  color: var(--text-3);
  padding: 14px 0 6px;
}
.chat-time-sep {
  text-align: center;
  font-size: 12px;
  color: var(--text-3);
  padding: 8px 0 6px;
  user-select: none;
  letter-spacing: 0.3px;
  opacity: 0.85;
}

/* 用户消息：右侧浅灰气泡 */
.msg-user {
  display: flex;
  justify-content: flex-end;
  padding: 3px 16px;
}
.msg-user .bubble {
  max-width: 76%;
  background: var(--bubble);
  border-radius: 18px;
  padding: 9px 14px;
  font-size: 16px;
  word-break: break-word;
  white-space: pre-wrap;
}
/* 纯图片气泡：去掉过重灰色衬底与留白，呈现精致微缩卡片 */
.msg-user .bubble:has(> img:only-child) {
  padding: 2px;
  background: transparent;
  border-radius: 12px;
}
.msg-user .bubble:has(> img:only-child) img {
  margin: 0;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.12);
}
/* 用户消息图片尺寸收敛（主流 IM 紧凑气泡规格，防止单图吃满屏幕） */
.msg-user .bubble img {
  max-width: 180px;
  max-height: 200px;
  width: auto;
  height: auto;
  object-fit: cover;
  border-radius: 10px;
  display: block;
  margin: 2px 0 4px;
  cursor: zoom-in;
  transition: transform 0.18s ease, filter 0.18s ease;
}
.msg-user .bubble img:hover {
  filter: brightness(0.96);
}
/* 聊天流图片：懒加载占位（与缩略图同比例，避免加载前后剧烈抖动跳跃） */
.msg-user .bubble img.turn-media {
  min-width: 110px;
  min-height: 80px;
  background: rgba(0, 0, 0, 0.04);
}
.msg-user .bubble img.turn-media.is-loaded {
  min-width: 0;
  min-height: 0;
  background: transparent;
}
/* 图片已被清理（如记录被删）或数据缺失：直接收起，不留占位 */
.msg-user .bubble img.turn-media.is-missing {
  display: none;
}

@media (max-width: 600px) {
  .msg-user .bubble img {
    max-width: 140px;
    max-height: 160px;
  }
}

/* AI 消息：纯净极简流排版 */
/* AI 消息：纯净极简流排版与微信式伴侣头像 */
.msg-ai {
  padding: 6px 16px 10px;
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  gap: 12px;
  width: 100%;
  box-sizing: border-box;
}
.ai-content-col {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

/* 表情对齐（设置项 avatar_align）：above = 化身出现在消息**上方**（2026-09-11 起为默认，
   left 可在设置切回）。
   间距节奏（2026-09-11 形式讨论定稿，方案 A：保持 40px 全局一档，只调间距）：
   - gap 12 → 8：纵向咬合，40px 头像「坐」在文字上方而不是飘着
   - padding-top 6 → 8：用户气泡 → 灵伴说话的换挡，多一拍呼吸
   - .chat-portal-viewport 的 margin-top 清零：-3px 是左模式「与首行文字中线对齐」的遗产，
     above 下只会让头像更悬浮（视觉间距 12 变 15） */
body.avatar-above .msg-ai {
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
  padding-top: 8px;
}
body.avatar-above .chat-portal-viewport {
  margin-top: 0;
}

/* 微信式聊天流最新消息伴侣宿主与传送门视口 */
.chat-portal-viewport {
  position: relative;
  width: var(--avatar-size);
  height: var(--avatar-size);
  flex-shrink: 0;
  margin-top: -3px; /* 向上微调，与首行文字中线对齐 */
  display: flex;
  align-items: center;
  justify-content: center;
}
.chat-latest-avatar-host {
  width: var(--avatar-size);
  height: var(--avatar-size);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  cursor: grab;
  touch-action: pan-y;
  user-select: none;
  transition: transform 0.25s cubic-bezier(0.175, 0.885, 0.32, 1.275), opacity 0.2s ease;
}
.chat-latest-avatar-host:hover {
  transform: scale(1.06);
}
.chat-latest-avatar-host:active,
.chat-latest-avatar-host.is-pressed {
  cursor: grabbing;
}

/* 统一传送门视口（物理裁切：超出边线部分严禁显示） */
.portal-clip-viewport {
  position: relative;
  width: var(--avatar-size);
  height: var(--avatar-size);
  overflow: hidden; /* 严格物理裁切 */
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* 底栏传送门外层容器 */
.bottom-portal-viewport {
  position: relative;
  width: var(--avatar-size);
  height: var(--avatar-size);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

/* 传送门次元边线（1.5px 发光细线） */
.portal-seam-line {
  position: absolute;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.2), var(--brand, #3b82f6) 50%, rgba(255, 255, 255, 0.2));
  box-shadow: 0 0 8px var(--brand, rgba(59, 130, 246, 0.5)), 0 0 2px #fff;
  border-radius: 1px;
  opacity: 0;
  pointer-events: none;
  z-index: 25;
  transition: opacity 0.2s ease, transform 0.2s ease;
}

/* 左侧垂直边线（用于聊天最新消息） */
.portal-seam-line.seam-left {
  left: 0;
  top: 0;
  bottom: 0;
  width: 2px;
  transform: scaleY(0);
}

/* 右侧垂直边线（用于悬浮伴侣位） */
.portal-seam-line.seam-right {
  right: 0;
  top: 0;
  bottom: 0;
  width: 2px;
  transform: scaleY(0);
}

/* 底部/顶部水平边线（用于顶栏与底栏） */
.portal-seam-line.seam-bottom {
  left: 0;
  right: 0;
  bottom: 0;
  height: 2px;
  transform: scaleX(0);
}

/* 边线展开激活态 */
.portal-seam-line.seam-active {
  opacity: 1;
  transform: scale(1);
}

/* 导航栏 Brand 切换与左上角传送门 */
.nav-brand {
  position: relative;
  display: flex;
  align-items: center;
  min-width: 70px;
  height: 32px;
}
.nav-title {
  font-size: 19px;
  font-weight: 600;
  letter-spacing: -0.4px;
  transition: opacity 0.22s ease, transform 0.22s ease;
}
.nav-title.nav-title-hidden {
  opacity: 0;
  transform: translateY(6px) scale(0.95);
  pointer-events: none;
}
.nav-portal-host {
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  display: inline-flex;
  align-items: center;
  cursor: pointer;
  touch-action: pan-y;
  user-select: none;
  z-index: 10;
}
.nav-avatar-host {
  width: var(--avatar-size);
  height: var(--avatar-size);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  cursor: grab;
  touch-action: none;
  user-select: none;
  transition: transform 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
.nav-avatar-host:hover {
  transform: scale(1.06);
}
.nav-avatar-host:active,
.nav-avatar-host.is-pressed {
  cursor: grabbing;
}

/* 底栏伴侣灵动岛容器：居中悬浮于输入框上方。
   --island-lift 控制抬升量（原为 -10px，与输入框重叠 10px；手机实测反馈偏低，改为上抬 2px）。
   微调只需改这一个变量。 */
.companion-island {
  --island-lift: 2px;
  position: absolute;
  bottom: calc(100% + var(--island-lift));
  left: 0;
  right: 0;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: 8px;
  pointer-events: none;
  z-index: 30;
  transition: all 0.28s cubic-bezier(0.16, 1, 0.3, 1);
}
.companion-island.has-capsule {
  gap: 10px;
}
.companion-island.has-capsule .bottom-avatar-host {
  transform: scale(0.92);
}

/* 底部常态化身容器（36px，与顶栏严格保持一致；留有呼吸微距，灵动悬浮） */
.bottom-avatar-host {
  position: relative;
  width: var(--avatar-size);
  height: var(--avatar-size);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  cursor: grab;
  pointer-events: auto;
  user-select: none;
  touch-action: none;
  margin-bottom: 0;
  transition: transform 0.25s cubic-bezier(0.175, 0.885, 0.32, 1.275), opacity 0.2s ease;
}
.bottom-avatar-host:hover {
  transform: scale(1.08);
}
.bottom-avatar-host:active,
.bottom-avatar-host.is-pressed {
  cursor: grabbing;
}

/* 待机微呼吸悬浮（赋予小精灵般的悬浮生命力） */
@keyframes avatarHoverFloat {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-2px); }
}
.bottom-avatar-host.is-idle {
  animation: avatarHoverFloat 2.8s ease-in-out infinite;
}

/* 传送门下潜/升起动画：上下左右全向支持 */
@keyframes avatarDiveDown {
  0% { transform: translateY(0) scale(1, 1); opacity: 1; }
  35% { transform: translateY(6px) scale(1.15, 0.7); opacity: 0.95; }
  100% { transform: translateY(38px) scale(0.35, 0.12); opacity: 0; }
}
.avatar-diving {
  animation: avatarDiveDown 0.22s cubic-bezier(0.4, 0, 0.2, 1) forwards !important;
  pointer-events: none;
}

@keyframes avatarRiseUp {
  0% { transform: translateY(38px) scale(0.35, 0.15); opacity: 0; }
  55% { transform: translateY(-3px) scale(0.95, 1.1); opacity: 1; }
  80% { transform: translateY(1px) scale(1.02, 0.98); }
  100% { transform: translateY(0) scale(1, 1); opacity: 1; }
}
.avatar-rising {
  animation: avatarRiseUp 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards !important;
}

/* 从左侧细线后钻出（聊天最新消息入场） */
@keyframes portalEmergeLeft {
  0% { transform: translateX(-42px) scale(0.4, 1.2); opacity: 0; }
  60% { transform: translateX(3px) scale(1.06, 0.96); opacity: 1; }
  100% { transform: translateX(0) scale(1, 1); opacity: 1; }
}
.portal-emerge-left {
  animation: portalEmergeLeft 0.32s cubic-bezier(0.175, 0.885, 0.32, 1.25) forwards !important;
}

/* 向左侧细线钻入吞没（聊天最新消息左滑离场） */
@keyframes portalDiveLeft {
  0% { transform: translateX(0) scale(1, 1); opacity: 1; }
  35% { transform: translateX(-8px) scale(0.9, 1.12); opacity: 0.95; }
  100% { transform: translateX(-42px) scale(0.35, 1.25); opacity: 0; }
}
.portal-dive-left {
  animation: portalDiveLeft 0.22s cubic-bezier(0.4, 0, 0.2, 1) forwards !important;
  pointer-events: none;
}

/* 从右侧细线后向左钻出（悬浮伴侣位入场） */
@keyframes portalEmergeRight {
  0% { transform: translateX(46px) scale(0.4, 1.2); opacity: 0; }
  60% { transform: translateX(-4px) scale(1.06, 0.96); opacity: 1; }
  100% { transform: translateX(0) scale(1, 1); opacity: 1; }
}
.portal-emerge-right {
  animation: portalEmergeRight 0.32s cubic-bezier(0.175, 0.885, 0.32, 1.25) forwards !important;
}

/* 向右侧细线钻入离场 */
@keyframes portalDiveRight {
  0% { transform: translateX(0) scale(1, 1); opacity: 1; }
  35% { transform: translateX(8px) scale(0.9, 1.12); opacity: 0.95; }
  100% { transform: translateX(46px) scale(0.35, 1.25); opacity: 0; }
}
.portal-dive-right {
  animation: portalDiveRight 0.22s cubic-bezier(0.4, 0, 0.2, 1) forwards !important;
  pointer-events: none;
}

.bottom-avatar-host svg,
.nav-avatar-host svg,
.chat-latest-avatar-host svg,
.floating-avatar-host svg,
.hero-avatar-host svg {
  width: 100% !important;
  height: 100% !important;
  display: block;
}

/* 头像迷你状态气泡：居中贴合于化身正上方 */
.avatar-mini-popover {
  position: absolute;
  bottom: calc(100% + 10px);
  left: 50%;
  transform: translateX(-50%) scale(1);
  z-index: 120;
  min-width: 150px;
  max-width: 260px;
  padding: 8px 12px;
  background: var(--surface-1, #ffffff);
  color: var(--text, #111827);
  border: 1px solid var(--line, rgba(0, 0, 0, 0.1));
  border-radius: 12px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
  font-size: 13px;
  line-height: 1.4;
  pointer-events: none;
  opacity: 1;
  transition: opacity 0.25s ease, transform 0.25s cubic-bezier(0.16, 1, 0.3, 1);
  white-space: normal;
  word-break: break-word;
  text-align: center;
}
.avatar-mini-popover::after {
  content: '';
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  border: 6px solid transparent;
  border-top-color: var(--surface-1, #ffffff);
}
.avatar-mini-popover.popover-out {
  opacity: 0;
  transform: translateX(-50%) translateY(4px) scale(0.92);
}
[data-theme="dark"] .avatar-mini-popover,
body.dark .avatar-mini-popover {
  background: #27272a;
  color: #f4f4f5;
  border-color: rgba(255, 255, 255, 0.12);
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.4);
}
[data-theme="dark"] .avatar-mini-popover::after,
body.dark .avatar-mini-popover::after {
  border-top-color: #27272a;
}
.ai-text { font-size: 16px; color: var(--text); word-break: break-word; }

/* 拆解出的记录卡片：紧凑自适应卡片面板，杜绝极端宽屏拉扯 */
.rec-lines {
  margin-top: 8px;
  display: inline-flex;
  flex-direction: column;
  gap: 3px;
  max-width: 100%;
  width: fit-content;
  min-width: 220px;
  background: rgba(0, 0, 0, 0.025);
  border: 1px solid rgba(0, 0, 0, 0.06);
  border-radius: 12px;
  padding: 6px 10px;
  box-sizing: border-box;
}
body.dark .rec-lines {
  background: rgba(255, 255, 255, 0.035);
  border-color: rgba(255, 255, 255, 0.08);
}
.rec-line {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  padding: 4px 6px;
  margin: 0;
  border-radius: 6px;
  min-width: 0;
  cursor: pointer;
  transition: background 0.15s ease, opacity 0.15s ease;
  user-select: none;
  -webkit-user-select: none;
}
.rec-line:hover, .rec-line:active {
  background: rgba(0, 0, 0, 0.04);
}
body.dark .rec-line:hover, body.dark .rec-line:active {
  background: rgba(255, 255, 255, 0.06);
}
.rec-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  flex-shrink: 0;
  transform: translateY(-1px);
}
.rec-dot.money  { background: var(--c-money); }
.rec-dot.food   { background: var(--c-food); }
.rec-dot.health { background: var(--c-health); }
.rec-dot.life   { background: var(--c-life); }
.rec-dot.todo   { background: var(--c-todo); }
.rec-body { flex: 1; min-width: 0; word-break: break-word; }
.rec-body b { font-weight: 600; }
.rec-sub { color: var(--text-3); font-size: 12px; }
.rec-time {
  color: var(--text-3);
  font-size: 12px;
  margin-left: 14px;
  flex-shrink: 0;
  opacity: 0.8;
  font-variant-numeric: tabular-nums;
}
.rec-line.done .rec-body { color: var(--text-3); text-decoration: line-through; }
.rec-edit {
  display: none !important;
}
/* Memory/topic controls must be reachable on touch devices; record-row edit hiding does not apply. */
.memory-action { display: inline-flex !important; align-items: center; justify-content: center; min-height: 40px; padding: 0 10px; border: 1px solid var(--line); border-radius: 10px; color: var(--text); background: var(--bg); font: inherit; font-size: 13px; }
.memory-action:focus-visible { outline: 2px solid var(--c-health); outline-offset: 2px; }
.memory-action:disabled { opacity: .5; }
.memory-row { flex-wrap: wrap; gap: 8px; }
.memory-row > span { flex: 1 1 155px; min-width: 0; overflow-wrap: anywhere; }
.memory-row > b { display: flex; align-items: center; justify-content: flex-end; flex-wrap: wrap; gap: 5px; flex: 1 1 130px; }

.rec-note {
  margin-top: 6px;
  font-size: 13px;
  color: var(--text-3);
  line-height: 1.5;
}
.rec-note .basis {
  display: block;
  margin-top: 3px;
  font-size: 12px;
  opacity: 0.8;
  word-break: break-all;
}

/* 待确认操作条 */
.ai-actions {
  display: flex;
  gap: 16px;
  margin-top: 10px;
  align-items: center;
}
.ai-actions button {
  font-size: 14px;
  color: var(--text-2);
  padding: 4px 0;
}
.ai-actions .primary { color: var(--text); font-weight: 500; }
.ai-actions button:active { opacity: 0.5; }

/* 思考指示器 */
.typing { display: flex; gap: 4px; padding: 8px 0; }
.typing i {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--text-3);
  animation: blink 1.3s infinite;
}
.typing i:nth-child(2) { animation-delay: 0.2s; }
.typing i:nth-child(3) { animation-delay: 0.4s; }
@keyframes blink {
  0%, 60%, 100% { opacity: 0.28; }
  30% { opacity: 1; }
}

/* 总结卡片：保持极简，不用重边框 */
.summary {
  margin-top: 8px;
  padding: 12px 14px;
  background: var(--bubble);
  border-radius: 14px;
}
.summary h4 { font-size: 15px; font-weight: 600; margin-bottom: 6px; line-height: 1.45; }
.summary ul { margin: 0; padding-left: 17px; font-size: 14px; color: var(--text-2); }
.summary li { margin-bottom: 5px; }
.summary .ev { display: block; font-size: 12px; color: var(--text-3); }
.summary .caveat { margin-top: 6px; font-size: 12px; color: var(--text-3); font-style: italic; }
.summary .usage { margin-top: 8px; font-size: 11px; color: var(--text-3); }

/* ---------------------------------------------------------- 输入区 */
.composer {
  position: relative;
  flex-shrink: 0;
  padding-bottom: env(safe-area-inset-bottom);
  background: var(--bg);
  border-top: none;
  z-index: 25;
}

/* 灵动智能胶囊：在 companion-island 内部流式居中或并排 */
.companion-island .smart-capsule,
.companion-island .suggest-pill,
.smart-capsule,
.suggest-pill {
  position: relative;
  top: 0;
  left: 0;
  transform: none;
  height: 30px;
  line-height: 30px;
  margin-bottom: 5px;
  max-width: 230px;
  padding: 0 12px;
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.94);
  border: 0.5px solid rgba(0, 0, 0, 0.08);
  box-shadow: 0 3px 12px rgba(0, 0, 0, 0.07), 0 1px 3px rgba(0, 0, 0, 0.03);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  font-size: 12.5px;
  font-weight: 500;
  color: var(--text, #0d0d0d);
  cursor: pointer;
  z-index: 25;
  white-space: nowrap;
  overflow: hidden;
  user-select: none;
  pointer-events: auto;
  animation: pillSlideUp 0.2s cubic-bezier(0.16, 1, 0.3, 1);
  transition: transform 0.15s, box-shadow 0.15s, opacity 0.2s ease;
}
.companion-island .smart-capsule:active,
.companion-island .suggest-pill:active,
.smart-capsule:active,
.suggest-pill:active {
  transform: scale(0.96);
}

.capsule-dot,
.pill-dot,
.timeline-pill-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  box-sizing: border-box;
  flex-shrink: 0;
  background: #007aff;
}
.capsule-dot.dot-white,
.timeline-pill-dot.dot-white {
  background: #ffffff;
  border: 1.2px solid var(--text-2, #6e6e73);
  box-shadow: 0 0 2px rgba(0, 0, 0, 0.12);
}
.capsule-dot.dot-black,
.timeline-pill-dot.dot-black {
  background: var(--text, #0d0d0d);
}
.capsule-dot.dot-gray,
.timeline-pill-dot.dot-gray {
  background: var(--text-3, #a1a1a6);
}
.capsule-dot.dot-blue {
  background: #007aff;
  box-shadow: 0 0 6px rgba(0, 122, 255, 0.5);
}
.capsule-dot.dot-orange {
  background: #ff9500;
  box-shadow: 0 0 6px rgba(255, 149, 0, 0.5);
}

.capsule-text,
.suggest-pill .pill-text,
.timeline-pill-text {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 175px;
  letter-spacing: -0.1px;
}

.capsule-action {
  border: none;
  background: transparent;
  color: #007aff;
  font-weight: 600;
  font-size: 11.5px;
  cursor: pointer;
  padding: 0 2px;
  flex-shrink: 0;
}
.capsule-action:active {
  opacity: 0.7;
}

.capsule-close,
.pill-close {
  border: none;
  background: transparent;
  color: var(--text-3, #8e8e93);
  font-size: 14px;
  line-height: 1;
  padding: 0 0 0 2px;
  cursor: pointer;
}
@keyframes pillSlideUp {
  from { opacity: 0; transform: translateY(6px) scale(0.96); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

/* ChatGPT iOS 风格一体化胶囊输入栏 */
.gpt-composer {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 8px 12px 10px;
  padding: 4px 6px 4px 10px;
  background: var(--bubble);
  border-radius: 28px;
  border: 0.5px solid rgba(0, 0, 0, 0.06);
  transition: border-color 0.15s, background 0.15s;
}
.gpt-composer:focus-within {
  border-color: rgba(0, 0, 0, 0.15);
}

.composer-action-btn {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: none;
  color: var(--text-2);
  flex-shrink: 0;
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
}
.composer-action-btn:active {
  background: rgba(0, 0, 0, 0.08);
  color: var(--text);
}
.composer-action-btn.recording,
.composer-action-btn.dictating {
  color: #ff3b30;
  animation: micPulse 1.2s infinite ease-in-out;
}
.composer-action-btn.dictating { background: rgba(255, 59, 48, 0.1); border-radius: 50%; }
@media (prefers-reduced-motion: reduce) { .composer-action-btn.dictating { animation: none; } }
@keyframes micPulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.15); }
}

.send-btn-round {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  border: none;
  background: #007aff;
  color: #fff;
  cursor: pointer;
  transition: transform 0.15s, opacity 0.15s, background 0.15s;
}
.send-btn-round:disabled {
  background: rgba(0, 0, 0, 0.12);
  color: rgba(255, 255, 255, 0.8);
  cursor: not-allowed;
}
.send-btn-round:not(:disabled):active {
  transform: scale(0.92);
}

.input-wrap {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  padding: 6px 4px;
}
.input-wrap textarea {
  width: 100%;
  border: none;
  outline: none;
  background: transparent;
  resize: none;
  font-family: inherit;
  font-size: 16px;
  line-height: 1.4;
  color: var(--text);
  max-height: 120px;
  padding: 0;
  user-select: text;
}
.input-wrap textarea::placeholder {
  color: var(--text-3);
}

/* 微信式录音全屏浮层 */
.voice-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.25);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  z-index: 999;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}
.voice-card {
  width: 165px;
  height: 165px;
  border-radius: 22px;
  background: rgba(30, 30, 33, 0.88);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: #fff;
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.35);
  transition: background 0.2s, transform 0.2s;
}
.voice-card.cancel {
  background: rgba(220, 38, 38, 0.92);
  transform: scale(1.05);
}
.voice-mic-icon {
  font-size: 38px;
  margin-bottom: 8px;
}
.voice-wave {
  display: flex;
  gap: 4px;
  align-items: center;
  height: 20px;
  margin-bottom: 10px;
}
.voice-wave i {
  width: 3px;
  height: 6px;
  background: #fff;
  border-radius: 2px;
  animation: voiceWave 0.6s infinite ease-in-out alternate;
}
.voice-wave i:nth-child(2) { animation-delay: 0.12s; }
.voice-wave i:nth-child(3) { animation-delay: 0.24s; }
.voice-wave i:nth-child(4) { animation-delay: 0.36s; }
.voice-wave i:nth-child(5) { animation-delay: 0.48s; }
@keyframes voiceWave {
  from { height: 4px; }
  to { height: 20px; }
}
.voice-status {
  font-size: 15px;
  font-weight: 600;
  margin-bottom: 4px;
}
.voice-tip {
  font-size: 12px;
  color: rgba(255, 255, 255, 0.65);
}

/* 现代极简语音卡片体系：按钮在左侧外部，气泡纯粹高级 */
.voice-turn-container {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 6px;
  max-width: 84%;
}

.voice-bubble-row {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
}

/* 极简展开文字微按钮（气泡左侧外部） */
.voice-expand-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: 13px;
  background: var(--bg-card, rgba(0, 0, 0, 0.04));
  color: var(--text-2, #6e6e73);
  font-size: 12px;
  font-weight: 600;
  border: 0.5px solid var(--line, rgba(0, 0, 0, 0.08));
  cursor: pointer;
  user-select: none;
  transition: all 0.15s ease;
  line-height: 1;
}

[data-theme="dark"] .voice-expand-btn {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.08);
  color: var(--text-2, #a1a1a6);
}

.voice-expand-btn:hover {
  background: rgba(0, 0, 0, 0.08);
  color: var(--text, #0d0d0d);
  transform: scale(1.06);
}

[data-theme="dark"] .voice-expand-btn:hover {
  background: rgba(255, 255, 255, 0.15);
  color: #fff;
}

.voice-expand-btn:active {
  transform: scale(0.93);
}

.voice-expand-btn.active {
  background: var(--text, #0d0d0d);
  color: var(--bg, #fff);
  border-color: var(--text, #0d0d0d);
}

[data-theme="dark"] .voice-expand-btn.active {
  background: #fff;
  color: #000;
  border-color: #fff;
}

/* 极简纯粹语音播放胶囊气泡 */
.voice-pill-bubble {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  border-radius: 18px;
  background: var(--bubble);
  color: var(--text);
  cursor: pointer;
  user-select: none;
  transition: opacity 0.15s ease, transform 0.1s ease;
  min-width: 80px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
}

.voice-pill-bubble:hover {
  opacity: 0.92;
}

.voice-pill-bubble:active {
  transform: scale(0.97);
}

/* 展开的转写文字气泡卡片 */
.voice-transcribed-card {
  max-width: 100%;
  background: var(--bubble);
  border-radius: 18px;
  padding: 9px 14px;
  font-size: 15px;
  line-height: 1.55;
  color: var(--text);
  word-break: break-word;
  white-space: pre-wrap;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.03);
}

/* 播放/暂停极简微图标 */
.voice-play-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--text, #0d0d0d);
  color: var(--bg, #fff);
  flex-shrink: 0;
  transition: opacity 0.15s ease;
}

.voice-play-icon svg {
  display: block;
}

.voice-play-icon .icon-pause {
  display: none;
}

.voice-player-pill.playing .voice-play-icon .icon-play {
  display: none;
}

.voice-player-pill.playing .voice-play-icon .icon-pause {
  display: block;
}

/* 优雅声波波形柱 */
.voice-waveform {
  display: flex;
  align-items: center;
  gap: 2.5px;
  height: 14px;
  padding: 0 1px;
}

.voice-waveform .bar {
  width: 2px;
  background: var(--text-2, #6e6e73);
  border-radius: 1px;
  display: inline-block;
  opacity: 0.85;
  transition: height 0.15s ease, opacity 0.15s ease;
}

.voice-waveform .bar-1 { height: 6px; }
.voice-waveform .bar-2 { height: 13px; }
.voice-waveform .bar-3 { height: 8px; }
.voice-waveform .bar-4 { height: 11px; }

/* 播放时声波律动 */
.voice-player-pill.playing .voice-waveform .bar-1 {
  animation: voiceBarPulse 0.5s infinite alternate ease-in-out;
}
.voice-player-pill.playing .voice-waveform .bar-2 {
  animation: voiceBarPulse 0.45s 0.15s infinite alternate ease-in-out;
}
.voice-player-pill.playing .voice-waveform .bar-3 {
  animation: voiceBarPulse 0.6s 0.05s infinite alternate ease-in-out;
}
.voice-player-pill.playing .voice-waveform .bar-4 {
  animation: voiceBarPulse 0.5s 0.2s infinite alternate ease-in-out;
}

@keyframes voiceBarPulse {
  0% { height: 4px; opacity: 0.45; }
  100% { height: 14px; opacity: 1; }
}

/* 语音时长 */
.voice-duration {
  font-size: 12px;
  font-weight: 500;
  color: var(--text-2, #6e6e73);
  font-variant-numeric: tabular-nums;
  margin-left: 2px;
}

.img-chip {
  position: relative;
  margin: 8px 12px 0;
  width: fit-content;
}
.img-chip img {
  max-height: 110px;
  border-radius: 12px;
  display: block;
}
.img-chip button {
  position: absolute;
  top: -6px;
  right: -6px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.6);
  color: #fff;
  font-size: 15px;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
}

.type-row {
  display: flex;
  gap: 6px;
  padding: 8px 12px 0;
}
.type-opt {
  padding: 5px 12px;
  border-radius: 14px;
  background: var(--bubble);
  font-size: 13px;
  color: var(--text-2);
}
.type-opt.selected { background: var(--tint); color: #fff; }

/* ---------------------------------------------------------- 底部面板 */
.sheet-mask {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.32);
  z-index: 40;
}
.sheet {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 50;
  background: var(--bg);
  border-radius: 20px 20px 0 0;
  padding-bottom: env(safe-area-inset-bottom);
  box-shadow: 0 -6px 32px rgba(0, 0, 0, 0.16);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  max-height: 100dvh;
  transition: height 0.38s cubic-bezier(0.175, 0.885, 0.32, 1.14), border-radius 0.25s ease, transform 0.22s cubic-bezier(0.2, 0.9, 0.3, 1);
  animation: rise 0.24s cubic-bezier(0.32, 0.72, 0, 1);
}
.sheet.sheet-half {
  height: 68vh;
  border-radius: 20px 20px 0 0;
}
.sheet.sheet-full {
  height: 100vh;
  height: 100dvh;
  border-radius: 0;
}
.sheet:not(.sheet-half):not(.sheet-full) {
  max-height: 84vh;
}
@keyframes rise { from { transform: translateY(100%); } to { transform: translateY(0); } }
/* 退出方式统一为「右上角返回按钮」：不再提供下滑关闭与拖拽把手（手机实测反馈，
   下滑手势容易误触，且与列表滚动打架）。把手保留 DOM 但隐藏，避免动到既有绑定。 */
.sheet-handle { display: none !important; }

.sheet-close-btn {
  position: absolute;
  top: 10px;
  right: 12px;
  z-index: 6;
  width: 32px;
  height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: none;
  border-radius: 50%;
  background: transparent;
  color: var(--text-2);
  font-size: 16px;
  line-height: 1;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.sheet-close-btn:active {
  background: var(--line);
  color: var(--text);
}

.sheet-handle {
  width: 44px;
  height: 5px;
  border-radius: 3px;
  background: var(--line-strong, rgba(0, 0, 0, 0.2));
  margin: 10px auto 6px;
  flex-shrink: 0;
  cursor: grab;
  position: relative;
  touch-action: none;
}
.sheet-handle::before {
  content: '';
  position: absolute;
  inset: -12px -24px;
  cursor: grab;
}
.sheet-handle:active {
  cursor: grabbing;
  background: var(--text-2, rgba(0, 0, 0, 0.4));
}
.sheet-body {
  flex: 1;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: 12px 20px 24px;
  font-size: 15px;
}
.sheet-body h3 { font-size: 17px; font-weight: 600; margin-bottom: 12px; }

.kv {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  padding: 11px 0;
  border-bottom: 0.5px solid var(--line);
}
.kv:last-child { border-bottom: none; }
.kv span { color: var(--text-2); }
.kv b { font-weight: 500; }

.edit-form { margin-top: 16px; display: flex; flex-direction: column; gap: 10px; }
.edit-field { display: flex; align-items: center; gap: 12px; }
.edit-field span { width: 52px; flex-shrink: 0; font-size: 14px; color: var(--text-2); }
.edit-field input, .edit-field select {
  flex: 1;
  min-width: 0;
  border: none;
  outline: none;
  background: var(--bubble);
  border-radius: 10px;
  padding: 10px 12px;
  font-family: inherit;
  font-size: 15px;
  color: var(--text);
}
.edit-field input:focus, .edit-field select:focus { box-shadow: 0 0 0 2px var(--line-strong); }

.trace { margin-top: 18px; }
.trace h5 { font-size: 13px; color: var(--text-2); font-weight: 500; margin: 0 0 6px; }
.trace pre {
  background: var(--bubble);
  border-radius: 10px;
  padding: 10px 12px;
  font-size: 12px;
  font-family: ui-monospace, "SF Mono", Consolas, monospace;
  white-space: pre-wrap;
  word-break: break-all;
  color: var(--text-2);
  margin: 0;
}

/* 本机上下文预览（P3 最后一段）：窄屏安全，任何地方都不横向溢出 */
.ctx-preview-hint { color: var(--text-3); font-size: 13px; margin: 0 0 10px; }
.ctx-preview-inputrow { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.ctx-preview-input {
  flex: 1 1 150px;
  min-width: 0;
  border: none;
  outline: none;
  background: var(--bubble);
  border-radius: 10px;
  padding: 10px 12px;
  font-family: inherit;
  font-size: 15px;
  color: var(--text);
}
.ctx-preview-input:focus { box-shadow: 0 0 0 2px var(--line-strong); }
.ctx-preview-btn {
  flex: 0 0 auto;
  border: none;
  border-radius: 10px;
  padding: 10px 16px;
  background: var(--tint);
  color: var(--bg);
  font-family: inherit;
  font-size: 15px;
  cursor: pointer;
}
.ctx-preview-btn:active { opacity: 0.6; }
.ctx-preview-btn.ghost { background: var(--bubble); color: var(--text-2); }
.ctx-preview-out { margin-top: 12px; }
.ctx-preview-out:empty { margin-top: 0; }
.ctx-preview-result { font-size: 14px; min-width: 0; }
.ctx-preview-stat { color: var(--text-2); font-size: 13px; margin: 0 0 10px; }
.ctx-preview-note { color: var(--text); margin: 0 0 6px; }
.ctx-preview-h { font-size: 13px; color: var(--text-2); font-weight: 500; margin: 12px 0 6px; }
.ctx-preview-items { display: flex; flex-direction: column; gap: 10px; }
.ctx-preview-item {
  background: var(--bubble);
  border-radius: 10px;
  padding: 10px 12px;
  min-width: 0;
  overflow-wrap: anywhere;
}
.ctx-preview-item-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 6px;
  margin-bottom: 4px;
  min-width: 0;
}
.ctx-preview-badge {
  flex: 0 0 auto;
  font-size: 11px;
  line-height: 1.7;
  padding: 0 6px;
  border-radius: 6px;
  background: var(--line);
  color: var(--text-2);
}
.ctx-preview-badge.hot { background: rgba(47, 124, 246, 0.12); color: #2f7cf6; }
.ctx-preview-type { flex: 0 0 auto; font-size: 12px; color: var(--text-3); }
.ctx-preview-summary { flex: 1 1 100%; min-width: 0; color: var(--text); overflow-wrap: anywhere; word-break: break-word; }
.ctx-preview-item .rec-sub { overflow-wrap: anywhere; word-break: break-word; }
.ctx-preview-excluded { margin-top: 12px; }
.ctx-preview-excluded .kv { padding: 8px 0; }
.ctx-preview-excluded .kv span { min-width: 0; overflow-wrap: anywhere; }
.ctx-preview-empty { margin: 0; }

.sheet-header-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16px;
  padding-bottom: 10px;
  border-bottom: 0.5px solid var(--line);
}
.sheet-header-row h3 {
  font-size: 17px;
  font-weight: 600;
  margin: 0;
  color: var(--text);
}
.sheet-header-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}
.btn-header-action {
  padding: 6px 14px;
  font-size: 13px;
  font-weight: 500;
  border-radius: 16px;
  border: 1px solid transparent;
  cursor: pointer;
  transition: all 0.15s ease;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1.2;
}
.btn-header-action.primary {
  background: #18181b;
  color: #ffffff;
  border-color: #18181b;
}
.btn-header-action.primary:hover {
  background: #27272a;
}
.btn-header-action.primary:active {
  transform: scale(0.96);
}
.btn-header-action.danger {
  background: transparent;
  color: #71717a;
  border-color: #e4e4e7;
}
.btn-header-action.danger:hover {
  background: #f4f4f5;
  color: #18181b;
  border-color: #d4d4d8;
}
.btn-header-action.danger:active {
  transform: scale(0.96);
}
.btn-header-action.secondary {
  background: var(--surface-2, rgba(0, 0, 0, 0.05));
  color: var(--text);
  border-color: var(--line);
}
.btn-header-action.secondary:hover {
  background: rgba(0, 0, 0, 0.09);
}
.btn-header-action.success {
  background: rgba(34, 197, 94, 0.12);
  color: #15803d;
  border-color: rgba(34, 197, 94, 0.25);
}
.btn-header-action.success:hover {
  background: rgba(34, 197, 94, 0.22);
}
.btn-header-action.icon-close {
  width: 28px;
  height: 28px;
  padding: 0;
  border-radius: 50%;
  font-size: 13px;
  font-weight: 600;
  color: var(--text-2);
  background: var(--surface-2, rgba(0, 0, 0, 0.05));
  border: 1px solid var(--line);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: all 0.15s ease;
}
.btn-header-action.icon-close:hover {
  background: var(--surface-3, rgba(0, 0, 0, 0.1));
  color: var(--text);
  transform: scale(1.08);
}
.btn-header-action.icon-close:active {
  transform: scale(0.92);
}

/* 最后一级详情面板：移除拉手把手，增加顶部呼吸感 */
#detailSheet .sheet-handle {
  display: none !important;
}
#detailSheet {
  padding-top: 14px;
}
#detailSheet .sheet-header-row {
  margin-bottom: 12px;
  padding-bottom: 12px;
}

/* 动态保存按钮弹性淡入 */
@keyframes saveBtnPopIn {
  from { opacity: 0; transform: scale(0.8); }
  to { opacity: 1; transform: scale(1); }
}
.btn-header-action.primary.visible {
  display: inline-flex !important;
  animation: saveBtnPopIn 0.22s cubic-bezier(0.175, 0.885, 0.32, 1.275) both;
}

/* 二级子页面规范顶栏（带 ‹ 返回与右上角加号） */
.sheet-subpage-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16px;
  padding-bottom: 10px;
  border-bottom: 0.5px solid var(--line);
}
.sheet-subpage-header .btn-subpage-back {
  background: transparent;
  border: none;
  color: var(--text-2, #71717a);
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  padding: 4px 8px 4px 0;
  display: inline-flex;
  align-items: center;
  gap: 2px;
  transition: color 0.15s ease;
}
.sheet-subpage-header .btn-subpage-back:hover {
  color: var(--text, #09090b);
}
.sheet-subpage-header .btn-subpage-back:active {
  transform: scale(0.96);
}
.sheet-subpage-header .subpage-title {
  font-size: 16px;
  font-weight: 600;
  margin: 0;
  color: var(--text);
  text-align: center;
}
.sheet-subpage-header .subpage-placeholder {
  width: 32px;
}
.sheet-subpage-header .btn-subpage-add {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--surface-2, rgba(0, 0, 0, 0.05));
  border: 1px solid var(--line);
  color: var(--text);
  font-size: 18px;
  font-weight: 500;
  line-height: 1;
  cursor: pointer;
  transition: all 0.15s cubic-bezier(0.2, 0.9, 0.3, 1);
}
.sheet-subpage-header .btn-subpage-add:hover {
  background: var(--tint);
  color: #fff;
  border-color: var(--tint);
  transform: scale(1.08);
}
.sheet-subpage-header .btn-subpage-add:active {
  transform: scale(0.92);
}

.dash-list-summary-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 12px 2px 8px 2px;
  min-height: 28px;
}
.dash-list-summary-bar .dash-empty {
  margin: 0 !important;
  font-size: 13px;
  color: var(--text-3);
  line-height: 1.4;
}
.dash-list-summary-bar .dash-empty b {
  color: var(--text);
  font-weight: 600;
}
.btn-detail-add {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--surface-2, rgba(0, 0, 0, 0.05));
  border: 1px solid var(--line);
  color: var(--text);
  font-size: 16px;
  font-weight: 500;
  line-height: 1;
  cursor: pointer;
  padding: 0;
  flex-shrink: 0;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.03);
  transition: all 0.15s cubic-bezier(0.2, 0.9, 0.3, 1);
}
.btn-detail-add:hover {
  background: var(--tint);
  color: #fff;
  border-color: var(--tint);
  transform: scale(1.08);
}
.btn-detail-add:active {
  transform: scale(0.92);
}

.sheet-actions { display: flex; flex-direction: column; gap: 8px; margin-top: 20px; }
.sheet-actions button {
  padding: 13px;
  border-radius: 12px;
  background: var(--bubble);
  font-size: 15px;
}
.sheet-actions .danger { color: #b3261e; }

.hint-bar {
  margin-top: 14px;
  padding: 11px 14px;
  border-radius: 12px;
  background: #fdf3f2;
  color: #b3261e;
  font-size: 14px;
}
.hint-bar.warn { background: #fdf8ec; color: #8f5a08; }

/* ---------------------------------------------------------- 自然回复 */
/* 回复在记录卡片之前，是主体；卡片只是证据与编辑入口 */
.ai-reply {
  font-size: 15px;
  line-height: 1.55;
  color: var(--text);
  padding: 2px 0 8px;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  word-break: break-word;
}
.ai-reply.is-error { color: #b3261e; }
/* 超长知识/联网回复默认折叠（纯展示层，展开后文本完整；长度收缩策略保证不断句） */
.ai-reply.is-clamped {
  display: -webkit-box;
  -webkit-line-clamp: 5;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.reply-toggle {
  border: 0;
  background: none;
  color: var(--text-2);
  font-size: 13px;
  padding: 0 0 6px;
  cursor: pointer;
}
.reply-toggle:active { color: var(--text); }

/* ---------------------------------------------------------- 看板：iOS 小组件式双列方块网格 */
.dash-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 215px), 1fr));
  gap: 12px;
  margin-top: 6px;
}
.dash-card {
  background: var(--bubble);
  border: 0.5px solid var(--line-strong);
  border-radius: 16px;
  padding: 14px 14px 12px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-height: 104px;
  box-sizing: border-box;
  cursor: pointer;
  transition: transform 0.12s ease, background-color 0.15s ease;
  user-select: none;
  -webkit-user-select: none;
}
.dash-card:active {
  transform: scale(0.97);
  background: #ebebeb;
}
.dash-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 4px;
}
.dash-card-header .dash-card-title {
  margin-bottom: 0;
}
.dash-card-title {
  font-size: 13px;
  font-weight: 500;
  color: var(--text-3);
  margin-bottom: 4px;
}
.dash-card-plus {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: 1px solid var(--line-strong, rgba(0, 0, 0, 0.15));
  background: var(--surface-1, #ffffff);
  color: var(--text-2, #52525b);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  line-height: 1;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.15s ease;
  padding: 0;
  flex-shrink: 0;
}
.dash-card-plus:hover {
  background: #18181b;
  color: #fff;
  border-color: #18181b;
  transform: scale(1.08);
}
.dash-card-plus:active {
  transform: scale(0.92);
}

.dash-metric {
  font-size: 22px;
  font-weight: 600;
  letter-spacing: -0.4px;
  line-height: 1.2;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.dash-unit {
  font-size: 13px;
  color: var(--text-2);
  font-weight: 400;
}
.dash-sub {
  font-size: 12px;
  color: var(--text-3);
  margin-top: 4px;
  line-height: 1.35;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.dash-empty { color: var(--text-3); font-size: 14px; line-height: 1.6; }
.dash-actions { margin-top: 14px; }
.dash-actions button {
  width: 100%;
  padding: 11px;
  border-radius: 12px;
  background: var(--bubble);
  font-size: 14px;
  color: var(--text-2);
}
.spark { display: block; margin-top: 6px; max-width: 100%; height: auto; }

/* 极窄屏（≤360px）适当缩减内边距与字号 */
@media (max-width: 360px) {
  .dash-grid { gap: 8px; }
  .dash-card { padding: 12px 10px 10px; border-radius: 14px; }
  .dash-metric { font-size: 19px; }
  .dash-card-title { font-size: 12px; }
}

/* AI 智能整理卡片 */
.dash-ai-insight {
  background: var(--surface-2, rgba(0, 0, 0, 0.025));
  border: 0.5px solid var(--line, rgba(0, 0, 0, 0.1));
  border-radius: 12px;
  padding: 0;
  margin-bottom: 14px;
  overflow: hidden;
}
.insight-header {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 42px;
  padding: 0 12px;
  cursor: pointer;
  list-style: none;
  user-select: none;
}
.insight-header::-webkit-details-marker { display: none; }
.insight-header::marker { content: ''; }
.insight-badge {
  font-size: 10px;
  font-weight: 600;
  background: transparent;
  color: #4c5967;
  border: 0.5px solid rgba(76, 89, 103, 0.36);
  padding: 2px 6px;
  border-radius: 999px;
  letter-spacing: 0.04em;
}
.insight-title {
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.insight-chevron {
  width: 7px;
  height: 7px;
  border-right: 1.5px solid var(--text-3, #8e8e93);
  border-bottom: 1.5px solid var(--text-3, #8e8e93);
  transform: rotate(45deg) translateY(-2px);
  transition: transform 0.18s ease;
  flex-shrink: 0;
}
.dash-ai-insight[open] .insight-chevron {
  transform: rotate(225deg) translate(-1px, -1px);
}
.insight-body {
  padding: 0 12px 12px;
  border-top: 0.5px solid rgba(76, 89, 103, 0.1);
}
.insight-summary {
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--text-2);
  margin: 10px 0 8px;
}
.dash-tag-list {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 6px;
}
.dash-tag {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: var(--bg);
  border: 0.5px solid var(--line-strong);
  border-radius: 999px;
  padding: 3px 10px;
  font-size: 12px;
  color: var(--text-2);
  user-select: none;
}
.tag-del {
  cursor: pointer;
  color: var(--text-3);
  font-size: 14px;
  font-weight: bold;
  margin-left: 2px;
}
.tag-del:hover {
  color: #ff3b30;
}

/* 看板流水列表与改/删按钮 */
.dash-item-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 0;
  border-bottom: 0.5px solid var(--line);
}
.dash-item-main {
  flex: 1;
  min-width: 0;
}
.dash-item-actions {
  display: flex;
  gap: 6px;
  margin-left: 10px;
}
.dash-btn-edit, .dash-btn-del {
  border: none;
  border-radius: 8px;
  padding: 4px 8px;
  font-size: 12px;
  cursor: pointer;
  transition: opacity 0.15s;
}
.dash-btn-edit {
  background: var(--bubble);
  color: var(--text-2);
}
.dash-btn-del {
  background: rgba(255, 59, 48, 0.1);
  color: #ff3b30;
}
.dash-btn-edit:active, .dash-btn-del:active {
  opacity: 0.7;
}

/* 今日总结与周结卡片 (Hero Card) */
.dash-card-hero {
  grid-column: 1 / -1;
  background: linear-gradient(135deg, rgba(37, 99, 235, 0.06) 0%, rgba(139, 92, 246, 0.04) 100%), var(--bubble);
  border: 0.5px solid rgba(37, 99, 235, 0.22);
  border-radius: 16px;
  padding: 14px 16px;
  min-height: 96px;
}
.dash-card-hero:hover {
  border-color: rgba(37, 99, 235, 0.35);
}
.dash-hero-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 6px;
}
.dash-hero-badge {
  font-size: 12px;
  font-weight: 600;
  color: #2563eb;
  background: rgba(37, 99, 235, 0.1);
  padding: 2px 8px;
  border-radius: 6px;
  display: inline-flex;
  align-items: center;
}
.dash-hero-date {
  font-size: 12px;
  color: var(--text-3);
  font-weight: 400;
}

/* 卡片内部今日小结 */
.dash-today-summary {
  margin-top: 8px;
  padding-top: 6px;
  border-top: 0.5px solid var(--line);
  font-size: 11.5px;
  color: var(--text-2);
  display: flex;
  align-items: center;
  gap: 5px;
  line-height: 1.35;
}
.badge-mini {
  font-size: 10px;
  font-weight: 600;
  padding: 1px 5px;
  border-radius: 4px;
  background: rgba(37, 99, 235, 0.09);
  color: #2563eb;
  white-space: nowrap;
  flex-shrink: 0;
}

.summary-tab-content {
  min-height: 200px;
}

/* 全周期统计指标网格 */
.alltime-stats-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
  margin-bottom: 14px;
}
.alltime-stat-box {
  background: var(--bubble);
  border-radius: 12px;
  padding: 10px 12px;
  border: 0.5px solid var(--line);
}
.alltime-stat-title {
  font-size: 11.5px;
  color: var(--text-3);
  margin-bottom: 2px;
}
.alltime-stat-num {
  font-size: 17px;
  font-weight: 600;
  color: var(--text);
}
.alltime-stat-sub {
  font-size: 11px;
  color: var(--text-2);
  margin-top: 2px;
}

/* 邮箱注册与登录门禁弹窗 (Auth Gate) */
.auth-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.42);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  z-index: 10000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  box-sizing: border-box;
  animation: authOverlayFadeIn 0.22s ease;
}

@keyframes authOverlayFadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

.auth-card {
  background: var(--card-bg, #ffffff);
  border-radius: 24px;
  padding: 28px 24px 22px;
  width: 100%;
  max-width: 360px;
  box-shadow: 0 24px 48px -12px rgba(0, 0, 0, 0.14), 0 4px 16px rgba(0, 0, 0, 0.04);
  border: 0.5px solid var(--line, rgba(0, 0, 0, 0.08));
  text-align: center;
  box-sizing: border-box;
  animation: authCardScaleUp 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes authCardScaleUp {
  from { opacity: 0; transform: scale(0.94) translateY(8px); }
  to { opacity: 1; transform: scale(1) translateY(0); }
}

.auth-avatar-host {
  width: 68px;
  height: 68px;
  margin: 0 auto 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  user-select: none;
  filter: drop-shadow(0 4px 12px rgba(0, 0, 0, 0.06));
  transition: transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.auth-avatar-host:hover {
  transform: scale(1.06);
}
.auth-avatar-host:active {
  transform: scale(0.95);
}

.auth-title {
  font-size: 20px;
  font-weight: 700;
  color: var(--text, #111827);
  margin: 0 0 6px;
  letter-spacing: -0.4px;
}

.auth-desc {
  font-size: 13px;
  color: var(--text-2, #6b7280);
  margin: 0 0 20px;
  line-height: 1.45;
}

.auth-field {
  margin-bottom: 12px;
  text-align: left;
}

.auth-input {
  width: 100%;
  height: 46px;
  padding: 0 15px;
  border-radius: 14px;
  border: 1px solid var(--line, rgba(0, 0, 0, 0.08));
  background: var(--bubble, rgba(0, 0, 0, 0.03));
  color: var(--text, #111827);
  font-size: 16px; /* 防 iOS Safari 聚焦放大 */
  box-sizing: border-box;
  outline: none;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

.auth-input:focus {
  border-color: #007aff;
  background: var(--bg, #ffffff);
  box-shadow: 0 0 0 3.5px rgba(0, 122, 255, 0.12);
}

.auth-code-row {
  display: flex;
  gap: 8px;
  align-items: center;
}
.auth-code-row .auth-input {
  flex: 1;
}

.auth-code-btn {
  height: 46px;
  padding: 0 15px;
  font-size: 13.5px;
  font-weight: 600;
  border-radius: 14px;
  border: 1px solid rgba(0, 122, 255, 0.16);
  background: rgba(0, 122, 255, 0.06);
  color: #007aff;
  cursor: pointer;
  white-space: nowrap;
  transition: all 0.18s ease;
  box-sizing: border-box;
}
.auth-code-btn:hover:not(:disabled) {
  background: rgba(0, 122, 255, 0.12);
}
.auth-code-btn:active:not(:disabled) {
  transform: scale(0.96);
}
.auth-code-btn:disabled {
  border-color: var(--line, rgba(0, 0, 0, 0.06));
  background: var(--surface-2, rgba(0, 0, 0, 0.03));
  color: var(--text-3, #9ca3af);
  cursor: not-allowed;
  opacity: 0.7;
}

.auth-submit-btn {
  width: 100%;
  height: 48px;
  line-height: 48px;
  padding: 0;
  border-radius: 14px;
  border: none;
  background: #007aff;
  color: #ffffff;
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
  margin-top: 8px;
  letter-spacing: 0.5px;
  box-shadow: 0 4px 14px rgba(0, 122, 255, 0.25);
  transition: all 0.18s cubic-bezier(0.4, 0, 0.2, 1);
}
.auth-submit-btn:hover:not(:disabled) {
  background: #006ee6;
  box-shadow: 0 6px 18px rgba(0, 122, 255, 0.32);
}
.auth-submit-btn:active:not(:disabled) {
  transform: scale(0.98);
  box-shadow: 0 2px 8px rgba(0, 122, 255, 0.18);
}
.auth-submit-btn:disabled {
  background: var(--surface-3, #e5e7eb);
  color: var(--text-3, #9ca3af);
  box-shadow: none;
  cursor: not-allowed;
}

.auth-tip {
  font-size: 12px;
  min-height: 18px;
  margin-top: 6px;
  line-height: 1.4;
  transition: color 0.2s ease;
}
.auth-tip.error {
  color: #ef4444;
}
.auth-tip.success {
  color: #10b981;
}

.auth-footer {
  margin-top: 18px;
  font-size: 11.5px;
  color: var(--text-3, #9ca3af);
  line-height: 1.5;
  letter-spacing: -0.1px;
}

/* ---------------------------------------------------------------- 看板双 Tab 架构 */
.dash-tab-bar {
  display: flex;
  gap: 6px;
  background: var(--surface-2, rgba(0, 0, 0, 0.05));
  padding: 4px;
  border-radius: 12px;
  margin-bottom: 16px;
}
.dash-tab-btn {
  flex: 1;
  padding: 8px 12px;
  font-size: 14px;
  font-weight: 500;
  color: var(--text-2, #666);
  background: transparent;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.18s ease;
  text-align: center;
}
.dash-tab-btn.active {
  background: var(--surface-1, #fff);
  color: var(--text-1, #111);
  font-weight: 600;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08);
}

/* ---------------------------------------------------------------- 待办日程工作台 */
.todo-workspace {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.todo-progress-card {
  background: var(--surface-2, rgba(0, 0, 0, 0.03));
  border: 1px solid var(--border-color, rgba(0, 0, 0, 0.06));
  border-radius: 12px;
  padding: 12px 14px;
}
.todo-progress-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 13px;
  margin-bottom: 8px;
}
.todo-progress-title {
  font-weight: 600;
  color: var(--text-1);
}
.todo-progress-stat {
  color: var(--text-2);
  font-size: 12px;
}
.todo-progress-bar-bg {
  background: var(--line, rgba(0, 0, 0, 0.08));
  height: 6px;
  border-radius: 3px;
  overflow: hidden;
}
.todo-progress-bar-fill {
  background: var(--text, #0d0d0d);
  height: 100%;
  border-radius: 3px;
  transition: width 0.3s ease;
}

.todo-filter-row {
  display: flex;
  gap: 6px;
  overflow-x: auto;
  padding-bottom: 2px;
}
.todo-filter-pill {
  font-size: 12px;
  padding: 5px 12px;
  border-radius: 16px;
  border: 1px solid var(--line, rgba(0, 0, 0, 0.1));
  background: transparent;
  color: var(--text-2);
  cursor: pointer;
  white-space: nowrap;
  transition: all 0.15s ease;
}
.todo-filter-pill.active {
  background: var(--text-1, #111);
  color: var(--surface-1, #fff);
  border-color: var(--text-1, #111);
}

.todo-plus-pill {
  margin-left: auto;
  background: #18181b !important;
  color: #fff !important;
  border-color: #18181b !important;
  font-weight: 500;
}
.todo-plus-pill:hover {
  background: #27272a !important;
}

.todo-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.todo-item-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
  border-radius: 12px;
  background: var(--surface-1, #fff);
  border: 1px solid var(--border-color, rgba(0, 0, 0, 0.06));
  transition: opacity 0.2s ease, background 0.2s ease;
}
.todo-item-row.done {
  background: var(--surface-1, #fff);
  opacity: 0.7;
}

.todo-checkbox {
  display: none !important;
}

.todo-item-content {
  flex: 1;
  min-width: 0;
}
.todo-item-title {
  font-size: 14px;
  font-weight: 500;
  color: var(--text-1);
  word-break: break-word;
}
.todo-item-row.done .todo-item-title {
  text-decoration: line-through;
  color: var(--text-3);
}
.todo-item-due {
  font-size: 12px;
  color: var(--text-3);
  margin-top: 2px;
}
.todo-item-actions {
  display: none;
}

.todo-empty-tip {
  text-align: center;
  color: var(--text-3);
  font-size: 13px;
  padding: 24px 0;
}

/* ---------------------------------------------------------------- 滑动手势容器与动作滑块 */
.swipe-wrapper {
  position: relative;
  overflow: hidden;
  border-radius: 12px;
  touch-action: pan-y;
  user-select: none;
  background: var(--surface-2, rgba(0, 0, 0, 0.04));
  margin-bottom: 8px;
}

/* 左侧弹出操作按键（完成/恢复，深黑灰统一风格） */
.swipe-action-left {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 72px;
  background: #18181b;
  color: #f4f4f5;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 0;
  font-weight: 600;
  font-size: 13px;
  letter-spacing: 0.3px;
  border-radius: 12px;
  cursor: pointer;
  z-index: 1;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.15s ease, visibility 0.15s ease, background 0.15s ease;
}
.swipe-action-left:hover, .swipe-action-left:active {
  background: #09090b;
}
.swipe-action-left .swipe-action-text {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  width: 100%;
}

/* 右侧弹出操作按键（删除，深灰极简统一风格） */
.swipe-action-right {
  position: absolute;
  right: 0;
  top: 0;
  bottom: 0;
  width: 72px;
  background: #3f3f46;
  color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 0;
  font-weight: 500;
  font-size: 13px;
  border-radius: 12px;
  cursor: pointer;
  z-index: 1;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.15s ease, visibility 0.15s ease, background 0.15s ease;
}
.swipe-action-right:hover, .swipe-action-right:active {
  background: #27272a;
}
.swipe-action-right .swipe-action-text {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  width: 100%;
}

/* 弹簧弹性弹出关键帧动画。
   注意：原先对含文字的按钮做 transform: scale()，iOS Safari 会按缩放尺寸栅格化文字并
   残留旧图层，表现为「删除」两个字重影悬浮（手机实测截图）。改为位移 + 透明度入场，
   不做缩放，视觉上仍是弹入感，但不会触发文字重栅格化。 */
@keyframes springPopIn {
  0% {
    opacity: 0;
    transform: translateX(14px);
  }
  65% {
    opacity: 1;
    transform: translateX(-2px);
  }
  85% {
    transform: translateX(1px);
  }
  100% {
    opacity: 1;
    transform: translateX(0);
  }
}

/* 诊断性改动：不再对「含文字的按钮」施加任何动画。
   iOS Safari 在动画元素上会保留旧栅格，导致「删除」两字重影悬浮
   （真机截图确认；headless Chrome 无法复现合成层问题）。
   若确认重影消失，可再补一个不触碰文字的动效（例如对背景层做动画）。 */
.swipe-action-left.spring-popped,
.swipe-action-right.spring-popped {
  animation: none;
}

/* 前景卡片 */
.swipe-content {
  position: relative;
  z-index: 3;
  background: var(--bg, #ffffff);
  width: 100%;
  /* 不要加 will-change: transform —— 展开动画改的是 width（不是 transform），
     这个提示既无效，又会让 iOS 长期持有一个合成层，宽度变化时文字重绘会残留（重影）。 */
  cursor: pointer;
}

/* 滑动方向互斥与显示控制：拉动或弹出时互不干扰 */
.swipe-wrapper.swiping-left .swipe-action-right,
.swipe-wrapper.popped-right .swipe-action-right {
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
  display: flex !important;
}
.swipe-wrapper.swiping-left .swipe-action-left,
.swipe-wrapper.popped-right .swipe-action-left {
  display: none !important;
}

.swipe-wrapper.swiping-right .swipe-action-left,
.swipe-wrapper.popped-left .swipe-action-left {
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
  display: flex !important;
}
.swipe-wrapper.swiping-right .swipe-action-right,
.swipe-wrapper.popped-left .swipe-action-right {
  display: none !important;
}

/* 待办行样式适配 */
.todo-swipe-wrapper .todo-item-row {
  margin-bottom: 0;
  border-radius: 12px;
}

.detail-swipe-wrapper .dash-item-row {
  margin-bottom: 0;
  border-radius: 12px;
  border: 1px solid var(--border-color, rgba(0, 0, 0, 0.06));
  padding: 12px 14px;
}

/* 待办右侧操作：纯文字「加入日历」，灰黑极简风格，无图标 */
.todo-item-right {
  display: flex;
  align-items: center;
}

.btn-cal-text {
  font-size: 12px;
  padding: 4px 10px;
  border-radius: 14px;
  border: 1px solid var(--line-strong, rgba(0, 0, 0, 0.15));
  background: var(--surface-2, rgba(0, 0, 0, 0.04));
  color: var(--text, #0d0d0d);
  cursor: pointer;
  font-weight: 500;
  white-space: nowrap;
  transition: all 0.15s ease;
}
.btn-cal-text:hover {
  background: rgba(0, 0, 0, 0.08);
}
.btn-cal-text:active {
  transform: scale(0.96);
}

.btn-cal-text.btn-todo-restore {
  color: var(--text-2);
  background: var(--surface-2, rgba(0, 0, 0, 0.04));
  border-color: var(--line);
}
.btn-cal-text.btn-todo-restore:hover {
  color: #16a34a;
  background: rgba(34, 197, 94, 0.1);
  border-color: rgba(34, 197, 94, 0.3);
}

.todo-item-actions {
  display: none;
}

/* ---------------------------------------------------- 会话时间轴微型导航轨 (Chat Minimap) */
.chat-turn {
  position: relative;
  transition: background 0.4s ease;
}
.chat-turn.pulse-highlight {
  animation: turnPulse 1.2s ease-out;
}
@keyframes turnPulse {
  0% { background: rgba(0, 0, 0, 0.08); border-radius: 12px; }
  100% { background: transparent; }
}

/* 回合级删除微按钮：默认完全隐去，hover / 键盘聚焦时才微显，不干扰正文阅读。
   触屏无 hover，用 touch 媒体查询给一档常驻极淡显示，点按可达。 */
.turn-delete-btn {
  position: absolute;
  right: 8px;
  bottom: 3px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: transparent;
  color: var(--text-3);
  opacity: 0;
  cursor: pointer;
  transition: opacity 0.25s ease, color 0.25s ease, background 0.25s ease;
}
.chat-turn:hover .turn-delete-btn,
.turn-delete-btn:focus-visible {
  opacity: 0.5;
}
.turn-delete-btn:hover {
  opacity: 1;
  color: var(--c-todo);
  background: rgba(163, 45, 45, 0.08);
}
@media (hover: none) {
  .turn-delete-btn { opacity: 0.22; }
  .chat-turn:active .turn-delete-btn { opacity: 0.75; }
}

/* 删除后的平滑淡出：配合 app.js 的 transitionend 移除节点 */
.chat-turn.turn-removing {
  opacity: 0;
  transform: translateY(-2px);
  transition: opacity 0.28s ease, transform 0.28s ease;
}

.chat-minimap {
  position: fixed;
  right: 2px;
  top: 64px;
  bottom: 76px;
  width: 20px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  z-index: 28;
  user-select: none;
  pointer-events: auto;
}

/* 极简细滑条（静止态呈现，模拟原生 2.5px~3px 浅灰胶囊滑块） */
.minimap-bar-track {
  position: absolute;
  top: 8px;
  bottom: 8px;
  right: 7px;
  width: 3px;
  pointer-events: none;
  opacity: 1;
  transition: opacity 0.25s ease, transform 0.25s ease;
}
.minimap-bar-thumb {
  position: absolute;
  left: 0;
  width: 3px;
  min-height: 22px;
  border-radius: 999px;
  background: var(--text-3, rgba(0, 0, 0, 0.28));
  transition: opacity 0.2s ease;
}
[data-theme="dark"] .minimap-bar-thumb {
  background: rgba(255, 255, 255, 0.32);
}

/* 微点轨道容器（平时隐藏收拢，滑动/悬停/拖拽时平滑绽放展开） */
.minimap-track {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 8px 0;
  max-height: 100%;
  opacity: 0;
  pointer-events: none;
  transform: scale(0.92);
  transition: opacity 0.22s cubic-bezier(0.2, 0.9, 0.3, 1), transform 0.22s cubic-bezier(0.2, 0.9, 0.3, 1);
}

/* 活跃态（滚动中 / 悬停 / 正在拖拽盲滑）：细条淡出，微点轨道展开 */
.chat-minimap.is-active .minimap-bar-track,
.chat-minimap:hover .minimap-bar-track,
.chat-minimap.active .minimap-bar-track {
  opacity: 0;
  transform: scaleY(0.7);
}

.chat-minimap.is-active .minimap-track,
.chat-minimap:hover .minimap-track,
.chat-minimap.active .minimap-track {
  opacity: 1;
  pointer-events: auto;
  transform: scale(1);
}

/* 点状滚动条单元（基础 5px 宽度，保持原滑动条宽度） */
.minimap-dot,
.minimap-tick {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  cursor: pointer;
  transition: transform 0.18s cubic-bezier(0.2, 0.9, 0.3, 1), background-color 0.18s ease, border-color 0.18s ease;
  position: relative;
  box-sizing: border-box;
}

/* 灰点：普通对话轨迹点 */
.minimap-dot.dot-gray,
.minimap-tick:not(.active):not(.dot-white) {
  background: var(--text-3, #a1a1a6);
}

/* 白点：跨天日期分割线节点（白底搭配精细灰边） */
.minimap-dot.dot-white,
.minimap-tick.dot-white {
  width: 6px;
  height: 6px;
  background: #ffffff;
  border: 1.2px solid var(--text-2, #6e6e73);
  box-shadow: 0 0 2px rgba(0, 0, 0, 0.12);
}

/* 黑点：当前可视视口焦点（Active Cursor） */
.minimap-dot.dot-black,
.minimap-dot.active,
.minimap-tick.active {
  background: var(--text, #0d0d0d) !important;
  border-color: var(--text, #0d0d0d) !important;
  transform: scale(1.35);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
}

/* 鼠标悬停 */
.minimap-dot:hover,
.minimap-tick:hover {
  transform: scale(1.5);
}


/* 保证横滑弹出后卡片位置和宽度一致，首字符不截断 */
.swipe-wrapper.popped-right .swipe-content {
  transform: translateX(0px) !important;
  width: calc(100% - 76px) !important;
}
.swipe-wrapper.popped-left .swipe-content {
  transform: translateX(76px) !important;
  width: calc(100% - 76px) !important;
}

/* ---------------------------------------------------- 快捷记录与添加卡片弹窗 */
.quick-add-overlay, .card-mgr-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.45);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  z-index: 70;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  animation: fadeInOverlay 0.2s ease;
}

@media (min-width: 600px) {
  .quick-add-overlay, .card-mgr-overlay {
    align-items: center;
  }
}

@keyframes fadeInOverlay {
  from { opacity: 0; }
  to { opacity: 1; }
}

.quick-add-modal, .card-mgr-modal {
  width: 100%;
  max-width: 480px;
  max-height: 88vh;
  max-height: 88dvh;
  background: var(--surface-1, #ffffff);
  border-radius: 20px 20px 0 0;
  box-shadow: 0 -8px 36px rgba(0, 0, 0, 0.2);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  animation: riseUpModal 0.28s cubic-bezier(0.175, 0.885, 0.32, 1.14);
}

@media (min-width: 600px) {
  .quick-add-modal, .card-mgr-modal {
    border-radius: 20px;
    max-height: 82vh;
    animation: zoomInModal 0.22s cubic-bezier(0.175, 0.885, 0.32, 1.14);
  }
}

@keyframes riseUpModal {
  from { transform: translateY(100%); }
  to { transform: translateY(0); }
}

@keyframes zoomInModal {
  from { transform: scale(0.92); opacity: 0; }
  to { transform: scale(1); opacity: 1; }
}

.quick-add-header, .card-mgr-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px 14px;
  border-bottom: 1px solid var(--border-color, rgba(0, 0, 0, 0.06));
}
.quick-add-header h3, .card-mgr-header h3 {
  font-size: 17px;
  font-weight: 600;
  color: var(--text, #18181b);
  margin: 0;
}
.btn-close-modal {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: none;
  background: var(--surface-2, rgba(0, 0, 0, 0.05));
  color: var(--text-2, #71717a);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  cursor: pointer;
  transition: all 0.15s ease;
}
.btn-close-modal:hover {
  background: rgba(0, 0, 0, 0.1);
  color: #18181b;
}

.quick-add-body, .card-mgr-body {
  padding: 16px 20px 24px;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

/* AI 智能生成栏 */
.quick-add-ai-box {
  background: var(--surface-2, #f4f4f5);
  border: 1px solid var(--border-color, rgba(0, 0, 0, 0.08));
  border-radius: 14px;
  padding: 10px 12px;
}
.quick-add-ai-label {
  font-size: 12px;
  font-weight: 500;
  color: var(--text-3, #71717a);
  margin-bottom: 8px;
  display: flex;
  align-items: center;
  gap: 6px;
}
.quick-add-ai-label span.badge-ai {
  font-size: 10px;
  background: #18181b;
  color: #fff;
  padding: 1px 5px;
  border-radius: 4px;
}
.quick-add-input-row {
  display: flex;
  align-items: center;
  gap: 8px;
}
.quick-add-ai-input {
  flex: 1;
  border: 1px solid var(--border-color, rgba(0, 0, 0, 0.1));
  border-radius: 10px;
  padding: 8px 12px;
  font-size: 13.5px;
  background: #fff;
  color: var(--text, #18181b);
  outline: none;
}
.quick-add-ai-input:focus {
  border-color: #18181b;
}
.quick-add-mic-btn {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  border: 1px solid var(--border-color, rgba(0, 0, 0, 0.1));
  background: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  cursor: pointer;
  transition: all 0.15s ease;
  flex-shrink: 0;
}
.quick-add-mic-btn:hover {
  background: #e4e4e7;
}
.quick-add-mic-btn.recording {
  background: #ef4444 !important;
  color: #fff !important;
  border-color: #ef4444 !important;
  animation: pulseMic 1s infinite alternate;
}
@keyframes pulseMic {
  from { transform: scale(1); }
  to { transform: scale(1.1); }
}
.quick-add-parse-btn {
  padding: 8px 14px;
  border-radius: 10px;
  border: none;
  background: #18181b;
  color: #fff;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  white-space: nowrap;
  transition: all 0.15s ease;
  flex-shrink: 0;
}
.quick-add-parse-btn:hover {
  background: #27272a;
}
.quick-add-parse-btn:active {
  transform: scale(0.96);
}
.quick-add-ai-tip {
  font-size: 12px;
  color: #059669;
  margin-top: 6px;
  line-height: 1.3;
}
.quick-add-ai-tip.error {
  color: #dc2626;
}

.quick-add-divider {
  display: flex;
  align-items: center;
  text-align: center;
  color: var(--text-3, #a1a1aa);
  font-size: 12px;
}
.quick-add-divider::before, .quick-add-divider::after {
  content: '';
  flex: 1;
  border-bottom: 1px dashed var(--line, rgba(0, 0, 0, 0.1));
}
.quick-add-divider span {
  padding: 0 10px;
}

/* 填写字段 */
.quick-add-fields {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.quick-field-group {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.quick-field-label {
  font-size: 12.5px;
  font-weight: 500;
  color: var(--text-2, #52525b);
}
.quick-field-input {
  border: 1px solid var(--border-color, rgba(0, 0, 0, 0.12));
  border-radius: 10px;
  padding: 9px 12px;
  font-size: 14px;
  background: var(--surface-1, #fff);
  color: var(--text, #18181b);
  outline: none;
  transition: border-color 0.15s ease;
}
.quick-field-input:focus {
  border-color: #18181b;
}
.quick-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 4px;
}
.quick-pill {
  font-size: 12px;
  padding: 4px 10px;
  border-radius: 14px;
  border: 1px solid var(--line, rgba(0, 0, 0, 0.1));
  background: var(--surface-2, rgba(0, 0, 0, 0.04));
  color: var(--text-2, #52525b);
  cursor: pointer;
  transition: all 0.15s ease;
}
.quick-pill:hover {
  border-color: #18181b;
  color: #18181b;
}
.quick-pill.active {
  background: #18181b;
  color: #fff;
  border-color: #18181b;
}

.quick-add-footer {
  margin-top: 8px;
}
.quick-add-save-btn {
  width: 100%;
  padding: 12px;
  border-radius: 12px;
  border: none;
  background: #18181b;
  color: #fff;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.15s ease;
}
.quick-add-save-btn:hover {
  background: #27272a;
}
.quick-add-save-btn:active {
  transform: scale(0.98);
}

/* 卡片管理弹窗 */
.card-mgr-section {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.card-mgr-title {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-3, #71717a);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.card-mgr-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 14px;
  border-radius: 12px;
  background: var(--surface-2, rgba(0, 0, 0, 0.03));
  border: 1px solid var(--border-color, rgba(0, 0, 0, 0.06));
}
.card-mgr-item-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.card-mgr-item-name {
  font-size: 14px;
  font-weight: 600;
  color: var(--text, #18181b);
}
.card-mgr-item-desc {
  font-size: 12px;
  color: var(--text-3, #71717a);
}
.btn-toggle-switch {
  width: 44px;
  height: 24px;
  border-radius: 12px;
  background: #e4e4e7;
  border: none;
  cursor: pointer;
  position: relative;
  transition: background 0.2s ease;
}
.btn-toggle-switch::after {
  content: '';
  position: absolute;
  top: 2px;
  left: 2px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #fff;
  transition: transform 0.2s ease;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
}
.btn-toggle-switch.active {
  background: #18181b;
}
.btn-toggle-switch.active::after {
  transform: translateX(20px);
}

.preset-card-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px;
}
.preset-card-btn {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
  border-radius: 12px;
  background: var(--surface-1, #fff);
  border: 1px solid var(--border-color, rgba(0, 0, 0, 0.1));
  cursor: pointer;
  text-align: left;
  transition: all 0.15s ease;
}
.preset-card-btn:hover {
  border-color: #18181b;
  transform: translateY(-1px);
}
.preset-card-icon {
  font-size: 20px;
}
.preset-card-text {
  display: flex;
  flex-direction: column;
}
.preset-card-name {
  font-size: 13px;
  font-weight: 600;
  color: var(--text, #18181b);
}
.preset-card-unit {
  font-size: 11px;
  color: var(--text-3, #71717a);
}

.custom-card-creator {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 14px;
  border-radius: 12px;
  background: var(--surface-2, rgba(0, 0, 0, 0.02));
  border: 1px dashed var(--line-strong, rgba(0, 0, 0, 0.15));
}
.custom-card-row {
  display: flex;
  gap: 8px;
}
.custom-card-row input {
  flex: 1;
}
.btn-create-custom-card {
  padding: 10px;
  border-radius: 10px;
  border: none;
  background: #18181b;
  color: #fff;
  font-size: 13.5px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.15s ease;
}
.btn-create-custom-card:hover {
  background: #27272a;
}

/* ---------------------------------------------------- 悬浮灵动伴侣球 (Floating Avatar) */
.floating-avatar-widget {
  position: fixed;
  z-index: 45;
  touch-action: none;
  user-select: none;
  cursor: grab;
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  filter: drop-shadow(0 4px 14px rgba(0, 0, 0, 0.12));
  transition: opacity 0.3s ease, filter 0.3s ease;
}

[data-theme="dark"] .floating-avatar-widget {
  filter: drop-shadow(0 4px 16px rgba(0, 0, 0, 0.35));
}

.floating-avatar-widget:active,
.floating-avatar-widget.is-active {
  cursor: grabbing;
  filter: drop-shadow(0 8px 24px rgba(0, 0, 0, 0.22));
}

.floating-avatar-widget.is-docked {
  opacity: 0.72;
  transition: opacity 0.4s ease;
}

.floating-avatar-widget.is-docked:hover {
  opacity: 1;
}

.floating-avatar-host {
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}

/* ---------------------------------------------------- 流式打字机效果与微光光标 */
.stream-cursor {
  display: inline-block;
  color: var(--brand, #3b82f6);
  font-weight: 600;
  margin-left: 2px;
  animation: streamCursorBlink 0.75s ease-in-out infinite;
  vertical-align: baseline;
  user-select: none;
}
@keyframes streamCursorBlink {
  0%, 100% { opacity: 1; }
  50% { opacity: 0; }
}
.ai-reply.stream-active {
  cursor: pointer;
}

/* ---------------------------------------------------- 看板明细重构：结构化全景 + 时间跨度规划 + 按月分组 */
.dash-detail-container {
  display: flex;
  flex-direction: column;
  gap: 0;
}

/* 1. 首屏结构化全景卡片 */
.detail-structure-panel {
  background: var(--surface-2, rgba(0, 0, 0, 0.03));
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 16px 18px;
  margin-bottom: 14px;
  box-shadow: 0 1px 6px rgba(0, 0, 0, 0.02);
}

.detail-stat-hero-wrap {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 12px;
}

.detail-stat-hero-label {
  font-size: 13px;
  font-weight: 500;
  color: var(--text-2);
  margin-bottom: 4px;
}

.detail-stat-hero-val {
  font-size: 28px;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--text);
  line-height: 1.15;
}

.detail-stat-meta-pills {
  display: flex;
  gap: 6px;
  align-items: center;
  flex-wrap: wrap;
}

.detail-meta-pill {
  font-size: 12px;
  padding: 4px 10px;
  border-radius: 12px;
  background: rgba(0, 0, 0, 0.05);
  color: var(--text-2);
  font-weight: 500;
}

/* 分类占比条 (Visual Ratio Bar) */
.detail-ratio-bar {
  display: flex;
  height: 8px;
  border-radius: 4px;
  background: rgba(0, 0, 0, 0.06);
  overflow: hidden;
  gap: 2px;
  margin: 12px 0 10px;
}

.detail-ratio-segment {
  height: 100%;
  border-radius: 2px;
  transition: width 0.3s cubic-bezier(0.2, 0.9, 0.3, 1);
  min-width: 4px;
}

/* 分类图例胶囊列表 */
.detail-category-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 10px;
  margin-bottom: 8px;
}

.detail-cat-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: 14px;
  background: var(--bg);
  border: 1px solid var(--line);
  font-size: 12px;
  color: var(--text-2);
  cursor: pointer;
  transition: all 0.15s ease;
  user-select: none;
}

.detail-cat-chip:hover {
  border-color: var(--line-strong);
  color: var(--text);
}

.detail-cat-chip.active {
  background: var(--text);
  color: var(--bg);
  border-color: var(--text);
  font-weight: 600;
}

.detail-cat-chip.active .detail-cat-val,
.detail-cat-chip.active .detail-cat-pct {
  color: var(--bg);
  opacity: 0.9;
}

.detail-cat-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}

.detail-cat-name {
  font-weight: 500;
}

.detail-cat-val {
  color: var(--text);
  font-weight: 600;
}

.detail-cat-pct {
  font-size: 11px;
  color: var(--text-3);
}

.detail-cat-clear {
  color: #ef4444 !important;
  border-color: rgba(239, 68, 68, 0.3) !important;
  background: rgba(239, 68, 68, 0.05) !important;
}

/* 2. 时间跨度与月份快速切换条 */
.detail-time-controls {
  margin: 4px 0 14px;
}

.detail-span-segmented {
  display: flex;
  background: var(--surface-2, rgba(0, 0, 0, 0.04));
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 3px;
  gap: 2px;
}

.detail-span-btn {
  flex: 1;
  text-align: center;
  padding: 6px 0;
  font-size: 13px;
  font-weight: 500;
  color: var(--text-2);
  border-radius: 7px;
  border: none;
  background: transparent;
  cursor: pointer;
  transition: all 0.15s ease;
}

.detail-span-btn.active {
  background: var(--bg);
  color: var(--text);
  font-weight: 600;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08);
}

.detail-month-selector {
  margin-top: 10px;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  padding-bottom: 2px;
}
.detail-month-selector::-webkit-scrollbar {
  display: none;
}

.detail-month-pills {
  display: inline-flex;
  gap: 6px;
  white-space: nowrap;
}

.detail-month-pill {
  display: inline-flex;
  align-items: center;
  padding: 5px 12px;
  border-radius: 16px;
  background: var(--surface-2, rgba(0, 0, 0, 0.04));
  border: 1px solid var(--line);
  font-size: 12px;
  color: var(--text-2);
  font-weight: 500;
  cursor: pointer;
  transition: all 0.15s ease;
}

.detail-month-pill:hover {
  background: rgba(0, 0, 0, 0.08);
  color: var(--text);
}

.detail-month-pill.active {
  background: var(--tint, #0d0d0d);
  color: #fff;
  border-color: var(--tint, #0d0d0d);
  font-weight: 600;
}

/* 3. 按月分组独立卡片组 (Grouped Month Section) */
.detail-month-section {
  margin-bottom: 16px;
}

.detail-month-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 4px 6px;
  cursor: pointer;
  user-select: none;
}

.detail-month-title {
  display: flex;
  align-items: center;
  gap: 6px;
}

.detail-month-name {
  font-size: 14px;
  font-weight: 700;
  color: var(--text);
  letter-spacing: -0.01em;
}

.detail-month-current-badge {
  font-size: 10px;
  padding: 1px 6px;
  border-radius: 8px;
  background: rgba(16, 185, 129, 0.12);
  color: #10b981;
  font-weight: 600;
}

.detail-month-summary {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  color: var(--text-2);
}

.detail-month-summary b {
  color: var(--text);
  font-weight: 600;
}

.detail-fold-icon {
  font-size: 14px;
  color: var(--text-3);
  transition: transform 0.2s ease;
  display: inline-block;
}
.detail-fold-icon.collapsed {
  transform: rotate(-90deg);
}

.detail-month-card {
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.03);
}

.detail-month-card .detail-swipe-wrapper:not(:last-child) .dash-item-row {
  border-bottom: 0.5px solid var(--line);
}

/* 条目样式紧凑优化 */
.detail-item-row {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  padding: 12px 14px !important;
  margin-bottom: 0 !important;
  border-radius: 0 !important;
  border: none !important;
  background: var(--bg);
  transition: background 0.15s ease;
}

.detail-item-row:hover {
  background: #fafafa;
}

.detail-item-left {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
  flex: 1;
}

.detail-item-title-line {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.detail-cat-badge {
  font-size: 11px;
  font-weight: 600;
  padding: 2px 7px;
  border-radius: 6px;
  white-space: nowrap;
  flex-shrink: 0;
}

.detail-item-merchant {
  font-size: 14px;
  font-weight: 600;
  color: var(--text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.detail-item-sub-line {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 12px;
  color: var(--text-3);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.detail-item-time {
  white-space: nowrap;
}

.detail-item-note {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--text-2);
}

.detail-item-right {
  display: flex;
  align-items: baseline;
  padding-left: 12px;
  flex-shrink: 0;
}

.detail-item-amount {
  font-size: 15px;
  font-weight: 700;
  color: var(--text);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.01em;
}

[data-theme="dark"] .detail-structure-panel {
  background: rgba(255, 255, 255, 0.04);
  box-shadow: none;
}

[data-theme="dark"] .detail-meta-pill {
  background: rgba(255, 255, 255, 0.08);
}

[data-theme="dark"] .detail-cat-chip {
  background: rgba(255, 255, 255, 0.06);
}

[data-theme="dark"] .detail-cat-chip.active {
  background: #ffffff;
  color: #000000;
}

[data-theme="dark"] .detail-span-segmented {
  background: rgba(255, 255, 255, 0.05);
}

[data-theme="dark"] .detail-span-btn.active {
  background: rgba(255, 255, 255, 0.15);
  color: #ffffff;
}

[data-theme="dark"] .detail-month-pill {
  background: rgba(255, 255, 255, 0.06);
}

[data-theme="dark"] .detail-month-pill.active {
  background: #ffffff;
  color: #000000;
  border-color: #ffffff;
}

/* 聊天图片全屏高保真预览 (Lightbox) */
.media-lightbox-overlay {
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: rgba(0, 0, 0, 0.86);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  cursor: zoom-out;
  animation: fadeInOverlay 0.2s ease;
  user-select: none;
}
.media-lightbox-overlay img {
  max-width: 92vw;
  max-height: 90vh;
  object-fit: contain;
  border-radius: 8px;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5);
  animation: zoomInLightBox 0.22s cubic-bezier(0.16, 1, 0.3, 1);
  cursor: default;
}
.media-lightbox-close {
  position: absolute;
  top: 16px;
  right: 16px;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.2);
  border: none;
  color: #fff;
  font-size: 20px;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background 0.15s ease;
}
.media-lightbox-close:hover {
  background: rgba(255, 255, 255, 0.35);
}

@keyframes zoomInLightBox {
  from { transform: scale(0.9); opacity: 0; }
  to { transform: scale(1); opacity: 1; }
}






/* ==================================================================
   看板多类型卡片 / 自由换位 / 灵伴常用看板传送门（2026-09）
   沿用既有变量与字体，仅新增布局与动效；不引入网络字体与第三方库。
   ================================================================== */

/* ------------------------------------------------ 卡片工具与类型标签 */
.dash-card-tools {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
}
.dash-kind-chip {
  font-size: 10px;
  line-height: 1;
  padding: 3px 6px;
  border-radius: 999px;
  background: rgba(0, 122, 255, 0.1);
  color: #007aff;
  white-space: nowrap;
}
.dash-card-menu {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: 1px solid var(--line-strong);
  background: var(--bg);
  color: var(--text-2);
  font-size: 13px;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  cursor: pointer;
}
.dash-card-menu:hover { background: var(--bubble); }
.dash-metric-muted { color: var(--text-3); }
.dash-quick-prompt {
  font-size: 15px;
  font-weight: 600;
  color: var(--text);
  line-height: 1.3;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.dash-progress {
  height: 4px;
  border-radius: 999px;
  background: var(--line);
  margin: 8px 0 2px;
  overflow: hidden;
}
.dash-progress > i {
  display: block;
  height: 100%;
  background: #007aff;
  border-radius: 999px;
  transition: width 0.25s ease;
}
.dash-card-focus {
  outline: 2px solid #007aff;
  outline-offset: 2px;
}

/* ------------------------------------------------ 排序：工具条 / 顺序面板 / 拖动 */
.dash-toolbar {
  display: flex;
  gap: 8px;
  margin-top: 12px;
}
.dash-tool-btn {
  flex: 1;
  padding: 9px 10px;
  border-radius: 10px;
  background: var(--bubble);
  color: var(--text-2);
  font-size: 13px;
}
.dash-tool-btn:disabled { opacity: 0.45; }
.dash-order-panel {
  margin-top: 10px;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--bg);
}
.dash-order-hint {
  font-size: 12px;
  color: var(--text-3);
  margin-bottom: 8px;
}
.dash-order-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 6px 0;
  border-bottom: 1px solid var(--line);
}
.dash-order-row:last-child { border-bottom: none; }
.dash-order-name { font-size: 13px; color: var(--text); }
.dash-order-actions { display: inline-flex; gap: 6px; }
.dash-order-btn {
  width: 28px;
  height: 28px;
  border-radius: 8px;
  border: 1px solid var(--line-strong);
  background: var(--bg);
  color: var(--text-2);
  font-size: 13px;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
}
.dash-order-btn:disabled { opacity: 0.35; }

/* 拖动的卡片固定浮起；原位由占位块保持网格稳定（不做绝对坐标、不重叠、不拖出看板） */
.dash-card { touch-action: pan-y; }
.dash-card.dash-card-armed {
  touch-action: none;
  box-shadow: 0 0 0 2px rgba(0, 122, 255, 0.35);
}
.dash-card-placeholder {
  border-radius: 16px;
  border: 1.5px dashed var(--line-strong);
  background: rgba(0, 122, 255, 0.04);
}
.dash-card.dash-card-dragging {
  position: fixed;
  margin: 0;
  pointer-events: none;
  background: var(--bg);
  box-shadow: 0 14px 34px rgba(0, 0, 0, 0.22);
  z-index: 60;
}
.dash-card.dash-card-lifted { transition: none; }
body.dash-sorting-active {
  cursor: grabbing;
  user-select: none;
  -webkit-user-select: none;
}
body.dash-sorting-active .dash-card { cursor: grabbing; }

/* ------------------------------------------------ 添加/编辑卡片：类型选择 */
.custom-card-kind-row {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 8px;
}
.card-kind-chip {
  padding: 6px 10px;
  border-radius: 999px;
  border: 1px solid var(--line-strong);
  background: var(--bg);
  color: var(--text-2);
  font-size: 12px;
}
.card-kind-chip.active {
  border-color: #007aff;
  color: #007aff;
  background: rgba(0, 122, 255, 0.08);
}
.custom-card-tip {
  font-size: 12px;
  color: var(--text-3);
  margin: 6px 0 2px;
  line-height: 1.5;
}
.card-mgr-item-actions { display: inline-flex; gap: 4px; flex-shrink: 0; }
.card-action-modal { max-width: 420px; }
.sheet-action-btn {
  width: 100%;
  padding: 12px;
  border-radius: 12px;
  background: var(--bubble);
  color: var(--text);
  font-size: 14px;
  text-align: center;
}
.sheet-action-btn.danger { color: #dc2626; }

/* ------------------------------------------------ 灵伴设置面板 */
.avatar-settings-title {
  color: var(--text-3);
  font-size: 13px;
  margin-bottom: 8px;
}
.avatar-settings-desc {
  color: var(--text-3);
  font-size: 12px;
  line-height: 1.5;
  margin-top: 6px;
}
.avatar-settings-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 0;
  border-bottom: 1px solid var(--line);
  cursor: pointer;
}
.avatar-settings-row:last-of-type { border-bottom: none; }
.avatar-settings-row b { display: block; font-weight: 600; font-size: 15px; }
.avatar-settings-row em {
  display: block;
  font-style: normal;
  font-size: 13px;
  color: var(--text-3);
  margin-top: 2px;
  line-height: 1.45;
}
.avatar-settings-row input[type="radio"],
.avatar-settings-row input[type="checkbox"] { transform: scale(1.3); cursor: pointer; flex-shrink: 0; }
.fav-list { display: flex; flex-direction: column; gap: 6px; }
.fav-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 8px 10px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--bubble);
}
.fav-name { font-size: 13px; color: var(--text); }
.fav-actions { display: inline-flex; gap: 6px; }
.fav-remove { color: #dc2626; }
.fav-add-row { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.fav-add-chip {
  padding: 7px 10px;
  border-radius: 999px;
  border: 1px dashed var(--line-strong);
  background: var(--bg);
  color: var(--text-2);
  font-size: 12px;
}
.fav-add-chip:disabled { opacity: 0.4; }

/* ------------------------------------------------ 常用看板传送门 + 黑洞 */
.avatar-portal-overlay {
  position: fixed;
  inset: 0;
  z-index: 75;
  background: rgba(13, 13, 15, 0.08);
  animation: fadeInOverlay 0.16s ease;
}
.avatar-portal-hint {
  position: absolute;
  transform: translate(-50%, -50%);
  color: #fff;
  font-size: 10px;
  line-height: 1;
  letter-spacing: 0.04em;
  padding: 5px 8px;
  border-radius: 999px;
  background: rgba(13, 13, 15, 0.72);
  border: 0.5px solid rgba(255, 255, 255, 0.22);
  opacity: 0.88;
  text-shadow: 0 1px 8px rgba(0, 0, 0, 0.55);
  white-space: nowrap;
}
.avatar-portal-targets {
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.avatar-blackhole {
  position: absolute;
  width: 58px;
  transform: translate(-50%, -50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  pointer-events: auto;
}
.bh-core {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: radial-gradient(circle at 50% 42%, #1c1c21 0%, #0a0a0c 62%, #000 100%);
  box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.92), 0 4px 12px rgba(0, 0, 0, 0.34);
  transition: transform 0.2s ease;
}
.bh-ring {
  position: absolute;
  top: 0;
  left: 50%;
  width: 50px;
  height: 50px;
  margin-left: -25px;
  border-radius: 50%;
  border: 1.5px solid rgba(91, 118, 146, 0.32);
  border-top-color: #5b7692;
  opacity: 0;
  transform: scale(0.92);
  transition: opacity 0.2s ease, transform 0.2s ease;
}
.bh-label {
  display: flex;
  align-items: center;
  gap: 4px;
  color: rgba(255, 255, 255, 0.92);
  font-size: 10px;
  max-width: 58px;
  opacity: 0.82;
}
.bh-icon { display: none; }
.bh-title { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.avatar-blackhole.is-hover .bh-core { transform: scale(0.84); }
.avatar-blackhole.is-hover .bh-ring {
  opacity: 1;
  animation: bhSpin 1.1s linear infinite;
}
.avatar-blackhole.is-hover .bh-label { opacity: 1; }
.avatar-blackhole.is-absorbing .bh-core { animation: bhCollapse 0.28s ease forwards; }
.avatar-blackhole.is-absorbing .bh-ring { animation: bhCollapseRing 0.28s ease forwards; }

@keyframes bhSpin {
  from { transform: rotate(0deg) scale(1.06); }
  to { transform: rotate(360deg) scale(1.06); }
}
@keyframes bhCollapse {
  0% { transform: scale(0.84); }
  45% { transform: scale(1.06); }
  100% { transform: scale(0.28); opacity: 0.25; }
}
@keyframes bhCollapseRing {
  0% { transform: scale(1.06); opacity: 1; }
  100% { transform: scale(0.3); opacity: 0; }
}
body.avatar-portal-active { overflow: hidden; }
/* 灵伴手势：进度圈 → 就绪圈。只作用于小触点，聊天滚动区保持原行为。 */
.avatar-gesture-host {
  touch-action: none;
  user-select: none;
  -webkit-touch-callout: none;
}
.avatar-gesture-host:not(.floating-avatar-widget) { position: relative; }
.avatar-gesture-host::before {
  content: '';
  position: absolute;
  inset: -5px;
  border: 2px solid currentColor;
  border-radius: 50%;
  opacity: 0;
  pointer-events: none;
}
.avatar-gesture-pressing::before {
  animation: avatarHoldRing 500ms ease-out both;
}
.avatar-gesture-ready::before { opacity: 0.65; }
.avatar-gesture-ready { cursor: grabbing; }
.avatar-gesture-host:focus-visible {
  outline: 2px solid var(--accent, currentColor);
  outline-offset: 6px;
}
@keyframes avatarHoldRing {
  from { opacity: 0.12; transform: scale(0.82); }
  to { opacity: 0.65; transform: scale(1); }
}
@media (prefers-reduced-motion: reduce) {
  .avatar-gesture-pressing::before { animation: none; opacity: 0.2; }
  .avatar-gesture-host { animation: none !important; transition: none !important; }
}
body.avatar-portal-active .bottom-avatar-host,
body.avatar-portal-active .nav-avatar-host,
body.avatar-portal-active .chat-latest-avatar-host {
  animation: none !important;
  transition: none !important;
}

/* ------------------------------------------------ 数据与同步中控台 */

/* ---- a. 账号与云端同步状态卡片 ---- */
.sync-account-card {
  position: relative;
  margin: 4px 0 14px;
  padding: 14px;
  border-radius: 16px;
  background: var(--bubble);
  border: 0.5px solid var(--line-strong);
  overflow: hidden;
}
.sync-account-card::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(140deg, rgba(24, 95, 165, 0.14), rgba(83, 74, 183, 0.08) 55%, transparent 85%);
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.25s ease;
}
.sync-account-card.is-online { border-color: rgba(24, 95, 165, 0.3); }
.sync-account-card.is-online::after { opacity: 1; }
.sync-account-head {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: 10px;
}
.sync-account-avatar {
  width: 38px;
  height: 38px;
  flex: 0 0 38px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 12px;
  background: var(--bg);
  border: 0.5px solid var(--line);
  font-size: 19px;
  line-height: 1;
}
.sync-account-id {
  flex: 1 1 auto;
  min-width: 0;
}
.sync-account-id b {
  display: block;
  font-size: 15px;
  font-weight: 600;
  color: var(--text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.sync-account-id em {
  display: block;
  font-style: normal;
  font-size: 12px;
  color: var(--text-2);
  margin-top: 1px;
}
.sync-account-pill {
  flex: 0 0 auto;
  font-size: 11px;
  font-weight: 600;
  padding: 3px 9px;
  border-radius: 999px;
  color: var(--text-2);
  background: var(--bg);
  border: 0.5px solid var(--line-strong);
}
.sync-account-card.is-online .sync-account-pill {
  color: #0f6e56;
  border-color: rgba(15, 110, 86, 0.3);
  background: rgba(15, 110, 86, 0.09);
}
.sync-account-desc {
  position: relative;
  z-index: 1;
  margin: 10px 0 0;
  font-size: 13px;
  line-height: 1.5;
  color: var(--text-2);
}
.sync-account-foot {
  position: relative;
  z-index: 1;
  margin-top: 10px;
  padding-top: 10px;
  border-top: 0.5px solid var(--line);
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 12px;
  color: var(--text-3);
}
.sync-account-foot b { color: var(--text-2); font-weight: 600; }
.sync-account-actions { position: relative; z-index: 1; margin-top: 12px; }
.sync-primary-btn {
  width: 100%;
  padding: 11px;
  border-radius: 12px;
  background: var(--tint);
  color: #fff;
  font-size: 15px;
  font-weight: 600;
  transition: transform 0.12s ease, opacity 0.15s ease;
}
.sync-primary-btn:active { transform: scale(0.98); opacity: 0.9; }
.sync-text-danger {
  font-size: 13px;
  color: #b3261e;
  padding: 2px 0;
}
.sync-text-danger:active { opacity: 0.6; }

/* ---- 操作磁贴 ---- */
.sync-actions {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  margin-bottom: 14px;
}
.sync-action-tile {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  padding: 12px 6px;
  border-radius: 14px;
  background: var(--bubble);
  border: 0.5px solid var(--line);
  text-align: center;
  transition: transform 0.12s cubic-bezier(0.2, 0.9, 0.3, 1), background-color 0.15s ease;
}
.sync-action-tile:active { transform: scale(0.95); background: #ebebeb; }
.sync-action-tile b { font-size: 13px; font-weight: 600; color: var(--text); }
.sync-action-tile em { font-style: normal; font-size: 11px; color: var(--text-3); }
.sync-action-icon { font-size: 18px; line-height: 1; }

/* ---- 健康隐私边界 ---- */
.sync-privacy {
  margin-bottom: 18px;
  padding: 12px 14px;
  border-radius: 14px;
  background: var(--bubble);
  border: 0.5px solid var(--line);
}
.sync-privacy-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.sync-privacy-head b { font-size: 13px; font-weight: 600; color: var(--text); }
.sync-privacy-state { font-size: 11px; color: var(--text-3); }
.sync-privacy-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-top: 10px;
  font-size: 13px;
  color: var(--text-2);
  cursor: pointer;
}
.sync-privacy-note {
  margin: 8px 0 0;
  font-size: 12px;
  line-height: 1.5;
  color: var(--text-3);
}

/* ---- 分组标题 ---- */
.sync-section-title {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin: 0 0 9px;
}
.sync-section-title span {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-2);
}
.sync-section-title em {
  font-style: normal;
  font-size: 11px;
  color: var(--text-3);
}

/* ---- b. 生态扩展双子卡片 ---- */
.sync-eco-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  margin-bottom: 18px;
}
.sync-eco-card {
  position: relative;
  padding: 12px;
  border-radius: 14px;
  background: var(--bubble);
  border: 0.5px solid var(--line);
  display: flex;
  flex-direction: column;
  gap: 6px;
  transition: transform 0.12s ease, border-color 0.15s ease;
}
.sync-eco-card:active { transform: scale(0.98); }
.sync-eco-icon {
  width: 30px;
  height: 30px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 9px;
  background: var(--bg);
  border: 0.5px solid var(--line);
  font-size: 16px;
  line-height: 1;
}
.sync-eco-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 6px;
}
.sync-eco-head b {
  flex: 1 1 auto;
  min-width: 0;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.3;
  color: var(--text);
}
.eco-tag {
  flex: 0 0 auto;
  font-size: 10px;
  font-weight: 600;
  padding: 2px 6px;
  border-radius: 6px;
  color: var(--text-3);
  background: var(--bg);
  border: 0.5px solid var(--line);
}
.eco-tag.is-ready { color: #0f6e56; background: rgba(15, 110, 86, 0.1); border-color: rgba(15, 110, 86, 0.24); }
.eco-tag.is-idle { color: var(--text-3); }
.sync-eco-desc {
  margin: 0;
  font-size: 12px;
  line-height: 1.45;
  color: var(--text-2);
}
.sync-eco-hint { font-size: 11px; color: var(--text-3); margin-top: auto; }

/* ---- c. 公共时空流：实时快照条 + 网格 ---- */
.sync-context-strip {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 10px;
}
.sync-context-item {
  font-size: 11px;
  line-height: 1.4;
  padding: 5px 9px;
  border-radius: 9px;
  background: var(--bubble);
  border: 0.5px solid var(--line);
  color: var(--text-2);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}

.sync-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}
.sync-stream-card {
  position: relative;
  padding: 11px;
  border-radius: 14px;
  background: var(--bubble);
  border: 0.5px solid var(--line);
  display: flex;
  flex-direction: column;
  gap: 9px;
  transition: border-color 0.2s ease, background-color 0.2s ease, transform 0.12s ease;
}
.sync-stream-card.is-live {
  border-color: rgba(15, 110, 86, 0.26);
  background: linear-gradient(160deg, rgba(15, 110, 86, 0.055), var(--bubble) 62%);
}
.sync-stream-card.is-idle {
  opacity: 0.62;
}
.sync-stream-card.is-idle:active { transform: scale(0.985); }
.stream-card-header {
  display: flex;
  align-items: center;
  gap: 7px;
}
.stream-icon {
  flex: 0 0 auto;
  width: 26px;
  height: 26px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  background: var(--bg);
  border: 0.5px solid var(--line);
  font-size: 14px;
  line-height: 1;
}
.stream-title {
  flex: 1 1 auto;
  min-width: 0;
}
.stream-title b {
  display: block;
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: -0.1px;
  color: var(--text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.stream-title em {
  display: block;
  font-style: normal;
  font-size: 10.5px;
  line-height: 1.35;
  color: var(--text-3);
  margin-top: 1px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.stream-meta {
  display: flex;
  align-items: center;
  gap: 5px;
  min-width: 0;
  font-size: 11px;
  color: var(--text-2);
}
.stream-status-dot {
  flex: 0 0 auto;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--text-3);
  box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.04);
  transition: background-color 0.2s ease, box-shadow 0.2s ease;
}
.is-live .stream-status-dot {
  background: #22c55e;
  box-shadow: 0 0 0 3px rgba(34, 197, 94, 0.16);
  animation: streamPulse 2.4s ease-in-out infinite;
}
.is-idle .stream-status-dot { background: #c7c7cc; }
.stream-status-text { flex: 0 0 auto; color: var(--text-2); }
.stream-summary {
  flex: 1 1 auto;
  min-width: 0;
  text-align: right;
  color: var(--text-3);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
@keyframes streamPulse {
  0%, 100% { box-shadow: 0 0 0 3px rgba(34, 197, 94, 0.16); }
  50% { box-shadow: 0 0 0 5px rgba(34, 197, 94, 0.05); }
}

/* ---- iOS 风格 Switch ---- */
.ios-switch {
  flex: 0 0 auto;
  position: relative;
  width: 38px;
  height: 22px;
  padding: 0;
  border-radius: 999px;
  background: #e3e3e8;
  transition: background-color 0.24s cubic-bezier(0.2, 0.9, 0.3, 1);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
/* 把可点区域撑到 44px，视觉尺寸保持不变 */
.ios-switch::before {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  height: 44px;
  transform: translateY(-50%);
}
.ios-switch i {
  position: absolute;
  top: 2px;
  left: 2px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.22), 0 0 0 0.5px rgba(0, 0, 0, 0.04);
  transition: transform 0.24s cubic-bezier(0.2, 0.9, 0.3, 1), width 0.18s ease;
}
.ios-switch.on { background: #34c759; }
.ios-switch.on i { transform: translateX(16px); }
.ios-switch:active i { width: 20px; }
.ios-switch.static { pointer-events: none; }

@media (max-width: 420px) {
  .sync-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 7px; }
  .sync-eco-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .stream-title em { display: none; }
  .sync-actions { gap: 6px; }
  .sync-action-tile b { font-size: 12px; }
}

@media (max-width: 340px) {
  .sync-grid { grid-template-columns: minmax(0, 1fr); }
  .sync-eco-grid { grid-template-columns: minmax(0, 1fr); }
}

/* ------------------------------------------------ 减弱动效 */
@media (prefers-reduced-motion: reduce) {
  .dash-card,
  .dash-card.dash-card-dragging,
  .dash-progress > i { transition: none !important; }
  .dash-card.dash-card-dragging { box-shadow: 0 6px 16px rgba(0, 0, 0, 0.18); }
  .is-live .stream-status-dot { animation: none; }
  .ios-switch,
  .ios-switch i,
  .sync-stream-card,
  .sync-action-tile,
  .sync-eco-card { transition: none !important; }
  .avatar-blackhole.is-hover .bh-ring { animation: none; opacity: 1; transform: scale(1.04); }
  .avatar-blackhole.is-absorbing .bh-core { animation: none; opacity: 0.3; transform: scale(0.5); }
  .avatar-blackhole.is-absorbing .bh-ring { animation: none; opacity: 0; }
  .avatar-portal-overlay { animation: none; }
}

/* ============================================================
   数据与同步 · 16 项高保真网格中控台（Ling 复刻）
   分组：生态互联(2) / 公共时空流与感知(11) / 系统底层(3)
   ============================================================ */
.sync-grid-dashboard {
  display: flex;
  flex-direction: column;
  gap: 18px;
  --tile-accent: var(--text-2);
  --tile-accent-soft: rgba(0, 0, 0, 0.05);
}

/* ---- 分组容器 ---- */
.sync-grid-group {
  display: flex;
  flex-direction: column;
  gap: 9px;
}
.sync-group-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  padding: 0 2px;
}
.sync-group-head > b {
  position: relative;
  padding-left: 10px;
  font-size: 12.5px;
  font-weight: 650;
  letter-spacing: 0.2px;
  color: var(--text-2);
}
.sync-group-head > b::before {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  width: 3px;
  height: 12px;
  border-radius: 2px;
  transform: translateY(-50%);
  background: var(--tile-accent);
}
.sync-group-head > em {
  font-style: normal;
  font-size: 11px;
  color: var(--text-3);
  letter-spacing: 0.2px;
}

/* 分组主题色 */
.sync-grid-group[data-group="ecosystem"] { --tile-accent: #185fa5; --tile-accent-soft: rgba(24, 95, 165, 0.1); }
.sync-grid-group[data-group="ambient"]   { --tile-accent: #0f6e56; --tile-accent-soft: rgba(15, 110, 86, 0.1); }
.sync-grid-group[data-group="system"]    { --tile-accent: #534ab7; --tile-accent-soft: rgba(83, 74, 183, 0.1); }

/* ---- 瓦片网格：手机 2 列，宽屏 3~4 列 ---- */
.sync-tile-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 9px;
}

/* ---- 单张瓦片 ---- */
.sync-tile {
  position: relative;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  padding: 12px 12px 12px 11px;
  border-radius: 16px;
  background: var(--bubble);
  border: 0.5px solid var(--line);
  overflow: hidden;
  transition: border-color 0.24s ease, background-color 0.24s ease,
              transform 0.16s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.24s ease;
}
.sync-tile::after {
  /* 左侧分组色条：随开关状态点亮 */
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 2.5px;
  background: var(--tile-accent);
  opacity: 0;
  transition: opacity 0.24s ease;
}
.sync-tile.is-live::after,
.sync-tile.is-pending::after { opacity: 1; }
.sync-tile.is-live {
  background: linear-gradient(158deg, var(--tile-accent-soft), var(--bubble) 60%);
  border-color: color-mix(in srgb, var(--tile-accent) 26%, transparent);
}
.sync-tile.is-pending {
  background: linear-gradient(158deg, rgba(224, 168, 0, 0.12), var(--bubble) 60%);
  border-color: rgba(216, 160, 0, 0.3);
}
.sync-tile.is-idle { opacity: 0.6; }
.sync-tile.is-idle .tile-icon { filter: grayscale(0.7); }
.sync-tile:active { transform: scale(0.982); }
@media (hover: hover) {
  .sync-tile:hover {
    border-color: color-mix(in srgb, var(--tile-accent) 34%, transparent);
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.06);
  }
}

/* ---- 图标 ---- */
.tile-icon {
  flex: 0 0 auto;
  width: 34px;
  height: 34px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 11px;
  background: var(--bg);
  border: 0.5px solid var(--line);
  box-shadow: inset 0 0 0 0.5px rgba(255, 255, 255, 0.5);
  font-size: 17px;
  line-height: 1;
  transition: transform 0.24s cubic-bezier(0.34, 1.56, 0.64, 1), background-color 0.24s ease;
}
.sync-tile.is-live .tile-icon { background: var(--tile-accent-soft); }
.sync-tile.is-pending .tile-icon { background: rgba(230, 175, 20, 0.16); }
.sync-tile:active .tile-icon { transform: scale(1.08) rotate(-3deg); }

/* ---- 文本区 ---- */
.tile-body {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.tile-head {
  display: flex;
  align-items: center;
  gap: 5px;
  min-width: 0;
}
.tile-name {
  flex: 0 1 auto;
  min-width: 0;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: -0.1px;
  color: var(--text);
  overflow-wrap: anywhere;
}
.tile-status {
  flex: 0 0 auto;
  font-size: 10px;
  font-weight: 600;
  padding: 1px 5px;
  border-radius: 6px;
  color: var(--text-3);
  background: rgba(0, 0, 0, 0.045);
  white-space: nowrap;
}
.sync-tile.is-live .tile-status { color: var(--tile-accent); background: var(--tile-accent-soft); }
.sync-tile.is-pending .tile-status { color: #9a6b00; background: rgba(230, 175, 20, 0.18); }

.tile-summary {
  margin: 0;
  flex: 0 0 auto;
  text-align: left;
  white-space: normal;
  font-size: 11px;
  line-height: 1.4;
  color: var(--text-2);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  overflow-wrap: anywhere;
}
.sync-tile.is-idle .tile-summary { color: var(--text-3); }

/* ---- 高亮状态指示灯 ---- */
.tile-indicator {
  flex: 0 0 auto;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #c7c7cc;
  box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.045);
  transition: background-color 0.24s ease, box-shadow 0.24s ease;
}
.tile-indicator[data-state="live"],
.is-live .tile-indicator {
  background: #22c55e;
  box-shadow: 0 0 0 3px rgba(34, 197, 94, 0.18);
  animation: tilePulse 2.4s ease-in-out infinite;
}
.tile-indicator[data-state="pending"],
.is-pending .tile-indicator {
  background: #e6af14;
  box-shadow: 0 0 0 3px rgba(230, 175, 20, 0.2);
  animation: tilePulseWarn 3s ease-in-out infinite;
}
.tile-indicator[data-state="idle"],
.is-idle .tile-indicator {
  background: #c7c7cc;
  box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.045);
  animation: none;
}
@keyframes tilePulse {
  0%, 100% { box-shadow: 0 0 0 3px rgba(34, 197, 94, 0.18); }
  50%      { box-shadow: 0 0 0 5.5px rgba(34, 197, 94, 0.05); }
}
@keyframes tilePulseWarn {
  0%, 100% { box-shadow: 0 0 0 3px rgba(230, 175, 20, 0.2); }
  50%      { box-shadow: 0 0 0 5.5px rgba(230, 175, 20, 0.06); }
}

/* ---- 弹簧 Switch（复用 .ios-switch 视觉，叠加无级弹簧曲线） ---- */
.sync-grid-dashboard .ios-switch.tile-toggle {
  width: 38px;
  height: 22px;
  background: #e3e3e8;
  transition: background-color 0.28s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.sync-grid-dashboard .ios-switch.tile-toggle i {
  transition: transform 0.46s cubic-bezier(0.34, 1.56, 0.64, 1), width 0.16s ease;
}
.sync-grid-dashboard .ios-switch.tile-toggle.on {
  background: var(--tile-accent, #34c759);
}
.sync-grid-dashboard .ios-switch.tile-toggle.on i { transform: translateX(16px); }
.sync-grid-dashboard .ios-switch.tile-toggle:active i { width: 22px; }
.sync-grid-dashboard .ios-switch.tile-toggle.on:active i { transform: translateX(12px); }
/* 触碰回弹：按下瞬间给瓦片一个轻微的弹簧缩放 */
.sync-tile.is-tapped { animation: tileSpring 0.42s cubic-bezier(0.34, 1.56, 0.64, 1); }
@keyframes tileSpring {
  0%   { transform: scale(1); }
  38%  { transform: scale(0.975); }
  100% { transform: scale(1); }
}

/* ---- 宽屏适配 ---- */
@media (min-width: 560px) {
  .sync-tile-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
  .tile-icon { width: 36px; height: 36px; font-size: 18px; }
  .tile-name { font-size: 13.5px; }
}
@media (min-width: 900px) {
  .sync-tile-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .sync-grid-dashboard { gap: 20px; }
}
@media (max-width: 420px) {
  .sync-tile-grid { gap: 8px; }
  .sync-tile { padding: 11px 10px; gap: 9px; border-radius: 15px; }
  .tile-icon { width: 31px; height: 31px; border-radius: 10px; font-size: 15px; }
  .tile-name { font-size: 12.5px; }
}
@media (max-width: 340px) {
  .sync-tile-grid { grid-template-columns: minmax(0, 1fr); }
}

/* ---- 深色主题 ---- */
[data-theme="dark"] .sync-tile,
body.dark .sync-tile {
  background: rgba(255, 255, 255, 0.055);
  border-color: rgba(255, 255, 255, 0.1);
}
[data-theme="dark"] .tile-icon,
body.dark .tile-icon {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.12);
  box-shadow: none;
}
[data-theme="dark"] .tile-status,
body.dark .tile-status { background: rgba(255, 255, 255, 0.1); }
[data-theme="dark"] .sync-grid-dashboard .ios-switch.tile-toggle,
body.dark .sync-grid-dashboard .ios-switch.tile-toggle { background: rgba(255, 255, 255, 0.18); }
[data-theme="dark"] .sync-tile.is-live,
body.dark .sync-tile.is-live {
  background: linear-gradient(158deg, var(--tile-accent-soft), rgba(255, 255, 255, 0.055) 60%);
}

/* ---- 减弱动效 ---- */
@media (prefers-reduced-motion: reduce) {
  .sync-tile,
  .sync-tile.is-tapped,
  .tile-icon,
  .sync-grid-dashboard .ios-switch.tile-toggle,
  .sync-grid-dashboard .ios-switch.tile-toggle i { transition: none !important; animation: none !important; }
  .tile-indicator { animation: none !important; }
}

/* ---- 三态指示灯：data-state 优先于 is-live/is-idle ----
   时空流瓦片必须保留 is-live / is-idle 两态类（既有开关绑定依赖它们），
   因此「待接入」这类更细的状态统一由 data-state 表达，并在此处压过两态样式。 */
.sync-tile[data-state="pending"] {
  opacity: 1;
  background: linear-gradient(158deg, rgba(224, 168, 0, 0.12), var(--bubble) 60%);
  border-color: rgba(216, 160, 0, 0.3);
}
.sync-tile[data-state="pending"] .tile-icon {
  background: rgba(230, 175, 20, 0.16);
  filter: none;
}
.sync-tile[data-state="pending"]::after { opacity: 1; background: #e6af14; }
.sync-tile[data-state="pending"] .tile-indicator {
  background: #e6af14;
  box-shadow: 0 0 0 3px rgba(230, 175, 20, 0.2);
  animation: tilePulseWarn 3s ease-in-out infinite;
}
.sync-tile[data-state="pending"] .tile-status {
  color: #9a6b00;
  background: rgba(230, 175, 20, 0.18);
}
[data-theme="dark"] .sync-tile[data-state="pending"],
body.dark .sync-tile[data-state="pending"] {
  background: linear-gradient(158deg, rgba(224, 168, 0, 0.16), rgba(255, 255, 255, 0.055) 60%);
}

/* ============================================================
   Artifact 决策卡片（Artifact Decision Cards）
   一张卡 = 一个待拍板的决策 + 1~2 个快捷动作胶囊。
   信息层级：**事实写在 AI 对话正文里，卡片本体只留紧凑动作 / 完成反馈** ——
   不再视觉显示独立标题与灰色 reason（title 仅作无障碍名称，reason 仅作旧卡降级）。
   形态是「贴着按钮的小操作条」：容器内边距很小、按内容取宽，不留无意义空白。
   简约统一：主题变量 + 轻边框，无渐变 / 无彩条 / 无星标。
   ============================================================ */
.decision-cards {
  display: flex;
  flex-direction: column;
  /* 每张卡按自身内容取宽，不被同组里更宽的那张拉伸 */
  align-items: flex-start;
  gap: 7px;
  margin: 6px 0 2px;
  /* 宽度由内容决定：单动作短卡自然收窄，长内容只受上限约束。
     296/320 是上限而不是每张卡的固定宽度；极窄屏由 max-width:100% 兜底不横溢。
     左对齐：容器在 .ai-content-col（align-items:flex-start）里靠左，不用 margin:auto。 */
  width: fit-content;
  max-width: min(296px, 100%);
}
/* 桌面：上限放宽到约 320px，短卡仍按内容宽度，左对齐 */
@media (min-width: 768px) {
  .decision-cards { max-width: min(320px, 100%); }
}
.decision-card {
  /* 小操作条：只包住动作胶囊，内边距尽量薄，卡内不留无意义留白。
     单 / 双动作整卡高度 = 胶囊 40px + 上下内边距 12px + 边框 ≈ 53px（≤56px）。 */
  padding: 6px 7px;
  box-sizing: border-box;
  max-width: 100%;
  border-radius: 14px;
  background: var(--bg);
  border: 0.5px solid var(--line);
  transition: border-color 0.2s ease;
}
.decision-card.is-alert { border-color: var(--line-strong); }
.decision-card-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  /* 没有标题 / 理由行，动作区不再需要额外上外边距 */
  margin-top: 0;
}
.decision-capsule {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  min-height: 40px;          /* 可点击高度 ≥ 40px */
  max-width: 100%;
  overflow-wrap: anywhere;   /* 极窄屏长按钮文案可换行，不横向溢出 */
  padding: 6px 14px;
  border-radius: 999px;
  font-size: 12.5px;
  font-weight: 600;
  line-height: 1.3;
  text-align: left;
  color: var(--bg);
  background: var(--text);
  border: 0.5px solid transparent;
  cursor: pointer;
  transition: opacity 0.18s ease, transform 0.14s ease;
  -webkit-tap-highlight-color: transparent;
}
.decision-capsule:active { transform: scale(0.97); }
.decision-capsule:focus-visible {
  outline: 2px solid var(--text-2);
  outline-offset: 2px;
}
/* 第二个动作降级为次要样式，避免两个都像主按钮 */
.decision-capsule + .decision-capsule {
  color: var(--text);
  background: var(--bubble);
  border-color: var(--line-strong);
}
/* 完成态：勾选 + 简短文字，保持卡片原色 */
.decision-capsule.is-done {
  color: var(--text-2);
  background: var(--bubble);
  border-color: var(--line);
  cursor: default;
}
.decision-capsule.is-done .decision-capsule-check { flex: 0 0 auto; }
.decision-capsule.is-selected { border-color: var(--text-2); }
.decision-capsule:disabled,
.decision-capsule.is-muted {
  opacity: 0.5;
  cursor: default;
}
@media (hover: hover) {
  .decision-capsule:not(:disabled):hover { opacity: 0.88; }
  .decision-card:hover { border-color: var(--line-strong); }
}

/* 深色主题 */
[data-theme="dark"] .decision-card,
body.dark .decision-card {
  background: rgba(255, 255, 255, 0.05);
  border-color: rgba(255, 255, 255, 0.1);
}
[data-theme="dark"] .decision-card.is-alert,
body.dark .decision-card.is-alert { border-color: rgba(255, 255, 255, 0.2); }
[data-theme="dark"] .decision-capsule,
body.dark .decision-capsule {
  color: #16161a;
  background: #ececf0;
}
[data-theme="dark"] .decision-capsule + .decision-capsule,
body.dark .decision-capsule + .decision-capsule {
  color: #f2f2f5;
  background: rgba(255, 255, 255, 0.1);
  border-color: rgba(255, 255, 255, 0.18);
}
[data-theme="dark"] .decision-capsule.is-done,
body.dark .decision-capsule.is-done {
  color: rgba(255, 255, 255, 0.6);
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.14);
}
[data-theme="dark"] .decision-capsule:focus-visible,
body.dark .decision-capsule:focus-visible { outline-color: rgba(255, 255, 255, 0.7); }

@media (prefers-reduced-motion: reduce) {
  .decision-card,
  .decision-capsule { transition: none !important; }
  .decision-capsule:active { transform: none; }
}

/* ============================================================
   桌面居中对话列（Desktop Conversation Column）
   问题：宽屏下聊天回合 / 气泡 / 输入区横铺整窗，用户气泡贴窗口最右、
   AI 回复贴窗口最左，中间大面积空白（1914px 截图：右侧 x≈1717、左侧 x≈20）。
   方案：用 --chat-col-max 单点控制列宽 —— 手机默认 100%（以下规则全是无操作，
   不改变既有移动端布局）；桌面（≥900px）覆盖为固定像素，把
   聊天回合 / 日期分隔 / 时间分隔 / 待确认 / 主动消息 / 输入区收敛到居中列。
   用户气泡靠列右、AI 回复靠列左；顶栏内容与列对齐但背景仍横贯整宽。
   小屏 390 / 320 与 iOS safe-area 布局保持原样。
   ============================================================ */

/* 列内元素统一：内容不超过列宽，左右自动外边距把列居中。
   手机视口下 --chat-col-max 为 100%，此规则等价于无操作。 */
.feed > * {
  max-width: var(--chat-col-max);
  margin-left: auto;
  margin-right: auto;
}

/* 输入区：取「列宽」与「视口 − 2×12px 呼吸距」的较小值再居中。
   手机上等于原有的左右各 12px 边距；桌面上收敛到列宽。 */
.composer-inner.gpt-composer {
  width: min(var(--chat-col-max), calc(100% - 24px));
  margin-left: auto;
  margin-right: auto;
}

/* 附件预览（待发送图片）左缘与输入框对齐，避免桌面下孤零零贴在窗口最左。 */
.img-chip {
  margin-left: max(12px, calc((100% - var(--chat-col-max)) / 2));
}

/* 底栏伴侣岛（常态化身 + 智能胶囊）：与列同宽居中，
   避免胶囊在宽屏下盖到正文或飘到列外。 */
.companion-island {
  max-width: var(--chat-col-max);
  margin-left: auto;
  margin-right: auto;
}

@media (min-width: 900px) {
  :root { --chat-col-max: 820px; }

  /* 左右内边距对称，保证对话列相对视口精确居中（原右内边距为 0，会让列整体左偏 7px）。 */
  .feed { padding: 12px 14px 52px; }

  /* 顶栏内容与列对齐；顶栏背景仍由 .nav 横贯整宽。 */
  .nav-inner { max-width: var(--chat-col-max); margin-left: auto; margin-right: auto; }
}

/* ==========================================================================
   Follow Anything · Following（P0-6）
   仅新增 follow-* 作用域样式，不覆盖任何既有选择器。
   ========================================================================== */

.follow-nav-btn { position: relative; }
.follow-badge {
  position: absolute;
  top: 1px;
  right: 1px;
  min-width: 15px;
  height: 15px;
  padding: 0 4px;
  border-radius: 8px;
  background: #e5484d;
  color: #fff;
  font-size: 10px;
  line-height: 15px;
  text-align: center;
  font-weight: 600;
  pointer-events: none;
}

.follow-mask {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.32);
  z-index: 60;
}

.follow-sheet {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 70;
  height: 100vh;
  height: 100dvh;
  display: flex;
  flex-direction: column;
  background: var(--bg);
  box-shadow: 0 -6px 32px rgba(0, 0, 0, 0.16);
  transform: translateY(100%);
  transition: transform 0.26s cubic-bezier(0.2, 0.9, 0.3, 1);
  padding-top: env(safe-area-inset-top);
  padding-bottom: env(safe-area-inset-bottom);
  overflow: hidden;
}
.follow-sheet.follow-open { transform: translateY(0); }

.follow-header {
  flex-shrink: 0;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 52px;
  padding: 0 12px;
  border-bottom: 0.5px solid var(--line);
}
.follow-title { font-size: 17px; font-weight: 600; margin: 0; }
.follow-back {
  position: absolute;
  left: 8px;
  top: 50%;
  transform: translateY(-50%);
  min-width: 40px;
  min-height: 40px;
  border: none;
  background: transparent;
  color: var(--text-2);
  font-size: 24px;
  line-height: 1;
  border-radius: 10px;
  cursor: pointer;
}
.follow-back:active { background: var(--bubble); }
.follow-refresh {
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  min-height: 34px;
  padding: 0 12px;
  border: none;
  border-radius: 10px;
  background: var(--bubble);
  color: var(--text);
  font-size: 13px;
  cursor: pointer;
}
.follow-refresh:active { background: var(--line-strong); }

.follow-status {
  flex-shrink: 0;
  padding: 8px 18px;
  font-size: 13px;
  color: var(--text-2);
  background: var(--bubble);
  line-height: 1.5;
  white-space: pre-line;
}
.follow-status[data-kind="error"],
.follow-status[data-kind="partial"] { color: #b3261e; }
.follow-status[data-kind="success"] { color: #0f6e56; }
.follow-status[data-kind="rate_limited"] { color: #8f5a08; }

.follow-body {
  flex: 1;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: 14px 16px 32px;
  font-size: 15px;
}

.follow-section { margin-top: 18px; }
.follow-section:first-child { margin-top: 4px; }
.follow-section-title {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-2);
  margin: 0 0 10px;
}

.follow-search-input {
  width: 100%;
  border: none;
  outline: none;
  background: var(--bubble);
  border-radius: 12px;
  padding: 12px 14px;
  font-family: inherit;
  font-size: 15px;
  color: var(--text);
}
.follow-search-results { margin-top: 10px; }

.follow-hint {
  font-size: 13px;
  color: var(--text-2);
  line-height: 1.6;
  padding: 10px 12px;
  background: var(--bubble);
  border-radius: 12px;
}

.follow-candidate {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 12px;
  border-bottom: 0.5px solid var(--line);
}

.follow-onboard {
  border: 0.5px solid var(--line);
  border-radius: 14px;
  padding: 14px;
  background: var(--bg);
}
.follow-onboard-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.follow-onboard-name { font-size: 16px; font-weight: 600; }
.follow-onboard-type { font-size: 12px; color: var(--text-3); margin-top: 2px; }
.follow-onboard-items, .follow-group-items { margin-top: 10px; display: flex; flex-direction: column; gap: 6px; }

.follow-onboard-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 10px;
  border-radius: 10px;
  background: var(--bubble);
  font-size: 14px;
}
.follow-onboard-item.is-disabled { color: var(--text-3); }
.follow-onboard-item input { width: 18px; height: 18px; }
.follow-item-state { margin-left: auto; font-size: 12px; color: var(--text-3); }

.follow-prerelease-toggle {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 12px;
  font-size: 14px;
  color: var(--text-2);
}
.follow-prerelease-toggle input { width: 18px; height: 18px; }

.follow-btn {
  min-height: 38px;
  padding: 0 16px;
  border: none;
  border-radius: 10px;
  background: var(--bubble);
  color: var(--text);
  font-size: 14px;
  cursor: pointer;
}
.follow-btn-primary {
  display: block;
  width: 100%;
  margin-top: 12px;
  background: var(--tint);
  color: #fff;
  font-weight: 500;
}
.follow-btn:disabled { opacity: 0.5; }

.follow-chip {
  font-size: 11px;
  padding: 2px 8px;
  border-radius: 999px;
  background: var(--bubble);
  color: var(--text-2);
  white-space: nowrap;
}
.follow-chip-confirmed, .follow-chip-healthy, .follow-chip-verified, .follow-chip-first { background: #e7f5ef; color: #0f6e56; }
.follow-chip-unverified, .follow-chip-unknown { background: #f2f2f4; color: var(--text-2); }
.follow-chip-corrected, .follow-chip-rate_limited, .follow-chip-update { background: #fdf3e3; color: #8f5a08; }
.follow-chip-retracted, .follow-chip-down, .follow-chip-error, .follow-chip-correction, .follow-chip-unverified-identity { background: #fdeceb; color: #b3261e; }

.follow-group {
  border: 0.5px solid var(--line);
  border-radius: 14px;
  padding: 12px 14px;
  margin-bottom: 12px;
}
.follow-group-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.follow-group-name { font-size: 15px; font-weight: 600; }

.follow-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 8px 0;
  border-bottom: 0.5px solid var(--line);
}
.follow-item:last-child { border-bottom: none; }
.follow-item-main { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.follow-item-label { font-size: 14px; }
.follow-item-rule { font-size: 12px; color: var(--text-3); }
.follow-item-actions { display: flex; gap: 8px; flex-shrink: 0; }
.follow-delivery-panel {
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 14px;
  margin: 16px 0;
  background: var(--bg-2, var(--bg));
}
.follow-push-status { font-size: 13px; line-height: 1.6; margin: 10px 0; }
.follow-push-details > summary { min-height: 40px; display: flex; align-items: center; gap: 12px; cursor: pointer; font-size: 14px; font-weight: 600; }
.follow-push-details > summary::before { content: '›'; font-size: 22px; }
.follow-push-details[open] > summary::before { content: '⌄'; }
.follow-push-preview { margin-left: auto; font-weight: 400; font-size: 12px; color: var(--text-3); }
.follow-delivery-field { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; font-size: 12px; margin-top: 6px; }
.follow-delivery-field select, .follow-delivery-field input {
  min-height: 40px; max-width: 100%; border: 1px solid var(--line); border-radius: 9px;
  background: var(--bg); color: var(--text); font: inherit; padding: 6px 10px;
}
.follow-source-summary { margin-top: 8px; font-size: 12px; line-height: 1.7; color: var(--text-3); overflow-wrap: anywhere; }
@media (max-width: 480px) {
  .follow-item { flex-wrap: wrap; gap: 8px; }
  .follow-item-main { flex: 1 1 180px; }
  .follow-item-actions button { min-height: 40px; }
}

.follow-mini {
  min-height: 34px;
  padding: 0 12px;
  border: none;
  border-radius: 9px;
  background: var(--bubble);
  color: var(--text);
  font-size: 13px;
  cursor: pointer;
}
.follow-mini-danger { color: #b3261e; }
.follow-detail-btn { margin-top: 10px; width: 100%; background: transparent; color: var(--text-2); }

.follow-empty, .follow-empty-inline {
  padding: 16px;
  border-radius: 12px;
  background: var(--bubble);
  color: var(--text-2);
}
.follow-empty-inline { font-size: 13px; line-height: 1.6; }
.follow-empty-title { font-size: 15px; font-weight: 600; color: var(--text); margin-bottom: 6px; }
.follow-empty-desc { font-size: 13px; line-height: 1.65; }

.follow-pending { display: flex; flex-direction: column; gap: 10px; }
.follow-card {
  border: 0.5px solid var(--line);
  border-left: 3px solid var(--tint);
  border-radius: 12px;
  padding: 12px 14px;
  background: var(--bg);
}
.follow-card-head { display: flex; align-items: center; gap: 8px; }
.follow-card-version { font-size: 13px; color: var(--text-2); }
.follow-card-title { font-size: 15px; font-weight: 600; margin-top: 6px; }
.follow-card-meta { font-size: 12px; color: var(--text-3); margin-top: 4px; }
.follow-card-why { font-size: 12px; color: var(--text-3); margin-top: 8px; line-height: 1.5; }

.follow-link {
  display: inline-block;
  margin-top: 8px;
  font-size: 13px;
  color: #185fa5;
  text-decoration: none;
}
.follow-link-disabled { margin-top: 8px; font-size: 12px; color: var(--text-3); }

.follow-source-card {
  border: 0.5px solid var(--line);
  border-radius: 12px;
  padding: 4px 14px;
}
.follow-events { display: flex; flex-direction: column; gap: 10px; }
.follow-event {
  border: 0.5px solid var(--line);
  border-radius: 12px;
  padding: 12px 14px;
}
.follow-event-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.follow-event-version { font-size: 14px; font-weight: 500; }
.follow-event-title { font-size: 14px; margin-top: 4px; }
.follow-event-meta { font-size: 12px; color: var(--text-3); margin-top: 4px; }
.follow-event-why { font-size: 12px; color: var(--text-2); margin-top: 8px; line-height: 1.55; }
.follow-event-note { font-size: 12px; color: var(--text-3); margin-top: 6px; line-height: 1.5; }

/* ------------------------------------------------ 主动消息反馈（P2b 第四段）
 * 紧凑胶囊操作行：有用 / 稍后 / 少提醒 / 不再提醒 / 事实有误 / 为什么提醒。
 * 只挂在带 proactive_meta 的主动消息下；完成后整行切换为状态文字（.pf-done）。 */
.pf-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 8px;
  align-items: center;
}
.pf-btn {
  min-height: 30px;
  padding: 4px 11px;
  border-radius: 999px;
  font-size: 12px;
  line-height: 1.2;
  color: var(--text-2);
  background: transparent;
  border: 0.5px solid var(--line-strong);
  cursor: pointer;
  transition: opacity 0.15s ease, border-color 0.15s ease;
  -webkit-tap-highlight-color: transparent;
}
.pf-btn:active { opacity: 0.55; }
.pf-actions.is-done { margin-top: 6px; }
.pf-done {
  font-size: 12px;
  color: var(--text-3);
}

/* 「为什么提醒」的来源列表（初始 hidden，由 app.js 按需填充） */
.pf-why {
  margin-top: 6px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.pf-why[hidden] { display: none; }
.pf-why-title { color: var(--text-3); }
.pf-why-row {
  display: flex;
  align-items: center;
  gap: 8px;
  justify-content: space-between;
  flex-wrap: wrap;
}
.pf-why-row > span { min-width: 0; overflow-wrap: anywhere; }
.pf-why-open {
  flex: none;
  min-height: 26px;
  padding: 2px 10px;
  border-radius: 999px;
  font-size: 11.5px;
  color: var(--text-2);
  background: transparent;
  border: 0.5px solid var(--line-strong);
  cursor: pointer;
}
.pf-why-open:active { opacity: 0.55; }
/* 设置来源（每日问候）不显示成「来源已失效」：如实说明「你开启了每日问候」 */
.pf-why-setting > span { color: var(--text-2); }

/* 设置页「已静音的提醒类别」：一行一个类别 + 紧凑「重新启用」按钮 */
.muted-cat-list { margin-top: 6px; }
.muted-cat-row { align-items: center; }
.muted-cat-reenable {
  flex: none;
  min-height: 28px;
  padding: 3px 12px;
  border-radius: 999px;
  font-size: 12px;
  color: var(--text-2);
  background: transparent;
  border: 0.5px solid var(--line-strong);
  cursor: pointer;
}
.muted-cat-reenable:active { opacity: 0.55; }
.muted-cat-reenable:disabled { opacity: 0.5; cursor: default; }

/* ------------------------------------------------- 每日问候 · 安静时段（P2b 第五段）
 * 设置页可编辑的安静时段：两个原生 time 输入，窄屏也不溢出。 */
.quiet-hours-range {
  display: flex;
  align-items: center;
  gap: 6px;
  font-weight: 500;
}
.quiet-hours-range input[type="time"] {
  min-width: 0;
  width: 96px;
  max-width: 40vw;
  border: 1px solid var(--line, #ddd);
  border-radius: 8px;
  padding: 4px 6px;
  font-family: inherit;
  font-size: 14px;
  color: var(--text);
  background: var(--bubble);
}

/* 三入口应用壳：复用既有内容，输入框与主导航不随页面更换。 */
.nav-caption { font-size: 12px; color: var(--text-3); }
.nav-inner { max-width: 960px; width: 100%; margin: 0 auto; }
.main-navigation { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; max-width: 780px; margin: 4px auto 0; padding: 4px 14px 6px; }
.main-navigation button { min-height: 52px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; border-radius: 12px; color: var(--text-3); font-size: 11px; }
.main-navigation button[aria-selected="true"] { color: var(--text); background: var(--bubble); font-weight: 600; }
.main-navigation svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.main-navigation button:focus-visible, .library-sections button:focus-visible { outline: 2px solid var(--text); outline-offset: -2px; }
.workspace-page { flex: 1; min-height: 0; display: flex; flex-direction: column; overflow: hidden; }
.library-sections, .workspace-host { width: calc(100% - 32px); max-width: 920px; margin-left: auto; margin-right: auto; }
.library-sections { display: grid; grid-template-columns: repeat(4, 1fr); padding: 4px; gap: 4px; border-radius: 13px; background: var(--bubble); margin-bottom: 12px; flex-shrink: 0; }
.library-sections button { min-height: 40px; border-radius: 9px; color: var(--text-2); font-size: 13px; position: relative; }
.library-sections button[aria-selected="true"] { background: var(--bg); color: var(--text); font-weight: 600; box-shadow: 0 1px 5px rgba(0,0,0,0.06); }
.workspace-host { flex: 1; min-height: 0; display: flex; flex-direction: column; overflow: hidden; }
.sheet.workspace-sheet { position: relative; flex: 1; min-height: 0; inset: auto; width: 100%; height: 100% !important; max-height: 100% !important; border-radius: 0; padding: 0; box-shadow: none; transform: none !important; animation: none; z-index: auto; }
.workspace-sheet > .sheet-body { flex: 1; min-height: 0; overflow-y: auto; padding: 12px 0 24px; overscroll-behavior: contain; }
.workspace-sheet > .sheet-close-btn { display: none; }
.workspace-follow.follow-sheet { background: transparent; position: relative; flex: 1; min-height: 0; height: 100%; width: 100%; inset: auto; padding: 0; box-shadow: none; transform: none; z-index: auto; }
.workspace-follow .follow-header { padding-left: 0; padding-right: 0; }
.workspace-follow .follow-body { padding-left: 0; padding-right: 0; }
.workspace-follow .follow-mask { display: none; }
.account-profile { width: 100%; display: flex; align-items: center; gap: 14px; padding: 18px; background: var(--bubble); border-radius: 18px; text-align: left; }
.account-symbol { display: grid; place-items: center; width: 48px; height: 48px; flex-shrink: 0; border-radius: 16px; background: var(--text); color: var(--bg); font-size: 24px; font-weight: 600; }
.account-profile strong { display: block; font-size: 15px; overflow-wrap: anywhere; }
.account-profile small { display: block; color: var(--text-2); font-size: 12px; margin-top: 5px; }
.account-arrow { margin-left: auto; color: var(--text-3); font-size: 24px; }
.account-section-label { margin-top: 28px; color: var(--text-3); font-size: 12px; }
body[data-view="account"] .workspace-sheet .sheet-actions { margin-top: 8px; gap: 0; border: 1px solid var(--line); border-radius: 16px; overflow: hidden; }
body[data-view="account"] .workspace-sheet .sheet-actions > button { min-height: 52px; background: transparent; border-radius: 0; border-bottom: 1px solid var(--line); text-align: left; display: flex; justify-content: space-between; align-items: center; font-size: 14px; }
body[data-view="account"] .workspace-sheet .sheet-actions > button:last-child { border-bottom: none; }
body[data-view="account"] .workspace-sheet .trace { margin-top: 24px; }
.workspace-notice { padding: 20px; color: var(--text-2); font-size: 14px; }
body[data-view] .chat-minimap { bottom: calc(var(--composer-height, 156px) + 12px); }
@media (min-width: 900px) { .workspace-host, .library-sections { width: calc(100% - 64px); } }
@media (prefers-reduced-motion: reduce) { .workspace-sheet, .workspace-follow { transition: none; animation: none; } }
.library-records-heading { display: flex; align-items: center; gap: 12px; justify-content: space-between; margin: 6px 0 16px; }
.library-records-heading h3 { margin: 0; font-size: 17px; }
.library-records-heading > span { font-size: 12px; color: var(--text-3); }
.library-category-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.library-category { min-height: 140px; padding: 16px; border: 1px solid var(--line); border-radius: 16px; text-align: left; display: flex; flex-direction: column; align-items: flex-start; }
.library-category:hover { background: var(--bubble); }
.library-category-mark { font-size: 19px; font-weight: 600; margin-bottom: 12px; color: var(--text-2); }
.library-category .category-money { color: var(--c-money); }
.library-category .category-food { color: var(--c-food); }
.library-category .category-health { color: var(--c-health); }
.library-category strong { font-size: 15px; }
.library-category small { color: var(--text-3); font-size: 11px; margin-top: 3px; }
.library-category-count { font-size: 12px; color: var(--text-2); margin-top: 12px; }
.library-overview { width: 100%; margin-top: 14px; padding: 16px; border-radius: 15px; background: var(--bubble); display: flex; justify-content: space-between; text-align: left; align-items: center; }
.library-overview strong, .library-overview small { display: block; }
.library-overview strong { font-size: 14px; }
.library-overview small { color: var(--text-2); font-size: 12px; margin-top: 3px; }
.library-storage-note { font-size: 12px; color: var(--text-3); margin: 20px 0 8px; line-height: 1.6; }
.library-record-search { width: 100%; padding: 12px 14px; min-height: 44px; border: 1px solid var(--line); border-radius: 12px; background: var(--bubble); color: var(--text); font: inherit; font-size: 14px; }
.library-date { font-size: 12px; color: var(--text-3); padding: 18px 0 8px; }
.library-load-more { display: block; margin: 16px auto; min-height: 44px; padding: 0 20px; border: 1px solid var(--line); border-radius: 12px; font-size: 13px; }
@media (min-width: 700px) { .library-category-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.library-record-rows .rec-line { min-height: 44px; cursor: pointer; }
@media (max-width: 600px) { .workspace-sheet > .sheet-body::-webkit-scrollbar, .workspace-follow .follow-body::-webkit-scrollbar { width: 0; } }
.library-home-directory { margin-top: 14px; }
.library-secondary-actions, .library-filters { display: flex; flex-wrap: wrap; gap: 8px; margin: 12px 0; }
.library-secondary-actions button, .library-filters select, .library-trash-row button { min-height: 42px; padding: 6px 12px; font: inherit; font-size: 13px; color: var(--text); background: var(--bubble); border: 1px solid var(--line); border-radius: 10px; }
.library-result-summary, .library-recent-title { margin: 16px 0 6px; color: var(--text-2); font-size: 13px; }
.library-trash-row { padding-bottom: 12px; border-bottom: 1px solid var(--line); }
.record-action-notice { position: fixed; z-index: 110; left: 50%; bottom: calc(var(--composer-height, 150px) + 8px); transform: translateX(-50%); display: flex; align-items: center; gap: 12px; width: max-content; max-width: 90vw; border-radius: 12px; padding: 8px 14px; color: var(--bg); background: var(--text); font-size: 14px; box-shadow: 0 4px 18px #0002; }
.record-action-notice button { color: inherit; text-decoration: underline; min-height: 40px; flex-shrink: 0; }

/* LifeAI 应用壳：控件透出背后的内容，正文保留实色。 */
:root {
  --shell-ink: color-mix(in srgb, var(--text) 64%, var(--bg));
  --shell-paper: color-mix(in srgb, var(--bg) 96%, #52739b);
  --glass-solid: color-mix(in srgb, var(--bg) 92%, #a1b8cd);
  --glass-face: radial-gradient(ellipse at 12% 0%, rgba(255,255,255,.8), transparent 53%),
    linear-gradient(115deg, rgba(176,186,226,.24), transparent 40%, rgba(146,203,219,.18) 85%, rgba(255,255,255,.4));
  --glass-edge: inset 0 1px 1px rgba(255,255,255,.94), inset 1px 0 1px rgba(255,255,255,.62), inset 0 -1px 1px rgba(91,112,143,.16);
  --glass-shadow: 0 3px 12px -6px rgba(27,49,76,.18);
  --control-ease: cubic-bezier(.22,.8,.25,1);
}
/* 主导航已标出当前页，品牌顶栏只在对话中呈现。 */
body:is([data-view="library"], [data-view="account"]) > .nav { display: none; }
.workspace-page { padding-top: calc(env(safe-area-inset-top, 0px) + 12px); }
.ui-symbols { position: absolute; width: 0; height: 0; overflow: hidden; pointer-events: none; }
.ui-icon { width: 21px; height: 21px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
body {
  background: radial-gradient(ellipse 70% 30% at 96% 0%, rgba(132,198,218,.16), transparent),
    radial-gradient(ellipse 75% 27% at 7% 0%, rgba(158,171,229,.19), transparent), var(--shell-paper);
}
.nav { background: transparent; border-bottom: 0; backdrop-filter: none; -webkit-backdrop-filter: none; }
.nav-inner { max-width: var(--chat-col-max); padding-inline: 18px; }
.nav-title { display: flex; align-items: center; gap: 8px; font-size: 17px; }
.nav-title::before { content: ""; width: 23px; height: 23px; background: url("icon.svg") center / cover; border-radius: 7px; }
.sheet.workspace-sheet { background: transparent; }
.workspace-sheet > .sheet-body { padding-top: 6px; }
.library-sections, .workspace-host { max-width: 820px; }
.workspace-notice, .library-records-heading > span, .library-storage-note { color: var(--shell-ink); }

.main-navigation, .library-sections, .composer-inner.gpt-composer {
  border: 1px solid color-mix(in srgb, var(--text) 9%, transparent);
  background: var(--glass-solid);
  box-shadow: var(--glass-edge), var(--glass-shadow);
}
@supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .main-navigation, .library-sections, .composer-inner.gpt-composer {
    background: var(--glass-face), color-mix(in srgb, var(--bg) 59%, transparent);
    -webkit-backdrop-filter: saturate(150%) blur(16px);
    backdrop-filter: saturate(150%) blur(16px);
  }
}
.composer { background: transparent; pointer-events: none; padding-bottom: max(8px, env(safe-area-inset-bottom)); }
.composer > :not(.companion-island) { pointer-events: auto; }
.composer-inner.gpt-composer { margin-top: 7px; margin-bottom: 7px; padding: 2px 5px; }
.composer-inner.gpt-composer:focus-within { border-color: color-mix(in srgb, #4277bb 55%, var(--bg)); }
.composer-action-btn, .send-btn-round { width: 44px; height: 44px; }
.send-btn-round { border: 5px solid transparent; background-clip: padding-box; }
.send-btn-round:disabled { background-clip: padding-box; color: var(--shell-ink); }
.main-navigation, .library-sections {
  --segments: 3; --inset: 4px; --selected-offset: 0%;
  position: relative; isolation: isolate; gap: 0; padding: var(--inset); border-radius: 999px;
}
.main-navigation { width: min(292px, calc(100% - 32px)); margin: 0 auto; }
.library-sections {
  --segments: 4; --inset: 3px;
  border-radius: 14px; margin-bottom: 10px; box-shadow: none;
  background: color-mix(in srgb, var(--text) 5%, transparent);
}
.library-sections::before { border-radius: 11px; }
.library-sections button { border-radius: 11px; }
.main-navigation::before, .library-sections::before {
  content: ""; position: absolute; pointer-events: none; z-index: -1;
  inset: var(--inset) auto var(--inset) var(--inset);
  width: calc((100% - 2 * var(--inset)) / var(--segments)); border-radius: inherit;
  background: linear-gradient(155deg, var(--bg), color-mix(in srgb, var(--bg) 85%, #98b7d3));
  box-shadow: var(--glass-edge), 0 1px 5px rgba(53,72,92,.16);
  transform: translateX(var(--selected-offset)); transition: transform 250ms var(--control-ease);
}
.main-navigation button, .library-sections button { min-height: 44px; border-radius: 999px; color: var(--shell-ink); }
.main-navigation button { min-height: 48px; flex-direction: row; gap: 6px; font-size: 13px; }
.main-navigation button[aria-selected="true"], .library-sections button[aria-selected="true"] { background: transparent; color: var(--text); box-shadow: none; }
.main-navigation { --selected-offset: 100%; }
body[data-view="library"] .main-navigation { --selected-offset: 0%; }
body[data-view="account"] .main-navigation { --selected-offset: 200%; }
.library-sections:has(#followBtn[aria-selected="true"]) { --selected-offset: 100%; }
.library-sections:has(#libraryMemoryBtn[aria-selected="true"]) { --selected-offset: 200%; }
.library-sections:has(#summaryBtn[aria-selected="true"]) { --selected-offset: 300%; }

/* 内容滚过悬浮输入栏，末项始终可以滚到控件上方。 */
.workspace-page, .feed { margin-bottom: calc(-1 * var(--composer-height)); }
.feed { padding-bottom: calc(var(--composer-height) + 52px); }
.workspace-sheet > .sheet-body, .workspace-follow .follow-body {
  padding-bottom: calc(var(--composer-height) + 24px);
  scroll-padding-bottom: calc(var(--composer-height) + 12px);
}
.composer::before {
  content: ""; position: absolute; z-index: -1; pointer-events: none; inset: -10px 0 0;
  background: linear-gradient(transparent, color-mix(in srgb, var(--shell-paper) 55%, transparent) 52%, var(--shell-paper));
}
.empty { min-height: min-content; padding: 12px 18px; }
.feed:has(.empty) { padding-inline: 14px; }
.empty h2 { font-size: clamp(23px, 3vw, 30px); line-height: 1.3; font-weight: 620; letter-spacing: -.035em; }
.empty p { color: var(--shell-ink); font-size: 14px; margin: 0 0 20px; }
.chips { gap: 1px; max-width: 350px; overflow: hidden; border-radius: 19px; background: var(--line); border: 1px solid var(--line); }
.chip { display: flex; align-items: center; gap: 12px; border-radius: 0; min-height: 46px; color: var(--text); background: var(--bg); }
.chip > span { color: var(--text); }
.chip:active { background: var(--bubble); }
.category-money { --category-color: var(--c-money); }
.category-food { --category-color: var(--c-food); }
.category-health { --category-color: var(--c-health); }
.category-todo { --category-color: var(--c-todo); }
.category-life { --category-color: var(--c-life); }
.chip .ui-icon { color: var(--category-color); }
.library-search-field { position: relative; display: block; }
.library-search-field > svg { position: absolute; top: 50%; left: 13px; transform: translateY(-50%); color: var(--shell-ink); pointer-events: none; }
.library-record-search { padding-left: 44px; background: var(--bg); font-size: 16px; }
.library-category-grid { display: grid; grid-template-columns: 1fr; gap: 0; overflow: hidden; background: var(--bg); border: 1px solid var(--line); border-radius: 18px; }
.library-category {
  display: grid; grid-template-columns: auto minmax(0,1fr) auto auto; grid-template-rows: auto auto;
  align-items: center; column-gap: 12px; min-height: 58px; padding: 9px 14px;
  border: 0; border-bottom: 1px solid var(--line); border-radius: 0;
}
.library-category:last-child { border: 0; }
.library-category-mark {
  grid-area: 1 / 1 / span 2; display: grid; place-items: center; width: 36px; height: 36px;
  border-radius: 11px; margin: 0; color: var(--category-color); background: color-mix(in srgb, var(--category-color) 9%, var(--bg));
}
.library-category strong { grid-area: 1 / 2; }
.library-category small { grid-area: 2 / 2; margin: 0; color: var(--shell-ink); }
.library-category-count { grid-area: 1 / 3 / span 2; margin: 0; font-variant-numeric: tabular-nums; }
.library-category::after, .account-profile::after, .account-profile ~ .sheet-actions button::after {
  content: ""; width: 6px; height: 6px; border: solid var(--shell-ink); border-width: 1.5px 1.5px 0 0; transform: rotate(45deg);
}
.library-category::after { grid-area: 1 / 4 / span 2; }
.account-profile::after { margin-left: auto; }
.account-profile, .library-overview, body[data-view="account"] .workspace-sheet .sheet-actions { background: var(--bg); border: 1px solid var(--line); }
.account-section-label { color: var(--shell-ink); }
:is(.main-navigation, .library-sections, .chips, .library-record-list, .composer-inner, .sheet-actions) button:focus-visible,
.account-profile:focus-visible, .library-record-search:focus-visible { outline: 2px solid #4277bb; outline-offset: -3px; }
@media (hover: hover) {
  .chip:hover, .library-category:hover, .account-profile:hover, .account-profile ~ .sheet-actions button:hover { background-color: var(--bubble); }
}
@media (prefers-reduced-motion: no-preference) {
  :is(.main-navigation, .library-sections, .chips) button { transition: scale 150ms var(--control-ease); }
  :is(.main-navigation, .library-sections, .chips) button:active { scale: .96; }
  .record-action-notice { animation: notice-appear 180ms var(--control-ease); }
  @keyframes notice-appear { from { opacity: 0; translate: 0 5px; } }
}
@media (prefers-reduced-motion: reduce) {
  .main-navigation::before, .library-sections::before, .composer-inner button, .hero-avatar-host { transition: none; }
  .composer-action-btn.recording { animation: none; }
}
@media (prefers-reduced-transparency: reduce), (prefers-contrast: more), (forced-colors: active) {
  .main-navigation, .library-sections, .composer-inner.gpt-composer { background: var(--bg); -webkit-backdrop-filter: none; backdrop-filter: none; box-shadow: none; border-color: var(--shell-ink); }
  [role="tab"][aria-selected="true"] { text-decoration: underline; text-underline-offset: 3px; }
}
.library-reset { min-height: 44px; margin: 4px 0; padding: 0 14px; border-radius: 12px; background: var(--bg); border: 1px solid var(--line); }
.send-btn-round[data-pending] svg { display: none; }
.send-btn-round[data-pending]::after { content: "···"; font-weight: 700; letter-spacing: 1px; }
/* The reflection stays inside the control and follows a direct press only. */
.main-navigation::after, .library-sections::after {
  content: ""; pointer-events: none; position: absolute; inset: 0; border-radius: inherit; opacity: 0;
  background: radial-gradient(ellipse 70px 34px at var(--press-x, 50%) var(--press-y, 45%), rgba(255,255,255,.54), transparent);
  transition: opacity 160ms ease-out;
}
.main-navigation:active::after, .library-sections:active::after { opacity: .85; }
.hero-avatar-host { position: relative; isolation: isolate; width: clamp(66px, 9vw, 88px); height: auto; aspect-ratio: 1; margin-bottom: 8px; }
.hero-avatar-host::before {
  content: ""; position: absolute; z-index: -1; pointer-events: none; width: 185%; height: 160%;
  background: radial-gradient(ellipse closest-side at 35% 53%, rgba(150,185,241,.34), transparent),
    radial-gradient(ellipse closest-side at 69% 42%, rgba(154,219,211,.3), transparent);
}
@media (prefers-reduced-motion: reduce), (prefers-reduced-transparency: reduce), (prefers-contrast: more), (forced-colors: active) {
  .main-navigation::after, .library-sections::after { display: none; }
}

/* 工作区标题的左右两端分别是上一级与当前视图的主要操作。 */
.dash-heading { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; column-gap: 6px; }
.dash-heading h3 { margin: 0; font-size: 17px; }
.dash-back, .dash-create { min-height: 44px; font-size: 14px; white-space: nowrap; }
.dash-back { justify-self: start; padding: 0 6px 0 0; color: var(--shell-ink); }
.dash-create { justify-self: end; padding: 0 4px 0 8px; font-weight: 600; color: var(--c-health); }
.dash-tab-bar, .summary-tab-header { display: flex; justify-content: flex-start; border-bottom: 1px solid var(--line); padding: 0; gap: 20px; border-radius: 0; background: transparent; margin-bottom: 12px; }
.dash-tab-btn, .summary-tab-btn { background: transparent; font-size: 14px; color: var(--text-2); flex: none; min-height: 44px; padding: 0 2px; border-radius: 0; border-bottom: 2px solid transparent; }
.dash-tab-btn.active, .summary-tab-btn.active { font-weight: 600; background: transparent; border-bottom-color: var(--text); box-shadow: none; color: var(--text); }
.dash-card { min-width: 0; padding: 14px 16px; background: var(--bg); border-color: var(--line); }
.dash-card-header { column-gap: 8px; }
.dash-card-header .dash-card-title { font-size: 14px; line-height: 1.4; color: var(--text); overflow-wrap: anywhere; }
.dash-card-tools { gap: 4px; }
.dash-card-menu { width: 40px; height: 40px; border: 0; background: transparent; font-size: 20px; }
.dash-card-menu:active { background: var(--bubble); }
.dash-heading button:focus-visible, .dash-tab-btn:focus-visible { outline: 2px solid var(--c-health); outline-offset: -2px; }
.input-wrap textarea { display: block; overflow-y: auto; scrollbar-width: none; }
.composer-reveal { display: grid; grid-template-rows: 1fr; opacity: 1; }
.composer-clip { min-height: 0; overflow: hidden; display: flow-root; }
body:is([data-view="library"], [data-view="account"]) .composer-reveal {
  grid-template-rows: 0fr;
  opacity: 0;
}
body:is([data-view="library"], [data-view="account"]) .companion-island { visibility: hidden; opacity: 0; }
@media (prefers-reduced-motion: no-preference) {
  .composer-reveal { transition: grid-template-rows 220ms var(--control-ease), opacity 180ms ease-out; }
  .companion-island { transition: opacity 160ms ease-out, visibility 0s; }
  body:is([data-view="library"], [data-view="account"]) .companion-island { transition-delay: 0s, 160ms; }
}
@media (prefers-reduced-motion: reduce) {
  .companion-island { transition: none; }
}
.composer-dock { pointer-events: none; }
.composer > .composer-dock { pointer-events: none; }
.composer-dock > * { pointer-events: auto; }
@media (min-width: 720px) {
  .empty .chips { flex-direction: row; width: auto; max-width: 100%; gap: 10px; border: 0; background: transparent; overflow: visible; }
  .empty .chip { border: 1px solid var(--line); border-radius: 14px; gap: 8px; }
  .chip::after { font-size: 14px; }
  .empty .chip::after { display: none; }
}
@media (max-width: 600px) {
  .library-sections::before, .library-sections button { border-radius: 10px; }
  .composer { padding: 4px 0 max(8px, env(safe-area-inset-bottom)); }
  .composer > .composer-dock {
    width: calc(100% - 24px); margin-inline: auto; padding: 2px 0;
    background: var(--glass-solid); outline: 1px solid var(--line); outline-offset: -1px; border-radius: 24px;
    box-shadow: var(--glass-edge), var(--glass-shadow);
  }
  @supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
    .composer > .composer-dock {
      background: var(--glass-face), color-mix(in srgb, var(--bg) 72%, transparent);
      -webkit-backdrop-filter: saturate(140%) blur(16px); backdrop-filter: saturate(140%) blur(16px);
    }
  }
  .composer-dock .gpt-composer, .composer-dock .main-navigation {
    width: 100%; margin: 0; border: 0; box-shadow: none; background: transparent;
    -webkit-backdrop-filter: none; backdrop-filter: none;
  }
  .composer-dock .gpt-composer { padding: 0 6px; }
  .composer-dock .main-navigation { --inset: 5px; border-top: 1px solid var(--line); border-radius: 0; padding: 0 var(--inset); }
  body:is([data-view="library"], [data-view="account"]) .composer-dock .main-navigation { border-top: 0; }
  .composer-dock .main-navigation::before { inset-block: 6px; border-radius: 16px; box-shadow: none; background: color-mix(in srgb, var(--text) 6%, transparent); }
  .composer-dock .main-navigation::after { border-radius: 16px; }
  .composer-dock .main-navigation svg { width: 17px; height: 17px; }
  .composer-dock:focus-within { outline-color: var(--line-strong); }
  .empty { padding-inline: 2px; }
  .empty .chips { max-width: 310px; }
}
@media (max-width: 600px) and (prefers-reduced-transparency: reduce), (max-width: 600px) and (prefers-contrast: more), (max-width: 600px) and (forced-colors: active) {
  .composer > .composer-dock { background: var(--bg); -webkit-backdrop-filter: none; backdrop-filter: none; outline-color: var(--shell-ink); }
}


/* 库的根分区共享页边距、检索控件和内容底色；详情才出现返回操作。 */
.workspace-follow[data-follow-view="list"] .follow-header {
  justify-content: space-between; min-height: 44px; margin: 6px 0 10px; border: 0;
}
.workspace-follow[data-follow-view="list"] .follow-refresh {
  position: static; transform: none; background: transparent; color: var(--c-health);
  min-height: 44px; padding: 0 4px 0 12px;
}
.workspace-follow[data-follow-view="list"] .follow-body { padding-top: 0; }
.workspace-follow .follow-search-results:empty { margin: 0; }
.workspace-follow .follow-empty, .workspace-follow .follow-group, .workspace-follow .follow-event {
  background: var(--bg); border: 1px solid var(--line); border-radius: 16px;
}
.workspace-follow .follow-empty { padding: 18px 16px; }
.workspace-follow .follow-status { border-radius: 10px; margin: 0 0 10px; }
.follow-digest-info { margin: 12px 0; font-size: 13px; color: var(--text-2); }
.follow-digest-info summary { cursor: pointer; }
.library-recent-heading { display: flex; justify-content: space-between; align-items: center; margin-top: 12px; }
.library-recent-heading h4 { margin: 0; font-size: 15px; }
.library-recent-heading button, .library-trash-entry { min-height: 44px; padding: 0 4px; font-size: 13px; }
.library-recent-heading button { color: var(--c-health); }
.library-trash-entry { margin-top: 12px; color: var(--shell-ink); }
.library-recent .library-date { padding-top: 8px; }
.library-recent-heading + .library-storage-note { margin-top: 0; }
.library-records-home .library-records-heading { min-height: 44px; margin: 0 0 10px; }
.workspace-sheet .library-page-title { display: flex; align-items: center; min-height: 44px; margin: 0 0 10px; }
.record-filter-bar, .record-actions { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.record-filter-bar { margin: 8px 0 0; flex-wrap: wrap; }
.record-filter-bar select, .record-filter-bar button, .record-actions button,
.library-records-heading button, .library-trash-item button {
  min-height: 44px; color: var(--shell-ink); font: inherit; font-size: 14px;
}
.record-filter-bar select { max-width: 100%; background: transparent; border: 0; cursor: pointer; }
.record-filter-bar button, .library-records-heading button, .library-trash-item button { color: var(--c-health); }
.library-records-heading button { padding: 0 4px; }
.record-actions { justify-content: flex-end; margin-bottom: 8px; }
.record-actions button { background: var(--bg); border: 1px solid var(--line); border-radius: 12px; padding: 0 14px; }
.library-day { margin: 12px 0 16px; }
.library-day h4 { margin: 0 2px 6px; color: var(--shell-ink); font-size: 13px; font-weight: 550; }
.library-day-list { overflow: hidden; border-radius: 16px; background: var(--bg); border: 1px solid var(--line); }
.library-day-list > * + * { border-top: 1px solid var(--line); }
.library-day-list .rec-line { min-height: 54px; padding: 9px 12px; gap: 10px; border-radius: 0; }
.record-type { display: grid; place-items: center; flex: none; width: 32px; height: 32px; border-radius: 10px; color: var(--category-color); background: color-mix(in srgb, var(--category-color) 9%, var(--bg)); }
.record-type .ui-icon { width: 18px; height: 18px; }
.library-day-list .rec-time { margin-left: 0; }
.library-day-list .rec-body .rec-sub { display: block; }
.library-trash-item { display: flex; align-items: center; padding-right: 8px; }
.library-trash-item .rec-line { flex: 1; cursor: default; }
.library-records-home .library-result-summary { margin: 2px 2px 8px; }
.record-results-bar { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.record-results-bar .library-result-summary { margin: 0 2px; }
.record-results-bar .library-reset { flex: none; margin: 0; border: 0; background: transparent; color: var(--c-health); padding: 0 4px 0 8px; font-size: 13px; }
.record-row-chevron { flex: none; width: 6px; height: 6px; border: solid var(--shell-ink); border-width: 1.5px 1.5px 0 0; transform: rotate(45deg); }
.library-day-list [role="button"]:focus-visible { outline: 2px solid var(--c-health); outline-offset: -2px; }

/* 输入框快捷模板：输入框为空且获得焦点时浮在灵伴上方，点按只填草稿。
   绝对定位、不占输入区的位置，出现与消失都不会让输入框变高或变形。 */
.quick-templates {
  position: absolute; z-index: 31; left: 0; right: 0;
  bottom: calc(100% + var(--avatar-size) + 12px);
  width: min(var(--chat-col-max), 100%); margin-inline: auto;
  display: flex; gap: 8px; overflow-x: auto; padding: 4px 12px;
  scrollbar-width: none; overscroll-behavior-x: contain;
}
.quick-templates::-webkit-scrollbar { display: none; }
.quick-templates[hidden] { display: none; }
/* 放得下时居中，放不下时从左侧开始横向滚动（直接 justify-content:center 会把左端裁掉）。 */
.quick-template:first-child { margin-left: auto; }
.quick-template:last-child { margin-right: auto; }
.quick-template {
  flex: none; display: inline-flex; align-items: center; gap: 6px; min-height: 36px; padding: 0 12px;
  border: 1px solid var(--line); border-radius: 999px; background: var(--bg); color: var(--text);
  box-shadow: 0 1px 3px rgb(0 0 0 / .06);
  font: inherit; font-size: 13px; white-space: nowrap; cursor: pointer;
}
.quick-template .ui-icon { width: 16px; height: 16px; color: var(--category-color); }
.quick-template:focus-visible { outline: 2px solid #4277bb; outline-offset: 1px; }
@media (hover: hover) { .quick-template:hover { background: var(--bubble); } }
@media (prefers-reduced-motion: no-preference) { .quick-template:active { scale: .97; transition: scale 120ms var(--control-ease); } }
/* 模板行出现时给对话流补 52px 底部留白：浮层不遮住最后一条回复的末尾。 */
.quick-templates-open .feed { padding-bottom: calc(var(--composer-height) + 52px + 52px); }

/* 账户 › 记录偏好 */
.record-focus-options { margin: 8px 0 0; padding: 0; border: 0; min-width: 0; }
.record-focus-options legend { padding: 0; margin: 0 2px 8px; color: var(--shell-ink); font-size: 13px; }
.record-focus-list { border: 1px solid var(--line); border-radius: 16px; background: var(--bg); overflow: hidden; }
.record-focus-option { display: flex; align-items: center; gap: 12px; min-height: 56px; padding: 8px 14px; cursor: pointer; }
.record-focus-option + .record-focus-option { border-top: 1px solid var(--line); }
.record-focus-option input { width: 20px; height: 20px; accent-color: var(--text); flex: none; }
.record-focus-option strong, .record-focus-option small { display: block; }
.record-focus-option strong { font-size: 15px; font-weight: 550; }
.record-focus-option small { color: var(--shell-ink); font-size: 12px; margin-top: 2px; }
.record-prefs-note { margin: 8px 2px 18px; color: var(--shell-ink); font-size: 12px; line-height: 1.6; }

/* 库 › 记录：勾选、小计、条件、回收站 */
.record-conditions{display:flex;flex-wrap:wrap;gap:8px;margin:10px 0 2px}
.record-condition{min-height:36px;padding:0 12px;border-radius:999px;font-size:13px;color:var(--c-health);background:color-mix(in srgb,var(--c-health) 9%,var(--bg));border:1px solid color-mix(in srgb,var(--c-health) 24%,transparent)}
.library-day h4{display:flex;justify-content:space-between;align-items:baseline;gap:8px}
.library-day-total{font-size:12px;font-weight:500;color:var(--c-money);font-variant-numeric:tabular-nums}
.library-todo-item{display:flex;align-items:center}
.library-todo-item .rec-line{flex:1;min-width:0;padding-left:0}
.library-todo-item .record-type{display:none}
.record-check{flex:none;display:grid;place-items:center;width:44px;min-height:54px;margin-left:4px;cursor:pointer}
.record-check::before{content:"";box-sizing:border-box;width:22px;height:22px;border-radius:50%;border:1.5px solid var(--c-todo)}
.record-check[aria-checked="true"]::before{background:var(--c-todo) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12 5 5 9-10'/%3E%3C/svg%3E") center/14px no-repeat}
.record-check:disabled{opacity:.5}
.record-check:focus-visible{outline:2px solid #4277bb;outline-offset:-6px;border-radius:12px}
.library-trash-link,.library-danger-link{min-height:44px;padding:0 4px;font-size:14px;color:var(--c-health)}
.library-danger-link,.library-trash-item button[data-library-purge]{color:#c0362c}
.library-trash-item{gap:4px}
.library-trash-note{margin:-8px 2px 12px;font-size:12px;color:var(--shell-ink)}
.library-empty-action{display:block;margin:16px 0;min-height:44px;padding:0 18px;border-radius:12px;background:var(--text);color:var(--bg);font-size:14px}
.detail-secondary-action{margin-top:12px;min-height:44px;padding:0 16px;border-radius:12px;border:1px solid var(--line);background:var(--bg);font-size:14px;color:var(--text)}
@media (hover:hover){.record-condition:hover{background:color-mix(in srgb,var(--c-health) 15%,var(--bg))}}

/* 记账收入：金额前带「+」并用财务色，和支出一眼区分开。 */
.money-income{color:var(--c-money)}