/* ============================================================================
   unify.css —— 8.1 统一层（最后加载）
   前面九层样式是不同版本各自长出来的：圆角有 6/8/9/10/11/12/13/14/16/18/20/22px，
   页面大标题 24 / 28px 两套，卡片有的带投影有的不带，按钮高度七种。
   这一层只做一件事：把「同一种东西」收成同一个样子。不新增功能，不改结构。
   规矩：承文字的面一律亚光实色、1px 细线、无投影；投影只留给浮在上面的东西
   （弹窗、底部面板、提示条、浮动按钮）。
   ============================================================================ */

:root {
  --u-r-card: 16px;      /* 卡片、面板、分组列表 */
  --u-r-ctl: 12px;       /* 输入框、下拉、搜索框 */
  --u-r-in: 10px;        /* 卡片里的小块（统计格、日历格） */
  --u-r-pill: 999px;     /* 按钮、标签、分段 */
  --u-h-btn: 40px;
  --u-h-btn-s: 32px;
  --u-h-input: 44px;
  --u-title: 26px;
  --u-gap: 12px;
}

/* ---------------------------------------------------------------- 标题 */
main h1,
.page-head h1,
.tk-top h1 { font-size: var(--u-title); font-weight: 700; letter-spacing: -.01em; line-height: 1.2; }

/* 英文小标签（ANIMALS / MOVEMENT / PROVENANCE）是装饰，不承载信息 */
.trace-kicker { display: none; }

/* ---------------------------------------------------------------- 卡片 / 面板 */
.tile, .cage-tile, .tile-a,
.animal-row, .animal-tools,
.set-list, .me-stats, .jcal, .jsec, .today-skel,
.act-card, .chat-it, .chat-table {
  border-radius: var(--u-r-card);
  box-shadow: none;
}
.tile, .cage-tile, .tile-a, .animal-row, .animal-tools, .set-list, .me-stats, .jcal, .jsec {
  border: 1px solid var(--line);
  background: var(--card);
}
/* 笼位卡：顶上那道 3px 青色弧线去掉，状态靠边框颜色（待办蓝、逾期琥珀）表达 */
.cage-tile { border-top-width: 1px; border-top-color: var(--line); }
.cage-tile.due { border-color: var(--blue); }
.cage-tile.late { border-color: var(--amber); }
.tiles { gap: var(--u-gap); }

/* ---------------------------------------------------------------- 按钮 */
.btn { min-height: var(--u-h-btn); border-radius: var(--u-r-pill); }
.btn.small { min-height: var(--u-h-btn-s); padding: 0 14px; }
/* 笼位页顶部：「选择」「笼卡」「新建」三个同一种按钮，只是有无文字 */
.tk-sel, .tk-add {
  height: var(--u-h-btn); min-width: var(--u-h-btn); border-radius: var(--u-r-pill);
  border: 1px solid var(--line); background: var(--card); color: var(--ink); box-shadow: none;
}
.tk-sel { padding: 0 14px; }

/* ---------------------------------------------------------------- 输入 */
.tk-search, .animal-search { border-radius: var(--u-r-ctl); min-height: var(--u-h-input); box-shadow: none; }
main select { border-radius: var(--u-r-in); }

/* ---------------------------------------------------------------- 所有动物：筛选 */
/* 原来六个下拉竖着摞，一屏只看得到筛选。改成两列（宽屏三列），标签贴在下拉上方 */
.animal-filter-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 12px; }
.animal-filter-grid .wheel-field { display: flex; flex-direction: column; gap: 4px; min-width: 0; margin: 0; }
.animal-filter-grid .wheel-field > span { font-size: 12px; font-weight: 600; color: var(--dim); }
.animal-filter-grid select { min-height: 40px; width: 100%; }
@media (min-width: 761px) { .animal-filter-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* ---------------------------------------------------------------- 对话 */
.chat-it, .chat-you { font-size: 15px; line-height: 1.6; }
.chat-it { border: 1px solid var(--line); background: var(--card); }
.chat-it.has-card, .chat-it.thinking { border: 0; background: transparent; }
.chat-you { border-radius: var(--u-r-card) var(--u-r-card) 6px var(--u-r-card); }
.chat-chip { min-height: 32px; border-radius: var(--u-r-pill); }

/* ---------------------------------------------------------------- Snappy 在想 */
/* 外圈八角一直转，脸不转，眼睛隔一会儿眨一下。只动 transform —— 合成层上跑，
   刷新率多高就多顺（120Hz 屏就是 120 帧），不占主线程。 */
.chat-think { gap: 10px; }
.snappy-think { width: 30px; height: 30px; flex: none; overflow: visible; }
.snappy-think .st-ring, .snappy-think .st-face { fill: var(--ink); }
.snappy-think .st-tip { fill: var(--accent); }
.snappy-think .st-eyes rect { fill: var(--card); }
.snappy-think .st-ring {
  transform-box: view-box; transform-origin: 50px 50px;
  animation: st-spin 1.15s linear infinite; will-change: transform;
}
.snappy-think .st-eyes {
  transform-box: view-box; transform-origin: 50px 48px;
  animation: st-blink 3.4s cubic-bezier(.4, 0, .2, 1) infinite;
}
.snappy-think .st-face-g {
  transform-box: view-box; transform-origin: 50px 50px;
  animation: st-bob 2.3s ease-in-out infinite;
}
@keyframes st-spin { to { transform: rotate(360deg); } }
@keyframes st-blink {
  0%, 86%, 100% { transform: scaleY(1); }
  89% { transform: scaleY(.12); }
  92% { transform: scaleY(1); }
  94% { transform: scaleY(.15); }
  97% { transform: scaleY(1); }
}
@keyframes st-bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-1.5px); } }
@media (prefers-reduced-motion: reduce) {
  .snappy-think .st-ring { animation-duration: 4s; }
  .snappy-think .st-face-g { animation: none; }
}
html[data-motion="off"] .snappy-think .st-ring { animation-duration: 4s; }
html[data-motion="off"] .snappy-think .st-face-g { animation: none; }

/* ---------------------------------------------------------------- 档案页 */
/* 动物档案的信息表原来直接铺在底色上，下面的「追根溯源」却是卡片 —— 同一页两种面。统一成卡片 */
dl.facts {
  background: var(--card); border: 1px solid var(--line); border-radius: var(--u-r-card);
  padding: 4px 16px; margin: 0 0 var(--u-gap);
}
.trace-card { border-radius: var(--u-r-card); box-shadow: none; border: 1px solid var(--line); }

/* ---------------------------------------------------------------- 8.1.1 底栏图标 */
/* 以前四个图标四种画法：实心品牌标、线描显微镜、2.5D 老鼠位图、线描工牌。
   按 Apple / BofA / Uber 底栏的共同规矩重画成一套：同一 24 网格、同一线宽、同一视觉大小；
   没选中是线稿，选中是实心 + 主色（iOS 的 outline / fill 约定），不在底栏里放位图。 */
.bar a { gap: 3px; }
.nav-ic {
  width: 26px; height: 26px; flex: none; overflow: visible;
  fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round;
}
.nav-ic .ne { fill: currentColor; stroke: none; }
.bar a.on .nav-ic .nf { fill: currentColor; }
.bar a.on .nav-ic .nd { stroke: var(--card); }
.bar a.on .nav-ic .ne { fill: var(--card); }
.bar a span { font-size: 11px; font-weight: 600; letter-spacing: .01em; }
.bar a:not(.on) { color: var(--dim); }
.bar a.on { color: var(--ink); }

/* ---------------------------------------------------------------- 8.1.1 「问一句」 */
/* 原来是一颗浅青色圆球，和页面上任何东西都不是一个体系。改成和主按钮同一种：
   墨色胶囊 + Snappy 标志；窄屏只留一颗 48px 圆钮。浮在内容上面，所以它可以有投影。 */
.askhere {
  display: inline-flex; align-items: center; gap: 8px; height: 44px; padding: 0 18px 0 12px;
  border: 0; border-radius: var(--u-r-pill); background: var(--ink); color: var(--card);
  font-size: 14px; font-weight: 600;
  box-shadow: 0 10px 28px rgb(0 0 0 / 18%), 0 1px 3px rgb(0 0 0 / 12%);
}
.askhere .icon, .askhere .ask-mark { width: 22px; height: 22px; color: var(--card); }
.askhere:hover { background: var(--ink); border: 0; filter: brightness(1.12); }
.askhere::after { border-color: var(--ink); }
@media (max-width: 420px) {
  .askhere { width: 48px; height: 48px; padding: 0; justify-content: center; }
  .askhere span { display: none; }
  .askhere .ask-mark { width: 26px; height: 26px; }
}

/* ---------------------------------------------------------------- 8.1.2 右上角 */
/* 语言、主题、设置三个控件原来三种样子（带框大胶囊、裸图标、裸图标）。
   统一成 40px 圆形图标钮 + 36px 语言胶囊，同一线宽，悬停一层浅底。 */
.top .ib {
  width: 40px; height: 40px; border-radius: var(--u-r-pill); border: 0; background: transparent;
  display: inline-grid; place-items: center; color: var(--ink);
}
.top .ib .icon { width: 22px; height: 22px; stroke-width: 1.7; }
@media (hover: hover) { .top .ib:hover { background: var(--soft); } }
.lang-select {
  height: 36px; min-width: 0; padding: 0 30px 0 14px; border-radius: var(--u-r-pill);
  border: 1px solid var(--line); background-color: var(--card); color: var(--ink);
  font-size: 14px; font-weight: 600;
}

/* ---------------------------------------------------------------- 8.1.3 设置 / 我的 */
/* 语言从顶栏收进设置；顶栏只剩主题和设置两颗图标钮 */
.top #themeBtn { margin-left: auto; }
.set-row .lang-select { margin-left: auto; }
/* 「高级」默认收起：切换模型、训练、传输区、更新、公告、自检、诊断、救援都在里面 */
.set-adv { margin-top: var(--s5, 24px); }
.set-adv > summary {
  list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between;
  min-height: 44px; padding: 0 4px;
}
.set-adv > summary::-webkit-details-marker { display: none; }
.set-adv > summary::after {
  content: ""; width: 8px; height: 8px; border-right: 1.7px solid currentColor; border-bottom: 1.7px solid currentColor;
  transform: rotate(45deg); margin-right: 6px; transition: transform .2s;
}
.set-adv[open] > summary::after { transform: rotate(-135deg); }
.set-adv > .set-list { margin-bottom: var(--u-gap); }
/* 我的：一张列表，行高与设置一致 */
.me-links { margin-top: var(--u-gap); }
/* 设置里的语言：和右侧数值一样的写法（浅色字 + 小箭头），不做成一颗实心胶囊 */
#v-settings .set-row .lang-select {
  height: 36px; min-width: 0; padding: 0 22px 0 8px; border: 0; border-radius: var(--u-r-in);
  background-color: transparent; background-position: right 4px center;
  color: var(--dim); font-size: 15px; font-weight: 500; box-shadow: none;
}
/* 我的：「更换头像」是个次要动作，放在头像下面的一行小字，不加下划线 */
.me-avatar-change { font-size: 12px; color: var(--dim); text-decoration: none; background: none; border: 0; }

/* ================================================================ 8.2 结构级美化 */

/* 返回：统一成一行文字链（‹ 上一页的名字），不再有的是胶囊、有的是文字 */
.btn.back, .tk-back {
  min-height: 36px; padding: 0 6px 0 0; margin: 0 0 6px; border: 0; background: none; box-shadow: none;
  display: inline-flex; align-items: center; gap: 4px; color: var(--ink); font-size: 15px; font-weight: 600;
}
.btn.back .icon, .tk-back .icon { width: 18px; height: 18px; }
@media (hover: hover) { .btn.back:hover, .tk-back:hover { background: none; opacity: .7; } }

/* 所有动物：分组列表，一行一只 */
#animalResults { background: var(--card); border: 1px solid var(--line); border-radius: var(--u-r-card); overflow: hidden; }
#animalResults:empty { display: none; }
#animalResults .animal-row {
  display: grid; grid-template-columns: 40px minmax(0, 1fr) auto 16px; align-items: center; gap: 12px;
  min-height: 64px; padding: 10px 14px 10px 16px; margin: 0;
  border: 0; border-radius: 0; border-top: 1px solid var(--line); background: transparent; box-shadow: none;
}
#animalResults .animal-row:first-child { border-top: 0; }
#animalResults .animal-avatar { width: 40px; height: 40px; border-radius: 12px; background: var(--soft);
  display: grid; place-items: center; overflow: hidden; }
#animalResults .animal-avatar img { width: 34px; height: 34px; object-fit: contain; }
.animal-main { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.animal-main b { font-size: 16px; font-weight: 700; }
.animal-meta { font-size: 13px; color: var(--dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.animal-end b { font-size: 15px; font-weight: 700; }
.animal-end small { font-size: 12px; color: var(--dim); margin-left: 1px; }
.animal-status.off { font-size: 12px; font-weight: 600; padding: 3px 9px; border-radius: 999px; background: var(--soft); color: var(--dim); }
#animalResults .animal-row > .icon { width: 16px; height: 16px; color: var(--dim2); }
@media (hover: hover) { #animalResults .animal-row:hover { background: var(--soft); } }

/* 出入管理的统计：一张卡里三格，和「我的」统计同一种样子 */
.movement-stats { background: var(--card); border: 1px solid var(--line); border-radius: var(--u-r-card); }

/* 记录详情：标题右侧的编辑 / 删除并排，不竖着摞 */
.h1row .acts-r { display: flex; flex-wrap: nowrap; gap: 2px; flex: none; }

/* 相册列表：缩略图是圆角方块、裁满，不再是一张缩小的整图 */
.it .th, .row .th { width: 64px; height: 64px; border-radius: 12px; overflow: hidden; background: var(--soft); flex: none; }
.it .th img, .row .th img { width: 100%; height: 100%; object-fit: cover; }
/* 旧样式给动物行定义了三行的 grid-template-areas，子元素按区域落位 —— 新结构一律回到单行 */
#animalResults .animal-row { grid-template-areas: none; grid-template-rows: auto; grid-auto-rows: auto; }
#animalResults .animal-row > * { grid-area: auto; grid-row: auto; grid-column: auto; }
.animal-end { white-space: nowrap; }

/* ---------------------------------------------------------------- 8.3 图的配色 */
.fig-style { display: flex; flex-direction: column; gap: 10px; margin: 12px 0 4px; padding: 12px 14px;
  border: 1px solid var(--line); border-radius: var(--u-r-ctl); background: var(--soft); }
.fs-row { display: flex; align-items: center; gap: 12px; min-width: 0; }
.fs-k { flex: none; width: 2.6em; font-size: 13px; font-weight: 600; color: var(--dim); }
.fs-seg, .fs-sw { display: flex; flex-wrap: wrap; gap: 6px; min-width: 0; }
.fs-b { display: inline-flex; align-items: center; gap: 6px; min-height: 32px; padding: 0 12px; border-radius: 999px;
  border: 1px solid var(--line); background: var(--card); color: var(--ink); font: inherit; font-size: 13px; cursor: pointer; }
.fs-b.on { border-color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink); font-weight: 600; }
.fs-dots { display: inline-flex; }
.fs-dots i { width: 10px; height: 10px; border-radius: 50%; border: 1.5px solid var(--card); margin-left: -3px; }
.fs-dots i:first-child { margin-left: 0; }
.fs-c { position: relative; display: inline-flex; align-items: center; gap: 6px; min-height: 32px; padding: 0 10px 0 6px;
  border-radius: 999px; border: 1px solid var(--line); background: var(--card); font-size: 13px; cursor: pointer; }
.fs-c input { position: absolute; inset: 0; opacity: 0; cursor: pointer; width: 100%; height: 100%; }
.fs-c i { width: 18px; height: 18px; border-radius: 50%; box-shadow: inset 0 0 0 1px rgb(0 0 0 / 12%); }
.fs-reset { font-size: 13px; }
.fig img { border-radius: var(--u-r-in); background: #fff; }

/* ---------------------------------------------------------------- 8.3 记录详情页头 */
.dhead { display: flex; flex-direction: column; gap: 10px; }
.dhead .dmeta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 0; }
.dhead .dmeta .tt { margin-left: auto; font-size: 13px; color: var(--dim); }
.dhead .h1row { align-items: center; }
.dhead .h1row h1 { font-size: 24px; }
.dhead .lead { margin: 0; color: var(--dim); font-size: 15px; line-height: 1.65; }
.dhead .lead p { margin: 0; }
.reading-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap;
  padding-top: 10px; border-top: 1px solid var(--line); }
.reading-switch { display: inline-flex; padding: 3px; border-radius: 999px; background: var(--soft); gap: 2px; }
.reading-switch button { min-height: 32px; padding: 0 16px; border: 0; border-radius: 999px; background: transparent;
  color: var(--dim); font: inherit; font-size: 14px; font-weight: 600; cursor: pointer; }
.reading-switch button.on { background: var(--card); color: var(--ink); box-shadow: 0 1px 2px rgb(0 0 0 / 10%); }
.rt-acts { display: flex; gap: 4px; }
.rt-link { display: inline-flex; align-items: center; gap: 5px; min-height: 36px; padding: 0 10px; border: 0; border-radius: 10px;
  background: none; color: var(--ink); font: inherit; font-size: 14px; font-weight: 500; cursor: pointer; text-decoration: none; }
.rt-link .icon { width: 16px; height: 16px; }
@media (hover: hover) { .rt-link:hover { background: var(--soft); } }
.archive-state { display: flex; align-items: center; gap: 6px; margin: 0; font-size: 13px; color: var(--dim); }
.archive-state .icon { width: 15px; height: 15px; color: var(--green); }
.archive-state.pending .icon { color: var(--amber-d); }

/* ---------------------------------------------------------------- 8.3 日历 */
/* iOS 日历的写法：数字放在圆里；选中是墨色实心圆，今天用主色字；记录 / 待办是数字下面的小点 */
.jd, .jd:hover, .jd.has, .jd.today, .jd.today:not(.on):hover { background: none; box-shadow: none; }
.jd { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; min-height: 46px; }
.jd b { width: 34px; height: 34px; display: grid; place-items: center; border-radius: 50%; font-size: 15px; font-weight: 500;
  transition: background .15s, color .15s; }
.jd.has b { font-weight: 700; }
.jd.wk:not(.on):not(.today) b { color: var(--dim); }
.jd.today:not(.on) b { color: var(--blue); font-weight: 800; }
.jd.on, .jd.on:hover { background: none; }
.jd.on b { background: var(--ink); color: var(--card); }
@media (hover: hover) { .jd:not(.on):not(.pad):hover b { background: var(--soft); } }
.jmarks { display: flex; gap: 3px; height: 5px; }
.jmarks i { width: 5px; height: 5px; border-radius: 50%; }
.jd.on .jmarks i { background: currentColor; }
.jempty { color: var(--dim); }
/* 旧版把阅读切换做成下划线页签（studio.css），这里是分段控件：去掉下划线和底边 */
.dhead .reading-switch { width: auto; border: 0; border-bottom: 0; }
.dhead .reading-switch button::after { display: none; }
.dhead .reading-switch button.on { background: var(--card); color: var(--ink); font-weight: 600; box-shadow: 0 1px 2px rgb(0 0 0 / 10%); }

/* 日志里的阅读切换同样是分段控件；「完整内容 · 可核对原文」这类提示不再显示 */
.jsec-head .reading-switch { display: inline-flex; width: auto; padding: 3px; gap: 2px; border: 0; border-radius: 999px; background: var(--soft); }
.jsec-head .reading-switch button { flex: none; min-height: 30px; padding: 0 14px; border-radius: 999px; }
.jsec-head .reading-switch button::after { display: none; }
.jsec-head .reading-switch button.on { background: var(--card); color: var(--ink); font-weight: 600; box-shadow: 0 1px 2px rgb(0 0 0 / 10%); }
#jModeHint, .reading-hint { display: none; }

/* ---------------------------------------------------------------- 8.3 相册 */
/* 搜索框和「切换视图」同一种面：44px、浅底、同样的圆角 */
.tools { display: flex; align-items: center; gap: 8px; }
.tools .find { flex: 1; min-height: var(--u-h-input); border-radius: var(--u-r-ctl); }
.tools #viewBtn { width: var(--u-h-input); height: var(--u-h-input); border-radius: var(--u-r-ctl);
  background: var(--soft); border: 0; box-shadow: none; color: var(--ink); }
/* 网格卡片：统一 16px 圆角，底部标题渐变更短更干净 */
.gi .box { border-radius: var(--u-r-card); overflow: hidden; }
/* 用户关掉动效时，列表的进场错开动画也不播 */
html[data-motion="off"] :is(.gal, .rows, .pwall, .view, .jrows) > * { animation: none; }

/* ================================================================ 8.4 会员与管理后台 */
.plan-card { margin: var(--u-gap) 0; padding: 16px; border-radius: var(--u-r-card); border: 1px solid var(--line); background: var(--card); }
.plan-top { display: flex; align-items: center; gap: 8px; }
.plan-top b { font-size: 16px; }
.plan-top small { margin-left: auto; font-size: 12px; color: var(--dim); }
.plan-badge { font-size: 11px; font-weight: 800; letter-spacing: .06em; padding: 3px 8px; border-radius: 999px;
  background: var(--soft); color: var(--ink); text-transform: uppercase; }
.plan-meters { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin: 14px 0; }
.meter span { display: block; font-size: 12px; color: var(--dim); }
.meter b { display: block; font-size: 15px; margin: 2px 0 6px; }
.meter .bar { display: block; height: 6px; border-radius: 999px; background: var(--soft); overflow: hidden; }
.meter .bar em { display: block; height: 100%; width: 0; border-radius: inherit; background: var(--blue); transition: width .4s; }
.meter .bar.full em { background: var(--amber-d); }
.plan-redeem { display: flex; gap: 8px; }
.plan-redeem input { flex: 1; min-width: 0; min-height: 44px; padding: 0 14px; border-radius: var(--u-r-ctl);
  border: 1px solid var(--line); background: var(--soft); color: var(--ink); font: inherit; font-size: 15px; letter-spacing: .04em; }
.plan-redeem .btn { flex: none; min-height: 44px; }
/* Ultra：一张墨色卡，主色小字 —— 和 Free 一眼分得开，但不花哨 */
.plan-ultra { background: #1c2024; border-color: #1c2024; color: #fff; }
.plan-ultra .plan-badge { background: #8ea2f2; color: #0f1417; }
.plan-ultra .plan-perks { margin: 10px 0 0; font-size: 14px; color: #c9d4d6; }
.plan-ultra .plan-since { display: block; margin-top: 4px; font-size: 12px; color: #8b979b; }
.adm-live { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 600; color: var(--blue); }
.adm-live i { width: 7px; height: 7px; border-radius: 50%; background: #2fb67c; box-shadow: 0 0 0 3px rgb(47 182 124 / 18%); }
.adm-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.adm-tiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1px; margin: 0 0 20px;
  border: 1px solid var(--line); border-radius: var(--u-r-card); overflow: hidden; background: var(--line); }
.adm-tile { background: var(--card); padding: 14px 12px; }
.adm-tile b { display: block; font-size: 22px; font-weight: 700; }
.adm-tile span { font-size: 12px; color: var(--dim); }
@media (min-width: 761px) { .adm-tiles { grid-template-columns: repeat(6, minmax(0, 1fr)); } }
.adm-list { border: 1px solid var(--line); border-radius: var(--u-r-card); background: var(--card); overflow: hidden; margin-bottom: 20px; }
.adm-row { display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: 4px 12px; align-items: center; padding: 12px 16px;
  border-top: 1px solid var(--line); }
.adm-row:first-child { border-top: 0; }
.adm-av { position: relative; width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center;
  background: var(--soft); font-weight: 700; }
.adm-av.on::after { content: ""; position: absolute; right: 0; bottom: 0; width: 10px; height: 10px; border-radius: 50%;
  background: #2fb67c; border: 2px solid var(--card); }
.adm-who { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; min-width: 0; }
.adm-who b { font-size: 15px; }
.adm-who small { width: 100%; font-size: 12px; color: var(--dim); }
.plan-tag { font-size: 11px; font-weight: 700; padding: 2px 7px; border-radius: 999px; background: var(--soft); color: var(--dim); }
.plan-tag.ultra { background: #1c2024; color: #8ea2f2; }
.plan-tag.admin { background: var(--ink); color: var(--card); }
.adm-nums { grid-column: 2; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; margin-top: 6px; }
.adm-nums b { display: block; font-size: 15px; }
.adm-nums b i { font-style: normal; font-weight: 500; color: var(--dim); font-size: 12px; }
.adm-nums small { font-size: 11px; color: var(--dim); }
@media (min-width: 761px) {
  .adm-row { grid-template-columns: 40px minmax(160px, 1fr) minmax(0, 2fr); }
  .adm-nums { grid-column: 3; margin: 0; }
}
.adm-codes-head { display: flex; align-items: center; justify-content: space-between; }
.adm-code { display: flex; align-items: center; gap: 12px; min-height: 52px; padding: 0 12px 0 16px; border-top: 1px solid var(--line); }
.adm-code:first-child { border-top: 0; }
.adm-code code { font-family: var(--mono, ui-monospace, monospace); font-size: 14px; letter-spacing: .04em; background: none; padding: 0; }
.adm-code span { flex: 1; font-size: 13px; color: var(--dim); }
.adm-code.used code { color: var(--dim); text-decoration: line-through; }

/* ---------------------------------------------------------------- 8.4 表单模板 */
.act-form .ac-state { color: var(--dim); }
.act-form { border-color: var(--line); }
.af-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.af-f { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.af-wide { grid-column: 1 / -1; }
.af-l { font-size: 12px; font-weight: 600; color: var(--dim); }
.af-l i { font-style: normal; color: var(--red); margin-left: 2px; }
.af-f input { min-height: 42px; padding: 0 12px; border-radius: var(--u-r-ctl); border: 1px solid var(--line);
  background: var(--soft); color: var(--ink); font: inherit; font-size: 15px; width: 100%; }
.af-f input:focus { outline: none; border-color: var(--ink); background: var(--card); }
.af-seg { display: inline-flex; flex-wrap: wrap; gap: 6px; }
.af-seg button { min-height: 36px; min-width: 52px; padding: 0 14px; border-radius: 999px; border: 1px solid var(--line);
  background: var(--card); color: var(--ink); font: inherit; font-size: 15px; cursor: pointer; }
.af-seg button.on { background: var(--ink); border-color: var(--ink); color: var(--card); font-weight: 600; }
.af-err { margin: 0; padding: 0 16px 12px; color: var(--red); font-size: 13px; }
@media (max-width: 420px) { .af-grid { grid-template-columns: minmax(0, 1fr); } }

/* ---------------------------------------------------------------- 8.4 通用回答模板 */
.chat-explain { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.chat-explain b { font-size: 15px; font-weight: 700; color: var(--ink); }
.cx-cond { font-size: 12px; font-weight: 600; padding: 2px 8px; border-radius: 999px; background: var(--soft); color: var(--dim); }
.cx-n { margin-left: auto; font-size: 12px; color: var(--dim); }
.chat-table { border-radius: var(--u-r-ctl); }
.chat-table table { font-size: 14px; }
.chat-table th { font-size: 12px; font-weight: 600; color: var(--dim); background: var(--soft); }
.ct-cards { display: none; }
@media (max-width: 520px) {
  .chat-table.has-cards { display: none; }
  .ct-cards { display: flex; flex-direction: column; border: 1px solid var(--line); border-radius: var(--u-r-ctl); overflow: hidden; }
  .ct-card { padding: 10px 14px; border-top: 1px solid var(--line); }
  .ct-card:first-child { border-top: 0; }
  .ct-card > b { display: block; font-size: 15px; margin-bottom: 4px; }
  .ct-card dl { display: flex; flex-wrap: wrap; gap: 4px 14px; margin: 0; }
  .ct-card dl div { display: flex; gap: 5px; font-size: 13px; }
  .ct-card dt { color: var(--dim); }
  .ct-card dd { margin: 0; color: var(--ink); font-weight: 500; }
}
.ct-card > b { color: var(--ink); }

/* ---------------------------------------------------------------- 8.5 结果视图
   查到的数据画成应用里的界面：外面不再套对话气泡，每块结果自己是一张卡；
   模型那段话就是卡下面的一段正文，不挂「回答」标题、不垫灰底。 */
:root { --v-f: #c2416b; --v-f-s: #fbe9ef; --v-m: #2f6bc8; --v-m-s: #e8f0fb; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) { --v-f: #f08aac; --v-f-s: #3a1c27; --v-m: #8ab4f5; --v-m-s: #1b2a40; }
}
:root[data-theme="dark"] { --v-f: #f08aac; --v-f-s: #3a1c27; --v-m: #8ab4f5; --v-m-s: #1b2a40; }

.chat-it.has-view { border: 0; background: transparent; padding: 0; gap: 12px; }
.chat-it.has-view .chat-step + .chat-step { border-top: 0; padding-top: 0; }
.chat-it.has-view .chat-step { gap: 10px; }

.vw {
  border: 1px solid var(--line); border-radius: var(--u-r-card); background: var(--card);
  padding: 16px 16px 14px; display: grid; gap: 14px; min-width: 0;
}
.vh { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; min-height: 28px; }
.vh h3 { margin: 0; font-size: 17px; font-weight: 750; letter-spacing: -.01em; color: var(--ink); }
.vh-n {
  font-size: 12px; font-weight: 700; min-width: 22px; height: 22px; padding: 0 7px; border-radius: 999px;
  display: inline-grid; place-items: center; background: var(--soft); color: var(--dim);
  font-variant-numeric: tabular-nums;
}
.vh-go {
  margin-left: auto; display: inline-flex; align-items: center; gap: 2px;
  height: 30px; padding: 0 8px 0 12px; border-radius: 999px; border: 0;
  background: transparent; color: var(--blue); font: inherit; font-size: 14px; font-weight: 600; cursor: pointer;
}
.vh-go .icon { width: 16px; height: 16px; }
@media (hover: hover) { .vh-go:hover { background: var(--blue-s); } }

/* 小结：几个大数字并排 */
.v-sum { display: flex; gap: 22px; flex-wrap: wrap; }
.v-sum > div { display: flex; align-items: baseline; gap: 5px; }
.v-sum b { font-size: 28px; font-weight: 750; line-height: 1; letter-spacing: -.02em; font-variant-numeric: tabular-nums; color: var(--ink); }
.v-sum span { font-size: 14px; color: var(--dim); font-weight: 500; }
.v-sum .vs-f b { color: var(--v-f); }
.v-sum .vs-m b { color: var(--v-m); }
.v-sum .vs-f span, .v-sum .vs-m span { font-size: 16px; font-weight: 700; }
.v-sum .vs-f span { color: var(--v-f); }
.v-sum .vs-m span { color: var(--v-m); }
.v-sum .vs-mute b { color: var(--dim); }

/* 笼位：一格一笼，只数放大 */
/* 9.9.6 类名从 .vc 改成 .vcage：语音面板（9.9.1）也叫 .vc（position: fixed; inset: 0），
   对话里一出笼位格，每一格都变成盖满全屏的一层，页面看着就「卡死」在一个笼位上。 */
.v-cages { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
.vcage {
  display: grid; gap: 6px; text-align: left; font: inherit; color: var(--ink); cursor: pointer;
  padding: 12px 14px; border-radius: var(--u-r-ctl); border: 1px solid var(--line); background: var(--bg);
  transition: border-color .15s, background .15s;
}
@media (hover: hover) { .vcage:hover { border-color: var(--blue); background: var(--card); } }
.vcage-l { font-size: 15px; font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vcage-n { display: flex; align-items: baseline; gap: 4px; font-size: 13px; color: var(--dim); }
.vcage-n b { font-size: 34px; line-height: 1; font-weight: 750; letter-spacing: -.02em; color: var(--ink); font-variant-numeric: tabular-nums; }
.vcage-m { font-size: 12.5px; color: var(--dim); min-height: 1.3em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vcage.empty .vcage-n b { color: var(--dim2); }

/* 动物名册 */
.v-roster { display: grid; border: 1px solid var(--line); border-radius: var(--u-r-ctl); overflow: hidden; }
.vr {
  display: flex; align-items: center; gap: 12px; padding: 10px 14px; min-height: 56px;
  border: 0; border-top: 1px solid var(--line); background: var(--card);
  font: inherit; color: var(--ink); text-align: left; cursor: pointer;
}
.vr:first-child { border-top: 0; }
@media (hover: hover) { .vr:hover { background: var(--soft); } }
.vr-sex {
  flex: none; width: 32px; height: 32px; border-radius: 999px; display: grid; place-items: center;
  font-size: 17px; font-weight: 700; background: var(--soft); color: var(--dim);
}
.vr-sex.sx-f { background: var(--v-f-s); color: var(--v-f); }
.vr-sex.sx-m { background: var(--v-m-s); color: var(--v-m); }
.vr-main { flex: 1; min-width: 0; display: grid; gap: 1px; }
.vr-main b { font-size: 15.5px; font-weight: 700; }
.vr-main small { font-size: 12.5px; color: var(--dim); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vr-cage {
  flex: none; font-size: 12.5px; font-weight: 600; padding: 3px 9px; border-radius: 999px;
  background: var(--soft); color: var(--ink);
}
.vr-st { flex: none; font-size: 12px; font-weight: 600; color: var(--amber-d); }

/* 只有一个数 */
.v-stat { display: flex; align-items: baseline; gap: 10px; }
.v-stat b { font-size: 48px; line-height: 1; font-weight: 750; letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.v-stat span { font-size: 15px; color: var(--dim); font-weight: 500; }

/* 分组计数 */
.v-bars { display: grid; gap: 9px; }
.vb { display: grid; grid-template-columns: minmax(64px, 30%) 1fr auto; align-items: center; gap: 12px; }
.vb-l { font-size: 14px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vb-t { height: 10px; border-radius: 999px; background: var(--soft); overflow: hidden; }
.vb-t i { display: block; height: 100%; width: 0; border-radius: 999px; background: var(--blue); transition: width .5s cubic-bezier(.2, .8, .2, 1); }
.vb b { font-size: 15px; font-weight: 700; font-variant-numeric: tabular-nums; min-width: 2ch; text-align: right; }

/* 一条档案 */
.v-sheet { margin: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 0; border-top: 1px solid var(--line); }
.v-sheet div { padding: 10px 0; border-bottom: 1px solid var(--line); display: grid; gap: 2px; padding-right: 12px; }
.v-sheet dt { font-size: 12px; color: var(--dim); font-weight: 600; }
.v-sheet dd { margin: 0; font-size: 15px; font-weight: 500; overflow-wrap: anywhere; }

/* 其余：表格 */
.v-table { border: 1px solid var(--line); border-radius: var(--u-r-ctl); overflow: auto; }
.v-table table { width: 100%; border-collapse: collapse; font-size: 14px; }
.v-table th {
  text-align: left; font-size: 12px; font-weight: 650; color: var(--dim); background: var(--soft);
  padding: 9px 12px; white-space: nowrap;
}
.v-table td { padding: 10px 12px; border-top: 1px solid var(--line); vertical-align: top; }
.v-table th.num, .v-table td.num { text-align: right; font-variant-numeric: tabular-nums; }
.v-table td:first-child { font-weight: 650; }
.v-table td.down { color: var(--red); }
@media (max-width: 520px) {
  .v-table.has-cards { display: none; }
  .vw { padding: 14px 14px 12px; }
  .v-cages { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .vcage-n b { font-size: 30px; }
  .v-sum { gap: 16px; }
  .v-sum b { font-size: 24px; }
}

/* 模型那段话：就是正文 */
.chat-prose { font-size: 15px; line-height: 1.7; color: var(--ink); padding: 0 2px; overflow-wrap: anywhere; }
.chat-prose > :first-child { margin-top: 0; }
.chat-prose > :last-child { margin-bottom: 0; }
.chat-prose p { margin: 0 0 8px; }
.chat-prose ul, .chat-prose ol { margin: 0 0 8px; padding-left: 1.3em; }
.chat-prose li + li { margin-top: 3px; }
.chat-it:not(.has-view) .chat-prose { padding: 0; }

/* 接话：一排安静的按钮，不再带「接着可以」 */
.chat-it.has-view .chat-next { padding: 0 2px; }
.chat-chip { font-weight: 500; }
.vb.sx-f .vb-l { color: var(--v-f); font-size: 17px; }
.vb.sx-m .vb-l { color: var(--v-m); font-size: 17px; }
.vb.sx-f .vb-t i { background: var(--v-f); }
.vb.sx-m .vb-t i { background: var(--v-m); }

/* 记录 / 待办 / 档案 */
.vr-side { flex: none; display: grid; justify-items: end; gap: 3px; }
.vr-day { font-size: 12.5px; color: var(--dim); font-variant-numeric: tabular-nums; }
.vr-tag { font-size: 11.5px; font-weight: 650; padding: 2px 8px; border-radius: 999px; background: var(--soft); color: var(--dim); white-space: nowrap; }
.vr-tag.ok { background: var(--green-s); color: var(--green); }
.vr-tag.ask { background: var(--amber-s); color: var(--amber-d); }
.v-todo .vr { cursor: default; }
@media (hover: hover) { .v-todo .vr:hover { background: var(--card); } }
.vt-day {
  flex: none; width: 44px; height: 44px; border-radius: 10px; background: var(--soft);
  display: grid; place-content: center; text-align: center; line-height: 1.05;
  font-size: 17px; font-weight: 750; color: var(--ink); font-variant-numeric: tabular-nums;
}
.vt-day small { display: block; font-size: 10.5px; font-weight: 600; color: var(--dim); }
.vt.now .vt-day { background: var(--blue-s); color: var(--blue-d); }
.vt.late .vt-day { background: var(--amber-s); color: var(--amber-d); }
.v-hero { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.v-hero > b { font-size: 26px; font-weight: 750; letter-spacing: -.02em; }
.v-hero .vr-sex { width: 38px; height: 38px; font-size: 20px; }
.v-hero-n { margin-left: auto; display: flex; align-items: baseline; gap: 4px; color: var(--dim); font-size: 14px; }
.v-hero-n b { font-size: 30px; font-weight: 750; color: var(--ink); line-height: 1; font-variant-numeric: tabular-nums; }

/* ---------------------------------------------------------------- 8.6 配色：去掉深绿
   以前强调色是深青（#276e69）、「完成」是森林绿（#007D3C），整页发暗发闷。
   现在：墨黑做主按钮，靛蓝做链接 / 选中 / 进度，完成用明亮些的玉绿，只在小面积上出现。
   令牌覆盖和 studio.css 同样的选择器，放在它后面，所以各页面不用改就跟着换。 */
:root, :root[data-theme="light"] {
  --ui-link: #3b5bdb;
  --blue: #3b5bdb; --blue-d: #2c46b8; --blue-s: #eef1fd;
  --green: #1f9d6c; --green-s: #e8f6ef;
  --accent: #8ea2f2; --cyan: #8ea2f2;
  --bg: #f5f6f8; --soft: #f1f2f5; --soft2: #e7e9ee; --line: #e4e6eb;
  --dim: #5e6472; --dim2: #8a909c;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --ui-link: #93a8f7; --blue: #93a8f7; --blue-d: #b8c6fa; --blue-s: #1c2440;
    --green: #4fd19b; --green-s: #122a21; --accent: #93a8f7;
  }
}
:root[data-theme="dark"] {
  --ui-link: #93a8f7; --blue: #93a8f7; --blue-d: #b8c6fa; --blue-s: #1c2440;
  --green: #4fd19b; --green-s: #122a21; --accent: #93a8f7;
}
/* 自己说的话：中性浅灰气泡，不再是一块青色 */
.chat-you { background: var(--soft2); color: var(--ink); }
:root[data-theme="dark"] .chat-you { background: var(--soft2); color: var(--ink); }
/* 对话里的「已完成」「第几步」：墨色圆点，绿只留给小对勾 */
.chat-steps .st-ok .n { background: var(--ink); color: var(--bg); }

/* ---------------------------------------------------------------- 8.7 正在思考：Snappy + 三个小点依次起伏 */
.chat-think { align-items: center; }
.think-dots { display: inline-flex; align-items: flex-end; gap: 3px; height: 12px; margin-left: -6px; }
.think-dots i { width: 4px; height: 4px; border-radius: 50%; background: currentColor; opacity: .35;
  animation: think-dot 1.2s ease-in-out infinite; }
.think-dots i:nth-child(2) { animation-delay: .15s; }
.think-dots i:nth-child(3) { animation-delay: .3s; }
@keyframes think-dot { 0%, 60%, 100% { transform: translateY(0); opacity: .35; } 30% { transform: translateY(-4px); opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .think-dots i { animation: none; opacity: .6; } }

/* ---------------------------------------------------------------- 8.7 AI 接入 */
#aiBody { padding-bottom: 110px; max-width: 760px; }
.ai-now { display: flex; align-items: center; gap: 12px; padding: 14px 16px; margin: 0 0 16px;
  border-radius: var(--u-r-card); background: var(--ink); color: var(--bg); }
.ai-now b { display: block; font-size: 16px; font-weight: 700; }
.ai-now small { display: block; font-size: 13px; opacity: .7; margin-top: 2px; overflow-wrap: anywhere; }
.ai-dot { flex: none; width: 10px; height: 10px; border-radius: 999px; background: #8a909c; }
.ai-dot.on { background: #8ea2f2; box-shadow: 0 0 0 4px rgba(142, 162, 242, .25); }
.ai-card { margin: 0 0 16px; padding: 16px; border: 1px solid var(--line); border-radius: var(--u-r-card); background: var(--card); display: grid; gap: 12px; }
.ai-h { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.ai-h b { font-size: 17px; font-weight: 750; }
.ai-h small { font-size: 12.5px; color: var(--dim); }
.ai-sw { margin-left: auto; display: inline-flex; align-items: center; gap: 8px; font-size: 13px; color: var(--dim); }
.ai-sub { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding-top: 12px; border-top: 1px solid var(--line); }
.ai-sub b { font-size: 15px; font-weight: 700; }
.ai-sub small { font-size: 12.5px; color: var(--dim); }
.ai-f { display: grid; gap: 6px; }
.ai-f textarea { width: 100%; box-sizing: border-box; padding: 10px 12px; border: 1px solid var(--line); border-radius: var(--u-r-ctl);
  background: var(--card); font: inherit; font-size: 15px; line-height: 1.55; color: var(--ink); resize: vertical; }
.ai-f textarea:focus { border-color: var(--ink); outline: none; }
.ai-note { margin: 0; font-size: 13.5px; color: var(--dim); line-height: 1.6; }
.ai-note b { color: var(--ink); }
.ai-form { display: grid; gap: 10px; }
.ai-presets { display: flex; flex-wrap: wrap; gap: 6px; }
.ai-presets button { height: 32px; padding: 0 12px; border-radius: 999px; border: 1px solid var(--line); background: var(--card);
  color: var(--ink); font: inherit; font-size: 13px; font-weight: 550; cursor: pointer; }
.ai-presets button.on { background: var(--ink); border-color: var(--ink); color: var(--bg); }
@media (hover: hover) { .ai-presets button:not(.on):hover { border-color: var(--ink); } }
.ai-pnote { margin: -2px 0 0; font-size: 12.5px; color: var(--dim); }
.ai-acts { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.ai-acts .primary { margin-left: auto; }
.ai-res { font-size: 13px; color: var(--dim); }
.ai-res.ok { color: var(--green); }
.ai-res.bad { color: var(--red); }
.ai-del { justify-self: start; font-size: 13px; }
@media (max-width: 520px) { .ai-acts .primary { margin-left: 0; width: 100%; } }

/* ---------------------------------------------------------------- 9.0 日历：实验安排 */
.jd .jmarks i.jm-plan, .jlegend i.jm-plan { background: #8b5cf6; }
.jtitle b { white-space: nowrap; }
.jday-head { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.jday-head .btn { margin-left: auto; align-self: center; }
.jday-head .btn .icon, .jnav .btn .icon { width: 15px; height: 15px; }
.jplans { display: grid; border: 1px solid var(--line); border-radius: var(--u-r-ctl); overflow: hidden; }
.jplan-row { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-top: 1px solid var(--line); color: var(--ink); text-decoration: none; background: var(--card); }
.jplan-row:first-child { border-top: 0; }
.jplan-row > .icon { margin-left: auto; width: 16px; height: 16px; color: var(--dim2); }
@media (hover: hover) { .jplan-row:hover { background: var(--soft); } }
.jp-main { display: grid; gap: 2px; min-width: 0; }
.jp-main b { font-size: 15px; }
.jp-main small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.jp-st { flex: none; font-size: 11.5px; font-weight: 700; padding: 2px 9px; border-radius: 999px; }
.jp-st.st-plan { background: var(--amber-s); color: var(--amber-d); }
.jp-st.st-doing { background: var(--blue); color: #fff; }

/* ---------------------------------------------------------------- 9.0 错位修正 */
/* 我的：头像右下角一个小编辑标，名字和身份跟头像垂直居中（不再在头像下面挂一行字把头像顶高） */
.me-head { align-items: center; gap: 16px; }
.me-photo { position: relative; flex: none; display: block; padding: 0; border: 0; background: none; cursor: pointer; border-radius: 50%; }
.me-photo .me-avatar { width: 60px; height: 60px; font-size: 25px; }
.me-av-edit { position: absolute; right: -2px; bottom: -2px; width: 24px; height: 24px; border-radius: 50%;
  display: grid; place-items: center; background: var(--card); color: var(--ink); border: 1px solid var(--line); box-shadow: 0 1px 3px rgba(0,0,0,.12); }
.me-av-edit .icon { width: 13px; height: 13px; }
.me-photo:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }
.me-id { display: grid; gap: 2px; align-content: center; }
.me-id h1 { font-size: 24px; line-height: 1.2; margin: 0; }
.me-id .page-sub { margin: 0; line-height: 1.3; }
/* 搜索框：外框只有一层，图标和文字在同一条线上 */
.tk-search input, .tk-search input[type="search"] { border: 0 !important; box-shadow: none !important; border-radius: 0 !important;
  background: none !important; padding: 12px 0 !important; min-height: 0 !important; height: auto !important; margin: 0 !important; }
.tk-search { padding: 0 6px 0 14px; }
/* 性别没记录：灰色问号，不再把「unknown」塞进小圆里 */
.vr-sex.sx-u { color: var(--dim2); font-size: 14px; }

/* 笼位方块下的小点：一只鼠一个点，按性别上色（♀ 粉、♂ 蓝、未记录灰） */
.cage-tile .pip.px-f { background: var(--v-f); }
.cage-tile .pip.px-m { background: var(--v-m); }
.cage-tile .pip.px-u { background: var(--dim2); }
.cage-tile .pip.off { opacity: .35; }

/* ---------------------------------------------------------------- 9.9.1 输入条：左边「+」、右边麦克风和发送；待发区的文件卡 */
.chat-main .chat-bar .chat-plus { background: var(--soft); color: var(--ink); border: 0; }
.chat-main .chat-bar .chat-plus .icon { width: 20px; height: 20px; stroke: currentColor; fill: none; stroke-width: 2.2; }
.chat-main .chat-bar .chat-mic { flex: none; background: transparent; color: var(--dim); border: 0; }
.chat-main .chat-bar .chat-mic:hover { color: var(--ink); background: var(--soft); filter: none; }
.chat-mic .vc-mic-ic, .vc-mic-ic { width: 21px; height: 21px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.oi.c4 { background-color: var(--violet); color: #fff; }

.chat-file { position: relative; flex: none; display: inline-flex; align-items: center; gap: 9px; max-width: 250px; min-height: 56px;
  padding: 8px 12px 8px 8px; border: 1px solid var(--line); border-radius: 14px; background: var(--card); }
.chat-file .cf-ic { flex: none; width: 38px; height: 38px; display: grid; place-items: center; border-radius: 10px; background: var(--blue-s); color: var(--blue); }
.chat-file .cf-ic.k-table { background: var(--green-s); color: var(--green); }
.chat-file .cf-ic.k-pdf { background: #fdecee; color: #d64553; }
.chat-file .cf-ic .icon { width: 19px; height: 19px; }
.chat-file .cf-t { display: grid; min-width: 0; line-height: 1.3; }
.chat-file .cf-t b { font-size: 13px; font-weight: 650; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.chat-file .cf-t small { font-size: 11.5px; color: var(--dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.chat-file.is-up .cf-ic { animation: cfPulse 1s ease-in-out infinite; }
.chat-file.is-bad { border-color: #f1b8bf; }
.chat-file.is-bad .cf-t small { color: #c93545; }
@keyframes cfPulse { 50% { opacity: .5; } }
.chat-you-files { align-self: flex-end; display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 6px; max-width: min(88%, 40rem); margin-bottom: -4px; }
.chat-file.sent { flex-direction: column; align-items: stretch; gap: 0; padding: 0; min-height: 0; overflow: hidden; max-width: 280px; }
.chat-file.sent .cf-main { display: flex; align-items: center; gap: 9px; padding: 8px 12px 8px 8px; color: inherit; text-decoration: none; }
.chat-file.sent a.cf-main:hover { background: var(--soft); }
.chat-file .cf-act { display: flex; align-items: center; justify-content: center; gap: 5px; height: 32px; border: 0; border-top: 1px solid var(--line);
  background: transparent; color: var(--blue); font: inherit; font-size: 12.5px; font-weight: 650; cursor: pointer; }
.chat-file .cf-act .icon { width: 14px; height: 14px; }
.chat-file .cf-act.done { color: var(--green); }
.chat-attach .chat-file { margin-top: 2px; }

/* ---------------------------------------------------------------- 9.9.1 语音面板 */
.vc { position: fixed; inset: 0; z-index: 90; display: flex; align-items: flex-end; justify-content: center; pointer-events: none; }
.vc-bg { position: absolute; inset: 0; background: rgba(12, 12, 20, .32); opacity: 0; transition: opacity .22s ease; pointer-events: auto; }
.vc-card { position: relative; width: min(520px, 100%); margin: 0 auto; padding: 18px 20px calc(18px + env(safe-area-inset-bottom));
  border-radius: 24px 24px 0 0; background: var(--card); box-shadow: 0 -12px 40px rgba(9, 11, 22, .18);
  transform: translateY(104%); transition: transform .3s cubic-bezier(.2, .8, .2, 1); pointer-events: auto; }
.vc.on .vc-bg { opacity: 1; }
.vc.on .vc-card { transform: none; }
@media (min-width: 700px) {
  .vc { align-items: center; }
  .vc-card { border-radius: 24px; transform: translateY(24px) scale(.97); opacity: 0; transition: transform .28s cubic-bezier(.2, .8, .2, 1), opacity .2s ease; }
  .vc.on .vc-card { opacity: 1; }
}
.vc-top { display: flex; align-items: baseline; justify-content: space-between; }
.vc-title { font-size: 17px; }
.vc[data-state="listen"] .vc-title::after { content: ""; display: inline-block; width: 7px; height: 7px; margin-left: 8px; border-radius: 50%; background: #e8505b;
  vertical-align: middle; animation: cfPulse 1s ease-in-out infinite; }
.vc-time { font-style: normal; font-size: 13px; color: var(--dim); font-variant-numeric: tabular-nums; }
.vc-text { min-height: 78px; max-height: 30vh; overflow: auto; margin: 12px 0 6px; font-size: 20px; line-height: 1.5; font-weight: 600; color: var(--ink); overflow-wrap: anywhere; }
.vc-interim { color: var(--dim2); }
.vc-ph { color: var(--dim2); font-weight: 500; font-size: 16px; }
.vc.has-text .vc-ph { display: none; }
.vc-wave { display: flex; align-items: center; justify-content: center; gap: 4px; height: 44px; margin: 4px 0 14px; }
.vc-wave i { width: 4px; height: 44px; border-radius: 4px; background: var(--blue); transform: scaleY(calc(var(--h, .5) * .22)); opacity: .55;
  animation: vcIdle 1.3s ease-in-out infinite; transition: opacity .2s; }
.vc.hot .vc-wave i { animation-name: vcHot; animation-duration: .5s; opacity: 1; }
.vc[data-state="idle"] .vc-wave i, .vc[data-state="nosupport"] .vc-wave i { animation: none; transform: scaleY(.06); opacity: .3; }
.vc[data-state="done"] .vc-wave i { animation: none; transform: scaleY(.1); background: var(--green); opacity: 1; }
@keyframes vcIdle { 0%, 100% { transform: scaleY(calc(var(--h, .5) * .16)); } 50% { transform: scaleY(calc(var(--h, .5) * .42)); } }
@keyframes vcHot { 0%, 100% { transform: scaleY(calc(var(--h, .5) * .3)); } 50% { transform: scaleY(var(--h, .5)); } }
.vc-acts { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 12px; }
.vc-side { height: 42px; padding: 0 16px; border: 0; border-radius: 999px; background: var(--soft); color: var(--ink); font: inherit; font-size: 14.5px; font-weight: 600; cursor: pointer; justify-self: start; }
.vc-side.strong { justify-self: end; background: var(--ink); color: var(--bg); }
.vc-side:disabled { opacity: .35; cursor: default; }
.vc-go { position: relative; width: 72px; height: 72px; border: 0; border-radius: 50%; display: grid; place-items: center; cursor: pointer;
  background: #e8505b; color: #fff; box-shadow: 0 8px 22px rgba(232, 80, 91, .35); }
.vc-go .vc-mic-ic { width: 30px; height: 30px; stroke-width: 2; }
.vc-go .vc-stop { display: none; width: 22px; height: 22px; border-radius: 6px; background: #fff; }
.vc[data-state="listen"] .vc-go .vc-mic-ic { display: none; }
.vc[data-state="listen"] .vc-go .vc-stop { display: block; }
.vc-ring { position: absolute; inset: -8px; border-radius: 50%; border: 2px solid rgba(232, 80, 91, .45); opacity: 0; }
.vc[data-state="listen"] .vc-ring { animation: vcRing 1.6s ease-out infinite; }
@keyframes vcRing { 0% { transform: scale(.85); opacity: .9; } 100% { transform: scale(1.35); opacity: 0; } }
.vc[data-state="idle"] .vc-go { background: var(--ink); box-shadow: none; }
.vc[data-state="done"] .vc-go { background: var(--green); box-shadow: none; }
.vc-foot { margin: 12px 0 0; text-align: center; font-size: 13px; color: var(--dim); }
.vc-foot:empty { display: none; }
.fx-reduced .vc-wave i, .fx-reduced .vc-ring { animation: none !important; }
@media (prefers-reduced-motion: reduce) { .vc-wave i, .vc-ring { animation: none !important; } }

/* ---------------------------------------------------------------- 9.9.1 日历里每一项的「⋯」 */
.jplan-wrap { display: flex; align-items: center; border-top: 1px solid var(--line); background: var(--card); }
.jplan-wrap:first-child { border-top: 0; }
.jplan-wrap .jplan-row { flex: 1; min-width: 0; border-top: 0; }
.jmore { flex: none; width: 36px; height: 36px; margin-right: 6px; border: 0; border-radius: 50%; background: transparent; color: var(--dim);
  display: grid; place-items: center; cursor: pointer; }
.jmore:hover { background: var(--soft); color: var(--ink); }
.jmore { font-size: 18px; font-weight: 700; line-height: 1; }
.jrow .jmore { margin: 0 0 0 auto; }
.jtodo { gap: 4px; }
.jtodo-l { flex: 1; min-width: 0; display: flex; align-items: center; gap: 11px; cursor: pointer; }
.jtodo.done .jtodo-l b { text-decoration: line-through; color: var(--dim); }
.jm-list { display: grid; gap: 6px; margin: 12px 0 4px; }
.jm-act { display: flex; align-items: center; gap: 10px; height: 46px; padding: 0 14px; border: 1px solid var(--line); border-radius: 12px; background: var(--card);
  color: var(--ink); font: inherit; font-size: 15px; font-weight: 600; text-align: left; cursor: pointer; }
.jm-act .icon { width: 17px; height: 17px; color: var(--dim); }
.jm-act.danger { color: #d64553; }
.jm-act.danger .icon { color: #d64553; }

/* ---------------------------------------------------------------- 9.9.1 后台任务胶囊：切到别的页面，AI 还在干活 */
.job-pill { position: fixed; left: 50%; top: calc(62px + env(safe-area-inset-top)); z-index: 60; transform: translateX(-50%);
  display: inline-flex; align-items: center; gap: 8px; max-width: calc(100vw - 32px); height: 38px; padding: 0 6px 0 12px;
  border: 0; border-radius: 999px; background: var(--ink); color: var(--bg); box-shadow: 0 10px 28px rgba(9, 11, 22, .22);
  font: inherit; font-size: 13px; font-weight: 600; cursor: pointer; animation: jobIn .28s cubic-bezier(.2, .8, .2, 1) both; }
.job-pill[hidden] { display: none; }
.job-pill span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.job-pill em { font-style: normal; font-size: 11.5px; opacity: .7; }
.job-pill b { flex: none; height: 28px; padding: 0 11px; border-radius: 999px; background: rgba(255, 255, 255, .16); line-height: 28px; font-size: 12.5px; }
.job-pill.ok { background: var(--green); color: #fff; }
.job-pill.bad { background: #c93545; color: #fff; }
.job-spin { flex: none; width: 14px; height: 14px; border-radius: 50%; border: 2px solid currentColor; border-right-color: transparent; animation: jobSpin .8s linear infinite; }
.job-dot { flex: none; width: 8px; height: 8px; border-radius: 50%; background: currentColor; }
@keyframes jobSpin { to { transform: rotate(360deg); } }
@keyframes jobIn { from { opacity: 0; transform: translate(-50%, -8px); } to { opacity: 1; transform: translate(-50%, 0); } }
.fx-reduced .job-spin { animation-duration: 2.4s; }

/* ---------------------------------------------------------------- 9.9.1 首页「说一句」 */