/* Remember 组件库。规范见 docs/设计规范/通用.md。最后加载：聊天输入行、图标按钮、AI 胶囊、语音卡的样式只在这里定义，
   前面 app.css / theme.css 里零散的同类规则以这里为准。要改外观先改规范，再改这里。 */

/* 令牌（颜色、字号、间距、圆角、高度、动效）全部在 theme.css 的 :root，这里只放组件。 */

/* ---------- 图标 ---------- */
.ic { display: inline-flex; align-items: center; justify-content: center; flex: none; line-height: 0; }
.ic-svg { display: block; }

/* ---------- 图标按钮 ---------- */
.ui-ibtn { width: var(--h-md); height: var(--h-md);   /* PC 38；手机见下面的媒体查询 44 */ padding: 0; flex: none; display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid var(--rule); border-radius: var(--r-md); background: var(--sheet); color: var(--pencil); cursor: pointer;
  transition: background-color var(--t-fast) var(--ease), color var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease), transform var(--t-fast) var(--ease), box-shadow var(--t-base) var(--ease); }
.ui-ibtn:hover { color: var(--ink); border-color: var(--rule-strong); background: var(--hover); }
.ui-ibtn:active { transform: scale(.94); }
.ui-ibtn.is-on { color: var(--blue); border-color: rgba(43,89,255,.35); background: var(--blue-soft); }
.ui-ibtn.is-rec { color: #fff; background: var(--danger); border-color: var(--danger); animation: uiRec 1.2s ease-in-out infinite; }
.ui-ibtn:disabled, .ui-ibtn.is-busy { opacity: .5; cursor: default; }
@keyframes uiRec { 0%, 100% { box-shadow: 0 0 0 0 rgba(229,72,77,.4); } 50% { box-shadow: 0 0 0 7px rgba(229,72,77,0); } }

/* ---------- 聊天输入行：[附件] [输入框 / 按住说话] [语音↔键盘] [发送]，同高、底边对齐 ---------- */
.chat-in { display: flex; align-items: flex-end; gap: var(--sp-2); padding: var(--sp-3) var(--sp-4) var(--sp-4); border-top: 1px solid var(--rule); }
.chat-in > .btn.ic { width: var(--h-lg); height: var(--h-lg); padding: 0; border-radius: var(--r-md); }
.chat-in textarea { flex: 1; min-width: 0; height: var(--h-lg); min-height: var(--h-lg); max-height: 196px; padding: 10px 14px; line-height: 24px; border-radius: var(--r-md); }
.chat-in textarea::placeholder { font-size: var(--fs-md); color: var(--pencil); opacity: 1; }
.chat-in .btn.primary { height: var(--h-lg); padding: 0 var(--sp-5); border-radius: var(--r-md); }
.chat-in #stopBtn { height: var(--h-lg); border-radius: var(--r-md); }

/* 按住说话条：替代输入框的位置，同高 */
.chat-in .hold-btn { flex: 1; min-width: 0; height: var(--h-lg); border: 0; border-radius: var(--r-md);
  background: var(--blue-soft); color: var(--blue); font-size: var(--fs-md); font-weight: 600; letter-spacing: .02em; cursor: pointer;
  display: none; align-items: center; justify-content: center; gap: var(--sp-2);
  touch-action: none; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; -webkit-tap-highlight-color: transparent;
  transition: background-color var(--t-fast) var(--ease), transform var(--t-fast) var(--ease), color var(--t-fast) var(--ease); }
.chat-in.voice-mode .hold-btn { display: flex; }
.chat-in.voice-mode textarea { display: none; }
.chat-in .hold-btn.is-down { background: var(--blue); color: #fff; transform: scale(.985); }

/* 电脑端：输入框在上，下面一排 [附件] [语音] ……[发送]，和现在的版式一致，只统一尺寸与图标 */
body:not(.mobile) .chat-in { display: grid; grid-template-columns: auto auto 1fr auto; grid-template-areas: "text text text text" "img mic . send"; gap: var(--sp-2); }
body:not(.mobile) .chat-in #cin { grid-area: text; height: auto; min-height: 72px; }
body:not(.mobile) .chat-in .btn.primary { height: var(--h-md); }

/* ---------- 悬浮 AI 胶囊（手机首页右下） ---------- */
@media (max-width: 760px) {
  .chat-in { padding: var(--sp-2) var(--sp-3) calc(var(--sp-2) + var(--safe-b, 0px)); gap: var(--sp-2); align-items: flex-end; }
  .chat-in textarea { font-size: 16px; }   /* iOS 聚焦低于 16px 会放大页面 */
  .chat-in .btn.primary { padding: 0 var(--sp-4); }
}

/* ---------- 语音卡：波形是 canvas，随声音起伏 ---------- */
.voice-card { border-radius: var(--r-lg); }
.voice-wave { display: block; width: 100%; height: 56px; margin: var(--sp-2) 0 0; }
.mic-wave { display: block; width: 160px; height: 28px; }
.voice-bars { display: none !important; }              /* 旧的固定柱子已被 wave.js 取代 */
.voice-msg { margin: 28px 0 8px; }
.voice-hint { display: flex; align-items: center; justify-content: center; gap: 6px; color: var(--pencil); font-size: var(--fs-sm); margin-top: 6px; }
.voice.cancel .voice-hint { color: var(--danger); }

@media (prefers-reduced-motion: reduce) { .ui-ibtn.is-rec { animation: none; } }

/* ---------- T39 第一批：按钮、搜索框、浮层圆角统一 ----------
   最后加载，前面 app.css / theme.css 里零散的同类规则以这里为准（规范草稿见交接文档，供设计组归纳）。 */
/* 按钮：.btn / .small-btn 32 高、圆角 8、字号 13；手机上触控区 44（只加大点击区，外观不变）。
   例外：聊天输入行里的 .btn 有自己的尺寸（上面），会员页里 .small-btn 另有手机规则。 */
.btn, .small-btn, .btn.small-btn { box-sizing: border-box; min-height: var(--h-sm); height: auto; padding: 0 var(--sp-3); border-radius: var(--r-sm); font-size: var(--fs-sm);
  display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-1); line-height: 1.2; }
.chat-in .btn.primary, .chat-in #stopBtn { font-size: var(--fs-md); }
@media (max-width: 760px) { .btn, .small-btn, .btn.small-btn { min-height: var(--h-lg); } .chat-in .btn.primary { min-height: 0; } }
/* 图标按钮统一用 .ui-ibtn；老的 .btn.ic 在聊天输入行里已经由上面接管，其余地方不再新增 */

/* 搜索框只有一种：高 38、圆角 12、字号 15；手机上高 44、字号 17。顶栏全局搜索、笔记/人物/地点列表里的搜索都是它 */
.gsearch, input[type=search], .side-ctx > input[type=search], .side-ctx .pp-head input {
  box-sizing: border-box; height: var(--h-md); padding: 0 var(--sp-3); border-radius: var(--r-md); font-size: var(--fs-md); line-height: 1.2; }
.gs-slot .gsearch, body.searching .gsearch { height: var(--h-md); }
body.searching .gs-slot { height: var(--h-md); }
.gsearch { padding: 0 var(--sp-4); }
@media (max-width: 760px) {
  .gsearch, input[type=search], .side-ctx > input[type=search], .side-ctx .pp-head input { height: var(--h-lg); font-size: var(--fs-lg); }
}

/* 浮层圆角三档：菜单/气泡/提示条 14，对话框 16，底部面板和大卡片 18 */
.gb-menu, .at-pop, #pop, .pop, .popover { border-radius: var(--r-pop); }
.toast { border-radius: var(--r-md); }   /* 规范 H5：圆角 12（--r-md），Mac 已落地 */
.jump, .pic-dlg, .lang-dlg { border-radius: var(--r-dialog); }
.tour-card, .voice-card, .m-sheet { border-radius: var(--r-sheet); }
.m-top-sheet { border-radius: 0 0 var(--r-sheet) var(--r-sheet); }
@media (max-width: 760px) { .pop { border-radius: var(--r-sheet) var(--r-sheet) 0 0; } }   /* 手机上人物气泡是从底部升起的面板 */

/* ---------- 小图标按钮：关闭、翻页、收起 ---------- 以前用 × ‹ › 字符，现在统一用标准图标，尺寸和点击区一致 */
.cal-nav button, .pop .x, .dr-x, .pic-close, .blk .bx, .pic-x {
  display: inline-flex; align-items: center; justify-content: center; padding: 0; line-height: 0; color: var(--pencil);
  transition: background-color var(--t-fast) var(--ease), color var(--t-fast) var(--ease), opacity var(--t-fast) var(--ease);
}
.cal-nav button { width: 26px; height: 26px; border-radius: var(--r-sm); }
.cal-nav button:hover, .pop .x:hover, .dr-x:hover { background: var(--desk); color: var(--ink); }
.pop .x, .dr-x { width: 28px; height: 28px; border-radius: var(--r-sm); font-size: 0; }
.dr-x { align-self: flex-start; }
.pic-close { width: 32px; height: 32px; border-radius: var(--r-full); font-size: 0; }
.blk .bx { width: 24px; height: 24px; border-radius: var(--r-full); font-size: 0; }
.blk .bx:hover { background: var(--desk); color: var(--ink); }
.pic-x { width: 20px; height: 20px; border-radius: var(--r-full); font-size: 0; background: var(--ink); color: #fff; }
.dr-blocks.doc > .blk:has(> img.pv) .bx { width: 24px; height: 24px; line-height: 0; color: #fff; }
@media (max-width: 760px) {
  .cal-nav button, .pop .x, .dr-x { width: 44px; height: 44px; }   /* 手机上点击区 ≥44 */
}

@media (max-width: 760px) { .ui-ibtn { width: var(--h-lg); height: var(--h-lg); } }   /* 手机上点击区 ≥44 */

/* ---------- 手机上事项前的勾选框：点击区至少 44（苹果 44pt、安卓 48dp）；看起来的大小不变 ----------
   前面 app.css 手机块里写过 22px 圆 + 外扩 12px，但后加载的 theme.css 又把 .ln .ck 改回 16 / 13px，那一条没生效。
   这里最后加载，把可见的圆（主事项 20、详情 16）和透明的点击区（外扩到 ≥ 44）一起定死。 */
@media (max-width: 760px) {
  .ln .ck, .ln.sub .ck { position: relative; touch-action: manipulation; -webkit-tap-highlight-color: transparent; }
  .ln .ck { width: 20px; height: 20px; }
  .ln.sub .ck { width: 16px; height: 16px; }
  .ln .ck::after { content: ""; position: absolute; inset: -13px; }                 /* 20 + 26 = 46 */
  .ln.sub .ck::after { content: ""; position: absolute; inset: -15px; }             /* 16 + 30 = 46 */
  .ln .k { overflow: visible; }
  /* 点击区不能靠「往外伸」：伸出去的那一块会被上下相邻的行、标签、浮动的月份条盖住（Codex 量到 40~42px）。
     所以让每一行自己 ≥ 44 高，勾选圈的点击区 44×44 完整落在自己这一行里，相邻行没有重叠。
     可见的圈大小不变（事项 20、详情 16）。详情行没有勾选圈时（透明）也一样高，保持整齐。 */
  .ln:not(.ghost) { min-height: 44px; }
  .ln .ck::after, .ln.sub .ck::after { inset: auto; top: 50%; left: 50%; width: 44px; height: 44px; transform: translate(-50%, -50%); }
  /* 勾选圈的 44px 点击区会盖住它旁边的序号，序号就点不到了——而「点一下序号 / 行的空白处 = 展开这行的操作条」是手机上唯一的入口。
     让点击区只往序号一侧让出：圈的点击区缩到「圈 + 左右各 12」，右边的序号留给展开（高度仍 44，满足触控）。 */
  .ln .ck::after { left: calc(50% - 8px); width: 36px; }              /* 圈的点击区：36 宽（圈 20 + 左右各 8）× 44 高，不压到右边的序号 */
  .ln .k .num { position: relative; z-index: 2; padding: 0 4px; }     /* 序号自己是展开操作条的点击区，盖在圈的点击区之上 */
}

/* ---------- T65：手机上三个小按钮的点击区撑到 44（外观不变）----------
   聊天面板顶上的「展开」、手机顶栏的「录音」、示例条的「清除示例」原来只有约 30 高。
   不改它们的大小和字号，只在外面加一圈透明的点击区（::after 外扩），所以版式不动。 */
@media (max-width: 760px) {
  .m-chat-head .m-expand, .m-top .rec-go, .sample-bar .btn { position: relative; }
  .m-chat-head .m-expand::after, .m-top .rec-go::after, .sample-bar .btn::after {
    content: ""; position: absolute; left: -6px; right: -6px; top: 50%; height: 44px; transform: translateY(-50%); }
  .m-top .rec-go::after { left: -4px; right: -1px; }   /* 右边紧挨「搜索」按钮（只隔 2px），点击区留出 1px，不压住它 */
  /* T76：顶栏内容区只有 43 高（44 减去 1px 下边框），「录音」按钮 30 高居中，所以它的上沿离屏幕顶 6.5。
     点击区若按"以按钮为中心 44 高"算，上沿就是 6.5 - 7 = -0.5（Codex 量到）、真浏览器里量到 -1.5，伸出屏幕顶边。
     这里不再靠居中：上沿对齐屏幕顶（按钮离顶 6.5 → top: -6.5px），高度 = 顶栏高度 44（+ 安全区），多出来的 1px 压在顶栏
     的下边框上（边框下面是页面，没有别的按钮会被盖住）。这样整块在屏幕里，也正好 44。 */
  .m-top .rec-go::after { top: -6.5px; height: calc(44px + var(--safe-t)); transform: none; }
}

/* ---------- T69 第三步：隐私与数据、注销账号确认页、账号待注销页（样稿 docs/mockups/注销账号.html，全用现有令牌）---------- */
.pv-list { display: grid; gap: 1px; background: var(--rule); border: 1px solid var(--rule); border-radius: var(--r-md); overflow: hidden; margin: var(--sp-4) 0; }
.pv-list a, .pv-list button { display: flex; align-items: center; gap: var(--sp-2); background: var(--sheet); color: var(--ink); text-decoration: none; padding: 14px var(--sp-4); font-size: var(--fs-md); min-height: var(--h-lg); }
.pv-list button { width: 100%; border: 0; text-align: left; cursor: pointer; }
.pv-list a .en-hint, .pv-list button .en-hint { margin-left: auto; text-align: right; }
.pv-list .en-t { flex: 1; min-width: 0; }
.pv-foot { margin-top: var(--sp-6); text-align: center; }
/* 最低调的一行：灰色小字，不加框；点击区撑到 44（透明）*/
.pv-delete { border: 0; background: none; color: var(--pencil); font-size: var(--fs-sm); text-decoration: underline; cursor: pointer; padding: 0 var(--sp-3); min-height: var(--h-lg); }
.pv-delete:hover { color: var(--danger); }
.dl-card { border: 1px solid var(--rule); border-radius: var(--r-md); padding: var(--sp-4); margin-bottom: var(--sp-4); background: var(--sheet); }
.dl-card h3 { margin: 0 0 var(--sp-2); font-size: var(--fs-md); }
.dl-card p { margin: 0; }
.dl-card ul { margin: 0; padding-left: 20px; }
.dl-card.warn { border-color: #F1C7C5; background: #FFF6F5; }
.dl-card.ok { border-color: #BFE3D8; background: var(--done-soft); text-align: left; }
.dl-chk { display: flex; gap: var(--sp-2); align-items: flex-start; margin: var(--sp-3) 0; cursor: pointer; }
.dl-chk input { flex: none; width: 20px; height: 20px; margin-top: 2px; }
.dl-fld { margin: var(--sp-3) 0; }
.dl-fld label { display: block; font-size: var(--fs-sm); color: var(--pencil); margin-bottom: 6px; }
.dl-fld input { width: 100%; height: var(--h-md); padding: 0 var(--sp-3); border: 1px solid var(--rule); border-radius: var(--r-md); font-size: var(--fs-md); background: var(--sheet); }
.dl-err { color: var(--danger); font-size: var(--fs-sm); margin: var(--sp-2) 0; }
.dl-acts { display: flex; gap: var(--sp-3); align-items: center; margin-top: var(--sp-4); flex-wrap: wrap; }
.btn.danger { background: var(--danger); border-color: var(--danger); color: #fff; }
.btn.danger[disabled] { opacity: .4; cursor: default; }
/* 待注销页：整页，盖住主界面；和登录页一样自己居中 */
.pd-page { position: fixed; inset: 0; z-index: 80; background: var(--desk); overflow-y: auto; display: flex; justify-content: center; }
.pd-inner { width: min(560px, 92vw); text-align: center; padding: 72px 0 40px; }
.pd-inner .brand { font-size: 22px; margin-bottom: var(--sp-5); }
.pd-lead { margin: 0; }
.pd-days { font-size: 32px; font-weight: 700; line-height: 1.25; margin: var(--sp-3) 0 var(--sp-2); overflow-wrap: anywhere; }   /* 整句大字：“15 天后删除”“今天将被删除”，各语言一整句，长语言可以折行 */
.pd-small { margin: 0 0 var(--sp-5); font-size: var(--fs-md); line-height: 1.6; }
.pd-inner > p.muted { margin: 0 0 var(--sp-5); }
.pd-undo { min-height: var(--h-lg); padding: 0 var(--sp-5); font-size: var(--fs-md); }
.pd-out { display: block; margin: var(--sp-4) auto 0; border: 0; background: none; color: var(--pencil); text-decoration: underline; cursor: pointer; font-size: var(--fs-sm); min-height: var(--h-lg); }
@media (max-width: 760px) {
  .pd-undo { width: 100%; }
  .pd-inner { padding-top: 56px; }
  .dl-fld input { height: var(--h-lg); font-size: var(--fs-lg); }
  .dl-acts .btn { width: 100%; min-height: var(--h-lg); }
}
/* 注销确认页上不要悬浮的「问 AI」胶囊盖住表单和按钮，并给底部留出空间 */
body.view-deleteacct .m-dock, body.view-deleteacct #assistToggle { display: none !important; }
body.view-deleteacct #deleteBox { padding-bottom: calc(var(--h-lg) + var(--sp-5)); }

/* 通知设置页：开关下面的说明文字单独一段，字号用令牌，不挤进开关那一行 */
.pref-note { margin: var(--sp-2) 0 var(--sp-4); font-size: var(--fs-sm); line-height: 1.6; }