* { box-sizing: border-box; margin: 0; }

/* 泽给的京华老宋体：老铅字味，聊天正文主力。
   瘦身版：常用字+聊天记录全部用字，2.8MB；缺的字自动回落到楷体。
   全量 33MB 原件留在 fonts/ 里，以后要补字重新跑一次子集化就行 */
@font-face {
  font-family: "KingHwa_OldSong";
  src: url("fonts/KingHwa_OldSong.sub.woff2") format("woff2");
  font-display: swap;
}

/* 泽字体包里的 Canela Thin：首页大数字和英文小字专用，131KB 无需瘦身 */
@font-face {
  font-family: "Canela";
  src: url("fonts/Canela-Thin.otf") format("opentype");
  font-display: swap;
}

/* —— 主页 hero 区五款字体（2026-07-21 泽 PS 定稿）——
   Office 附带字体在 Chrome for Windows 不走本地白名单，只有 @font-face 才能命中；
   顺带解决手机（iOS 里没这些字体）看到跟电脑一样的问题。
   全部只包实际用字，5 款加起来 65KB，一次加载缓存 */
@font-face {
  font-family: "Home ZhTitle";
  src: url("fonts/home-title-zh.woff2") format("woff2");
  font-display: swap;
}
@font-face {
  font-family: "Home Caps";
  src: url("fonts/home-caps.woff2") format("woff2");
  font-display: swap;
}
@font-face {
  font-family: "Home Num";
  src: url("fonts/home-num.woff2") format("woff2");
  font-display: swap;
}
@font-face {
  font-family: "Home Days";
  src: url("fonts/home-days.woff2") format("woff2");
  font-display: swap;
}
@font-face {
  font-family: "Home Sub";
  src: url("fonts/home-sub.woff2") format("woff2");
  font-display: swap;
}

:root {
  --bg: #f9f6f0;
  --panel: #fffdf9;
  --ink: #3a3026;
  --muted: #a4917c;
  /* G老师 2026-07-18 配色四味（戳棕、褪红、鼠尾草、灰玫瑰）：
     ⚠️只准用在便签左轨/邮戳这些局部小件上。他的 --paper/--ink 全局套色
     被泽 2026-07-18 红叉否决（背景变深），--bg/--ink 永远保持上面的原值 */
  --stamp: #A98E81;
  --faded-red: #8B5150;
  --sage: #717966;
  --dusty-rose: #C4939B;
  --accent: #c9673f;
  --accent-soft: #f3e2d3;
  --line: #ece1d0;
  --online: #58b368;
  --name: #8d6748; /* 聊天里"麦穗"名字的暖棕 */
  --gpt: #5b7687; /* 群聊里 GPT 的青灰，比暖棕冷一档，同在纸面上不打架 */
  --tint-gpt: rgba(91, 118, 135, .08);
  --tint-maisui: rgba(172, 110, 84, .06);
  /* 首页数字钟等用的衬线 */
  --serif: "Songti SC", "STSong", "SimSun", Georgia, "Times New Roman", serif;
  /* 聊天正文：京华老宋体打头，没加载好之前楷体顶 */
  --kai: "KingHwa_OldSong", Georgia, "Kaiti SC", "STKaiti", "KaiTi", "DFKai-SB", serif;
  /* 小票机打字：西文数字命中真等宽，中文按字符回落到旧宋，混排自动成立 */
  --mono: ui-monospace, "SF Mono", Menlo, Consolas, "KingHwa_OldSong", "Courier New", monospace;
  /* 聊天正文（官端同款配方）：西文衬线管数字英文，中文落到系统宋体——
     iPhone 上是宋体-简（跟 Claude 官方 app 一个效果），Windows 上退到中易宋体 */
  --prose: ui-serif, Georgia, "Songti SC", "STSong", "SimSun", serif;
}

/* iOS standalone PWA 有个 WebKit bug（#237961）：视口尺寸的 position:fixed 容器底部会缺一截。
   解法：整个 app 只有 body 一个"全屏根"，其余全屏层一律 absolute 挂在它里面——
   absolute 按父容器算尺寸，不按视口，绕开这个 bug；顶部照样借 viewport-fit=cover 出血到状态栏 */
html { height: 100%; overflow: hidden; background: var(--bg); }

body {
  font-family: system-ui, -apple-system, "PingFang SC", "Microsoft YaHei", sans-serif;
  background: var(--bg);
  color: var(--ink);
  position: relative; height: 100vh; height: 100lvh; overflow: hidden;
  /* 只许上下左右滑，双指缩放和双击放大都不接 */
  touch-action: pan-x pan-y;
}

/* —— 顶层视图切换：absolute 铺满 body，不用 fixed（见顶部注释） —— */
.view { position: absolute; inset: 0; }
.view[hidden] { display: none; }

.chat {
  /* 高度用 100%（父级 .view 是 absolute inset:0 全屏）：iOS PWA 里 100dvh 会缺底，露一条米白 */
  display: flex; flex-direction: column; height: 100%; overflow: hidden;
}

/* —— 顶栏 —— */
.chat-header {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: calc(10px + env(safe-area-inset-top)) max(12px, calc((100% - 700px) / 2)) 10px;
  /* 浮在消息滚动区上面：消息从抬头底下穿过，模糊场才有东西可糊 */
  position: absolute; top: 0; left: 0; right: 0; z-index: 10;
}
.hd-blur {
  /* 顶边上延盖过安全区：模糊层 mask 只羽化底部 20px，顶边是刀切的，
     贴状态栏那条硬边推到屏幕物理顶端之外才不显 */
  position: absolute; left: 0; right: 0;
  top: calc(-1 * env(safe-area-inset-top) - 8px); bottom: -24px;
  z-index: -1; pointer-events: none;
  /* 染色坡：官方 app 那种"越往上字越浅"——顶部实色托住状态栏黑字和标题，
     往下逐级放透，跟五层 blur 阶梯叠成 糊+浅 的双坡；底端归零无硬边 */
  background: linear-gradient(to bottom,
    #f9f6f0 0%,
    rgba(249,246,240,.92) 30%,
    rgba(249,246,240,.7) 55%,
    rgba(249,246,240,.32) 78%,
    rgba(249,246,240,0) 100%);
}
.hd-blur b {
  position: absolute; left: 0; right: 0; top: 0; display: block;
  -webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - 20px), transparent);
  mask-image: linear-gradient(to bottom, #000 calc(100% - 20px), transparent);
}
.hd-blur b:nth-child(1) { bottom: 0;   backdrop-filter: blur(1px);  -webkit-backdrop-filter: blur(1px); }
.hd-blur b:nth-child(2) { bottom: 22%; backdrop-filter: blur(2px);  -webkit-backdrop-filter: blur(2px); }
.hd-blur b:nth-child(3) { bottom: 40%; backdrop-filter: blur(4px);  -webkit-backdrop-filter: blur(4px); }
.hd-blur b:nth-child(4) { bottom: 55%; backdrop-filter: blur(8px);  -webkit-backdrop-filter: blur(8px); }
.hd-blur b:nth-child(5) { bottom: 68%; backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); }
.hd-btn {
  width: 40px; height: 40px; border-radius: 50%; padding: 0;
  background: rgba(255,253,249,.82);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(210,192,165,.5);
  box-shadow: 0 2px 10px rgba(60,40,20,.05);
  display: flex; align-items: center; justify-content: center;
  color: var(--name); cursor: pointer; flex: none;
}
.hd-btn .ic { width: 20px; height: 20px; }
.hd-pill {
  height: 40px; border-radius: 999px; padding: 0 5px;
  background: rgba(255,253,249,.82);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(210,192,165,.5);
  box-shadow: 0 2px 10px rgba(60,40,20,.05);
  display: flex; align-items: center; flex: none;
}
.hd-pill button {
  width: 37px; height: 40px; border: none; background: none; padding: 0;
  display: flex; align-items: center; justify-content: center;
  color: var(--name); cursor: pointer;
}
.hd-pill .ic { width: 19px; height: 19px; }
.who.hd-title {
  position: absolute; left: 50%; top: calc(50% + env(safe-area-inset-top) / 2);
  transform: translate(-50%, -50%); max-width: 54%;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  cursor: pointer; user-select: none; -webkit-user-select: none;
  touch-action: manipulation;
}
.hd-title h1 {
  font-family: var(--kai); font-size: 17px; font-weight: 400;
  color: var(--name); letter-spacing: 1.5px; line-height: 1.2;
  display: flex; align-items: center; justify-content: center; gap: 7px;
  white-space: nowrap; max-width: 100%;
}
.hd-title h1 span { overflow: hidden; text-overflow: ellipsis; }
.hd-title h1 i {
  width: 7px; height: 7px; border-radius: 50%;
  background: #8fa888; flex: none;
}
.hd-title h1 i.busy { background: var(--accent); animation: pulse 1s infinite alternate; }
.hd-title h1 i.off { background: #b6aca0; animation: none; }
@keyframes pulse { from { transform: scale(.85); } to { transform: scale(1.15); } }
.hd-title small {
  display: block; margin-top: 1px; text-align: center; white-space: nowrap;
  max-width: 100%; overflow: hidden; text-overflow: ellipsis;
  font-size: 12px; color: var(--muted); font-family: var(--kai); letter-spacing: .6px;
}
/* 模型切换：圆按钮（对位官方 app 左下角的圆形账号钮），真正的 select 透明叠在上面接点击 */
.model-orb {
  position: relative; flex: none;
  width: 40px; height: 40px; border-radius: 50%;
  border: 1px solid rgba(196, 178, 152, .55);
  background: rgba(255, 255, 255, .6);
  display: flex; align-items: center; justify-content: center;
}
#modelBadge {
  font-family: var(--kai); font-size: 16px; color: var(--ink); line-height: 1;
  pointer-events: none;
}
.model-orb #modelSelect {
  position: absolute; inset: 0; width: 100%; height: 100%;
  opacity: 0; border: none; cursor: pointer;
  -webkit-appearance: none; appearance: none;
}

/* —— 消息区 —— */
.messages {
  flex: 1; overflow-y: auto; overflow-x: hidden;
  /* 上下留出悬浮抬头/输入区的高度；--composer-h 由 ResizeObserver 跟踪（含附件条、多行输入） */
  padding: calc(70px + env(safe-area-inset-top)) max(22px, calc((100% - 700px) / 2)) calc(var(--composer-h, 78px) + 14px);
  display: flex; flex-direction: column; gap: 30px;
  font-family: var(--prose);
  overscroll-behavior-x: none;
}

.msg {
  white-space: pre-wrap; overflow-wrap: anywhere; word-break: break-word;
}
.msg-block {
  display: flex; flex-direction: column; align-items: flex-start; min-width: 0;
}
.msg-block.me {
  align-self: flex-end; align-items: flex-end; max-width: 84%;
}
.msg-block.me > .msg { max-width: 100%; }
.msg-block.ta { align-self: stretch; }
.group-mode .msg-block.maisui-block + .msg-block.maisui-block,
.group-mode .msg-block.gpt-block + .msg-block.gpt-block,
.group-mode .msg-block.me + .msg-block.me { margin-top: -8px; }
.msg.me {
  align-self: flex-end; background: rgba(255, 255, 255, .58);
  border: 1px solid rgba(210, 192, 165, .45); border-radius: 18px;
  box-shadow: 0 1px 6px rgba(60, 40, 20, .04);
  padding: 12px 16px; font-size: 17px; line-height: 1.7;
}
.msg.me.image-only { padding: 6px; }
.msg.ta {
  align-self: flex-start; color: var(--ink); font-size: 17px;
}
.speaker {
  display: flex; align-items: baseline; gap: 8px; margin: 0 0 10px; padding-left: 2px;
}
.speaker i {
  width: 7px; height: 7px; border-radius: 50%; align-self: center; flex: none;
}
.speaker.maisui i { background: var(--name); }
.speaker.gpt i { background: var(--gpt); }
.speaker span {
  font-size: 16px; font-weight: 500; letter-spacing: 1px; font-family: var(--kai);
}
.speaker.maisui span { color: var(--name); }
.speaker.gpt span { color: #6d8290; }
.speaker time {
  font-size: 12px; color: var(--muted); letter-spacing: .8px; font-family: var(--kai);
}
.solo-mode .speaker { margin-bottom: 16px; }
.solo-mode .speaker i { display: none; }
.solo-mode .msg.ta {
  align-self: stretch; width: 100%; padding: 0 2px;
  background: none; border: 0; border-radius: 0;
  font-size: 17px; line-height: 1.7;
}
.group-mode .msg.ta {
  max-width: 96%; padding: 13px 17px;
  border: 1px solid rgba(120, 100, 80, .18);
  border-radius: 4px 16px 16px 16px; line-height: 1.7;
}
.group-mode .maisui-block .msg.ta {
  background: var(--tint-maisui); border-color: rgba(172, 110, 84, .16);
}
.group-mode .gpt-block .msg.ta {
  background: var(--tint-gpt); border-color: rgba(91, 118, 135, .2);
}
.half-mark {
  align-self: flex-start; margin-top: 2px;
  font-size: 11px; color: var(--muted); font-family: var(--kai); letter-spacing: .5px;
  border-left: 2px solid rgba(176, 58, 30, .35); padding-left: 8px;
}
.msg.error {
  align-self: center; max-width: min(84%, 560px); padding: 10px 14px;
  background: #fbe9e4; color: #a33f22; font-size: 13px; border-radius: 10px;
}
.msg.pat { align-self: center; background: none; color: var(--muted); font-size: 12px; padding: 4px 12px; }
.msg.stamp {
  align-self: center; background: none; color: var(--muted);
  font-size: 11px; padding: 2px 12px; letter-spacing: .4px; font-family: var(--kai);
  user-select: none; -webkit-user-select: none;
}

/* 气泡下方的常驻操作行，后续编辑、删除等按钮继续横向追加 */
.msg-actions {
  align-self: stretch; min-height: 22px;
  display: flex; align-items: center; gap: 6px; margin-top: 12px;
}
/* 按钮自带 4px 内 padding，8px 出来视觉约 12px，跟思考/工具的节奏一致 */
.solo-mode .msg-actions { margin-top: 8px; }
.msg-block.me .msg-actions { justify-content: flex-end; }
.copy-btn {
  width: 24px; height: 22px; padding: 4px;
  display: inline-flex; align-items: center; justify-content: center;
  border: 0; border-radius: 6px;
  background: transparent; color: #8f7a62;
  cursor: pointer; touch-action: manipulation;
  transition: color .15s ease, background-color .15s ease, transform .1s ease;
}
.copy-btn svg { width: 14px; height: 14px; pointer-events: none; }
.copy-btn:hover, .copy-btn:focus-visible { color: var(--ink); background: rgba(210, 192, 165, .16); }
.copy-btn:active { color: var(--ink); transform: scale(.92); }
.copy-btn.copied { color: var(--online); }
.copy-btn.copy-failed { color: #b64525; }
.msg-action-btn {
  width: 24px; height: 22px; padding: 4px;
  display: inline-flex; align-items: center; justify-content: center;
  border: 0; border-radius: 6px;
  background: transparent; color: #8f7a62;
  cursor: pointer; touch-action: manipulation;
  font: 12px/18px var(--prose); white-space: nowrap;
  transition: color .15s ease, background-color .15s ease, transform .1s ease;
}
.msg-action-btn svg { width: 14px; height: 14px; pointer-events: none; }
.msg-action-btn svg.ic-trash { transform: scale(1.06); }
.edit-btn:hover, .edit-btn:focus-visible,
.rerun-btn:hover, .rerun-btn:focus-visible { color: var(--ink); background: rgba(210, 192, 165, .16); }
.delete-btn:hover, .delete-btn:focus-visible { color: #b64525; background: rgba(182, 69, 37, .08); }
.msg-action-btn:active { transform: scale(.92); }
.msg-action-btn.action-confirm {
  width: auto; min-width: 52px; padding: 2px 8px;
  color: #fff; background: #b64525; border-radius: 999px;
}
.msg-action-btn.action-confirm:hover, .msg-action-btn.action-confirm:focus-visible { color: #fff; background: #a23a20; }
.msg-action-btn.action-failed {
  width: auto; min-width: 52px; padding: 2px 8px;
  color: #a33f22; background: #fbe9e4; border-radius: 999px;
}
.msg-action-btn:disabled { cursor: default; transform: none; }
.msg-actions .tokens {
  margin-left: auto; padding-left: 12px;
  font-size: 13px; color: var(--muted); letter-spacing: .3px;
  font-family: var(--kai); display: flex; align-items: baseline; gap: 6px;
}
.msg-actions .tokens b { font-weight: 400; color: #b09a83; }
.send-state {
  font-size: 11px; color: var(--muted); font-family: var(--kai);
  letter-spacing: .5px; margin-top: 3px;
}
.send-state.sending::before {
  content: ""; display: inline-block; width: 9px; height: 9px; margin-right: 5px;
  border: 1.5px solid rgba(143,122,98,.35); border-top-color: #8f7a62; border-radius: 50%;
  vertical-align: -1px; animation: send-spin .8s linear infinite;
}
@keyframes send-spin { to { transform: rotate(360deg); } }
.send-state.fail { color: #b03a1e; }
.send-state.fail button {
  border: 1px solid rgba(176,58,30,.4); background: none; color: #b03a1e;
  border-radius: 999px; font-size: 11px; padding: 1px 10px; margin-left: 6px;
  font-family: var(--kai); cursor: pointer;
}

/* Markdown 渲染后的气泡 */
.msg.md { white-space: normal; }
.msg.md p, .msg.md ul, .msg.md ol, .msg.md pre, .msg.md blockquote, .msg.md h1, .msg.md h2, .msg.md h3 { margin: 0 0 18px; }
.msg.md > :last-child { margin-bottom: 0; }
.msg.md ul, .msg.md ol { padding-left: 20px; }
.msg.md h1, .msg.md h2, .msg.md h3 { font-size: 16px; }
.msg.ta code { background: rgba(201, 103, 63, .09); border-radius: 5px; padding: 1px 6px; font-size: 13.5px; color: #8a5a38; font-family: ui-monospace, Consolas, monospace; }
/* 代码块走浅色纸片，不压版面 */
.msg.ta pre {
  background: rgba(243, 226, 211, .45); color: #6b4b31;
  border: 1px solid var(--line);
  border-radius: 10px; padding: 10px 13px; overflow-x: auto;
  font-family: ui-monospace, Consolas, monospace; font-size: 13px; line-height: 1.6;
}
.msg.ta pre code { background: none; padding: 0; color: inherit; }
.msg.ta blockquote { border-left: 3px solid var(--line); padding-left: 10px; color: var(--muted); }
.msg.ta a { color: var(--accent); }
.msg.md table { border-collapse: collapse; font-size: 13.5px; }
.msg.md th, .msg.md td { border: 1px solid var(--line); padding: 4px 8px; }
.msg.md table { display: block; max-width: 100%; overflow-x: auto; }

/* 附件 */
.msg .att-img {
  display: block; width: 180px; max-width: 60%; max-height: 320px; object-fit: cover;
  border-radius: 12px; border: 1px solid var(--line); margin-bottom: 6px; cursor: zoom-in;
}
.msg .att-file {
  font-size: 13px; background: var(--bg); border: 1px solid var(--line);
  border-radius: 8px; padding: 6px 10px; margin-bottom: 6px;
}

/* —— "查看更早的 50 条"按钮 —— */
.load-older {
  align-self: center;
  border: 1px solid var(--line);
  background: var(--panel);
  color: var(--muted);
  font-size: 12px;
  padding: 6px 16px;
  border-radius: 999px;
  cursor: pointer;
  font-family: inherit;
  margin: 8px 0 4px;
  touch-action: manipulation;
}
.load-older:hover, .load-older:active {
  color: var(--accent);
  border-color: var(--accent-soft);
}

/* —— 思考：一行淡字，点开才见内容 —— */
.thinking { align-self: flex-start; max-width: 100%; width: 100%; }
.thinking-head {
  width: 100%; text-align: left;
  display: flex; align-items: center; gap: 8px;
  font: inherit; font-size: 13.5px; color: var(--muted);
  background: none; border: none;
  padding: 6px 2px; cursor: pointer;
  touch-action: manipulation; letter-spacing: .5px;
}
.t-icon { display: inline-flex; color: var(--name); opacity: .8; }
.t-icon svg { width: 14px; height: 14px; }
.thinking-head::after { content: "›"; color: var(--muted); transition: transform .15s; opacity: .7; }
.thinking-head.open::after { transform: rotate(90deg); }
.thinking.live .t-icon { animation: pulse 1s infinite alternate; }
.thinking-body {
  margin: 6px 0 8px 5px;
  border-left: 2px solid var(--line);
  padding: 3px 0 3px 12px;
  font-size: 12.5px; color: var(--muted); line-height: 1.7;
  white-space: pre-wrap; word-break: break-word;
  max-height: 260px; overflow-y: auto;
}
.thinking-body[hidden] { display: none; }
.thinking-tx {
  flex: none; margin-left: 6px;
  font: inherit; font-size: 11px; color: var(--muted);
  border: 1px solid var(--line); border-radius: 999px;
  background: var(--bg); padding: 1px 9px; cursor: pointer;
  touch-action: manipulation;
}
.thinking-tx:hover, .thinking-tx:active { color: var(--accent); border-color: var(--accent-soft); }

/* —— 工具：总头一行淡字，点开是带竖线的清单 —— */
.steps {
  align-self: flex-start; max-width: 100%; width: 100%;
  display: flex; flex-direction: column; gap: 4px;
}
.steps-head {
  width: 100%; text-align: left;
  display: flex; align-items: center; gap: 8px;
  font: inherit; font-size: 13.5px; color: var(--muted);
  background: none; border: none;
  padding: 6px 2px; cursor: pointer;
  touch-action: manipulation; letter-spacing: .5px;
}
.steps-count { flex: none; color: var(--muted); }
.steps-icon { display: inline-flex; color: var(--name); opacity: .8; }
.steps-icon svg { width: 14px; height: 14px; }
.steps-head::after { content: "›"; color: var(--muted); transition: transform .15s; opacity: .7; }
.steps-head.open::after { transform: rotate(90deg); }
.steps-head .step-brief { flex: 0 1 auto; }
.steps-list {
  display: flex; flex-direction: column; gap: 4px;
  margin: 6px 0 8px 5px;
  border-left: 2px solid var(--line);
  padding-left: 12px;
}
.steps-list[hidden] { display: none; }
.step-head {
  width: 100%; text-align: left;
  display: flex; align-items: center; gap: 7px;
  font: inherit; font-size: 12.5px; color: var(--muted);
  background: none; border: none;
  padding: 3px 0;
  touch-action: manipulation;
}
.step-icon { display: inline-flex; opacity: .75; color: var(--muted); }
.step-icon svg { width: 12.5px; height: 12.5px; }
.step-name { font-weight: 600; flex: none; color: var(--ink); opacity: .75; }
.step-brief {
  color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  flex: 1; min-width: 0;
}
.step-head.has-body { cursor: pointer; }
.step-head.has-body::after { content: "›"; color: var(--muted); margin-left: auto; transition: transform .15s; opacity: .7; }
.step-head.has-body.open::after { transform: rotate(90deg); }
.step-body {
  margin: 2px 0 4px 4px;
  border-left: 2px solid var(--line);
  padding: 2px 0 2px 10px;
  font-size: 12px; color: var(--muted); line-height: 1.6;
  white-space: pre-wrap; word-break: break-all;
  max-height: 200px; overflow-y: auto;
}
.step-body[hidden] { display: none; }

/* 群聊里气泡边框离工具/思考行只有 6px，行距节奏是 12px，给气泡让出同款间距 */
.group-mode .thinking + .msg, .group-mode .steps + .msg { margin-top: 8px; }
/* 名字→思考也收到 12px，跟单聊同节奏（speaker 自带 10px 下距 + 思考头 6px padding = 16，收 4） */
.group-mode .speaker + .thinking, .group-mode .speaker + .steps { margin-top: -4px; }

/* 单聊节奏统一 12px：思考/工具头自带 6px padding，名字→思考收窄、工具→正文垫高，都凑到 12px 视觉 */
.solo-mode .speaker + .thinking, .solo-mode .speaker + .steps { margin-top: -10px; }
.solo-mode .thinking + .msg, .solo-mode .steps + .msg { margin-top: 6px; }

/* —— 正在忙 —— */
.typing { align-self: flex-start; display: flex; gap: 4px; padding: 12px 14px; }
.typing span {
  width: 7px; height: 7px; border-radius: 50%; background: var(--accent);
  opacity: .35; animation: blink 1.2s infinite;
}
.typing span:nth-child(2) { animation-delay: .2s; }
.typing span:nth-child(3) { animation-delay: .4s; }
@keyframes blink { 0%, 60%, 100% { opacity: .25; } 30% { opacity: .9; } }

/* —— 待发送预览条（可多个附件横排，超出横滑）—— */
.pending[hidden] { display: none; }
.pending {
  display: flex; align-items: center; gap: 8px;
  width: min(100% - 32px, 640px); align-self: center;
  padding: 6px 2px; background: transparent; border-top: none;
  overflow-x: auto;
}
.pending-chip {
  flex: none; display: flex; align-items: center; gap: 6px;
  max-width: 210px;
  background: var(--bg); border: 1px solid var(--line);
  border-radius: 10px; padding: 5px 8px;
  font-size: 12.5px; color: var(--ink);
}
.pending-chip.uploading { color: var(--muted); font-style: italic; }
.pending-chip img { width: 34px; height: 34px; object-fit: cover; border-radius: 6px; }
.pending-chip .chip-icon { font-size: 17px; line-height: 1; }
.pending-chip .chip-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pending-chip .chip-remove {
  border: none; background: none; color: var(--muted);
  font-size: 13px; cursor: pointer; padding: 2px 3px; flex: none;
}
.pending-chip .chip-remove:hover { color: var(--accent); }

/* 施工状态只信服务端事件；时间只改文案，不拿来判断轮是否卡死。 */
.status-strip[hidden] { display: none; }
.status-strip {
  /* 悬浮在输入胶囊上方，跟胶囊同款材质同款宽度 */
  flex: none; display: flex; align-items: center; gap: 9px;
  width: min(100%, 640px); align-self: center;
  min-height: 32px; padding: 0 16px; margin-bottom: 8px;
  background: rgba(255, 253, 249, .72);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(210, 192, 165, .5); border-radius: 999px;
  box-shadow: 0 2px 10px rgba(60, 40, 20, .05);
  font-size: 12.5px; color: var(--ink); font-family: var(--kai); letter-spacing: .5px;
}
.status-strip i { width: 7px; height: 7px; border-radius: 50%; flex: none; }
.status-strip > span:not(.beat) { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.status-strip .beat { margin-left: auto; color: var(--muted); font-size: 11px; flex: none; }
.status-strip.st-model i { background: var(--online); animation: pulse 1s infinite alternate; }
.status-strip.st-tool i { background: var(--accent); animation: pulse 1s infinite alternate; }
.status-strip.st-wait i { background: var(--accent); animation: none; }
.status-strip.st-off i { background: #ad7263; animation: none; }

/* —— 底部输入区 —— */
.edit-hint {
  width: min(calc(100% - 48px), 640px);
  align-self: center;
  display: flex; align-items: center; justify-content: center; flex-wrap: wrap;
  gap: 3px;
  padding: 4px 12px 0;
  color: var(--muted); font-size: 12px; line-height: 1.45;
  text-align: center;
}
.edit-hint.failed { color: #a33f22; }
.edit-hint button {
  border: 0; padding: 0 2px; background: none;
  color: inherit; font: inherit; cursor: pointer;
}
.edit-hint button:hover, .edit-hint button:focus-visible { color: var(--ink); }

.composer-shell {
  /* 悬浮在消息滚动区上面，胶囊外无实色底板 */
  position: absolute; bottom: 0; left: 0; right: 0; z-index: 9;
  display: flex; flex-direction: column;
  padding: 10px 16px calc(14px + env(safe-area-inset-bottom));
}
.composer-shell::before {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; top: -8px;
  background: linear-gradient(to top, rgba(249,246,240,.85) 0%, rgba(249,246,240,.55) 55%, rgba(249,246,240,0) 100%);
  pointer-events: none; z-index: -1;
}
.cp-blur {
  position: absolute; left: 0; right: 0; bottom: 0; top: -8px;
  z-index: -1; pointer-events: none;
}
.cp-blur b {
  position: absolute; left: 0; right: 0; bottom: 0; display: block;
  -webkit-mask-image: linear-gradient(to top, #000 calc(100% - 16px), transparent);
  mask-image: linear-gradient(to top, #000 calc(100% - 16px), transparent);
}
.cp-blur b:nth-child(1) { top: 0;   backdrop-filter: blur(1px); -webkit-backdrop-filter: blur(1px); }
.cp-blur b:nth-child(2) { top: 30%; backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px); }
.cp-blur b:nth-child(3) { top: 55%; backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
footer.composer-capsule {
  flex: none; display: flex; align-items: flex-end; gap: 4px;
  width: min(100%, 640px); align-self: center;
  background: rgba(255,253,249,.72);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(210,192,165,.5);
  /* 固定圆角：单行时看着还是胶囊，多行长高后是圆角矩形——
     999px 会让两端圆弧随高度变大，贴边的 ＋/发送键戳出弧外 */
  border-radius: 24px; padding: 4px 6px 4px 10px;
  box-shadow: 0 2px 10px rgba(60,40,20,.05);
}
footer .attach {
  width: 36px; height: 40px; flex: none;
  border: none; border-radius: 50%;
  background: none; color: var(--muted);
  font-size: 21px; line-height: 1; cursor: pointer;
  display: grid; place-items: center;
  transition: color .15s;
  touch-action: manipulation;
}
footer .attach:hover, footer .attach:active { color: var(--accent); }
footer textarea {
  flex: 1; min-width: 0; resize: none; border: none; border-radius: 0;
  padding: 10px 8px; font: inherit; font-size: 15px;
  background: none;
  max-height: 140px; outline: none;
}
footer textarea::placeholder { color: var(--muted); opacity: .75; }
#sendBtn, #stopBtn {
  width: 32px; height: 32px; margin: 4px 0; flex: none; border: none; border-radius: 50%;
  font-size: 14px; cursor: pointer; display: grid; place-items: center;
}
#sendBtn { background: var(--accent); color: #fff; }
#sendBtn .ic { width: 16px; height: 16px; }
#stopBtn { background: #8a8078; color: #fff; }
#sendBtn[hidden], #stopBtn[hidden] { display: none; }

.to-bottom {
  position: absolute; left: 50%; transform: translateX(-50%);
  /* 锚在输入区上沿（相对全屏 .view 的底边）：输入区长高时跟着让位 */
  bottom: calc(var(--composer-h, 78px) + 10px);
  width: 40px; height: 40px; border-radius: 50%; z-index: 10;
  background: rgba(255,253,249,.82);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(210,192,165,.5);
  box-shadow: 0 2px 10px rgba(60,40,20,.08);
  display: flex; align-items: center; justify-content: center;
  color: var(--name); cursor: pointer;
}
.to-bottom[hidden] { display: none; }
.to-bottom .ic { width: 18px; height: 18px; }
.to-bottom .badge {
  position: absolute; top: -4px; right: -4px; min-width: 17px; height: 17px;
  border-radius: 9px; background: #b09a83; color: #fff;
  font-size: 10px; display: flex; align-items: center; justify-content: center; padding: 0 4px;
}
.to-bottom .badge[hidden] { display: none; }

.image-viewer {
  position: absolute; inset: 0; z-index: 80; padding: max(48px, env(safe-area-inset-top)) 16px max(24px, env(safe-area-inset-bottom));
  display: grid; place-items: center; background: rgba(24,20,17,.9);
}
.image-viewer[hidden] { display: none; }
.image-viewer img { display: block; max-width: 100%; max-height: 100%; object-fit: contain; }
.image-viewer-close {
  position: absolute; top: max(12px, env(safe-area-inset-top)); right: 14px;
  width: 36px; height: 36px; border: 1px solid rgba(255,255,255,.3); border-radius: 50%;
  background: rgba(0,0,0,.25); color: #fff; font: 24px/1 system-ui; cursor: pointer;
}

/* —— 会话抽屉：对标官方 app 侧栏——字标在顶、纯文字条目、分组小灰字、底栏胶囊 —— */
.drawer {
  position: absolute; top: 0; left: 0; bottom: 0; width: min(78vw, 300px);
  background: #f4f0e7;
  transform: translateX(-100%); transition: transform .3s cubic-bezier(.32, .72, .33, 1); z-index: 20;
  display: flex; flex-direction: column;
  padding-top: env(safe-area-inset-top);
}
.drawer.open { transform: translateX(0); }
.drawer-head { padding: 20px 22px 6px; }
.drawer-logo {
  font-family: var(--kai); font-size: 23px; color: var(--ink);
  letter-spacing: 5px; line-height: 1;
}
.drawer ul {
  list-style: none; overflow-y: auto; flex: 1; padding: 4px 0 10px;
  scrollbar-width: none;
}
.drawer ul::-webkit-scrollbar { display: none; }
/* 分组标题：官方 Starred / Recents 那种小灰字 */
.drawer li.sess-section {
  padding: 18px 22px 7px; cursor: default;
  font-size: 12px; color: var(--muted); letter-spacing: 1px;
}
.drawer li {
  position: relative; margin: 0 10px; padding: 9px 12px;
  border-radius: 10px; cursor: pointer; font-size: 14px; color: var(--ink);
  display: flex; align-items: center; gap: 8px;
}
.drawer li.sess-section { margin: 0; border-radius: 0; }
.drawer li.active { background: rgba(58, 48, 38, .08); }
@media (hover: hover) {
  .drawer li:not(.sess-section):hover { background: rgba(58, 48, 38, .05); }
  .drawer li.active:hover { background: rgba(58, 48, 38, .08); }
}
.drawer li .sess-info { flex: 1; overflow: hidden; }
.drawer li .sess-title { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sess-tag {
  display: inline-block; margin-left: 6px; padding: 1px 6px;
  font-size: 10px; color: var(--muted);
  border: 1px solid rgba(164, 145, 124, .4); border-radius: 8px;
  vertical-align: 1px;
}
/* 三点菜单：常驻但压得很淡，不跟标题抢眼 */
.drawer li .sess-more {
  flex: none; border: none; background: none; color: rgba(164, 145, 124, .55);
  font-size: 18px; line-height: 1; padding: 4px 6px; margin-right: -4px;
  cursor: pointer; border-radius: 6px;
}
.drawer li .sess-more:hover, .drawer li .sess-more:active { background: rgba(58, 48, 38, .06); color: var(--ink); }
/* 文件夹行：点击开合，箭头 + 名字 + 计数 */
.drawer li.folder-row { color: var(--ink); }
.folder-arrow { flex: none; width: 13px; color: var(--muted); font-size: 11px; }
.folder-name { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.folder-count { flex: none; font-size: 11.5px; color: var(--muted); }
/* 文件夹里的会话行往里缩一点，看得出层级 */
.drawer li.in-folder { padding-left: 33px; }
/* 底栏：模型胶囊 + 新会话主按钮，对位官方的 头像 + New chat */
.drawer-foot {
  flex: none; display: flex; align-items: center; gap: 10px;
  padding: 12px 14px calc(14px + env(safe-area-inset-bottom));
}
.drawer-foot #newChat {
  flex: none; margin-left: auto; height: 40px; padding: 0 24px;
  border: none; border-radius: 999px; cursor: pointer;
  background: var(--ink); color: #f9f6f0;
  font-family: inherit; font-size: 14px; letter-spacing: 2px;
  white-space: nowrap;
}
.drawer-foot #newChat:active { background: #2c241c; }

.sess-menu {
  position: absolute; top: 36px; right: 8px; z-index: 30;
  background: var(--panel); border: 1px solid var(--line); border-radius: 10px;
  box-shadow: 0 4px 14px rgba(60, 40, 20, .14);
  display: flex; flex-direction: column; min-width: 92px; overflow: hidden;
}
.sess-menu button {
  border: none; background: none; color: var(--ink); font-size: 14px;
  padding: 9px 14px; text-align: left; cursor: pointer;
}
.sess-menu button:hover { background: var(--bg); }
.sess-menu button.danger { color: #b64525; }

/* 遮罩压在整个主界面上（含抬头，z 高过 header 的 10）、抽屉之下 */
.mask {
  position: absolute; inset: 0;
  background: rgba(31, 24, 17, .18); z-index: 15;
  opacity: 0; pointer-events: none; transition: opacity .3s;
}
.mask.show { opacity: 1; pointer-events: auto; }

/* —— 首页 —— */
#homeView { background: var(--bg); }

/* ── 壁纸层 v1（2026-07-20，G老师审后架构）──
   层进 .view 内部 absolute + z-index:0，滚动内容提到 z-index:1；
   不用 fixed+负z：fixed 撞 iOS PWA 高度 bug，负z 会被视图不透明背景整个盖掉。
   图挂 .wall-img 且四边外扩 40px，将来上 blur 不露白边；.wall-veil 单管暗化。
   参数全走 CSS 变量（--wall-image/-blur/-sat/-dim），后面滑块直接改变量就行。
   v1 内置渐变跑通层级；聊天页和记忆星图不上壁纸（有独立视觉系统） */
.wall { position: absolute; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; }
.wall-img {
  position: absolute; inset: -40px;
  background-image: var(--wall-image, none);
  /* 位置策略 5 档全走变量：铺满/包含/居中/顶部/拼贴（JS 换 size/pos/repeat 组合） */
  background-size: var(--wall-size, cover);
  background-position: var(--wall-pos, center);
  background-repeat: var(--wall-rep, no-repeat);
  filter: blur(var(--wall-blur, 0px)) saturate(var(--wall-sat, 1));
}
.wall-veil { position: absolute; inset: 0; background: rgba(12, 9, 5, var(--wall-dim, 0)); }
.home-scroll, .page-scroll { position: relative; z-index: 1; }

/* ── 壁纸自动字色（只碰直接躺在壁纸上的裸字，票面/便签/卡片内部一个字不动，G老师拍板）──
   原规则全部不改：JS 按壁纸亮度给视图挂 .wall-lite（深壁纸→浅字）或 .wall-dark（浅壁纸→深字），
   靠下面的覆盖组整组换色。两个类都不挂 = 出厂字色，零像素差 */
/* 首页浅字组：主字 / 中间档 / 淡字 三档，全部带暗晕兜底（混合明暗图也能读） */
.view.wall-lite .home-title,
.view.wall-lite .together-days .num,
.view.wall-lite .since-label,
.view.wall-lite .keepsake-title {
  color: #fbf7ee; text-shadow: 0 1px 14px rgba(22, 15, 8, .55);
}
.view.wall-lite .days-word,
.view.wall-lite .since-sub,
.view.wall-lite .msg-count .num {
  color: rgba(251, 247, 238, .88); text-shadow: 0 1px 10px rgba(22, 15, 8, .5);
}
.view.wall-lite .since-sub2 {
  color: rgba(251, 247, 238, .88);
  text-shadow: 0 0 3px rgba(22, 15, 8, .5), 0 0 8px rgba(22, 15, 8, .4);
}
.view.wall-lite .greeting,
.view.wall-lite .weather,
.view.wall-lite .weather-icon,
.view.wall-lite .hero-coords,
.view.wall-lite .keepsake-en,
.view.wall-lite .msg-count,
.view.wall-lite .msg-count .unit,
.view.wall-lite .note-side-text {
  color: rgba(251, 247, 238, .66); text-shadow: 0 1px 8px rgba(22, 15, 8, .45);
}
.view.wall-lite .since-sub::before { background: rgba(251, 247, 238, .7); }
/* 工具/设置页标题不走 .wall-lite/.wall-dark：旧的类覆盖打不过 #toolsView 的 ID 规则，从来没生效过
   （2026-07-20 泽的粉绿壁纸暴露了这个 bug）。现在改走动态取色：JS 从壁纸提主色、按标题区域
   对比度调明度，写进视图上的 --header-ink/--header-en/--header-shadow，规则在 #toolsView 段 */

/* 第一份预设「原装」= 现有三页底色原样打包（2026-07-20 泽拍板，不许自己发明渐变）：
   首页纸色 --bg、工具/设置深褐 --ticket-bed。视觉必须和没有壁纸系统时一模一样。
   --wall-image 不设 → .wall-img 无图透明，透出视图自身 background，零像素差 */

.home-scroll {
  height: 100%; overflow-y: auto;
  /* 狐狸和便签故意出血到屏幕外，这里锁死横向，免得误触整页乱晃 */
  overflow-x: hidden;
  overscroll-behavior-x: none;
  /* padding 移到 .home-inner：壁纸要盖到 padding 区，inner 的 absolute 壁纸以 border box 为基准 */
}
/* 首页滚动内容包壳：只管布局，壁纸在外面视口固定（.wall 是 #homeView 直接子级） */
.home-inner {
  position: relative;
  min-height: 100%; box-sizing: border-box;
  padding:
    calc(28px + env(safe-area-inset-top))
    max(22px, calc((100% - 500px) / 2))
    calc(104px + env(safe-area-inset-bottom));
}
.home-top {
  display: flex; justify-content: space-between; align-items: flex-start;
  margin-bottom: 22px;
  /* 坐标小字挂在这个盒子右下，不占流、不推挤下面的狐狸 */
  position: relative;
}
/* 「麦田。」大标题，对标参考图的「续。」 */
/* 强调色全走 --header-ink（updateHeaderInk 从当前壁纸采主色）；原装壁纸时 fallback 到原稿深绿 */
.home-title {
  /* 07-21 泽换"规整"方向。方正小标宋——@font-face 打包，电脑手机同款 */
  font-family: "Home ZhTitle", var(--kai);
  font-size: 34px; color: var(--header-ink, #3e6b54);
  letter-spacing: 8px; line-height: 1;
}
.home-title i { font-style: normal; }

/* 原稿：天气整组绿色手绘感，挂右上角 */
.weather {
  display: flex; align-items: baseline; gap: 6px;
  color: var(--header-ink, #4a7a5e); font-family: var(--serif);
  padding-top: 4px;
}
.weather[hidden] { display: none; }
.weather-icon { display: inline-flex; align-self: center; color: var(--header-ink, #4a7a5e); }
.weather-icon svg { width: 21px; height: 21px; }
.weather-temp { font-size: 22px; color: var(--header-ink, #3e6b54); font-weight: 300; }
.weather-range { font-size: 12px; letter-spacing: .3px; color: var(--header-ink, #4a7a5e); }
.weather-range .sep { margin: 0 2px; opacity: .6; }

/* 原稿："Evening, honey" 绿色斜体衬线，贴在麦田标题正下方 */
.greeting {
  /* G老师：细丝一碰就碎。15→17、字重 400→500，跟麦田墨感对齐 */
  font-size: 17px; font-weight: 500; line-height: 1.4;
  color: var(--header-ink, #4a7a5e); font-family: "Canela", Georgia, serif;
  font-style: italic; letter-spacing: 1.5px;
  /* 07-21 泽：往下移一点点（-20→-10）；G老师：整页收紧，下面 margin 24→14 */
  margin: -10px 0 14px;
}

/* —— 主视觉 v2（2026-07-21 照泽手绘稿逐项量的，别自由发挥）——
   白色实卡 85% 宽、圆角 14px、实卡影；叼玫瑰狐从卡右后方探出，
   头顶超出卡顶约 9% 屏宽，底缘与卡底平齐。
   卡内：TOGETHER SINCE / 567+days 同行 / 短横线 / Every day with you. */
.hero2 {
  position: relative;
  /* 泽红笔：白卡要延到右边，把狐狸尾也包住——铺满内容列 */
  width: 100%;
  /* G老师：整页收紧，hero→tabs 之间原 6px 太散 */
  margin: 8px 0 2px;
}
.hero-card {
  position: relative; z-index: 1;
  background: #fdfcf9;
  border-radius: 14px;
  /* 07-21 泽：白框上下变窄，字拉近。20/22 → 12/14；底部再裁 14→6 */
  padding: 12px 20px 6px 22px;
  box-shadow:
    0 3px 6px rgba(80,68,56,.10),
    0 16px 30px -12px rgba(80,68,56,.22);
}
.hero-fox2 {
  position: absolute; z-index: 2;
  /* 泽红笔：狐狸整个在卡内右端（尾巴被白卡包住），头顶探出卡顶——
     这是原稿"从后方探出来叼玫瑰"的叙事核心，别再缩 */
  /* 07-21 泽：狐狸再往右挪几像素，让 SINCE 完全空出来 */
  /* 14:13 泽：狐狸底必须贴白框底！撤回上一版 bottom:12 拦腰截断 */
  width: 58%; max-width: 250px;
  right: -6px; bottom: 0;
  pointer-events: none;
}
/* 07-21 泽 PS 定稿 + @font-face 打包，电脑手机同款：
   TOGETHER SINCE 用 Perpetua Titling Bold caps
   568 数字用 Garamond Bold
   days 用 French Script MT
   Journeys... 用 Rage Italic（在 .since-sub 里） */
.since-label {
  font-family: "Home Caps", "Perpetua Titling MT", "Canela", Georgia, serif;
  font-size: 13px; letter-spacing: 2px; color: #2b241d;
  /* 07-21 泽：字拉近 6→2 */
  margin-bottom: 2px;
}
.together-days { line-height: 1; display: flex; align-items: baseline; }
.together-days .num {
  font-family: "Home Num", "Garamond", "Book Antiqua", Georgia, serif;
  /* 07-21 泽：主视觉数字要大。64→80 撑起版心 */
  font-size: 80px; color: #2b241d;
  letter-spacing: 1px;
}
.days-word {
  font-family: "Home Days", "French Script MT", "Snell Roundhand",
               "Monotype Corsiva", Georgia, serif;
  /* French Script 字身特别小；跟着 568 加大 22→28 */
  font-size: 28px; color: #4b4238; margin-left: 10px;
}
.hero-rule {
  width: 52px; height: 1.5px; background: #2b241d;
  /* 07-21 泽：字拉近 10/8 → 4/4 */
  margin: 4px 0 4px 2px; opacity: .85;
}
.since-sub {
  /* Twelfth Night 里 Feste 的名句，@font-face 打包 Rage Italic */
  font-family: "Home Sub", "Rage Italic", "Snell Roundhand",
               "Monotype Corsiva", Georgia, serif;
  font-size: 19px; letter-spacing: .3px; color: #2b241d;
  /* 07-21 泽：Journeys 一行装不下会被狐狸挡后半段。
     max-width 55% 让它在狐狸左侧自然换行 */
  max-width: 55%;
  line-height: 1.2;
}

/* —— 每日留言条：垫在泽找的便签纸素材上，顶边塞到狐狸下面一点 ——
   上提量跟屏宽联动：狐狸实画高度≈128%宽×89%（图底约11%透明），
   目标是尾巴压住纸顶边约16px、离第一行字还有一指宽，各种手机都成立。
   公式 = fox顶(-96) + 128%×.89 - 压边16 - hero高350。
   依赖 .hero 的 min-height:350px，改那边记得同步这里的常数 */
.note-wrap {
  /* flex-start 别改回 stretch：stretch 会让左轨内容撑高 note-card，
     aspect-ratio 一废，便签图悬空、note-inner 百分比全错位 */
  display: flex; gap: 4px; align-items: flex-start;
  margin: calc(112.8% - 462px) -6px 24px 0;
  position: relative; z-index: 2;
}
/* 屏幕一宽狐狸就到 540px 顶格不再长，上提量随之定死 */
@media (min-width: 466px) {
  .note-wrap { margin-top: 14px; }
}
.note-side {
  flex: none; width: 20px;
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  padding-top: 16%;
}
/* 左轨换 G老师配色：❀ 灰玫瑰、✧ 戳棕、竖排字戳棕——整条左轨归入邮政线色系 */
.note-clover { color: var(--dusty-rose); font-size: 11px; opacity: .8; }
.note-clover.c2 { color: var(--stamp); }
.note-side-line { width: 1px; height: 22px; background: var(--line); }
.note-side-text {
  writing-mode: vertical-rl;
  font-family: "Canela", Georgia, serif;
  font-size: 9.5px; letter-spacing: 3.5px; color: var(--stamp);
}
/* 左轨下半段：短线+星收尾。1224 编号不重写——G老师的戳上已经印着 LOVE-2025-1224 */
.note-side-line.l2 { height: 28px; opacity: .7; }
.note-clover.c2 { font-size: 9px; opacity: .55; }
.note-card {
  position: relative; flex: 1;
  /* 泽拍板：便签缩一点、靠右贴；右缘留一口气不顶死 */
  max-width: 315px;
  margin-left: auto; margin-right: 10px;
  aspect-ratio: 1632 / 1258;
  /* 泽改的新图：去掉了左边突出的报纸撮，画布尺寸没变 */
  background: url("assets/notepaper2.png") no-repeat center / contain;
}
/* 565 SVG 戳已删——泽 2026-07-18 红叉判死刑，跟主数字 565 信息重复。G老师的戳独苗做主角 */
/* 航空邮件竖排小字：泽 2026-07-18 17:53 定稿——横排三行（TO/FROM/✦线）否了
   （"我看了，横排不好看"），换竖排 PAR AVION ✈，摆白纸左侧那条竖缝里、戳正上方。
   竖缝形状本来就是窄长条，竖排才贴形。颜色归左轨戳棕。就这一条，别再塞 */
.note-envelope {
  position: absolute; left: 21px; top: 38px; z-index: 1;
  /* left 21 = 竖字中轴 ≈27.9px 对齐下方邮戳可见圆左缘，上下一条竖轴。
     top 38 = 字尾贴到戳可见圆顶留 ~7px（实测字高77.6）——泽 17:59"位置大小奇怪"：
     旧版 8.5px/top16 又小又两头不靠地飘在半空，改成字+戳咬合成一个邮政单元 */
  writing-mode: vertical-rl;  /* 字母书脊式横倒，从上往下读 */
  font-family: "Canela", Georgia, serif;
  font-size: 10.5px; letter-spacing: 3px; color: var(--stamp);
  pointer-events: none;
}

/* G老师画的麦田邮局戳：白底靠 multiply 消掉，骑在白纸左下角。
   角度/淡度按 G老师参数（-8° / .42）。三次返工的教训全在这，别再犯：
   ① 图是 1200 方图，可见圆只占 84.5%（canvas 实测），四周 7.7% 透明边——
      G老师的 84px 说的是圆，盒宽要 84/0.845≈96 才够（泽 17:21 骂"戳小了"）。
   ② 定位锚白纸边线，不锚图边线：notepaper2.png 白纸左缘在图宽 18%、
      底缘在图高 82%，下面 18% 全是报纸撕边（曾贴图底定位掉进报纸，红叉一次）。
   ③ 落点以泽认可的 15:54 版为基准再"往左一部分"：戳心在白纸左缘内 12px、
      白纸底线上 28px，可见圆 1/3 探出左缘、底缘擦报纸顶。
      曾移过头把心悬到纸外（17:21 红叉二次）。下方 calc = 白纸边线 ± 上述落点 - 盒半径48 */
.note-stamp2 {
  position: absolute;
  left: calc(18% - 37px);   /* 戳心=白纸左缘内16px（盒半径53）。泽17:38夹逼定稿：
                               G老师版心内20太靠内、麦穗版心内12太靠外，取16 */
  bottom: calc(18% - 21px); /* 戳心=白纸底线上32px，撕边左段冒头高，多留2px */
  z-index: 2;
  width: 106px; height: auto; /* 可见圆89.6px，泽17:38"再放大一点点"定的 */
  transform: rotate(-8deg);
  /* G老师原参 .42 被泽 17:28 否了（"颜色浅了"）：实机 multiply 在米白底上
     压不出他效果图的墨浓度，外环虚线糊没、戳观感缩一圈。.60 按泽认可的
     15:54 版浓度校的。改浓淡只动这一个数，别去碰混合模式 */
  mix-blend-mode: multiply; opacity: .6;
  pointer-events: none;
}
.note-inner {
  position: absolute; left: 25%; top: 13%; right: 30%; bottom: 28%;
  display: flex; flex-direction: column; justify-content: space-between;
}
.note-text {
  /* G老师：太黑太重像通知书。降到深咖、行距稍收，更像手记 */
  font-family: var(--kai); font-size: 13.5px; line-height: 1.95;
  color: #6b5a48; overflow: hidden;
}
.note-meta {
  display: flex; justify-content: space-between; align-items: baseline;
  font-family: var(--kai); font-size: 10.5px; color: var(--muted);
  letter-spacing: 1px;
}
.note-meta span:last-child { font-family: "Canela", Georgia, serif; letter-spacing: 2px; }

/* —— 收藏室：横滑轮播的纪念卡 —— */
.keepsake { margin-bottom: 6px; }
.keepsake-head {
  display: flex; align-items: center; gap: 12px;
  margin-bottom: 14px;
}
.keepsake-title {
  font-family: var(--kai); font-size: 14px; color: var(--ink);
  letter-spacing: 4px;
}
.keepsake-en {
  font-family: "Canela", Georgia, serif;
  font-size: 9.5px; letter-spacing: 3px; color: var(--muted); opacity: .8;
}
.keepsake-line {
  flex: 1; height: 1px;
  background: linear-gradient(90deg, rgba(93, 68, 42, .18), transparent);
}
.keepsake-track {
  display: flex; gap: 12px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  padding: 2px 2px 12px;
  scrollbar-width: none;
}
.keepsake-track::-webkit-scrollbar { display: none; }
.keepsake-card {
  flex: none; width: 76%; max-width: 320px;
  scroll-snap-align: center;
  background: rgba(255, 255, 255, .55);
  border: 1px solid rgba(210, 192, 165, .5);
  border-radius: 14px;
  padding: 15px 18px 14px;
  box-shadow: 0 1px 8px rgba(60, 40, 20, .04);
}
.k-date {
  font-family: "Canela", Georgia, serif;
  font-size: 12px; letter-spacing: 2.5px; color: var(--muted);
}
.k-text {
  font-family: var(--kai); font-size: 13.5px; line-height: 1.95;
  color: var(--ink); margin-top: 7px;
}

/* —— 消息计数：降为页脚一行小字 —— */
.msg-count {
  margin: 20px 0 8px; line-height: 1;
  font-family: var(--kai); font-size: 12.5px; color: var(--muted);
  letter-spacing: .8px;
}
.msg-count[hidden] { display: none; }
.msg-count .num {
  font-size: 16px; color: var(--name);
  font-family: "Canela", Georgia, serif; margin-right: 5px;
}
.msg-count .unit { color: var(--muted); }
.msg-count.empty .num { display: none; }
.msg-count.empty .unit { font-style: italic; }
.clock-mini[hidden], #homeDate[hidden] { display: none; }

/* ============================================================
   首页组件区（2026-07-20 主页改版 P1，G老师九条约束）
   ============================================================ */

/* —— 图标栏（照原稿：iOS 式圆角方块，选中=深绿实底浅图标，未选中=淡玻璃+绿图标）—— */
.home-tabs {
  /* 泽红笔：间距太宽。原稿 gap≈6% 屏宽 → 24px，不用 space-between 摊开
     07-25 泽：加第五钮后排不下就横滑，不许缩按钮 */
  display: flex; gap: 24px; align-items: flex-start;
  overflow-x: auto; -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  /* 居中不能用 justify-content:center——溢出时左端会被裁掉滑不出来，
     用首尾 margin:auto 实现"排得下居中、排不下可滑到头" */
  /* G老师：图标区跟下面便签像一个整体，跟上面 hero 也拉近。26/12→14/4 */
  padding: 14px 2px 4px;
  position: relative; z-index: 2;
}
.home-tabs::-webkit-scrollbar { display: none; }
.home-tab:first-child { margin-left: auto; }
.home-tab:last-child { margin-right: auto; }
.home-tab {
  display: flex; flex-direction: column; align-items: center; gap: 7px;
  border: 0; padding: 0; background: transparent; cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: transform .18s ease;
}
.home-tab:active { transform: scale(.95); }
.home-tab .tab-icon {
  display: inline-flex; align-items: center; justify-content: center;
  /* 07-21 泽红笔：图标再大一圈 58→68，圆角同比放大 16→18 */
  width: 68px; height: 68px; border-radius: 18px;
  background: rgba(255,255,255,.34);
  color: var(--header-ink, #4a7a5e);
  box-shadow: 0 2px 8px rgba(80,68,56,.08), inset 0 1px 0 rgba(255,255,255,.5);
  transition: background .25s ease, color .25s ease, box-shadow .25s ease;
}
.home-tab .tab-icon svg { width: 30px; height: 30px; stroke-width: 1.5; }
.home-tab.is-active .tab-icon {
  background: var(--header-ink, #3e6b54);
  color: #eaf2e6;
  box-shadow: 0 5px 14px rgba(46,77,60,.35), inset 0 1px 0 rgba(255,255,255,.18);
}
.home-tab .tab-label {
  /* 07-21 泽：板正一点，不要手写体 */
  font-family: Georgia, "Canela", serif;
  font-size: 12px; letter-spacing: 1px;
  color: var(--header-ink, #4a7a5e); opacity: .9;
}
/* 非选中方块：默认假玻璃兜底（老浏览器 / iOS 出错位时降级） */
.home-tab:not(.is-active) .tab-icon {
  background: rgba(255,255,255,.44);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.6), 0 2px 8px rgba(80,68,56,.08);
}
/* 07-21 泽：图标区始终在页面顶部（滚动位置浅），采样偏移可控，
   给它单独放行真玻璃。便签/todo 卡不动——它们在滚动深处仍会错位。 */
@supports (backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px)) {
  .home-tab:not(.is-active) .tab-icon {
    background: rgba(255,255,255,.28);
    -webkit-backdrop-filter: blur(14px) saturate(1.4);
    backdrop-filter: blur(14px) saturate(1.4);
  }
}

/* —— 面板视口 + 单向流高度同步（防 ResizeObserver 循环） —— */
.home-panels {
  display: flex; align-items: flex-start;  /* 关键：panel 高度只由内容决定，外层高度只抄 */
  overflow-x: auto; overflow-y: hidden;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  position: relative; z-index: 2;
  transition: height .32s cubic-bezier(.4,.14,.3,1);
  overscroll-behavior-x: contain;  /* 别牵动上级横滑 */
  -webkit-overflow-scrolling: touch;
}
.home-panels::-webkit-scrollbar { display: none; }
.home-panel {
  flex: 0 0 100%;
  scroll-snap-align: start;
  scroll-snap-stop: always;
  /* 顶部留 18px：拍立得图钉冒头在 panel 外，overflow-y:hidden 会裁——别减 */
  padding: 18px 2px 12px;
  min-height: 40px;
  box-sizing: border-box;
}
/* （旧便签 PAR AVION 已按原稿退役——"相当于之前便签的功能"，样式段留在上方待清理） */

/* —— 玻璃卡（假玻璃版，2026-07-21）——
   放弃 backdrop-filter：iOS 内部滚动器采样错位 + 伪元素覆盖字消失，都是死结。
   改成 rgba 半透 + 顶边高光 + 阴影，视觉上肉眼几乎一样，稳定、不出 bug。
   如果电脑上想加真玻璃，另开 @media (hover:hover) 补一层，别动这段基础 */
.glass {
  position: relative;
  overflow: hidden;
  /* G老师：卡底太透文字被壁纸吃掉。.55→.68 让字站住 */
  background: rgba(248,251,245,.68);
  border-radius: 6px;
  box-shadow:
    0 6px 18px rgba(80,68,56,.10),
    0 1px 3px rgba(80,68,56,.07),
    inset 0 1px 0 rgba(255,255,255,.55);
}

/* —— 格1 错落布局（泽红笔修正版）——
   玻璃卡延伸到拍立得下面、连起来（玻璃在下层、拍立得压上面），
   玻璃卡上下高度比拍立得窄 */
.pane-row {
  display: flex; align-items: flex-start;
  position: relative;
}
/* 泽红笔 07-21 第二版：
   上一版用 absolute 定位把玻璃卡钉在拍立得上下沿之间——文字被 overflow 截断，太粗暴。
   改回 flex 自然高度，靠"把拍立得变长"来保证 拍立得底 > 玻璃卡底 */
.row-note { margin-bottom: 18px; }        /* 32→18：两行拉近，todo 往上挪 */
.row-note .polaroid { flex: none; width: 42%; z-index: 2; }
.row-note .note-glass {
  flex: 1; z-index: 1;
  margin-left: -12%;                     /* 左缘钻进拍立得底下 */
  padding-left: calc(12% + 18px);        /* 文字仍从拍立得右侧开始 */
  margin-top: 22px;                      /* 30→22：跟 margin-bottom 对称，拍立得上下等量露出 */
  margin-bottom: 22px;                   /* 底比拍立得高（关键：这条就是"抬高玻璃卡底"） */
}
/* to do 那一行同理：让望天狐拍立得比 todo 卡上下都长出去 */
.row-todo .todo-card {
  flex: 1; z-index: 1;
  margin-right: -12%;                    /* 右缘钻进拍立得底下 */
  padding-right: calc(12% + 18px);
  margin-top: 22px;                      /* 顶低于望天狐 */
  margin-bottom: 22px;                   /* 底比望天狐高（跟 note-glass 对称） */
}
.row-todo .polaroid {
  flex: none; width: 41%; z-index: 2;
  /* margin-top:-14 撤了——现在拍立得自己就比 todo 卡长，不需要负外边距硬顶 */
}

/* —— 卡片标题（Today's note / To do list：深绿粗衬线，照原稿）—— */
.card-title {
  font-family: Georgia, "Canela", serif; font-weight: 700;
  font-size: 19px; color: var(--header-ink, #3e6b54);
  letter-spacing: .5px;
  margin-bottom: 12px;
}

/* —— Today's note 玻璃卡 —— */
.note-glass { padding: 14px 16px 12px; }
.note-glass .note-text {
  font-family: var(--kai); font-size: 13.5px; line-height: 1.95;
  color: #4b4238; min-height: 76px;      /* 撤销 overflow:hidden——不再截断，让文字自然长 */
}
.note-glass .note-meta {
  display: flex; justify-content: space-between; align-items: baseline;
  font-family: var(--kai); font-size: 12px; color: var(--header-ink, #3e6b54);
  letter-spacing: 1px; margin-top: 12px;
}
.note-glass .note-meta span:last-child { font-family: Georgia, serif; letter-spacing: 2px; }

/* —— To do 卡 —— */
.todo-card { padding: 18px 16px 12px; }
.todo-list { list-style: none; padding: 0; margin: 0 0 8px; }
.todo-item {
  display: flex; align-items: center; gap: 8px;
  padding: 5px 0; font-family: var(--kai);
  font-size: 13px; color: #4b3f34;
}
.todo-item label {
  display: inline-flex; align-items: center; gap: 8px; flex: 1;
  cursor: pointer; min-width: 0;
}
.todo-item input[type="checkbox"] {
  accent-color: var(--accent, var(--stamp));
  width: 15px; height: 15px; flex: none;
}
.todo-item .todo-text {
  flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  transition: color .2s ease, opacity .2s ease;
}
.todo-item.is-done .todo-text { text-decoration: line-through; opacity: .5; }
.todo-del {
  border: 0; background: transparent; color: var(--muted);
  cursor: pointer; font-size: 16px; line-height: 1;
  padding: 2px 6px; opacity: .45;
  transition: opacity .2s, color .2s;
}
.todo-del:hover { opacity: 1; color: var(--faded-red); }
.todo-input input {
  width: 100%; box-sizing: border-box;
  border: 0; border-bottom: 1px dashed var(--line);
  background: transparent; padding: 6px 2px;
  font-family: var(--kai); font-size: 13px; color: var(--ink);
  outline: none;
}
.todo-input input::placeholder { color: var(--muted); opacity: .6; }
.todo-empty {
  font-family: var(--kai); font-size: 12px; color: var(--muted);
  padding: 4px 0 6px; opacity: .7; font-style: italic;
}

/* —— 拍立得（照原稿：正的不歪、深绿图钉圆头+短柄、下沿留白无字）——
   原稿量得：拍立得占屏宽 ~36%（在 panel 内即 ~42%），白框侧边 6%、底部 17%，
   照片高宽比 ≈ 1.12（方图靠 cover 裁竖长方形） */
.polaroid {
  position: relative;
  /* ⚠️百分比 padding 参照的是父容器宽（踩过：白边撑爆），必须用固定值
     07-21 泽红笔：拍立得整体加长，让底部超过玻璃卡底——底部留白 26→34 */
  padding: 9px 9px 34px;
  background: #fdfcf9;
  border-radius: 2px;
  box-shadow:
    0 2px 5px rgba(80,68,56,.12),
    0 12px 22px -10px rgba(80,68,56,.24);
}
.polaroid-img {
  /* 07-21 泽红笔：图片高一点，拍立得整体更长 → 1.12→1.24 */
  width: 100%; aspect-ratio: 1 / 1.24;
  background-size: cover; background-position: center;
}
/* 图钉：原稿是深绿色圆头 + 短柄，钉在拍立得顶边中间 */
.polaroid .pin {
  position: absolute; left: 50%; top: -13px;
  transform: translateX(-50%);
  width: 16px; height: 22px;
  z-index: 2;
}
.polaroid .pin-head {
  position: absolute; left: 1px; top: 0;
  width: 14px; height: 14px; border-radius: 50%;
  background: #2f5d46;
  box-shadow: 0 1px 2px rgba(0,0,0,.25);
}
.polaroid .pin-stem {
  position: absolute; left: 6px; top: 12px;
  width: 3px; height: 8px;
  background: #2f5d46;
  border-radius: 0 0 1px 1px;
}

/* —— 记忆卡 (格2) —— */
.mem-card {
  padding: 18px 20px 16px;
  margin: 6px 6px 4px;
  min-height: 140px;
}
.mem-head {
  font-family: var(--kai); font-size: 14px; letter-spacing: 3px;
  color: var(--ink); margin-bottom: 12px;
}
.mem-head .mem-sub {
  font-family: "Canela", Georgia, serif; font-style: italic;
  font-size: 10.5px; letter-spacing: 2.5px; margin-left: 8px;
  opacity: .65; color: var(--muted);
}
.mem-body {
  font-family: var(--kai); font-size: 13.5px; line-height: 1.85;
  color: #5a4c3f;
  min-height: 60px;
}
.mem-time {
  font-family: "Canela", Georgia, serif;
  font-size: 10.5px; letter-spacing: 2px; color: var(--muted);
  margin-top: 10px; opacity: .8;
}

/* —— 反悔区卡（inbox 格，记忆v5 待审纸条）—— */
.iv5-card { padding: 18px 20px 16px; margin: 6px 6px 4px; }
/* 07-26 泽点名：学参考图的文件夹书签——页签裸浮在壁纸上（卡外），
   选中卡舌与下方玻璃卡同一片白连成一体；未选中更透明退后 */
.iv5-home-index {
  display: flex; gap: 0;
  margin: 6px 6px 0; padding: 0 10px;
  position: relative; z-index: 1;
  counter-reset: iv5tab;
}
/* 书签排和内容卡之间零缝隙：压掉卡自己的上边距 */
.iv5-home-index + .iv5-card { margin-top: 0; }
.iv5-home-index button {
  flex: 1; min-width: 0; min-height: 42px; padding: 10px 4px 9px;
  border: none; border-radius: 0;
  background: rgba(248, 251, 245, .38);
  clip-path: polygon(13px 0, calc(100% - 13px) 0, 100% 100%, 0 100%);
  color: #8b7f74; font-family: var(--kai); font-size: 14px; letter-spacing: .5px;
  cursor: pointer; counter-increment: iv5tab;
}
.iv5-home-index button::before {
  content: "0" counter(iv5tab) " ";
  font-family: ui-monospace, SFMono-Regular, monospace;
  font-size: 11px; color: #b7ab9e; letter-spacing: 1px; margin-right: 4px;
}
.iv5-home-index button.is-active {
  /* 选中=近实白（参考图的"连线"），未选中=透玻璃，差距要一眼可辨 */
  background: rgba(253, 254, 251, .88);
  color: var(--ink); font-weight: 600;
}
.iv5-home-index button.is-active::before { color: var(--muted); font-weight: 400; }
@supports (backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px)) {
  .iv5-home-index button {
    background: rgba(248, 251, 245, .26);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
  }
  .iv5-home-index button.is-active {
    background: rgba(253, 254, 251, .86);
    -webkit-backdrop-filter: blur(14px) saturate(1.4);
    backdrop-filter: blur(14px) saturate(1.4);
  }
}
.iv5-home-page[hidden] { display: none; }
.iv5-home-page .iv5-note { margin-top: 0; }
.iv5-home-page .iv5-meta { font-size: 14px; line-height: 1.65; }
.iv5-home-page .iv5-btn { min-height: 34px; font-size: 13px; }
/* 07-25 泽：首页六张玻璃卡全上真毛玻璃（note 便签/todo 也一起，15:28 泽点名）——
   跟图标区同款配方，横滑全程不降级。
   旧的 0.68 防吃字是给无 blur 的假玻璃定的；真玻璃 blur 扛可读性。
   （曾配过 .is-scrolling 滑动切假玻璃防 iOS 采样错位，泽嫌闪、且
   未在真机复现过错位 → 撤。真机若滑出拖影/错位/字发虚，
   降级规则从 git 历史捞回并配 transition。
   整体回退：删本 @supports 块即回假玻璃 */
@supports (backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px)) {
  .glass {
    background: rgba(248,251,245,.42);
    -webkit-backdrop-filter: blur(14px) saturate(1.4);
    backdrop-filter: blur(14px) saturate(1.4);
  }
}
.iv5-note { font-size: 12px; color: var(--muted); margin: -6px 0 10px; }
.iv5-empty { color: var(--muted); font-size: 13.5px; padding: 8px 0; }
/* 订单巡检页（7-31）：账表与医生计数丸 */
.iv5-table { width: 100%; border-collapse: collapse; font-size: 12px; margin: 2px 0 6px; }
.iv5-table th, .iv5-table td { text-align: left; padding: 3px 6px; border-bottom: 1px dashed var(--line); }
.iv5-table th { color: var(--muted); font-weight: normal; font-size: 11px; }
.iv5-table th.num, .iv5-table td.num { text-align: right; font-variant-numeric: tabular-nums; }
.iv5-table tr.bad td { color: #b23c2e; }
.iv5-pill {
  display: inline-block; font-size: 11.5px; border-radius: 6px; padding: 1px 8px;
  margin: 2px 5px 2px 0; background: rgba(243, 226, 211, .8); color: #8d6748;
}
.iv5-pill b { font-variant-numeric: tabular-nums; }
.iv5-incident {
  border: 1px solid #d8aa78; background: rgba(255, 242, 218, .72);
  border-radius: 9px; padding: 9px 11px; margin: 0 0 10px;
  font-size: 12.5px; line-height: 1.55; color: #714f2f;
}
.iv5-incident + .iv5-incident { margin-top: -5px; }
.iv5-incident .iv5-btn { margin-top: 5px; }
.iv5-recall { border-bottom: 1px solid var(--line); padding: 2px 0 10px; margin-bottom: 6px; }
.iv5-recall-row { display: flex; gap: 5px; flex-wrap: wrap; align-items: center; }
.iv5-input, .iv5-select {
  border: 1px solid var(--line); border-radius: 8px; background: #fff; color: var(--ink);
  padding: 6px 8px; font: inherit; font-size: 12.5px; min-width: 0;
}
.iv5-input { flex: 1 1 150px; }
.iv5-select { flex: 0 1 130px; }
.iv5-recall-hit { font-size: 12.5px; line-height: 1.55; padding: 6px 2px 0; }
.iv5-recall-label { color: #6e4e82; font-size: 11px; margin-right: 5px; }
.iv5-tabs { margin: -4px 0 10px; }
.iv5-delete-menu {
  border: 1px solid var(--line); background: #fffaf2; border-radius: 8px;
  padding: 7px 8px; margin-top: 7px; font-size: 11.5px; line-height: 1.5;
}
.iv5-delete-menu .iv5-btn { display: block; width: 100%; text-align: left; margin: 4px 0 0; }
.iv5-tag.protected { background: #f5dfeb; color: #8a4d6d; }
.iv5-tools { border-top: 1px solid var(--line); margin-top: 12px; padding-top: 8px; }
.iv5-tools summary { color: var(--muted); font-size: 12.5px; cursor: pointer; }
.iv5-tool-block { padding-top: 9px; }
.iv5-tool-block > .iv5-input { width: 100%; margin-top: 4px; }
.iv5-item { border-top: 1px dashed var(--line); padding: 10px 2px 8px; }
.iv5-item:first-child { border-top: none; padding-top: 2px; }
.iv5-item.pinned {
  background: #fdf6ef; border-radius: 8px;
  padding: 10px 10px 8px; border-top: none; margin-bottom: 4px;
}
.iv5-text { font-family: var(--prose, ui-serif, Georgia, serif); font-size: 14.5px; line-height: 1.7; word-break: break-word; margin: 0; }
.iv5-count { font-size: 11.5px; color: var(--muted); }
.iv5-meta { font-size: 11.5px; color: var(--muted); }
.iv5-tag { display: inline-block; font-size: 10.5px; border-radius: 6px; padding: 1px 7px; margin-left: 6px; vertical-align: 1px; }
.iv5-tag.dup { background: #f6ead2; color: #96702a; }
.iv5-tag.manual { background: #e4ecdf; color: #4d7145; }
.iv5-tag.batch { background: rgba(91, 118, 135, .1); color: #5b7687; }
.iv5-tag.game { background: #ede4f5; color: #6e4e82; }
/* 07-26 泽定稿：按钮=矩形小圆角（8px，与玻璃卡同语言，全页无胶囊）；
   主按钮深色实心，次要操作纯文字 */
.iv5-btn {
  display: inline-block; border: 1px solid color-mix(in srgb, var(--line) 72%, transparent);
  border-radius: 8px;
  background: rgba(255, 255, 255, .45); color: #6b5d50; font-size: 13px;
  padding: 5px 13px; margin: 7px 7px 0 0; cursor: pointer; font-family: inherit;
  letter-spacing: .3px;
  transition: background .15s, border-color .15s;
}
.iv5-btn:hover { background: rgba(255, 255, 255, .75); }
/* 强调色跟壁纸（--header-ink 采主色），fallback 独立页的橙——点缀不染色：
   正文/标签/浅底不跟，只有主按钮和来源条边框跟（07-25 泽敲的脑袋）。
   07-26 泽定：主按钮维持深色实心（胶囊形）；一排里只许一个实体钮 */
.iv5-btn.primary {
  background: var(--header-ink, #c9673f); border-color: var(--header-ink, #c9673f);
  color: #fff; font-weight: 600;
}
.iv5-btn.quiet { color: var(--muted); background: transparent; }
.iv5-btn:disabled { opacity: .5; cursor: default; }
/* 纸条里的次要操作（修改/删除/来源/四档菜单）：去框去底做文字钮——
   一主三次，不搞四个胶囊排排站（07-26 泽骂醒的） */
.iv5-item .iv5-btn:not(.primary) {
  border-color: transparent; background: transparent;
  color: #7a6c5f; padding: 6px 9px;
}
.iv5-item .iv5-btn:not(.primary):hover { background: rgba(255, 255, 255, .55); }
.iv5-src-chat {
  border-left: 3px solid var(--header-ink, #c9673f);
  background: color-mix(in srgb, var(--header-ink, #c9673f) 13%, #fffdf9);
  padding: 8px 12px; border-radius: 0 8px 8px 0; font-size: 13px; margin-top: 6px;
}
.iv5-src-manual {
  border: 1px solid #cfdcc8; background: #f4f8f1; border-radius: 10px;
  padding: 10px 14px; font-family: var(--kai); font-size: 14px; margin-top: 6px;
}
.iv5-src-att { border: 1px solid var(--line); background: #faf7f1; border-radius: 10px; padding: 10px 14px; margin-top: 6px; font-size: 13px; }
.iv5-manual { border-top: 1px solid var(--line); margin-top: 12px; padding-top: 10px; }
.iv5-editbox { margin: 6px 0 4px; }
/* 聊天原文搜索结果（漏筛补救里） */
.iv5-hit { border-top: 1px dashed var(--line); padding: 8px 2px 6px; }
.iv5-hit:first-of-type { border-top: none; }
.iv5-hit-snip { font-size: 13.5px; line-height: 1.65; margin: 0 0 2px; word-break: break-word; }
.iv5-ctx { margin-top: 4px; }
.iv5-ctx-msg {
  font-size: 13px; line-height: 1.6; padding: 5px 8px; margin: 3px 0;
  border-radius: 6px; background: #fffdf9; border: 1px solid var(--line);
  cursor: pointer; word-break: break-word;
}
.iv5-ctx-msg .iv5-meta { margin-right: 6px; }
.iv5-ctx-msg.is-hit { border-color: #d9c39f; background: #fdf8ef; }
.iv5-ctx-msg.is-picked {
  border-color: var(--header-ink, #c9673f);
  background: color-mix(in srgb, var(--header-ink, #c9673f) 12%, #fffdf9);
}
.iv5-picked {
  border: 1px solid var(--header-ink, #c9673f); border-radius: 8px;
  padding: 8px 10px; margin-top: 8px;
  background: color-mix(in srgb, var(--header-ink, #c9673f) 8%, #fffdf9);
}
.iv5-ta {
  width: 100%; min-height: 64px; font-family: inherit; font-size: 14px;
  border: 1px solid var(--line); border-radius: 8px; padding: 8px 10px;
  background: #fff; color: var(--ink); resize: vertical; line-height: 1.7;
  margin-top: 4px; box-sizing: border-box;
}
.iv5-toast {
  position: fixed; left: 50%; bottom: 30px; transform: translateX(-50%);
  background: var(--ink); color: #fff; font-size: 13px;
  padding: 8px 18px; border-radius: 20px; opacity: 0; transition: opacity .25s;
  pointer-events: none; max-width: 85vw; z-index: 999;
}
.iv5-toast.show { opacity: .92; }

/* —— 农场卡 (格3) —— */
.farm-card {
  padding: 18px 20px 14px;
  margin: 6px 6px 4px;
  min-height: 140px;
}
.farm-head {
  display: flex; justify-content: space-between; align-items: baseline;
  font-family: var(--kai); font-size: 14px; letter-spacing: 3px;
  color: var(--ink); margin-bottom: 12px;
}
.farm-badge {
  font-family: "Canela", Georgia, serif;
  font-size: 10.5px; letter-spacing: 2px;
  color: var(--stamp); opacity: .7;
}
.farm-body {
  font-family: var(--kai); font-size: 13px; line-height: 1.9;
  color: #5a4c3f;
}
.farm-body .row { display: flex; gap: 14px; }
.farm-body b {
  font-family: "Canela", Georgia, serif; font-weight: 400;
  color: var(--ink); font-size: 16px; letter-spacing: 1px;
}
.farm-foot {
  display: flex; justify-content: space-between; align-items: center;
  margin-top: 10px;
}
.farm-time {
  font-family: "Canela", Georgia, serif; font-size: 10px;
  letter-spacing: 1.5px; color: var(--muted); opacity: .7;
}
.farm-refresh {
  border: 1px solid var(--line);
  background: rgba(255,255,255,.35);
  color: var(--stamp);
  border-radius: 12px;
  padding: 4px 12px;
  font-family: "Canela", Georgia, serif; font-style: italic;
  font-size: 11px; letter-spacing: 1.5px;
  cursor: pointer;
  transition: background .2s, color .2s;
}
.farm-refresh:hover { background: rgba(255,255,255,.6); color: var(--ink); }

/* —— 碎碎念卡 (格4，2026-08-10)：排版跟记忆卡同源，字更小更淡，安静躺着 —— */
.murmur-card {
  padding: 18px 20px 16px;
  margin: 6px 6px 4px;
  min-height: 140px;
}
.murmur-head {
  font-family: var(--kai); font-size: 14px; letter-spacing: 3px;
  color: var(--ink); margin-bottom: 12px;
}
.murmur-head .murmur-sub {
  font-family: "Canela", Georgia, serif; font-style: italic;
  font-size: 10.5px; letter-spacing: 2.5px; margin-left: 8px;
  opacity: .65; color: var(--muted);
}
.murmur-list { list-style: none; margin: 0; padding: 0; }
.murmur-item {
  padding: 9px 0 10px;
  border-bottom: 1px solid rgba(120, 104, 84, .14);
}
.murmur-item:last-child { border-bottom: none; }
.murmur-text {
  font-family: var(--kai); font-size: 13px; line-height: 1.85;
  color: #5a4c3f;
}
.murmur-time {
  font-family: "Canela", Georgia, serif;
  font-size: 10px; letter-spacing: 1.6px; color: var(--muted);
  margin-top: 3px; opacity: .7;
}
.murmur-empty {
  font-family: var(--kai); font-size: 12.5px; line-height: 1.9;
  color: var(--muted); opacity: .8; padding: 6px 0;
}
.murmur-foot {
  font-family: var(--kai); font-size: 11px; letter-spacing: 1.2px;
  color: var(--muted); opacity: .6; margin-top: 12px;
}

/* —— Coming Soon 占位卡（格4 已改碎碎念，样式留着以后新格子用）—— */
.soon-card {
  padding: 34px 20px;
  margin: 6px 6px 4px;
  text-align: center;
  min-height: 140px;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 8px;
}
.soon-title {
  font-family: "Canela", Georgia, serif; font-style: italic;
  font-size: 22px; letter-spacing: 2px; color: var(--ink); opacity: .7;
}
.soon-sub {
  font-family: var(--kai); font-size: 12px; letter-spacing: 1.5px;
  color: var(--muted); opacity: .75;
}

/* —— 记忆星图：深纸色底上的印刷星表（3D 画布 + 覆盖排版层） —— */
#memoryView {
  background: var(--ticket-bed, #7d6e58);
  color: #f2e9d8;
  overflow: hidden;
}
#memoryCanvas {
  position: absolute; inset: 0; z-index: 0;
  width: 100%; height: 100%;
  touch-action: none; /* 手势自己处理，浏览器别抢 */
}
/* 四周渐暗，星点对比更足；不挡手势 */
.star-vignette {
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: radial-gradient(ellipse at center, transparent 52%, rgba(40, 32, 22, 0.34));
}
/* 印刷星表的细线框 + 四角角标 */
.star-frame {
  position: absolute; z-index: 1; pointer-events: none;
  inset: calc(10px + env(safe-area-inset-top)) 12px calc(10px + env(safe-area-inset-bottom));
  border: 1px solid rgba(242, 233, 216, 0.13);
}
.star-frame::before {
  content: ""; position: absolute; inset: -1px;
  --ck: rgba(242, 233, 216, 0.5);
  background:
    linear-gradient(var(--ck), var(--ck)) left 0 top 0 / 14px 1.5px,
    linear-gradient(var(--ck), var(--ck)) left 0 top 0 / 1.5px 14px,
    linear-gradient(var(--ck), var(--ck)) right 0 top 0 / 14px 1.5px,
    linear-gradient(var(--ck), var(--ck)) right 0 top 0 / 1.5px 14px,
    linear-gradient(var(--ck), var(--ck)) left 0 bottom 0 / 14px 1.5px,
    linear-gradient(var(--ck), var(--ck)) left 0 bottom 0 / 1.5px 14px,
    linear-gradient(var(--ck), var(--ck)) right 0 bottom 0 / 14px 1.5px,
    linear-gradient(var(--ck), var(--ck)) right 0 bottom 0 / 1.5px 14px;
  background-repeat: no-repeat;
}

/* 排版层：大衬线标题 + 右上数据 + 斜体引导句。整层不挡手势，返回键单独可点 */
.star-head {
  position: absolute; z-index: 6; left: 0; right: 0; top: 0;
  padding: calc(22px + env(safe-area-inset-top)) 26px 0;
  pointer-events: none;
}
.star-head-row {
  display: flex; align-items: baseline; justify-content: space-between; gap: 12px;
}
.star-title {
  margin: 0;
  font-family: "Didot", var(--kai), Georgia, serif;
  font-weight: 400;
  font-size: 42px;
  letter-spacing: 1px;
  color: #dfa07a;
  text-shadow: 0 1px 12px rgba(40, 30, 20, 0.35);
}
.star-meta {
  font-family: var(--mono);
  font-size: 9.5px;
  letter-spacing: 2.5px;
  color: rgba(242, 233, 216, 0.6);
  white-space: nowrap;
}
.star-sub-row {
  display: flex; align-items: center; gap: 4px; margin-top: 2px;
}
.memory-back {
  pointer-events: auto;
  border: none; background: none; color: rgba(242, 233, 216, 0.75);
  font-size: 17px; cursor: pointer;
  /* 热区撑到 44px 触摸标准；负 margin 抵掉撑高，不推挤下面的斜体句 */
  min-width: 48px; min-height: 44px;
  display: inline-flex; align-items: center;
  padding: 0 14px 0 0;
  margin: -9px 0;
}
.star-tagline {
  margin: 0;
  font-family: "Didot", Georgia, "Times New Roman", serif;
  font-style: italic;
  font-size: 13px;
  color: rgba(242, 233, 216, 0.62);
}
.memory-section-tabs {
  display: inline-flex; gap: 4px; margin-top: 14px; padding: 3px;
  border: 1px solid rgba(242, 233, 216, .2); border-radius: 14px;
  background: rgba(47, 38, 27, .22);
  -webkit-backdrop-filter: blur(9px);
  backdrop-filter: blur(9px);
  pointer-events: auto;
}
.memory-section-tabs button {
  min-height: 34px; border: 0; border-radius: 10px; padding: 6px 14px;
  background: transparent; color: rgba(242, 233, 216, .66);
  font-family: var(--kai); font-size: 12.5px; letter-spacing: 1px;
  cursor: pointer;
}
.memory-section-tabs button.is-active {
  color: #503a2d; background: rgba(242, 233, 216, .9);
  box-shadow: 0 2px 10px rgba(30, 22, 16, .12);
}
#memoryView.archive-mode .star-head {
  display: flex; align-items: center; gap: 4px;
  padding: calc(14px + env(safe-area-inset-top)) 18px 12px;
  background: rgba(248, 242, 232, .96);
  border-bottom: 1px solid rgba(104, 80, 60, .13);
  box-shadow: 0 5px 18px rgba(70, 51, 39, .06);
}
#memoryView.archive-mode .star-head-row,
#memoryView.archive-mode .star-tagline { display: none; }
#memoryView.archive-mode .star-sub-row { margin: 0; }
#memoryView.archive-mode .memory-back { color: #6c594b; }
#memoryView.archive-mode .memory-section-tabs {
  margin-top: 0;
  border-color: rgba(104, 80, 60, .16);
  background: rgba(255, 252, 245, .66);
}
#memoryView.archive-mode .memory-section-tabs button { color: #806c5d; }
#memoryView.archive-mode .memory-section-tabs button.is-active {
  color: #fff; background: #9c6248;
}

.memory-archive-panel {
  position: absolute; inset: 0; z-index: 4;
  overflow-y: auto; overscroll-behavior: contain;
  background:
    radial-gradient(circle at 84% 8%, rgba(214, 174, 128, .18), transparent 27%),
    linear-gradient(180deg, #f8f2e8 0%, #efe5d7 100%);
  color: var(--ink);
}
.memory-archive-panel[hidden] { display: none; }
.memory-archive-body {
  width: min(820px, 100%); margin: 0 auto;
  padding: calc(82px + env(safe-area-inset-top)) 14px calc(34px + env(safe-area-inset-bottom));
  box-sizing: border-box;
}
.memory-index-book {
  display: grid; grid-template-columns: 52px minmax(0, 1fr);
  align-items: start; min-height: calc(100vh - 190px);
}
.memory-index-pages {
  grid-column: 2; grid-row: 1;
  min-width: 0; border: 1px solid rgba(102, 77, 57, .18);
  border-radius: 0 16px 16px 16px;
  background: #fffaf3;
  box-shadow: 0 16px 38px rgba(74, 52, 35, .11);
}
.memory-index-page {
  min-height: calc(100vh - 224px);
  padding: 24px 24px 28px; box-sizing: border-box;
  color: #40352e;
}
.memory-index-page[hidden] { display: none; }
.memory-index-tabs {
  grid-column: 1; grid-row: 1;
  position: sticky; top: calc(82px + env(safe-area-inset-top));
  display: flex; flex-direction: column; gap: 8px;
  align-items: flex-end; padding-top: 8px; z-index: 1;
}
.memory-index-tab {
  min-height: 68px; width: 52px; border: 1px solid rgba(83, 65, 54, .13);
  border-right: 0; border-radius: 12px 0 0 12px;
  background: rgba(255, 252, 246, .9);
  color: #594d45; font-family: var(--kai); font-size: 14px;
  line-height: 1.15; letter-spacing: 2px; writing-mode: vertical-rl;
  cursor: pointer; opacity: .76; transform: translateX(0);
  box-shadow: 4px 5px 12px rgba(70, 51, 39, .06);
  transition: opacity .18s, transform .18s, box-shadow .18s;
}
.memory-index-tab.is-active {
  opacity: 1; transform: translateX(-3px);
  border-color: var(--header-ink, #9c6248);
  background: var(--header-ink, #9c6248); color: #fff;
  box-shadow: 5px 7px 16px rgba(70, 51, 39, .13);
}

.memory-index-page .iv5-tools {
  margin-top: 14px; padding-top: 12px;
  border-color: rgba(85, 65, 50, .18);
}
.memory-index-page .iv5-tools summary {
  color: #50433a; font-size: 16px; line-height: 1.6;
}
.memory-index-page .iv5-meta {
  color: #5f5249; font-size: 15px; line-height: 1.75;
}
.memory-index-page .iv5-empty {
  color: #74665c; font-size: 16px; line-height: 1.72;
}
.memory-index-page .iv5-text {
  color: #3f352e; font-size: 16px; line-height: 1.78;
}
.memory-index-page .iv5-count {
  color: #796b61; font-size: 14px; line-height: 1.65;
}
.memory-index-page .iv5-btn {
  min-height: 38px; padding: 7px 14px;
  font-size: 15px; line-height: 1.4;
}
.memory-index-page .iv5-input,
.memory-index-page .iv5-select {
  min-height: 42px; padding: 9px 11px;
  border-color: rgba(85, 65, 50, .24);
  color: #3f352e; font-size: 16px;
}
.memory-archive-kicker {
  display: block; color: #8f5f47; font-family: var(--mono);
  font-size: 11px; letter-spacing: 2.8px; margin-bottom: 7px;
}
.memory-index-page h2 {
  margin: 0 0 10px; color: #372e29; font-family: var(--kai);
  font-size: 24px; font-weight: 600; letter-spacing: 1.5px;
}
.memory-archive-intro {
  margin: 0 0 18px; color: #685a50; font-size: 16px; line-height: 1.78;
}
.memory-index-page .iv5-recall { margin-top: 14px; border-bottom: 0; padding-bottom: 0; }
.archive-plan {
  margin-top: 14px; border: 1px solid rgba(93, 70, 52, .17);
  border-radius: 12px; background: #fffdf9; overflow: hidden;
}
.archive-plan > summary {
  display: flex; flex-direction: column; gap: 4px;
  padding: 14px 16px; cursor: pointer; color: #473a32;
  font-size: 17px; line-height: 1.5; list-style-position: inside;
}
.archive-plan > summary small {
  padding-left: 18px; color: #796a60; font-size: 14px; line-height: 1.45;
}
.archive-plan[open] > summary { border-bottom: 1px solid rgba(93, 70, 52, .14); }
.archive-plan-items { display: grid; gap: 10px; padding: 12px; }
.archive-plan-row {
  position: relative; padding: 13px 13px 12px 46px;
  border: 1px solid rgba(93, 70, 52, .14); border-radius: 10px;
  background: #fff; color: #40352e;
}
.archive-plan-number {
  position: absolute; left: 12px; top: 13px;
  color: #94654b; font-family: var(--mono); font-size: 12px; font-weight: 700;
}
.archive-plan-row p {
  margin: 0 0 8px; font-size: 16px; line-height: 1.78; word-break: break-word;
}
.archive-plan-destination {
  color: #526d5e; font-size: 15px; line-height: 1.62; font-weight: 600;
}
.archive-plan-flag {
  display: inline-block; margin: 7px 6px 0 0; padding: 2px 8px;
  border-radius: 99px; background: #f3e5d9; color: #895b42;
  font-size: 13px;
}
.archive-plan-actions { padding: 0 14px 14px; }

@media (max-width: 520px) {
  .star-head { padding-left: 20px; padding-right: 20px; }
  .star-title { font-size: 36px; }
  .memory-section-tabs { margin-top: 11px; }
  #memoryView.archive-mode .memory-section-tabs { margin-top: 0; }
  .memory-archive-body {
    padding-top: calc(78px + env(safe-area-inset-top));
    padding-left: 8px; padding-right: 7px;
  }
  .memory-index-book { grid-template-columns: 45px minmax(0, 1fr); }
  .memory-index-tabs { top: calc(78px + env(safe-area-inset-top)); gap: 7px; }
  .memory-index-tab { width: 45px; min-height: 64px; font-size: 14px; }
  .memory-index-page {
    min-height: calc(100vh - 210px);
    padding: 21px 16px 26px;
  }
  .memory-index-page h2 { font-size: 23px; }
  .memory-index-page .iv5-input,
  .memory-index-page .iv5-select { flex-basis: 100%; }
  .archive-plan > summary { padding: 13px 12px; }
  .archive-plan-items { padding: 9px; }
  .archive-plan-row { padding: 12px 11px 11px; }
  .archive-plan-number {
    position: static; display: block; margin-bottom: 6px;
  }
}
/* 右侧竖排小字：这张图的三个维度 */
.star-axis {
  position: absolute; z-index: 2; pointer-events: none;
  right: 22px; top: 50%; transform: translateY(-50%);
  writing-mode: vertical-rl;
  font-family: var(--mono);
  font-size: 9px; letter-spacing: 4px;
  color: rgba(242, 233, 216, 0.38);
}
/* 底部操作提示 */
.star-hint {
  position: absolute; z-index: 2; pointer-events: none;
  left: 0; right: 0; bottom: calc(20px + env(safe-area-inset-bottom));
  text-align: center;
  font-family: var(--mono);
  font-size: 8.5px; letter-spacing: 2.5px;
  color: rgba(242, 233, 216, 0.42);
}

.memory-empty {
  position: absolute; z-index: 2; left: 0; right: 0; top: 62%;
  display: flex; flex-direction: column; align-items: center;
  text-align: center; padding: 0 40px;
  color: #f2e9d8; font-family: var(--serif);
  pointer-events: none;
}
.memory-empty[hidden] { display: none; }
.memory-empty * { pointer-events: none; }
.empty-title { font-size: 22px; margin-bottom: 12px; }
.empty-sub { font-size: 13px; color: rgba(242, 233, 216, 0.58); line-height: 1.7; }

.memory-detail {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 4;
  background: var(--panel);
  border-top: 1px solid var(--line);
  padding: 16px 20px calc(20px + env(safe-area-inset-bottom));
  max-height: 60vh; overflow-y: auto;
  font-family: var(--serif);
  transform: translateY(100%); transition: transform .25s ease;
  box-shadow: 0 -4px 20px rgba(60, 40, 20, .06);
}
.memory-detail:not([hidden]) { transform: translateY(0); }
.detail-head { display: flex; align-items: center; gap: 8px; margin-bottom: 12px; }
.detail-kind {
  font-size: 11px; color: var(--muted);
  border: 1px solid var(--line); border-radius: 8px; padding: 1px 8px;
}
.detail-name { font-size: 18px; flex: 1; color: var(--ink); }
.detail-close {
  border: none; background: none; color: var(--muted); font-size: 18px; cursor: pointer;
  padding: 4px 8px;
}
.detail-profile {
  font-size: 14px; color: var(--ink); line-height: 1.7;
  padding: 12px 14px; margin-bottom: 14px;
  background: var(--bg); border: 1px solid var(--line); border-radius: 12px;
  white-space: pre-wrap;
}
.detail-profile[hidden] { display: none; }
.detail-profile-empty { color: var(--muted); font-style: italic; }
.detail-frag-section-title {
  font-size: 12px; color: var(--muted); margin-bottom: 8px;
  letter-spacing: .3px;
}
.detail-fragments { display: flex; flex-direction: column; gap: 12px; }
.detail-frag {
  font-size: 14px; color: var(--ink); line-height: 1.55;
  padding-bottom: 12px; border-bottom: 1px dashed var(--line);
}
.detail-frag:last-child { border-bottom: none; }
.detail-frag-meta {
  font-size: 11px; color: var(--muted); margin-top: 4px; letter-spacing: .3px;
}

/* —— 底部导航：线条图标，爱心居中悬浮 —— */
/* —— 底部导航：毛玻璃浮岛（iOS 快捷指令那味），选中底片由 app.js 滑动 —— */
.bottom-nav {
  position: absolute; z-index: 5;
  left: 50%; transform: translateX(-50%);
  bottom: calc(14px + env(safe-area-inset-bottom));
  width: min(calc(100% - 32px), 400px);
  display: flex;
  padding: 5px;
  border-radius: 999px;
  /* 假玻璃（2026-07-21）：blur 采样内部滚动器内容在 iOS 上不带滚动偏移，
     不管玻璃在滚动器里还是盖在上面都错位——整站对着滚动内容的 blur 全禁 */
  background: rgba(252, 249, 243, .84);
  border: 1px solid rgba(255, 255, 255, .65);
  box-shadow: 0 8px 28px rgba(60, 40, 20, .13), 0 1px 3px rgba(60, 40, 20, .05);
}
.bottom-nav[hidden] { display: none; }
/* 选中格底片：一整片暖棕，切换时整体滑过去 */
.nav-pill {
  position: absolute; top: 5px; bottom: 5px; left: 0;
  width: 0; border-radius: 999px;
  background: rgba(141, 103, 72, .1);
  transition: transform .34s cubic-bezier(.3, 1.3, .4, 1), width .34s cubic-bezier(.3, 1.3, .4, 1);
  will-change: transform;
}
.nav-btn {
  flex: 1; border: none; background: none;
  position: relative; z-index: 1;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 3px; padding: 7px 0 6px;
  color: #b7a996;
  cursor: pointer;
  font: inherit;
  touch-action: manipulation;
  transition: color .25s;
}
.nav-btn.active { color: var(--name); }
.nav-btn:disabled { opacity: .4; cursor: not-allowed; }
.nav-btn:active .nav-icon { transform: scale(.9); }
.nav-icon { display: inline-flex; transition: transform .12s; }
.nav-icon svg { width: 21px; height: 21px; }
.nav-label { font-size: 10px; font-family: var(--kai); letter-spacing: 1.5px; }
/* 中间的爱心：收进岛里跟大家一排，只比别人大一号，粉色只留给它 */
.nav-heart .nav-icon svg {
  width: 25px; height: 25px;
  color: var(--name);
  fill: rgba(217, 143, 135, .28);
  transition: fill .25s;
}
.nav-heart.active .nav-icon svg {
  color: var(--accent);
  fill: rgba(217, 143, 135, .5);
}

/* —— 工具页 / 设置页：跟首页一个纸面气质 —— */
.page-scroll {
  height: 100%; overflow-y: auto;
  padding:
    calc(28px + env(safe-area-inset-top))
    max(22px, calc((100% - 500px) / 2))
    calc(104px + env(safe-area-inset-bottom));
}
/* 页标题（2026-07-18 改引导行排法：英文带页码上移成小引导行，中文大字在下收拢字距。
   页码跟票根 NO.001 / 小票 NO.01 一个语言：整个 app 是一套票据编目 */
.page-title {
  font-family: var(--kai); font-size: 28px; color: var(--ink);
  letter-spacing: 4px; margin-bottom: 26px;
}
.page-en {
  display: block;
  font-family: var(--mono);
  font-size: 10px; letter-spacing: 3px; color: var(--muted);
  margin: 0 0 7px 2px;
}

/* ── 工具页票根（2026-07-18 三稿：形状整个交给 ticket-shape.svg，G 老师出图泽拍板）──
   二稿手搓圆片：齿口大小不一还跟圆角打架，狗啃。三稿单张 SVG 当 mask 裁形，
   齿口/圆角切/冲孔线全画在 assets/ticket-shape.svg 里（840x320，冲孔线 x=600 即 5:2 分界）。
   外壳 .tool-card 只负责阴影：mask 会把普通 box-shadow 一起裁掉，
   所以用 filter: drop-shadow，投影自动沿裁完的轮廓走。
   ⚠️ 不要再叠加 border-radius、clip-path、radial-gradient 或伪元素制作齿口。 */
/* 深底两页共用：泽嫌 #665640 跟票纸对比过强，提亮到 #7d6e58（2026-07-18） */
#toolsView, #settingsView { --ticket-bed: #7d6e58; background: var(--ticket-bed); }
/* 字色出口 = 变量：无壁纸/原装时走 fallback 出厂色，换壁纸时 JS 写入动态取的强调色。
   300ms 过渡是 G 老师点名要的，换壁纸字色不闪变 */
#toolsView .page-title, #settingsView .page-title {
  color: var(--header-ink, #f2e9d8);
  text-shadow: var(--header-shadow, none);
  transition: color 300ms ease, text-shadow 300ms ease;
}
#toolsView .page-en, #settingsView .page-en {
  color: var(--header-en, rgba(242, 233, 216, .62));
  transition: color 300ms ease, text-shadow 300ms ease;
  text-shadow: var(--header-shadow, none);
}
/* 设置页长票别被底部导航吃掉尾巴 */
#settingsView .page-scroll { padding-bottom: calc(132px + env(safe-area-inset-bottom)); }
.tool-grid { display: grid; grid-template-columns: 1fr; gap: 22px; }
/* 外层只负责阴影 */
.tool-card {
  padding: 0; border: none; background: none; text-align: left;
  font-family: var(--kai); color: var(--ink); cursor: pointer;
  /* 双层影（2026-07-20 泽要更立体）：近层贴底锐影定轮廓，远层大漫射给浮起感 */
  filter: drop-shadow(0 3px 5px rgba(38, 30, 21, .3)) drop-shadow(0 18px 28px rgba(38, 30, 21, .34));
}
.ticket {
  width: 100%;
  aspect-ratio: 21 / 8;
  background: #fffdf8;

  -webkit-mask:
    url("assets/ticket-shape.svg")
    center / 100% 100% no-repeat;
  mask:
    url("assets/ticket-shape.svg")
    center / 100% 100% no-repeat;

  display: grid;
  grid-template-columns: 5fr 2fr;
}
/* 左主券 */
.ticket-main {
  display: flex; flex-direction: column; justify-content: center; gap: 6px;
  padding: 20px 14px 18px 26px; min-width: 0;
}
.ticket-title { display: flex; align-items: center; gap: 10px; }
.tool-card b {
  font-size: 21px; font-weight: 700; letter-spacing: 3px;
  font-family: var(--serif);
}
.tool-card small { font-size: 11.5px; color: var(--muted); letter-spacing: 1.5px; }
.ticket-meta {
  margin-top: 10px; font-size: 9px; color: var(--muted);
  font-family: var(--serif); letter-spacing: 2.2px; text-transform: uppercase;
  opacity: .85; white-space: nowrap;
}
.tool-card-icon { color: var(--name); display: inline-flex; }
/* 议事厅图标换青灰，跟群聊里 GPT 的配色呼应 */
#toolGroup .tool-card-icon { color: var(--gpt); }
.tool-card-icon svg { width: 21px; height: 21px; }
/* 右副券：微黄一档的纸色 + 竖排字 + 条码（分界冲孔线在 SVG 里，正好骑在 5:2 边上） */
.ticket-stub {
  display: flex; align-items: center; justify-content: center; gap: 9px;
  background: #f7f0e2;
  padding: 12px 4px;
}
.stub-label {
  writing-mode: vertical-rl; font-size: 8.5px; letter-spacing: 3px;
  color: var(--muted); font-family: var(--serif); text-transform: uppercase;
}
/* 条码：不等宽条纹一组循环，竖着放 */
.stub-barcode {
  width: 21px; height: 78px; color: var(--ink); opacity: .6;
  background: repeating-linear-gradient(to bottom,
    currentColor 0 1.5px, rgba(0,0,0,0) 1.5px 3px,
    currentColor 3px 3.8px, rgba(0,0,0,0) 3.8px 6.6px,
    currentColor 6.6px 8.8px, rgba(0,0,0,0) 8.8px 9.8px,
    currentColor 9.8px 10.6px, rgba(0,0,0,0) 10.6px 13.4px,
    currentColor 13.4px 15.2px, rgba(0,0,0,0) 15.2px 17px);
}
.tool-card-soon { opacity: .45; cursor: default; }

/* ── 设置页小票（2026-07-18：泽拍板"工具页=入场券，设置页=收据"，一张长票 + 可折叠条目）──
   撕边不能学票根整张 SVG mask：票高随内容/折叠变，mask 拉 100% 会把齿拉变形，
   拆多层 mask 又是一稿 iOS 翻车的老路。所以齿条 SVG 当普通背景图 repeat-x
   （纸色实齿、齿口透深底），中段普通纸色 div，外壳 drop-shadow 沿齿投影，全是标准渲染路径。
   折叠区 = 票面一个 line item，收起时右侧打当前通道名；以后加功能就往下加 NO.02… */
/* 阴影拆下来：details 展开时整张票会撑到几千 px，若整体挂 filter drop-shadow，
   浏览器要把整票合成到 GPU 纹理再画投影，纹理接近上限就断层/糊/裁边（iOS 尤明显）。
   改成：中段 paper 是矩形，走标准 box-shadow（沿边直接画，无合成层压力）；
   齿边两条 8px 窄条各自 drop-shadow，补齿口凹凸投影。 */
.receipt {
  width: min(100%, 400px); margin: 0 auto;
  isolation: isolate; /* 独立层叠上下文，避免与 wall / nav 合成打架 */
}
.receipt-edge {
  position: relative; z-index: 1;
  height: 8px; background: url("assets/receipt-edge.svg") left bottom / 16px 8px repeat-x;
  /* 上齿不投影：光源在上，向上的 drop-shadow 会把齿影甩进相邻透明三角里糊在壁纸上 */
}
.receipt-edge-btm {
  transform: scaleY(-1);
  /* filter 先画后翻转：这里写 -y，翻转后投影朝下、投向票外 */
  filter: drop-shadow(0 -2px 3px rgba(38, 30, 21, .22)) drop-shadow(0 -5px 8px rgba(38, 30, 21, .12));
}
.receipt-paper {
  position: relative; z-index: 0;
  background: #fffdf8; color: var(--ink);
  padding: 24px 20px 20px;
  font-family: var(--mono);
  box-shadow: 0 3px 5px rgba(38, 30, 21, .3), 0 18px 28px rgba(38, 30, 21, .34);
}
.receipt-store {
  text-align: center; font-size: 24px; font-weight: 700;
  letter-spacing: 7px; line-height: 1.4; margin-bottom: 12px;
}
.receipt-meta {
  display: flex; flex-direction: column; align-items: center; gap: 3px;
  font-size: 10px; letter-spacing: 1.8px; color: #6e5f4e;
}
.receipt-meta i { font-style: normal; }
.receipt-rule { border-top: 3px double var(--ink); margin: 14px 0; opacity: .75; }

/* 折叠条目行：小票上的一个 line item，点开才是明细 */
.receipt-sec summary {
  display: flex; align-items: baseline; gap: 8px;
  font-size: 13px; font-weight: 700; letter-spacing: 1px;
  cursor: pointer; list-style: none; padding: 2px 0;
}
.receipt-sec summary::-webkit-details-marker { display: none; }
.sec-no { font-size: 11px; color: #6e5f4e; flex-shrink: 0; }
.sec-name { flex-shrink: 0; white-space: nowrap; } /* 防止中文名被挤成竖排 */
.sec-dots { flex: 1; min-width: 20px; border-bottom: 2px dotted rgba(58, 48, 38, .35); transform: translateY(-3px); }
.sec-val { font-size: 12px; letter-spacing: 2px; max-width: 55%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sec-arrow { font-size: 10px; align-self: center; transition: transform .2s; }
.receipt-sec[open] .sec-arrow { transform: rotate(180deg); }
.sec-body { padding-top: 10px; }

.receipt-subhead {
  margin-top: 18px; padding-top: 12px;
  border-top: 1px dashed rgba(58, 48, 38, .3);
  font-size: 11px; font-weight: 700; letter-spacing: 2px;
}
.settings-sub {
  font-size: 10.5px; color: #8a7a66; letter-spacing: .5px;
  line-height: 1.6; margin: 4px 0 8px;
}

/* 通道条目：01/02/03 编号行，选中行盖反白 ACTIVE 章，没选的淡下去 */
.channel-opt {
  position: relative;
  display: flex; align-items: flex-start; gap: 9px;
  padding: 10px 0; border-top: 1px dashed rgba(58, 48, 38, .22);
  cursor: pointer;
}
.channel-opt input { position: absolute; opacity: 0; pointer-events: none; }
.opt-no { font-size: 11px; color: #6e5f4e; padding-top: 2px; }
.channel-text { flex: 1; display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.channel-text b { font-size: 13.5px; font-weight: 700; letter-spacing: 1px; }
.channel-text small { font-size: 10.5px; color: #8a7a66; letter-spacing: .4px; line-height: 1.5; }
.opt-badge { align-self: center; }
.opt-badge::after { content: "—"; font-size: 10px; letter-spacing: 1px; color: #b3a48f; }
.channel-opt input:checked ~ .opt-badge::after {
  content: "ACTIVE";
  background: var(--ink); color: #fffdf8;
  padding: 2px 5px; font-weight: 700;
}
.channel-opt input:not(:checked) ~ .channel-text { opacity: .62; }
.channel-opt input:disabled ~ .channel-text,
.channel-opt input:disabled ~ .opt-no,
.channel-opt input:disabled ~ .opt-badge { opacity: .3; }

/* 输入位：小票上的手写补笔，虚线空行 */
.ext-field { display: flex; flex-direction: column; gap: 4px; padding: 9px 0; }
.ext-field label { font-size: 11.5px; font-weight: 700; letter-spacing: 1.2px; color: var(--ink); }
.ext-field input, .ext-field select {
  font-size: 13px; font-family: var(--mono);
  padding: 6px 2px; width: 100%; box-sizing: border-box;
  border: none; border-bottom: 1px dashed rgba(58, 48, 38, .4); border-radius: 0;
  background: transparent; color: var(--ink); outline: none;
}
.ext-field input:focus, .ext-field select:focus { border-bottom-color: var(--accent); border-bottom-style: solid; }
.ext-refresh {
  float: right; font-size: 10.5px; font-weight: 400; color: var(--accent);
  text-decoration: none; letter-spacing: 1px;
}
.ext-field small { font-size: 10px; color: #8a7a66; letter-spacing: .4px; line-height: 1.5; }
.ext-check {
  display: flex; align-items: flex-start; gap: 9px;
  padding: 10px 0; cursor: pointer;
}
.ext-check input { margin-top: 2px; accent-color: var(--ink); }
.ext-save {
  width: 100%; margin-top: 10px; padding: 11px;
  font-family: var(--mono); font-size: 13px; font-weight: 700; letter-spacing: 3px;
  color: var(--ink); background: transparent;
  border: 1.5px solid var(--ink); border-radius: 0; cursor: pointer;
}
.ext-save:active { background: var(--ink); color: #fffdf8; }

/* NO.03 壁纸条目：控件全按小票风走（mono 字、虚线格、墨色选中态） */
.wall-tabs { display: flex; gap: 6px; margin: 4px 0 12px; }
.wall-tab {
  flex: 1; padding: 6px 0;
  font-family: var(--mono); font-size: 11px; letter-spacing: 2px;
  background: transparent; color: var(--ink);
  border: 1px dashed rgba(58, 48, 38, .4); border-radius: 0; cursor: pointer;
}
.wall-tab.active { background: var(--ink); color: #fffdf8; border-style: solid; }
/* 色卡按手机竖屏比例出（G老师拍板：预览别做 320×180 横屏） */
/* minmax(0,1fr)：格子里的长文件名会把 1fr 列撑变形（grid 的 min-width:auto 坑），锁死等宽 */
.wall-swatches { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; margin-bottom: 12px; }
.wall-swatch { display: flex; flex-direction: column; align-items: center; gap: 4px; background: none; border: none; padding: 0; cursor: pointer; min-width: 0; }
.wall-swatch i { display: block; width: 100%; aspect-ratio: 9 / 16; border: 1px solid rgba(58, 48, 38, .25); }
.wall-swatch.active i { outline: 2px solid var(--ink); outline-offset: 1px; }
.wall-swatch span {
  font-family: var(--mono); font-size: 9.5px; letter-spacing: 1px; color: #6e5f4e;
  max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.wall-slider { display: flex; align-items: center; gap: 8px; padding: 8px 0; border-top: 1px dashed rgba(58, 48, 38, .22); }
.wall-slider label { font-size: 10.5px; font-weight: 700; letter-spacing: 1.5px; flex: none; width: 78px; }
.wall-slider input[type="range"] { flex: 1; accent-color: var(--ink); min-width: 0; }
.wall-slider-val { font-family: var(--mono); font-size: 10px; width: 42px; text-align: right; color: #6e5f4e; }
/* 位置策略 / 字色：一行小按钮，同 tab 风格但更矮 */
.wall-opt-row { display: flex; align-items: center; gap: 5px; padding: 8px 0; border-top: 1px dashed rgba(58, 48, 38, .22); }
.wall-opt-row > label { font-size: 10.5px; font-weight: 700; letter-spacing: 1.5px; flex: none; width: 78px; }
.wall-mini-btn {
  flex: 1; padding: 5px 0;
  font-family: var(--mono); font-size: 10px; letter-spacing: 1px;
  background: transparent; color: var(--ink);
  border: 1px dashed rgba(58, 48, 38, .35); border-radius: 0; cursor: pointer;
  white-space: nowrap;
}
.wall-mini-btn.active { background: var(--ink); color: #fffdf8; border-style: solid; }
/* 用户图色卡：缩略图当底 + 右上删除钮 */
.wall-swatch { position: relative; }
.wall-swatch i { background-size: cover; background-position: center; }
.wall-del {
  position: absolute; top: -6px; right: -6px; z-index: 2;
  width: 18px; height: 18px; line-height: 16px; text-align: center;
  font-size: 12px; font-family: var(--mono);
  background: var(--ink); color: #fffdf8; border-radius: 50%;
  cursor: pointer;
}
/* 上传行 + 状态 */
.wall-upload-row { display: flex; gap: 6px; padding: 9px 0 2px; }
.wall-upload-row .wall-mini-btn { flex: 1; padding: 8px 0; font-size: 11px; letter-spacing: 2px; }
.wall-url-row { display: flex; gap: 6px; align-items: center; padding: 6px 0; }
.wall-url-row input {
  flex: 1; min-width: 0; font-size: 12px; font-family: var(--mono);
  padding: 5px 2px; border: none; border-bottom: 1px dashed rgba(58, 48, 38, .4);
  border-radius: 0; background: transparent; color: var(--ink); outline: none;
}
.wall-url-row input:focus { border-bottom-color: var(--accent); border-bottom-style: solid; }
.wall-url-row .wall-mini-btn { flex: none; padding: 5px 12px; }
.wall-status { font-family: var(--mono); font-size: 10px; color: #8a7a66; letter-spacing: .5px; min-height: 14px; padding: 2px 0; }
.wall-status.err { color: var(--faded-red); }
/* 预设行：小票 line item 风 */
.wall-preset-row {
  display: flex; align-items: center; gap: 8px;
  padding: 8px 0; border-top: 1px dashed rgba(58, 48, 38, .22);
}
.wall-preset-name { flex: 1; font-size: 12px; font-weight: 700; letter-spacing: 1px; cursor: pointer; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wall-preset-act {
  flex: none; font-family: var(--mono); font-size: 10px; letter-spacing: 1px;
  background: none; border: none; color: #6e5f4e; cursor: pointer; padding: 2px 4px;
}
.wall-preset-act:active { color: var(--ink); }
/* 自选位置裁切器：absolute 挂 body（全屏层老规矩不用 fixed），框外压暗、框内亮出取景区 */
.wall-pos-overlay {
  position: absolute; inset: 0; z-index: 200;
  background: rgba(20, 15, 8, .88);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 18px;
  touch-action: none;
}
.wall-pos-overlay[hidden] { display: none; }
.wall-pos-tip { font-family: var(--mono); font-size: 11px; letter-spacing: 2px; color: rgba(251, 247, 238, .75); }
.wall-pos-frame {
  position: relative; overflow: hidden;
  outline: 1px solid rgba(251, 247, 238, .8);
  cursor: grab; touch-action: none;
}
.wall-pos-frame img {
  position: absolute; left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  max-width: none; user-select: none; -webkit-user-drag: none; pointer-events: none;
}
.wall-pos-actions { display: flex; gap: 10px; width: min(72%, 300px); }
.wall-pos-actions .wall-mini-btn { padding: 9px 0; font-size: 12px; letter-spacing: 2px; color: #fbf7ee; border-color: rgba(251, 247, 238, .5); }
#wallPosOk { background: #fbf7ee; color: #2b241d; border-style: solid; }

/* 出生说明书：每份文件一张可折叠的小票条目，徽章配色沿用票面墨色系 */
.prompt-file { border-top: 1px dashed rgba(58, 48, 38, .22); padding: 4px 0; }
.prompt-file summary {
  display: flex; align-items: center; gap: 8px;
  padding: 8px 0; cursor: pointer; list-style: none;
}
.prompt-file summary::-webkit-details-marker { display: none; }
.prompt-label { font-size: 12px; font-weight: 700; letter-spacing: 1px; color: var(--ink); flex: 1; }
.prompt-badge {
  font-size: 10px; letter-spacing: 1px; padding: 2px 8px;
  border: 1px solid currentColor; border-radius: 999px; white-space: nowrap;
}
.prompt-badge.is-live { color: #4a7a4e; }
.prompt-badge.is-pending { color: #b06a2a; }
.prompt-note { font-size: 10px; color: #8a7a66; letter-spacing: .4px; margin-bottom: 6px; }
.prompt-editor {
  width: 100%; box-sizing: border-box; min-height: 200px; resize: vertical;
  font-family: var(--mono); font-size: 12px; line-height: 1.6;
  color: var(--ink); background: rgba(58, 48, 38, .04);
  border: 1px dashed rgba(58, 48, 38, .4); border-radius: 0;
  padding: 8px; outline: none;
}
.prompt-editor:focus { border-color: var(--accent); border-style: solid; }
.prompt-save { margin-top: 8px; }
.prompt-msg { min-height: 14px; }

/* 票尾：TOTAL: FOREVER 是彩蛋，按钮老实当按钮 */
.receipt-total { display: flex; align-items: baseline; gap: 8px; font-size: 13px; letter-spacing: 2px; font-weight: 700; }
.receipt-thanks { text-align: center; font-size: 10.5px; letter-spacing: 2.5px; margin-top: 14px; color: #6e5f4e; }
.receipt-barcode {
  height: 32px; width: 58%; margin: 10px auto 5px; color: var(--ink); opacity: .72;
  background: repeating-linear-gradient(to right,
    currentColor 0 1.5px, rgba(0,0,0,0) 1.5px 3px,
    currentColor 3px 3.8px, rgba(0,0,0,0) 3.8px 6.6px,
    currentColor 6.6px 8.8px, rgba(0,0,0,0) 8.8px 9.8px,
    currentColor 9.8px 10.6px, rgba(0,0,0,0) 10.6px 13.4px,
    currentColor 13.4px 15.2px, rgba(0,0,0,0) 15.2px 17px);
}
.receipt-serial { text-align: center; font-size: 9.5px; letter-spacing: 2px; color: #8a7a66; }

/* 聊天里的通道切换提示：跟时间戳一样的居中小字 */
.chan-note {
  align-self: center; text-align: center;
  font-family: var(--kai); font-size: 11px; color: var(--muted);
  letter-spacing: 1px; margin: 10px 0; opacity: .8;
}

/* —— 通话界面：全屏纸面，像一通真的电话 —— */
.call-overlay {
  position: absolute; inset: 0; z-index: 60;
  background: var(--bg);
  display: flex; flex-direction: column; align-items: center;
  padding:
    calc(46px + env(safe-area-inset-top)) 24px
    calc(36px + env(safe-area-inset-bottom));
}
.call-overlay[hidden] { display: none; }
.call-head { text-align: center; margin-bottom: 18px; }
.call-name {
  font-family: var(--kai); font-size: 30px; color: var(--ink); letter-spacing: 8px;
}
.call-status {
  font-family: "Canela", Georgia, serif; font-size: 13px; color: var(--muted);
  letter-spacing: 2px; margin-top: 8px; min-height: 18px;
}
.call-fox {
  width: 148px; height: 148px; border-radius: 50%;
  object-fit: cover; object-position: 62% 30%;
  border: 1px solid var(--line); background: var(--panel);
  flex: none;
}
.call-transcript {
  flex: 1; width: 100%; max-width: 440px;
  overflow-y: auto; margin: 22px 0;
  display: flex; flex-direction: column; gap: 10px;
}
.call-line {
  font-family: var(--kai); font-size: 13.5px; line-height: 1.8;
  letter-spacing: .5px; max-width: 86%;
}
.call-line.me { align-self: flex-end; color: var(--muted); text-align: right; }
.call-line.fox { align-self: flex-start; color: var(--ink); }
.call-actions {
  display: flex; flex-direction: column; align-items: center; gap: 16px;
  width: 100%;
}
.call-talk {
  width: 108px; height: 108px; border-radius: 50%;
  border: 1px solid var(--line); background: var(--panel);
  font-family: var(--kai); font-size: 14px; color: var(--ink); letter-spacing: 2px;
  cursor: pointer;
  touch-action: none; user-select: none; -webkit-user-select: none;
  transition: transform .12s, background .12s;
}
.call-talk.talking {
  background: var(--accent-soft); border-color: var(--accent);
  transform: scale(1.06);
}
.call-hangup {
  width: 46px; height: 46px; border-radius: 50%;
  border: none; background: #c0564a; color: #fff;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
}
.call-hangup svg { width: 18px; height: 18px; }