/* ============================================================================
   home.css · 7.6 界面重排
   ----------------------------------------------------------------------------
   这一层解决的是「看着像模板」的问题，不换品牌色、不换材质：

     1. 一套刻度：间距 4 的倍数、圆角三档（8 / 12 / 16）、字号五档（13 / 14 / 16 / 20 / 28）。
        新写的组件只用这些变量，不再各写各的 11px、15px、23px。
     2. 列表优于卡片墙：设置、我的、实验室、笼位入口都是「分组列表」——
        一组一个实色面板，行高统一 52px，标签在左、值在右，行间一根细线。
     3. 承文字的面一律亚光实色；层级靠字号字重和留白，不靠阴影、渐变和装饰弧线。
        卡片不再悬停上浮 —— 不能点的东西不该假装能点。
     4. 触控：可点的行、图标按钮 ≥ 44px；手机底栏让出安全区；键盘弹起时收起底栏。

   动效只打 data-fx 属性，具体动画在 motion.css / fx.* 里（另一层负责）。
   规矩照旧：不用 !important（全局的 [hidden] 除外，那不是这里写的）、不用 :has、不用 color-mix。
   ========================================================================== */

:root {
  --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s5: 24px; --s6: 32px; --s7: 48px;
  --rad-s: 8px; --rad-m: 12px; --rad-l: 16px;
  --fs-xs: 13px; --fs-s: 14px; --fs-m: 16px; --fs-l: 20px; --fs-xl: 28px;
  --row-h: 52px;
  --tap: 44px;
}

/* ---------------------------------------------------------------------------
   0 · 全局基线
--------------------------------------------------------------------------- */

/* 页面标题：细体大字是营销页的写法，工具里要的是一眼能定位的中粗标题 */
h1, .h1row h1, .pread h1 {
  font-family: var(--f);
  font-weight: 650;
  font-size: var(--fs-xl);
  line-height: 1.2;
  letter-spacing: -.01em;
  color: var(--ink);
}

/* 图标按钮：点按区域不小于 44px（顶栏的主题、设置，日历翻月等） */
.ib { width: var(--tap); height: var(--tap); }
.ib .icon { width: 20px; height: 20px; }

/* 卡片不再悬停上浮：大多数卡片不能点，上浮是在暗示一个不存在的动作 */
.card { box-shadow: none; }
[data-theme="light"] .card,
:root:not([data-theme="dark"]) .card { box-shadow: none; }
@media (hover: hover) {
  .card:hover,
  [data-theme="light"] .card:hover,
  :root:not([data-theme="dark"]) .card:hover { box-shadow: none; border-color: var(--line); }
  :root[data-theme="dark"] .card:hover { border-color: var(--line); }
}

/* 触屏上小号按钮视觉 32px，点按区上下各补 6px 到 44px；不改外观 */
@media (pointer: coarse) {
  .btn.small { position: relative; }
  .btn.small::after { content: ""; position: absolute; inset: -6px 0; }
}

/* 文字链接样式的按钮：放在句子里的「重新读取」「前往笼位」 */
.linkish {
  display: inline; padding: 0 2px; margin: 0; border: 0; background: none;
  font: inherit; font-weight: 600; color: var(--blue); cursor: pointer;
  text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px;
}
@media (hover: hover) { .linkish:hover { color: var(--blue-d); } }

/* 页面头：标题 + 一行说明。所有一级页面同一个写法 */
.page-head { margin: 0 0 var(--s5); }
.page-head h1 { margin: 0; }
.page-sub {
  display: flex; flex-wrap: wrap; gap: 0 var(--s2);
  margin: var(--s1) 0 0; font-size: var(--fs-s); line-height: 1.6; color: var(--dim);
}
.page-sub span + span::before { content: "·"; margin-right: var(--s2); color: var(--dim2); }
.page-sec { margin-top: var(--s5); }

/* 空状态 / 出错：一句说明 + 一个出路，不是一片空白 */
.empty-state {
  padding: var(--s6) var(--s4); text-align: center; color: var(--dim);
  background: var(--card); border: 1px solid var(--line); border-radius: var(--rad-l);
}
.empty-state p { margin: 0 0 var(--s3); font-size: var(--fs-s); line-height: 1.65; }
.empty-state p:last-child { margin-bottom: 0; }

/* 载入中：灰条占位，不写「正在读取…」 */
.page-skel {
  display: grid; gap: var(--s3); padding: var(--s4);
  background: var(--card); border: 1px solid var(--line); border-radius: var(--rad-l);
}
.page-skel .sk { display: block; }

/* ---------------------------------------------------------------------------
   1 · 分组列表（设置 / 我的 / 实验室 / 笼位入口）
--------------------------------------------------------------------------- */
.set-group { margin: 0 0 var(--s6); }
.set-title {
  margin: 0 0 var(--s2) var(--s4);
  font-size: var(--fs-xs); font-weight: 650; letter-spacing: .03em; color: var(--dim);
}
.set-list {
  background: var(--card); border: 1px solid var(--line); border-radius: var(--rad-l);
  overflow: hidden;
}
.set-list + .set-list { margin-top: var(--s3); }
.set-list > * + *,
.set-kvs > .kv + .kv { border-top: 1px solid var(--line); }

.set-row, .lr {
  position: relative; display: flex; align-items: center; gap: var(--s3);
  width: 100%; min-height: var(--row-h); padding: var(--s3) var(--s4);
  margin: 0; border-radius: 0; background: none;
  font: inherit; font-size: 15px; text-align: left; color: var(--ink);
}
a.set-row, a.lr { color: var(--ink); text-decoration: none; }
button.set-row, button.lr, a.set-row, a.lr, label.set-row { cursor: pointer; }
.set-row > .icon, .lr > .icon { flex: none; width: 16px; height: 16px; color: var(--dim2); }
.set-row.danger, .lr.danger { color: var(--red); }
.set-row.danger .lr-ic, .lr.danger .lr-ic { color: var(--red); }
@media (hover: hover) {
  button.set-row:hover, a.set-row:hover, label.set-row:hover,
  button.lr:hover, a.lr:hover { background: var(--soft); }
}
button.set-row:active, a.set-row:active, button.lr:active, a.lr:active { background: var(--soft2); }
.set-row:focus-visible, .lr:focus-visible { outline: 2px solid var(--blue); outline-offset: -2px; }

.set-k { flex: 1; min-width: 0; display: grid; gap: 2px; }
.set-k b { font-weight: 650; }
.set-k small, .set-head small { color: var(--dim); line-height: 1.5; }
.set-v { flex: none; max-width: 60%; color: var(--dim); text-align: right; overflow-wrap: anywhere; }

.lr-ic {
  flex: none; width: 32px; height: 32px; display: grid; place-items: center;
  border-radius: var(--rad-s); background: var(--soft); color: var(--ink);
}
.lr-ic .icon { width: 18px; height: 18px; }
.animal-entry-icon { width: 38px; height: 38px; }
.animal-entry-icon .icon { width: 29px; height: 29px; stroke-width: 1.85; }
.bar a .nav-line-icon { width: 25px; height: 25px; stroke-width: 2.1; }
.lr-main { flex: 1; min-width: 0; display: grid; gap: 2px; }
.lr-main b { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lr-main small { color: var(--dim); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lr-val { flex: none; color: var(--dim); font-size: var(--fs-s); }
.lr-badge {
  flex: none; min-width: 24px; height: 24px; padding: 0 var(--s2); display: grid; place-items: center;
  border-radius: 999px; background: var(--ink); color: var(--bg);
  font-size: var(--fs-xs); font-weight: 700; font-variant-numeric: tabular-nums;
}
.lr-badge.late { background: var(--red); color: #fff; }
.lr.late .lr-ic { background: var(--red-s); color: var(--red); }
.lr.due .lr-ic { background: var(--amber-s); color: var(--amber-d); }

/* 键值：一行一对，标签左、值右（替掉原来一格一格的灰块） */
.kvs.set-kvs { display: block; }
.set-kvs .kv {
  display: flex; align-items: baseline; justify-content: space-between; gap: var(--s4);
  min-height: var(--row-h); padding: 14px var(--s4); border-radius: 0; background: none;
}
.set-kvs .kv .k { flex: none; font-size: 15px; color: var(--ink); }
.set-kvs .kv .v {
  margin: 0; min-width: 0; font-size: 15px; font-weight: 500; color: var(--dim);
  text-align: right; word-break: normal; overflow-wrap: anywhere;
}
.set-kvs:empty { display: none; }
.set-kvs > .set-note, .set-kvs > p { margin: 0; padding: 14px var(--s4); }

.set-head {
  display: flex; align-items: center; justify-content: space-between; gap: var(--s3); flex-wrap: wrap;
  padding: 14px var(--s4) var(--s1);
}
.set-head b { font-size: 15px; font-weight: 650; }
.set-list > .set-head + * { border-top: 0; }
.set-block { padding: var(--s3) var(--s4) var(--s4); }
.set-note { margin: 0 0 var(--s3); font-size: var(--fs-s); line-height: 1.65; color: var(--dim); }
.set-block > :last-child { margin-bottom: 0; }
.set-block .acts-r { gap: var(--s2); }
.set-block .fr { padding: var(--s3) 0; }
.set-block .drop2 { border-radius: var(--rad-m); }
.set-block .bar-note { margin-bottom: var(--s3); }
.set-block .set-kvs { margin: 0 calc(-1 * var(--s4)); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.set-block .set-kvs + .set-note { margin-top: var(--s3); }

/* 开关：iOS 那种。原生 checkbox，外观重画，键盘和读屏照常可用 */
.switch {
  flex: none; position: relative; width: 48px; height: 28px; margin: 0;
  -webkit-appearance: none; appearance: none; cursor: pointer;
  border-radius: 999px; background: var(--soft2); border: 1px solid var(--line);
  transition: background-color .18s ease;
}
.switch::before {
  content: ""; position: absolute; top: 2px; left: 2px; width: 22px; height: 22px;
  border-radius: 50%; background: #fff; box-shadow: 0 1px 2px rgba(0, 0, 0, .25);
  transition: transform .18s ease;
}
.switch:checked { background: var(--blue); border-color: transparent; }
.switch:checked::before { transform: translateX(20px); }
.switch:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }
:root[data-theme="dark"] .switch:checked::before { background: #101216; }

/* ---------------------------------------------------------------------------
   2 · 设置
--------------------------------------------------------------------------- */
#v-settings { max-width: 720px; margin: 0 auto; }
@media (min-width: 1000px) {
  /* styles.css 在宽屏把设置排成两列卡片 —— 高矮不一、像瀑布流。改回一列分组列表 */
  #v-settings { display: block; }
}
#v-settings .btn.back { margin-bottom: var(--s2); }
#v-settings > .set-group:last-child { margin-bottom: var(--s4); }
#v-settings .sig { text-align: center; margin-top: var(--s4); }
#mdBody .fr { flex-wrap: wrap; }
#mdBody .fn { flex: 1; min-width: 10rem; }

/* ---------------------------------------------------------------------------
   3 · 我的
--------------------------------------------------------------------------- */
#v-me { max-width: 720px; margin: 0 auto; }
.me-head { display: flex; align-items: center; gap: var(--s4); margin: 0 0 var(--s5); }
.me-avatar {
  flex: none; width: 56px; height: 56px; display: grid; place-items: center;
  border-radius: 50%; background: var(--ink); color: var(--bg);
  font-size: 24px; font-weight: 650;
}
.me-photo { display: grid; justify-items: center; gap: var(--s1); flex: none; }
.me-avatar { overflow: hidden; }
.me-avatar img { display: block; width: 100%; height: 100%; object-fit: cover; }
.me-avatar-change {
  min-height: var(--tap); padding: 0 var(--s1); border: 0; background: none;
  color: var(--ink); font: inherit; font-size: var(--fs-s); text-decoration: underline;
  text-underline-offset: 3px; cursor: pointer;
}
.me-avatar-change:focus-visible { outline: 2px solid var(--ink); border-radius: var(--rad-s); }
.me-id { min-width: 0; }
.me-id h1 { margin: 0; overflow-wrap: anywhere; }
.me-state {
  display: flex; align-items: center; gap: var(--s3); min-height: var(--tap);
  margin: 0 0 var(--s4); padding: var(--s2) var(--s4); border-radius: var(--rad-m);
  background: var(--blue-s); color: var(--blue-d); font-size: var(--fs-s); font-weight: 600;
}
.me-state.warn { background: var(--amber-s); color: var(--amber-d); }
.me-state span { flex: 1; }
.me-state .icon { width: 16px; height: 16px; }
.me-stats {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  background: var(--card); border: 1px solid var(--line); border-radius: var(--rad-l); overflow: hidden;
}
.me-stats a {
  display: grid; gap: 2px; justify-items: center; padding: var(--s4) var(--s2);
  color: var(--ink); text-decoration: none;
}
.me-stats a + a { border-left: 1px solid var(--line); }
.me-stats b { font-size: 24px; font-weight: 650; line-height: 1.2; font-variant-numeric: tabular-nums; }
.me-stats span { font-size: var(--fs-s); color: var(--dim); }
@media (hover: hover) { .me-stats a:hover { background: var(--soft); } }
#v-me .sig { text-align: center; margin-top: var(--s5); }

/* ---------------------------------------------------------------------------
   4 · 实验室
--------------------------------------------------------------------------- */
#v-lab { max-width: 720px; margin: 0 auto; }
.lab-links .lr-val { font-variant-numeric: tabular-nums; }

/* ---------------------------------------------------------------------------
   5 · 首页「今天」
   问候 + 3D 主视觉（空态才有）+ 待办 / 最近记录 + 常用问法 + 输入框。
--------------------------------------------------------------------------- */
.chat-main.is-empty,
[data-theme="dark"] .chat-main.is-empty { background: none; }

.chat-empty.today {
  flex: 1 0 auto; width: 100%; max-width: 48rem; margin: 0 auto;
  padding: var(--s4) var(--s2) var(--s3);
  display: flex; flex-direction: column; align-items: stretch; gap: var(--s5);
  text-align: left; justify-items: stretch;
}

/* 3D 主视觉的容器。尺寸由这里定，画布由动效层挂进来；
   还没挂上（或设备不支持）时显示标志本身，不留一块空白。 */
.fx-3d {
  position: relative; width: 100%; height: 200px; overflow: hidden;
  border-radius: var(--rad-l);
}
.fx-3d:empty { background: url("/assets/snappy.svg") center / 84px no-repeat; opacity: .92; }
.fx-3d canvas { display: block; width: 100%; height: 100%; }

.chat-empty .chat-warn {
  display: flex; align-items: center; gap: var(--s2); flex-wrap: wrap;
  margin: 0; padding: var(--s3) var(--s4); border: 0; border-radius: var(--rad-m);
  background: var(--amber-s); color: var(--amber-d); font-size: var(--fs-s); font-weight: 600;
}
.chat-empty .chat-warn .icon { width: 18px; height: 18px; }
.chat-empty .chat-warn span { flex: 1; min-width: 12rem; }
.chat-empty .chat-warn .linkish { color: var(--amber-d); }

.today-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr)); gap: var(--s5) var(--s4);
  align-items: start;
}
.today-sec { min-width: 0; }
.today-sec h2 {
  margin: 0 0 var(--s2) var(--s4);
  font-size: var(--fs-xs); font-weight: 650; letter-spacing: .03em; color: var(--dim);
}
.today-list {
  list-style: none; margin: 0; padding: 0;
  background: var(--card); border: 1px solid var(--line); border-radius: var(--rad-l); overflow: hidden;
}
.today-list > li + li { border-top: 1px solid var(--line); }
.today-row {
  display: flex; align-items: center; gap: var(--s3);
  min-height: 56px; padding: var(--s1) var(--s4) var(--s1) var(--s2); color: var(--ink);
}
a.today-row { padding-left: var(--s3); text-decoration: none; }
@media (hover: hover) { a.today-row:hover, .today-main:hover { background: var(--soft); } }
.today-row > .icon { flex: none; width: 16px; height: 16px; color: var(--dim2); }
.today-check {
  flex: none; width: var(--tap); height: var(--tap); display: grid; place-items: center; cursor: pointer;
}
.today-check input { width: 20px; height: 20px; margin: 0; accent-color: var(--blue); cursor: pointer; }
.today-main {
  flex: 1; min-width: 0; min-height: var(--tap); display: grid; align-content: center; gap: 2px;
  color: var(--ink); text-decoration: none; border-radius: var(--rad-s);
}
.today-main b {
  font-size: 15px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.today-main small { color: var(--dim); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.today-row.done .today-main b { text-decoration: line-through; color: var(--dim); }
.today-when {
  flex: none; padding: 2px var(--s2); border-radius: 999px;
  background: var(--soft); color: var(--dim); font-size: var(--fs-xs); font-weight: 650;
}
.today-when.late { background: var(--red-s); color: var(--red); }
.today-when.now { background: var(--blue-s); color: var(--blue-d); }
.today-thumb {
  flex: none; width: 40px; height: 40px; display: grid; place-items: center; overflow: hidden;
  border-radius: var(--rad-s); background: var(--soft); color: var(--dim);
}
.today-thumb img { width: 100%; height: 100%; object-fit: cover; }
.today-thumb .icon { width: 18px; height: 18px; }
.today-more {
  display: inline-flex; align-items: center; gap: var(--s1); min-height: var(--tap);
  padding: 0 var(--s4); font-size: var(--fs-s); font-weight: 600; color: var(--blue); text-decoration: none;
}
.today-more .icon { width: 14px; height: 14px; }
.today-note {
  margin: 0; padding: var(--s4); font-size: var(--fs-s); line-height: 1.7; color: var(--dim);
  background: var(--card); border: 1px solid var(--line); border-radius: var(--rad-l);
}
.today-skel {
  display: grid; gap: var(--s3); padding: var(--s4);
  background: var(--card); border: 1px solid var(--line); border-radius: var(--rad-l);
}
.today-skel i { display: block; height: 14px; border-radius: 7px; background: var(--soft2); }
.today-skel i:nth-child(2) { width: 72%; }
.today-skel i:nth-child(3) { width: 48%; }

/* 常用问法：几句纯文字，点一下就发出去。不是卡片、不是药丸 */
.today-asks {
  margin-top: auto; display: flex; flex-wrap: wrap; align-items: center; gap: 0 var(--s4);
  padding: 0 var(--s2);
}
.today-asks-label { font-size: var(--fs-xs); font-weight: 650; color: var(--dim); margin-right: var(--s1); }
.today-ask {
  display: inline-flex; align-items: center; min-height: var(--tap); padding: 0; margin: 0;
  border: 0; background: none; cursor: pointer;
  font: inherit; font-size: 15px; color: var(--blue); text-align: left;
}
@media (hover: hover) {
  .today-ask:hover { text-decoration: underline; text-underline-offset: 3px; }
}
.today-ask:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; border-radius: 4px; }
.today-advice { padding: var(--s3) var(--s4); background: var(--card); border: 1px solid var(--line); border-radius: var(--rad-l); }
.today-advice h2 { margin: 0 0 var(--s2); font-size: var(--fs-s); font-weight: 650; }
.today-advice ul { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s2); }
.today-advice li { display: flex; align-items: baseline; justify-content: space-between; gap: var(--s3); font-size: var(--fs-s); line-height: 1.5; }
.today-advice a, .today-advice button { flex: none; padding: 0; border: 0; background: none; color: var(--ink); font: inherit; font-weight: 600; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.today-advice a:focus-visible, .today-advice button:focus-visible { outline: 2px solid var(--ink); border-radius: 3px; }

/* 输入条：安静一点。一条细边的实色胶囊，聚焦时边加深，不再挂一圈大阴影 */
.chat-compose-label { display: none; }
.chat-main .chat-bar {
  gap: var(--s1); padding: 5px; margin: 0 0 var(--s2); min-height: 54px;
  border: 1px solid var(--line); border-radius: 999px; background: var(--card); box-shadow: none;
}
.chat-main .chat-bar:focus-within { border-color: var(--dim2); box-shadow: none; }
.chat-main .chat-bar input { min-width: 0; border: 0; background: transparent; padding: 9px 12px; height: 44px; }
.chat-main .chat-bar input:focus-visible { outline: none; }
.chat-main .chat-bar button { width: var(--tap); height: var(--tap); }
.chat-main .chat-bar #chatGo { background: var(--ink); color: var(--bg); }
.chat-main .chat-bar .chat-imgbtn {
  position: relative; flex: none; background: var(--soft); border: 0; border-radius: 50%; color: var(--dim);
}
.chat-main .chat-bar .chat-imgbtn .icon { width: 26px; height: 26px; stroke: none; }
.chat-img-plus {
  position: absolute; right: -2px; bottom: -1px; display: grid; place-items: center;
  width: 16px; height: 16px; border-radius: 50%; background: var(--cyan);
  color: #172b29; border: 2px solid var(--card); font: 600 13px/1 var(--f);
}
.chat-main #upQ { flex: none; max-height: 150px; overflow-y: auto; }
.chat-main .chat-attach {
  flex: none; max-height: 150px; overflow-y: auto;
  gap: 10px; padding: var(--s2) 10px; margin: 0 0 6px;
  background: var(--card); border: 1px solid var(--line); border-radius: var(--rad-l);
}

/* 空态下桌面端不留一行空的对话标题；手机上那一行还放着「对话记录」按钮 */
.chat-main.is-empty .chat-head h2 { visibility: hidden; }
@media (min-width: 861px) {
  .chat-main.is-empty .chat-head { display: none; }
}

/* 回答卡：跟列表同一种面，不加阴影 */
.chat-main .chat-it { box-shadow: none; }

/* ---- 侧栏 ---- */
.chat-sess.on { background: var(--soft2); box-shadow: inset 3px 0 0 var(--ink); }
.chat-sess-open { min-height: var(--tap); }
.chat-sess-more { width: 36px; min-height: var(--tap); }
.chat-side-empty { display: grid; gap: var(--s2); justify-items: start; margin: var(--s3) var(--s1); color: var(--dim); }
.chat-side-empty .icon { width: 22px; height: 22px; color: var(--dim2); }
.chat-side-empty p { margin: 0; font-size: var(--fs-s); line-height: 1.65; }
#chatFind { min-height: 40px; }

@media (max-width: 860px) {
  .chat-side { visibility: hidden; }
  .side-on .chat-side { visibility: visible; }
}
@media (max-width: 700px) {
  
  .fx-3d { order: -1; height: 160px; }
  
  .chat-empty.today { padding-top: var(--s2); gap: var(--s4); }
}
@media (max-height: 560px) {
  .fx-3d { height: 120px; }
}

/* ---------------------------------------------------------------------------
   6 · 实验日志：紧凑月历 + 选中那天的内容
--------------------------------------------------------------------------- */
#v-journal { max-width: 1040px; margin: 0 auto; }
.jlayout { display: grid; gap: var(--s5); align-items: start; }
@media (min-width: 900px) {
  .jlayout { grid-template-columns: 360px minmax(0, 1fr); }
  .jcal { position: -webkit-sticky; position: sticky; top: 0; }
}
.jcal {
  padding: var(--s3) var(--s3) var(--s4);
  background: var(--card); border: 1px solid var(--line); border-radius: var(--rad-l);
}
.jnav { display: flex; align-items: center; gap: var(--s1); margin: 0 0 var(--s2); padding-left: var(--s1); }
.jtitle { flex: 1; display: grid; align-items: start; justify-items: start; gap: 0; }
.jtitle b { font-size: 17px; font-weight: 650; }
.jtitle small { color: var(--dim); }
.jnav .btn.small { height: 32px; padding: 0 var(--s3); border-color: var(--line); }
.jweek, .jgrid { gap: 2px; }
.jweek { margin: 0 0 var(--s1); }
.jweek span { font-size: var(--fs-xs); color: var(--dim); opacity: 1; }
.jweek span:nth-child(6), .jweek span:nth-child(7) { color: var(--dim2); opacity: 1; }
.jd {
  aspect-ratio: auto; height: var(--tap); min-height: var(--tap); gap: 3px;
  border-radius: var(--rad-m); font-size: 15px; box-shadow: none;
}
.jd.has { background: none; }
.jd.has b { font-weight: 700; }
.jd.wk b { color: var(--dim); }
.jd .jmarks { display: flex; gap: 3px; height: 5px; }
.jd .jmarks i, .jlegend i {
  display: inline-block; width: 5px; height: 5px; padding: 0; border-radius: 50%;
  font-size: 0; background: var(--blue);
}
.jd .jmarks i.jm-todo, .jlegend i.jm-todo { background: var(--amber); }
.jd.today { box-shadow: inset 0 0 0 1.5px var(--blue); }
.jd.on, .jd.on:hover { background: var(--ink); color: var(--bg); box-shadow: none; }
.jd.on b { color: var(--bg); }
.jd.on .jmarks i { background: var(--bg); }
@media (hover: hover) {
  .jd:not(.pad):not(.on):hover { background: var(--soft); box-shadow: none; }
  .jd.today:not(.on):hover { box-shadow: inset 0 0 0 1.5px var(--blue); }
}
.jlegend { display: flex; gap: var(--s4); margin: var(--s3) var(--s1) 0; font-size: var(--fs-xs); color: var(--dim); }
.jlegend i { margin-right: 6px; vertical-align: middle; }

.jday { min-width: 0; }
.jday-head { display: flex; align-items: baseline; gap: var(--s3); flex-wrap: wrap; margin: var(--s1) 0 var(--s3); }
.jday-head h2 { margin: 0; font-size: var(--fs-l); font-weight: 650; }
.jday-head small { color: var(--dim); }
.jsec {
  margin: 0 0 var(--s4); padding: var(--s1) var(--s4) var(--s3);
  background: var(--card); border: 1px solid var(--line); border-radius: var(--rad-l);
}
.jsec-head {
  display: flex; align-items: center; justify-content: space-between; gap: var(--s3); flex-wrap: wrap;
  padding: var(--s3) 0 var(--s1);
}
.jsec-head h3 { margin: 0; font-size: 15px; font-weight: 650; }
.jsec-head small { color: var(--dim); }
.jsec-head .reading-switch { width: auto; border-bottom: 0; }
.jsec-head .reading-switch button { flex: none; padding: 10px var(--s3); }
.jsec .jrows { margin: 0; }
.jsec .jrow { min-height: 64px; }
.jplan {
  display: inline-flex; align-items: center; gap: 6px; min-height: var(--tap); margin-top: var(--s1);
  padding: 0; border: 0; background: none; cursor: pointer;
  font: inherit; font-size: var(--fs-s); font-weight: 600; color: var(--blue); text-decoration: none;
}
.jplan .icon { width: 16px; height: 16px; }
.jempty, .jnote { margin: var(--s2) 0; font-size: var(--fs-s); line-height: 1.65; color: var(--dim); }
.jexport .acts-r { margin: var(--s2) 0; gap: var(--s2); }
.jtodo { min-height: var(--row-h); }
.jtodo input { width: 20px; height: 20px; }
.jday .empty-state { padding: var(--s5) var(--s4); }

/* ---------------------------------------------------------------------------
   7 · 笼位首页底部入口：三行列表，替掉比例别扭的三块
--------------------------------------------------------------------------- */
.tk-links { margin-top: var(--s5); }

/* ---------------------------------------------------------------------------
   8 · 手机：底栏与键盘
--------------------------------------------------------------------------- */
@media (max-width: 760px) {
  h1, .h1row h1, .pread h1 { font-size: 24px; }
  .page-head { margin-bottom: var(--s4); }
  .set-group { margin-bottom: var(--s5); }
  /* 键盘弹起：按可视区域定高（app.js 写 --vvh），底栏和「问一句」先收起来，给输入框让位 */
  body.kb-open { height: var(--vvh, 100dvh); }
  body.kb-open .bar, body.kb-open .askhere { display: none; }
}
@media (max-width: 380px) {
  .set-row, .lr { padding-left: var(--s3); padding-right: var(--s3); }
  .me-stats b { font-size: 21px; }
}

/* ---------------------------------------------------------------------------
   7.1.0 · 登录 / 注册卡
   之前是裸表单 + 藏蓝 backdrop，整屏泛蓝。现在：中性压暗 + 亚光卡 +
   词标 Snap 粗 / Lab 细（和首页同一个写法），输入框收成软胶囊。
--------------------------------------------------------------------------- */
.mo.login { border-radius: 20px; }
.mo.login form { padding: 38px 34px 20px; }
.mo.login .lmark {
  width: 74px; height: 74px; margin: 0 auto 14px;
  border-radius: 26%;
  box-shadow: var(--matte-sh, 0 1px 2px rgb(0 0 0 / 5%));
}
.mo.login h2.login-brand {
  margin: 0 0 6px; font-family: var(--ui-display, var(--f));
  font-size: 30px; font-weight: 300; letter-spacing: .01em;
  color: var(--k-ink, var(--ink));
}
.mo.login h2.login-brand b { font-weight: 800; }
.mo.login #loginTip { margin: 0 0 18px; font-size: 13.5px; }
.mo.login input {
  margin: 5px 0; padding: 12px 16px;
  border: 1px solid var(--k-line, var(--line)); border-radius: 12px;
  background: var(--soft); font-size: 15px;
  transition: border-color .16s ease, box-shadow .16s ease, background-color .16s ease;
}
.mo.login input:focus {
  border-color: var(--k-ink, var(--dim2)); background: var(--card);
  box-shadow: var(--matte-sh2, 0 4px 16px rgb(0 0 0 / 8%));
}
.mo.login .btn.block {
  margin-top: 14px; padding: 12px 16px; border-radius: 12px;
  font-size: 15px; font-weight: 650; letter-spacing: .02em;
}
/* 报错收成胶囊，不要一行裸红字 */
.mo.login .err {
  margin: 10px 0 2px; padding: 8px 14px; border-radius: 10px;
  background: var(--red-s, #FDECEA); color: var(--red); font-weight: 600;
}
.mo.login .swap { margin: 14px 0 0; }
.mo.login .swap button {
  color: var(--dim); font-size: 13.5px; font-weight: 550;
  padding: 4px 10px; border-radius: 999px;
  transition: color .16s ease, background-color .16s ease;
}
@media (hover: hover) {
  .mo.login .swap button:hover { color: var(--k-ink, var(--ink)); background: var(--soft); }
}
.mo.login .sig { margin-top: 18px; font-size: 11.5px; letter-spacing: .04em; }

/* ---------------------------------------------------------------- 7.6 智能体新字段 */

/* 今天要留意：一排实色小签，点了就问 */
.today-brief { display: flex; flex-wrap: wrap; gap: 8px; margin: 4px 0 16px; }
.brief-chip {
  min-height: 36px; padding: 6px 14px; border-radius: 999px; border: 1px solid var(--line);
  background: var(--card); color: var(--ink); font: inherit; font-size: 14px; cursor: pointer;
}
.brief-chip:hover { border-color: var(--dim2); }
.brief-chip.brief-overdue, .brief-chip.brief-failed { border-color: var(--red); color: var(--red); }
.brief-chip.brief-today, .brief-chip.brief-weigh { border-color: var(--amber-d); color: var(--amber-d); }

/* 未配模型但离线路由在：提示降一级，不用警告色铺底 */
.chat-empty .chat-warn.soft { background: var(--card); color: var(--dim); border: 1px solid var(--line); }
.chat-empty .chat-warn.soft .linkish { color: inherit; }

/* 多步计划的步骤条 */
.chat-steps { list-style: none; margin: 0 0 12px; padding: 0; display: flex; flex-wrap: wrap; gap: 6px 16px; }
.chat-steps li { display: flex; align-items: center; gap: 8px; font-size: 14px; min-height: 28px; }
.chat-steps .n {
  width: 22px; height: 22px; border-radius: 50%; display: inline-grid; place-items: center;
  font-size: 12px; font-weight: 600; background: var(--line); color: var(--ink);
}
.chat-steps .st-ok .n { background: var(--green); color: #fff; }
.chat-steps .st-ask .n { background: var(--amber-d); color: #fff; }
.chat-steps .st-warn .n { background: var(--red); color: #fff; }
.chat-steps .s { font-size: 12px; color: var(--dim); opacity: .8; }

/* 内置规则回答的小字 */
.chat-route { margin: 8px 0 0; font-size: 12px; color: var(--dim); opacity: .7; }

/* 传输区解锁 */
.t-lock { display: flex; gap: 8px; align-items: center; }
.t-lock input { flex: 1; min-width: 0; min-height: var(--tap, 44px); padding: 0 12px; border-radius: 10px;
  border: 1px solid var(--line); background: var(--card); color: var(--ink); font: inherit; }
.t-lock[hidden], #tDrop[hidden] { display: none; }

/* ---------------------------------------------------------------- 7.6.1 手机底栏 */
@media (max-width: 760px) {
  /* 底栏只有 4 项，refine.css 写的是 5 列，右边空出一格、整排挤在左边 */
  .bar { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .bar a { justify-content: center; gap: 3px; }
  /* 鼠标是 28×24 的图，别的是 22px 的线稿 —— 统一图标盒子，文字才在同一条线上 */
  .bar a .icon, .bar a .nav-mouse { width: 24px; height: 24px; flex: none; object-fit: contain; }
  .bar a .nav-line-icon { width: 27px; height: 27px; stroke-width: 2.1; }
  .bar a span { line-height: 1.2; }
  /* 「问一句」浮在右下角：给页面底部留出它的高度，最后一行不再被它盖住 */
  body:has(#askHere:not([hidden])) main {
    padding-bottom: calc(var(--bar) + 76px + env(safe-area-inset-bottom, 0px));
  }
}

/* 底栏：中文界面叫 对话 / 实验 / 笼位 / 我的，英文不变。两份都在 DOM 里，按 html[lang] 显示一份 */
.bar a b { font-weight: inherit; }
html[lang="en"] .bar a b.zh, html:not([lang="en"]) .bar a b.en { display: none; }

/* 7.6.2：首页不再放 3D，问候独占一行；3D 挪到实验页标题下面 */

.lab-hero { height: 220px; margin: 0 0 var(--s5); }
@media (max-width: 700px) { .lab-hero { height: 170px; margin-bottom: var(--s4); } }
.chat-compose-label { display: none; }

/* ---------------------------------------------------------------- 8.0 首页：传统 agent 空态 */
.chat-empty.agent-home {
  max-width: 640px; margin: 0 auto; padding: var(--s7) 0 var(--s4);
  display: flex; flex-direction: column; gap: var(--s5); align-items: stretch;
}

/* 标志本身是深色的：垫一块白底，深浅两套主题下都看得清（和左上角品牌一致） */

.agent-tabs {
  display: flex; gap: var(--s2); overflow-x: auto; scrollbar-width: none;
  padding: 2px 2px var(--s3); margin: 0 -2px;
}
.agent-tabs::-webkit-scrollbar { display: none; }
.agent-tab {
  flex: none; display: inline-flex; align-items: center; gap: 6px; min-height: 36px; padding: 0 14px;
  border-radius: 999px; border: 1px solid var(--line); background: var(--card); color: var(--dim);
  font: inherit; font-size: var(--fs-s); font-weight: 600; cursor: pointer;
}
.agent-tab .icon { width: 16px; height: 16px; }
.agent-tab.on { background: var(--ink); border-color: var(--ink); color: var(--card); }

@media (hover: hover) {  .agent-tab:not(.on):hover { color: var(--ink); } }
@media (max-width: 700px) {
  .chat-empty.agent-home { padding-top: var(--s6); gap: var(--s4); }
  
}

/* ---------------------------------------------------------------- 8.0 回执卡片 */
.act-card { border: 1px solid var(--line); border-radius: var(--rad-m); background: var(--card); overflow: hidden; max-width: 460px; }
.act-card.wait { border-color: var(--amber); }
.ac-head { display: flex; align-items: center; gap: var(--s2); padding: var(--s3) var(--s4); border-bottom: 1px solid var(--line); }
.ac-ic { width: 28px; height: 28px; border-radius: 8px; display: grid; place-items: center; background: var(--soft); color: var(--ink); }
.ac-ic .icon { width: 16px; height: 16px; }
.ac-head b { font-size: var(--fs-m); }
.ac-state { margin-left: auto; display: inline-flex; align-items: center; gap: 4px; font-size: var(--fs-xs); font-weight: 600; color: var(--amber-d); }
.act-card.done .ac-state { color: var(--green); }
.act-card.dead .ac-state { color: var(--dim); }
.ac-state .icon { width: 14px; height: 14px; }
.ac-body { padding: var(--s4); display: flex; flex-direction: column; gap: var(--s3); }
.ac-row { display: flex; align-items: center; gap: var(--s3); flex-wrap: wrap; }
.ac-chips { display: flex; flex-wrap: wrap; gap: var(--s2); }
.ac-big { font-size: 22px; font-weight: 700; letter-spacing: -.01em; }
.ac-chips .ac-big { padding: 4px 12px; border-radius: 8px; background: var(--soft); }
.ac-meta, .ac-field { color: var(--dim); font-size: var(--fs-s); }
.ac-line { margin: 0; display: flex; align-items: center; gap: 6px; color: var(--dim); font-size: var(--fs-s); }
.ac-line .icon { width: 15px; height: 15px; }
.ac-line b { color: var(--ink); }
.ac-tag { font-weight: 700; min-width: 3.5em; }
.ac-move .icon { width: 16px; height: 16px; color: var(--dim2); }
.ac-from { color: var(--dim); }
.ac-to { color: var(--ink); }
.ac-num { font-size: 30px; font-weight: 700; margin-left: auto; }
.ac-num small, .ac-cell small { font-size: 13px; font-weight: 600; color: var(--dim); margin-left: 2px; }
.ac-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: var(--s2); }
.ac-cell { display: flex; flex-direction: column; padding: 8px 10px; border-radius: 8px; background: var(--soft); }
.ac-cell b { font-size: 18px; }
.ac-date { display: flex; flex-direction: column; align-items: center; justify-content: center; width: 56px; height: 56px;
  border-radius: 12px; background: var(--soft); font-size: 22px; font-weight: 700; line-height: 1; }
.ac-date small { font-size: 12px; font-weight: 600; color: var(--dim); margin-bottom: 3px; }
.ac-when { display: flex; flex-direction: column; gap: 2px; }
.ac-when b { font-size: var(--fs-m); }
.ac-when span { color: var(--dim); font-size: var(--fs-s); }
.ac-foot { display: flex; justify-content: flex-end; gap: var(--s2); padding: var(--s3) var(--s4); border-top: 1px solid var(--line); }
.ac-foot button { min-height: 40px; padding: 0 18px; }
.ac-dead { margin: 0; padding: var(--s3) var(--s4); border-top: 1px solid var(--line); color: var(--dim); font-size: var(--fs-s); }
.act-card .chat-yes { background: var(--ink); color: var(--card); }
/* 回执卡片自己就是一张卡，外面不再套一层气泡 */
.chat-it.has-card { background: transparent; border: 0; box-shadow: none; padding: 0; }
.chat-it.has-card .act-card + .act-card { margin-top: var(--s3); }

/* ---------------------------------------------------------------- 9.2 首页：问候、现在、功能方块、示例 */
.chat-empty.agent-home { max-width: 760px; padding-top: var(--s6); gap: var(--s5); }

.agent-hi { display: grid; gap: 2px; min-width: 0; }
.agent-hi small { font-size: 13px; color: var(--dim); font-weight: 600; font-variant-numeric: tabular-nums; }

.chat-empty.agent-home .home-h { margin: 0 0 var(--s2); font-size: 13px; line-height: 1.4; font-weight: 700; color: var(--dim); letter-spacing: .02em; }

@keyframes hnPulse { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: .35; transform: scale(.75); } }

.home-tiles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.home-tile { display: grid; justify-items: start; gap: 2px; padding: 14px; border: 1px solid var(--line); border-radius: var(--rad-m); background: var(--card);
  color: var(--ink); text-decoration: none; font: inherit; text-align: left; cursor: pointer;
  transition: border-color .2s, box-shadow .2s, transform .2s cubic-bezier(.2, .8, .2, 1); }
.home-tile > span { width: 38px; height: 38px; margin-bottom: 8px; border-radius: 11px; display: grid; place-items: center; background: var(--ht-s); color: var(--ht); }
.home-tile > span .icon { width: 20px; height: 20px; }
.home-tile b { font-size: 15px; font-weight: 700; }
.home-tile small { font-size: 12px; color: var(--dim); }
.home-tile.t-cam { --ht: #2f6fe4; --ht-s: #e8f0fd; }
.home-tile.t-bench { --ht: #7a4fd6; --ht-s: #f0eafc; }
.home-tile.t-design { --ht: #d0602a; --ht-s: #fcede4; }
.home-tile.t-cal { --ht: #c43d6b; --ht-s: #fbe8ef; }
[data-theme="dark"] .home-tile.t-cam { --ht: #8db3ff; --ht-s: rgba(80, 130, 240, .18); }
[data-theme="dark"] .home-tile.t-bench { --ht: #b9a0f5; --ht-s: rgba(140, 100, 230, .2); }
[data-theme="dark"] .home-tile.t-design { --ht: #f2a077; --ht-s: rgba(220, 110, 50, .2); }
[data-theme="dark"] .home-tile.t-cal { --ht: #f08fb1; --ht-s: rgba(210, 70, 120, .2); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .home-tile.t-cam { --ht: #8db3ff; --ht-s: rgba(80, 130, 240, .18); }
  :root:not([data-theme="light"]) .home-tile.t-bench { --ht: #b9a0f5; --ht-s: rgba(140, 100, 230, .2); }
  :root:not([data-theme="light"]) .home-tile.t-design { --ht: #f2a077; --ht-s: rgba(220, 110, 50, .2); }
  :root:not([data-theme="light"]) .home-tile.t-cal { --ht: #f08fb1; --ht-s: rgba(210, 70, 120, .2); }
}
@media (hover: hover) {
  .home-tile:hover { border-color: var(--dim2); box-shadow: 0 6px 18px rgba(0, 0, 0, .06); transform: translateY(-2px); }
}
.home-tile:active { transform: scale(.98); }
@media (max-width: 700px) {
  .chat-empty.agent-home { padding-top: var(--s5); gap: var(--s4); }
  
  
  
  .home-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .home-tile { grid-template-columns: 36px minmax(0, 1fr); column-gap: 10px; align-items: center; padding: 12px; }
  .home-tile > span { grid-row: span 2; width: 36px; height: 36px; margin: 0; }
  .home-tile b { font-size: 14.5px; }
  .home-tile small { font-size: 11.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%; }
  
  
  
  
}

@media (prefers-reduced-motion: reduce) {  .home-tile { transition: none; } }

/* ---------------------------------------------------------------- 9.3 首页提示、进度、输入框提示轮换 */

.hn-tips { display: flex; flex-direction: column; border: 1px solid var(--line); border-radius: var(--rad-m); background: var(--card); overflow: hidden; }
.hn-tip { display: flex; align-items: center; gap: 12px; padding: 10px 14px; border-top: 1px solid var(--line); color: var(--ink); text-decoration: none; transition: background .2s; }
.hn-tip:first-child { border-top: 0; }
.hn-tip > .icon { width: 15px; height: 15px; color: var(--dim2); flex: none; transition: transform .2s; }
.hn-tip-ic { flex: none; width: 30px; height: 30px; border-radius: 9px; display: grid; place-items: center; background: var(--soft); color: var(--ink); }
.hn-tip-ic .icon { width: 16px; height: 16px; }
.hn-tip.t-amber .hn-tip-ic { background: var(--amber-s); color: var(--amber-d); }
.hn-tip-main { flex: 1; min-width: 0; display: grid; gap: 1px; }
.hn-tip-main b { font-size: 14.5px; font-weight: 650; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hn-tip-main small { font-size: 12.5px; color: var(--dim); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (hover: hover) { .hn-tip:hover { background: var(--soft); } .hn-tip:hover > .icon { transform: translateX(2px); } }

#chatIn::placeholder { transition: opacity .25s ease, transform .25s ease; }
#chatIn.ph-out::placeholder { opacity: 0; }

/* ---------------------------------------------------------------- 9.5 对话首页：主卡 + 现在 + 提示胶囊 + 建议卡 */
.chat-empty.agent-home.hx { max-width: 780px; gap: 22px; padding-top: var(--s5); }

/* 主卡：柔和的靛蓝→淡紫渐变（实色，不用毛玻璃），问候、Snappy、四个常用操作 */

/* 提示：一行小胶囊，点了直达 */
.hx-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.hx-chip { display: inline-flex; align-items: center; gap: 7px; max-width: 100%; min-height: 34px; padding: 0 13px; border-radius: 999px;
  border: 1px solid var(--line); background: var(--card); color: var(--ink); text-decoration: none; font-size: 13.5px; font-weight: 600;
  transition: border-color .2s, background .2s, transform .2s; }
.hx-chip span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hx-chip .icon { flex: none; width: 15px; height: 15px; color: var(--dim); }
.hx-chip.t-amber { border-color: color-mix(in srgb, var(--amber) 35%, var(--line)); background: var(--amber-s); color: var(--amber-d); }
.hx-chip.t-amber .icon { color: var(--amber-d); }
@media (hover: hover) { .hx-chip:hover { border-color: var(--dim2); transform: translateY(-1px); } }

/* 「现在」卡片跟主卡同一套圆角 */

/* 试着问：分类胶囊 + 双列建议卡 */
.hx .agent-ex { display: grid; gap: 10px; }
.hx .agent-ex .home-h { margin: 0; }
.hx .agent-tabs { padding-bottom: 2px; }
.hx-sugg { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.hx-q { display: flex; align-items: center; gap: 12px; min-width: 0; min-height: 58px; padding: 10px 14px; border: 1px solid var(--line); border-radius: 18px;
  background: var(--card); color: var(--ink); font: inherit; text-align: left; cursor: pointer;
  transition: border-color .2s, box-shadow .2s, transform .2s cubic-bezier(.2, .8, .2, 1); }
.hx-q-ic { flex: none; width: 32px; height: 32px; border-radius: 10px; display: grid; place-items: center; background: var(--soft); color: var(--dim); }
.hx-q-ic .icon { width: 16px; height: 16px; }
.hx-q-t { flex: 1; min-width: 0; font-size: 14.5px; line-height: 1.4; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.hx-q > .icon { flex: none; width: 15px; height: 15px; color: var(--dim2); transition: transform .2s, color .2s; }
@media (hover: hover) {
  .hx-q:hover { border-color: color-mix(in srgb, var(--blue) 35%, var(--line)); box-shadow: 0 6px 18px rgba(20, 24, 40, .06); transform: translateY(-1px); }
  .hx-q:hover > .icon { transform: translateX(2px); color: var(--blue); }
  .hx-q:hover .hx-q-ic { background: var(--blue-s); color: var(--blue); }
}
.hx-q:active { transform: scale(.98); }

/* 深色 */

/* 手机：主卡紧凑，四个操作图标在上、字在下 */
@media (max-width: 700px) {
  .chat-empty.agent-home.hx { gap: 18px; padding-top: var(--s4); }
  
  
  
  
  
  
  
  
  .hx-chips { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin-left: -16px; margin-right: -16px; padding: 0 16px 2px; }
  .hx-chips::-webkit-scrollbar { display: none; }
  .hx-chip { flex: none; max-width: 78%; }
  .hx-sugg { grid-template-columns: minmax(0, 1fr); gap: 8px; }
  .hx-q { min-height: 52px; border-radius: 16px; }
}

/* ---------------------------------------------------------------- 9.6 新手教程 */

/* ---------------------------------------------------------------- 9.7 新手导览：聚光灯 + 说明卡 */
.tr { position: fixed; inset: 0; z-index: 3000; pointer-events: none; opacity: 0; transition: opacity .25s ease; }
.tr.on { opacity: 1; }
.tr-block { position: absolute; inset: 0; pointer-events: auto; }
.tr.pass .tr-block { pointer-events: none; }
.tr-hole { position: fixed; pointer-events: none; box-shadow: 0 0 0 200vmax rgba(9, 11, 22, .62);
  transition: left .45s cubic-bezier(.3, .8, .2, 1), top .45s cubic-bezier(.3, .8, .2, 1), width .45s cubic-bezier(.3, .8, .2, 1),
    height .45s cubic-bezier(.3, .8, .2, 1), border-radius .45s ease; }
.tr.dim-all .tr-hole { box-shadow: 0 0 0 200vmax rgba(9, 11, 22, .7); }
.tr-ring { position: fixed; pointer-events: none; border: 2px solid #8ea2ff;
  transition: left .45s cubic-bezier(.3, .8, .2, 1), top .45s cubic-bezier(.3, .8, .2, 1), width .45s cubic-bezier(.3, .8, .2, 1),
    height .45s cubic-bezier(.3, .8, .2, 1), border-radius .45s ease, opacity .2s;
  animation: trBreath 2s ease-in-out infinite; }
.tr-ring.none { opacity: 0; }
@keyframes trBreath {
  0%, 100% { box-shadow: 0 0 0 0 rgba(142, 162, 255, .55), 0 0 18px rgba(142, 162, 255, .35); }
  50% { box-shadow: 0 0 0 7px rgba(142, 162, 255, 0), 0 0 26px rgba(142, 162, 255, .5); }
}
.tr.pass .tr-ring { border-color: #ffd166; animation-name: trTap; }
@keyframes trTap {
  0%, 100% { box-shadow: 0 0 0 0 rgba(255, 209, 102, .6); transform: scale(1); }
  50% { box-shadow: 0 0 0 10px rgba(255, 209, 102, 0); transform: scale(1.03); }
}
.tr-card { position: fixed; width: min(360px, calc(100vw - 24px)); pointer-events: auto; border-radius: 20px; background: var(--card); color: var(--ink);
  box-shadow: 0 24px 60px rgba(8, 10, 24, .35), 0 0 0 1px rgba(255, 255, 255, .06);
  transition: left .45s cubic-bezier(.3, .8, .2, 1), top .45s cubic-bezier(.3, .8, .2, 1), opacity .2s; }
.tr-card.busy { opacity: .0; }
.tr-card.tr-swap .tr-in { animation: trIn .35s cubic-bezier(.2, .8, .2, 1) both; }
@keyframes trIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.tr-card.tr-nudge .tr-in { animation: trNudge .4s ease; }
@keyframes trNudge { 0%, 100% { transform: none; } 25% { transform: translateX(-5px); } 75% { transform: translateX(5px); } }
.tr-in { padding: 14px 16px 14px; display: grid; gap: 8px; }
.tr-top { display: flex; align-items: center; gap: 8px; }
.tr-chip { font-size: 11.5px; font-weight: 750; padding: 3px 9px; border-radius: 999px; background: var(--blue-s); color: var(--blue); }
.tr-n { margin-left: auto; font-size: 12.5px; color: var(--dim); font-variant-numeric: tabular-nums; }
.tr-n b { color: var(--ink); font-size: 14px; }
.tr-x { width: 28px; height: 28px; border: 0; border-radius: 999px; background: transparent; color: var(--dim); display: grid; place-items: center; cursor: pointer; }
.tr-x .icon { width: 15px; height: 15px; }
@media (hover: hover) { .tr-x:hover { background: var(--soft); color: var(--ink); } }
.tr-prog { height: 3px; border-radius: 999px; background: var(--soft2); overflow: hidden; }
.tr-prog i { display: block; height: 100%; width: 0; border-radius: inherit; background: var(--blue); transition: width .45s cubic-bezier(.2, .8, .2, 1); }
.tr-in h3 { margin: 4px 0 0; font-size: 17px; font-weight: 800; letter-spacing: -.01em; }
.tr-in p { margin: 0; font-size: 14px; line-height: 1.6; color: var(--dim); }
.tr-media { border-radius: 14px; overflow: hidden; background: linear-gradient(160deg, #eef1fd, #f3efff); display: grid; place-items: center; padding: 10px 0 0; max-height: 240px; }
.tr-media img { width: 62%; border-radius: 12px 12px 0 0; box-shadow: 0 8px 24px rgba(30, 40, 90, .2); display: block; }
.tr-acts { display: flex; align-items: center; gap: 8px; margin-top: 4px; }
.tr-skip { margin-right: auto; border: 0; background: transparent; color: var(--dim); font: inherit; font-size: 13px; cursor: pointer; padding: 6px 2px; }
.tr-skip:empty { visibility: hidden; }
@media (hover: hover) { .tr-skip:hover { color: var(--ink); } }
.tr-acts .btn { min-height: 38px; padding: 0 14px; font-size: 14px; }
.tr-acts .btn .icon { width: 14px; height: 14px; }
.tr-wait { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 700; color: #b7791f; }
.tr-wait .icon { width: 14px; height: 14px; animation: trPoint 1s ease-in-out infinite; }
@keyframes trPoint { 0%, 100% { transform: translateX(0); } 50% { transform: translateX(3px); } }
.tr-arrow { position: absolute; width: 14px; height: 14px; background: var(--card); transform: rotate(45deg); border-radius: 3px; display: none; }
.tr-arrow.a-top { display: block; top: -6px; margin-left: -7px; }
.tr-arrow.a-bottom { display: block; bottom: -6px; margin-left: -7px; }
.tr-arrow.a-left { display: block; left: -6px; margin-top: -7px; }
.tr-arrow.a-right { display: block; right: -6px; margin-top: -7px; }
.tr-done { position: fixed; left: 50%; bottom: calc(var(--bar, 70px) + 24px); z-index: 3001; transform: translateX(-50%); display: inline-flex; align-items: center; gap: 8px;
  padding: 10px 16px; border-radius: 999px; background: var(--ink); color: var(--bg); font-size: 14px; font-weight: 600; box-shadow: 0 10px 30px rgba(0, 0, 0, .25);
  animation: trIn .3s ease both; transition: opacity .4s, transform .4s; }
.tr-done .icon { width: 16px; height: 16px; }
.tr-done.off { opacity: 0; transform: translate(-50%, 8px); }
@media (max-width: 639px) { .tr-card { border-radius: 18px; } .tr-in { padding: 12px 14px; } .tr-in h3 { font-size: 16px; } }
.fx-reduced .tr-hole, .fx-reduced .tr-ring, .fx-reduced .tr-card { transition: none; }
.fx-reduced .tr-ring, .fx-reduced .tr-card.tr-swap .tr-in { animation: none; }
@media (prefers-reduced-motion: reduce) {
  .tr-hole, .tr-ring, .tr-card { transition: none; }
  .tr-ring, .tr-card.tr-swap .tr-in, .tr-wait .icon { animation: none; }
}

/* 导览中心 */
.gh { max-width: 1000px; margin: 0 auto; padding-bottom: 110px; display: grid; grid-template-columns: minmax(0, 1fr); gap: 18px; }
.gh > * { min-width: 0; }
.gh-hero { position: relative; overflow: hidden; display: grid; gap: 16px; padding: 24px; border-radius: 26px;
  background: linear-gradient(135deg, #eef1fd 0%, #f3efff 52%, #fbfbfe 100%); border: 1px solid #e3e6f6; }
.gh-hero small { font-size: 13px; font-weight: 700; color: #5b6bd8; }
.gh-hero h1 { margin: 4px 0 6px; font-size: 28px; line-height: 1.2; font-weight: 800; letter-spacing: -.02em; }
.gh-hero p { margin: 0; font-size: 15px; color: var(--dim); }
.gh-acts { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.gh-acts .btn .icon { width: 15px; height: 15px; }
.gh-prog { font-size: 13px; color: var(--dim); }
.gh-prog b { font-size: 17px; color: var(--ink); }
.gh-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 12px; }
.gh-card { display: grid; grid-template-rows: auto 1fr; padding: 0; overflow: hidden; border: 1px solid var(--line); border-radius: 20px; background: var(--card);
  color: var(--ink); font: inherit; text-align: left; cursor: pointer; transition: transform .2s cubic-bezier(.2, .8, .2, 1), box-shadow .2s, border-color .2s; }
.gh-thumb { position: relative; height: 150px; overflow: hidden; background: linear-gradient(160deg, #eef1fd, #f3efff); display: flex; justify-content: center; padding-top: 14px; }
.gh-thumb img { width: 62%; height: auto; align-self: flex-start; border-radius: 14px 14px 0 0; box-shadow: 0 10px 24px rgba(30, 40, 90, .18); transition: transform .35s cubic-bezier(.2, .8, .2, 1); }
.gh-meta { position: relative; display: grid; gap: 3px; padding: 12px 14px 14px; }
.gh-meta em { position: absolute; top: -16px; left: 14px; width: 28px; height: 28px; border-radius: 999px; display: grid; place-items: center;
  font-style: normal; font-size: 13px; font-weight: 800; background: var(--ink); color: var(--bg); box-shadow: 0 0 0 3px var(--card); }
.gh-meta b { margin-top: 6px; font-size: 15.5px; font-weight: 750; }
.gh-meta small { font-size: 12.5px; color: var(--dim); }
.gh-foot { display: flex; align-items: center; gap: 8px; margin-top: 6px; font-size: 12px; font-weight: 650; color: var(--dim); }
.gh-foot i { margin-left: auto; display: inline-flex; align-items: center; gap: 3px; font-style: normal; color: var(--green); }
.gh-foot i .icon { width: 13px; height: 13px; }
.gh-card.done .gh-meta em { background: var(--green); }
@media (hover: hover) {
  .gh-card:hover { transform: translateY(-3px); box-shadow: 0 14px 30px rgba(20, 24, 40, .1); border-color: color-mix(in srgb, var(--blue) 30%, var(--line)); }
  .gh-card:hover .gh-thumb img { transform: translateY(-6px) scale(1.03); }
}
.gh-tip { margin: 0; font-size: 13px; color: var(--dim); text-align: center; }
:root[data-theme="dark"] .gh-hero { background: linear-gradient(135deg, #1c2440 0%, #221d3a 55%, #17191f 100%); border-color: #2a3050; }
:root[data-theme="dark"] .gh-thumb, :root[data-theme="dark"] .tr-media { background: linear-gradient(160deg, #1c2440, #221d3a); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .gh-hero { background: linear-gradient(135deg, #1c2440 0%, #221d3a 55%, #17191f 100%); border-color: #2a3050; }
  :root:not([data-theme="light"]) .gh-thumb, :root:not([data-theme="light"]) .tr-media { background: linear-gradient(160deg, #1c2440, #221d3a); }
}
@media (max-width: 640px) {
  .gh-hero { padding: 18px 16px; border-radius: 22px; }
  .gh-hero h1 { font-size: 22px; }
  .gh-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .gh-thumb { height: 118px; }
  .gh-meta { padding: 10px 11px 12px; }
  .gh-meta b { font-size: 14px; }
}
/* 「?」和主题、设置并排在右边 */
.top #tourBtn { margin-left: auto; }
.top #tourBtn + #themeBtn { margin-left: 0; }
/* 9.8 实验室主视觉：琥珀酸脱氢酶 */
.lab-hero-wrap { position: relative; margin: 0 0 var(--s5); }
.lab-hero-wrap .lab-hero { margin: 0; }
.lab-hero-cap { margin: 2px 0 0; text-align: center; white-space: nowrap;
  font-size: 12px; font-weight: 600; color: var(--dim); letter-spacing: .02em; }
.lab-hero-cap span { margin-left: 6px; padding: 1px 6px; border-radius: 5px; background: var(--soft); font-weight: 700; font-size: 11px; }

/* ---------------------------------------------------------------- 9.8 首页做减法：猜你想问 + 收起的更多问法 */

.hx-more { border-top: 1px solid var(--line); padding-top: 6px; }
.hx-more > summary { list-style: none; display: flex; align-items: center; gap: 8px; padding: 8px 2px; cursor: pointer; color: var(--dim); }
.hx-more > summary::-webkit-details-marker { display: none; }
.hx-more > summary .icon { width: 16px; height: 16px; }
.hx-more > summary b { font-size: 14px; font-weight: 650; color: var(--ink); }
.hx-more > summary small { font-size: 12px; }
.hx-more > summary .icon:last-child { margin-left: auto; transition: transform .2s; }
.hx-more[open] > summary .icon:last-child { transform: rotate(90deg); }
.hx-more > .agent-ex { padding-top: 6px; animation: dzFade .25s ease both; }
.hx .agent-ex .home-h { display: none; }

.bh-tips { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 16px; }
@media (max-width: 560px) { .bh-tips { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin-left: -16px; margin-right: -16px; padding: 0 16px 2px; }
  .bh-tips::-webkit-scrollbar { display: none; } .bh-tips .hx-chip { flex: none; max-width: 80%; } }

/* ---------------------------------------------------------------- 9.8 对话等待：细进度条 + 现在在做哪一步 + 答案骨架 */
.chat-it.thinking { display: grid; gap: 10px; max-width: min(420px, 100%); }
.cw { display: grid; gap: 8px; padding-left: 2px; }
.cw-bar { height: 3px; border-radius: 999px; background: var(--soft2); overflow: hidden; }
.cw-bar i { position: relative; display: block; height: 100%; width: 0; border-radius: inherit; background: var(--blue); transition: width .3s ease-out; overflow: hidden; }
.cw-bar i::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .6), transparent);
  transform: translateX(-100%); animation: wtShine 1.4s ease-in-out infinite; }
.cw-stage { margin: 0; display: flex; align-items: baseline; gap: 8px; font-size: 12.5px; color: var(--dim); }
.cw-stage em { margin-left: auto; font-style: normal; font-variant-numeric: tabular-nums; color: var(--dim2); }
.cw-swap { animation: wtSwap .35s ease both; }
.cw-skel { display: grid; gap: 7px; margin-top: 2px; }
.cw-skel i { display: block; height: 10px; border-radius: 6px; background: linear-gradient(90deg, var(--soft) 0%, var(--soft2) 40%, var(--soft) 80%);
  background-size: 240% 100%; animation: wtSkel 1.5s ease-in-out infinite; }
.cw-skel i:nth-child(1) { width: 92%; } .cw-skel i:nth-child(2) { width: 78%; animation-delay: .15s; } .cw-skel i:nth-child(3) { width: 54%; animation-delay: .3s; }
.fx-reduced .cw-bar i::after, .fx-reduced .cw-skel i, .fx-reduced .cw-swap { animation: none; }
@media (prefers-reduced-motion: reduce) { .cw-bar i::after, .cw-skel i, .cw-swap { animation: none; } }
.hx-chip b { font-weight: 750; }
.hx-chip small { margin-left: 4px; font-size: 12px; font-weight: 600; color: var(--dim); }

/* 9.9 导览：拖动 / 缩放时高亮框和说明卡直接贴住，不追着过渡 */
.tr.tr-now .tr-hole, .tr.tr-now .tr-ring, .tr.tr-now .tr-card { transition: none !important; }
.tr-card { transform-origin: 0 0; }
.tr-block { touch-action: pan-x pan-y pinch-zoom; }

/* ---------------------------------------------------------------- 9.9.2 首页做减法
   问候 + 今天一行 + 四个入口 + 猜你想问 + 更多问法。没有大卡片、没有渐变、没有吉祥物；
   颜色全走主题变量，深浅两套自动跟着换，不再单独写一遍深色。 */
.chat-main { position: relative; }
.chat-empty.today.hz {
  max-width: 720px; margin: 0 auto; padding: clamp(20px, 6vh, 56px) 2px var(--s3);
  display: flex; flex-direction: column; align-items: stretch; gap: 26px; text-align: left;
}
.hz-hi { display: grid; gap: 4px; }
.hz-hi small { font-size: 13px; font-weight: 600; color: var(--dim); font-variant-numeric: tabular-nums; }
.chat-empty .hz-hi h1 { margin: 0; font-size: 30px; line-height: 1.2; font-weight: 750; letter-spacing: -.02em; color: var(--ink); }
.chat-empty .hz-now { margin: 4px 0 0; display: flex; flex-wrap: wrap; align-items: center; gap: 2px 8px; font-size: 14.5px; line-height: 1.5; color: var(--dim); }
.hz-now a { display: inline-flex; align-items: center; gap: 6px; color: var(--ink); font-weight: 600; text-decoration: none; }
.hz-now a.t-amber { color: var(--amber-d); }
.hz-now span[data-i18n-skip] { max-width: 16em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hz-now a + a::before { content: "·"; margin-right: 2px; color: var(--dim2); font-weight: 400; }
.hz-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--blue); flex: none; }
@media (hover: hover) { .hz-now a:hover { text-decoration: underline; text-underline-offset: 3px; } }

/* 四个入口：一排安静的按钮，图标 + 字，没有底色卡片 */
.hz-acts { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.hz-act {
  display: flex; align-items: center; justify-content: center; gap: 8px; min-width: 0; min-height: 48px; padding: 0 10px;
  border: 1px solid var(--line); border-radius: 14px; background: var(--card); color: var(--ink);
  font: inherit; text-decoration: none; cursor: pointer; transition: border-color .15s, background .15s;
}
.hz-act .icon { flex: none; width: 19px; height: 19px; color: var(--dim); }
.hz-act b { font-size: 14px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
@media (hover: hover) { .hz-act:hover { border-color: var(--dim2); } .hz-act:hover .icon { color: var(--ink); } }
.hz-act:active { background: var(--soft); }

/* 第一次来：一行字，不是一张卡 */
.hz-guide { display: flex; align-items: center; gap: 4px; margin-top: -10px; }
.hz-guide-go {
  flex: 1; min-width: 0; display: flex; align-items: center; gap: 8px; min-height: 40px; padding: 0 2px;
  border: 0; background: none; color: var(--blue); font: inherit; font-size: 14px; font-weight: 600; text-align: left; cursor: pointer;
}
.hz-guide-go span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hz-guide-go .icon { flex: none; width: 17px; height: 17px; }
.hz-guide .ib { flex: none; width: 32px; height: 32px; color: var(--dim2); }
.hz-guide .ib .icon { width: 14px; height: 14px; }

/* 猜你想问：一列细行（宽屏两列），每行一句话 + 小标签 */
.chat-empty .hz-h { margin: 0 0 6px; font-size: 13px; line-height: 1.4; font-weight: 650; color: var(--dim); }
.hz-gq { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 18px; }
.hz-g {
  display: flex; align-items: center; gap: 8px; min-width: 0; min-height: 48px; padding: 0 2px;
  border: 0; border-bottom: 1px solid var(--line); background: none; color: var(--ink);
  font: inherit; font-size: 15px; text-align: left; cursor: pointer;
}
.hz-g span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hz-g em { flex: none; font-style: normal; font-size: 11.5px; font-weight: 650; padding: 1px 7px; border-radius: 999px; background: var(--soft); color: var(--dim); }
.hz-g.w-often em { background: var(--blue-s); color: var(--blue-d); }
.hz-g.w-now em { background: var(--amber-s); color: var(--amber-d); }
.hz-g > .icon { flex: none; width: 15px; height: 15px; color: var(--dim2); transition: transform .15s, color .15s; }
@media (hover: hover) { .hz-g:hover > .icon { transform: translateX(2px); color: var(--ink); } }

/* 更多问法：收起时只是一行字 */
.hz .hx-more { border-top: 0; padding-top: 0; margin-top: -8px; }
.hz .hx-more > summary { padding: 8px 2px; }
.hz .hx-more > summary b { font-size: 14px; font-weight: 600; color: var(--dim); }
.hz .agent-ex { display: grid; gap: 10px; }
.hz .hx-q { min-height: 50px; border-radius: 14px; }

@media (max-width: 700px) {
  .chat-empty.today.hz { padding-top: 14px; gap: 22px; }
  .chat-empty .hz-hi h1 { font-size: 26px; }
  .hz-acts { gap: 6px; }
  .hz-act { flex-direction: column; gap: 4px; min-height: 64px; padding: 8px 2px; }
  .hz-act b { font-size: 12.5px; }
  .hz-gq { grid-template-columns: minmax(0, 1fr); }
}
/* 手机上空态时「对话记录」按钮不独占一行：浮到问候右上角 */
@media (max-width: 860px) {
  .chat-main.is-empty .chat-head { position: absolute; top: 6px; right: 0; z-index: 3; padding: 0; }
  .chat-main.is-empty .chat-head h2 { display: none; }
}

/* 「/」快捷命令：浮在输入条上面 */
.slash {
  position: absolute; left: 0; right: 0; bottom: calc(100% - var(--slash-gap, 0px)); z-index: 25;
  max-width: 460px; max-height: min(52vh, 420px); overflow-y: auto; padding: 6px;
  border: 1px solid var(--line); border-radius: 16px; background: var(--card);
  box-shadow: 0 12px 36px rgba(0, 0, 0, .14);
}
.chat-main > .slash { bottom: 70px; }
.slash-it {
  width: 100%; display: grid; grid-template-columns: 30px minmax(0, auto) minmax(0, 1fr); align-items: center; gap: 10px;
  min-height: 44px; padding: 0 10px; border: 0; border-radius: 10px; background: none; color: var(--ink);
  font: inherit; text-align: left; cursor: pointer;
}
.slash-it b { font-size: 14.5px; font-weight: 600; white-space: nowrap; }
.slash-it small { font-size: 12.5px; color: var(--dim); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.slash-ic { width: 30px; height: 30px; border-radius: 9px; display: grid; place-items: center; background: var(--soft); color: var(--dim); }
.slash-ic .icon { width: 16px; height: 16px; }
.slash-it.on, .slash-it:focus-visible { background: var(--soft); outline: none; }
.slash-it.on .slash-ic { background: var(--ink); color: var(--card); }
@media (hover: hover) { .slash-it:hover { background: var(--soft); } }
.slash-none { margin: 0; padding: 12px; font-size: 13.5px; color: var(--dim); }
/* 输入条整体已经有聚焦描边；里面的输入框再画一圈就是框中框 */
.chat-main .chat-bar #chatIn, .chat-main .chat-bar #chatIn:focus { background: transparent; box-shadow: none; }

/* ================================================================ 9.9.5 首页：最简
   Snappy 在正中（会轻轻浮动），一句问候，四个 App 图标，其余收起。
   图标是超椭圆（squircle，和手机桌面图标同一种形状）+ 渐变 + 白色图形，不是方框。 */
.chat-empty.today.hz { align-items: center; text-align: center; gap: 30px; padding-top: clamp(28px, 10vh, 96px); }
.hz .hz-hi { justify-items: center; gap: 10px; }
.hz-snappy { width: 92px; height: 92px; display: grid; place-items: center; margin-bottom: 6px;
  -webkit-mask: url(/assets/squircle.svg) center / 100% 100% no-repeat; mask: url(/assets/squircle.svg) center / 100% 100% no-repeat;
  background: radial-gradient(circle at 30% 20%, #fff 0%, #f3f5fb 60%, #e8ecf6 100%); animation: hzFloat 5.5s ease-in-out infinite; }
.hz-snappy img { width: 68px; height: 68px; }
@keyframes hzFloat { 0%, 100% { transform: translateY(0) rotate(0deg); } 50% { transform: translateY(-6px) rotate(-2deg); } }
.fx-reduced .hz-snappy { animation: none; }
@media (prefers-reduced-motion: reduce) { .hz-snappy { animation: none; } }
.chat-empty .hz .hz-hi h1, .chat-empty.hz .hz-hi h1 { font-size: 28px; }
.chat-empty .hz-now { justify-content: center; }

.hz-apps { display: grid; grid-template-columns: repeat(4, minmax(0, 78px)); justify-content: center; gap: 12px 16px; width: 100%; }
.hz-app { display: grid; justify-items: center; gap: 8px; min-width: 0; padding: 4px 0; border: 0; background: none; color: var(--ink);
  font: inherit; text-decoration: none; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.hz-app b { font-size: 13.5px; font-weight: 600; }
/* 阴影画在外层：遮罩会把里层的 box-shadow 一起裁掉 */
.hz-app-sh { display: block; filter: drop-shadow(0 6px 10px var(--sh, rgba(40, 60, 140, .22))); transition: transform .2s cubic-bezier(.3, 1.4, .5, 1); }
.hz-app-ic { width: 62px; height: 62px; display: grid; place-items: center; color: #fff;
  -webkit-mask: url(/assets/squircle.svg) center / 100% 100% no-repeat; mask: url(/assets/squircle.svg) center / 100% 100% no-repeat;
  background: radial-gradient(120% 90% at 28% 12%, rgba(255, 255, 255, .38), transparent 55%), linear-gradient(150deg, var(--c1), var(--c2)); }
.hz-app-ic .icon { width: 28px; height: 28px; stroke-width: 2; }
.hz-app.a-cam { --c1: #5b8cff; --c2: #2f5be6; --sh: rgba(47, 91, 230, .32); }
.hz-app.a-lab { --c1: #a185ff; --c2: #6a4ee6; --sh: rgba(106, 78, 230, .32); }
.hz-app.a-mice { --c1: #ffad6b; --c2: #f0703a; --sh: rgba(240, 112, 58, .3); }
.hz-app.a-timer { --c1: #4fd6a3; --c2: #14a874; --sh: rgba(20, 168, 116, .3); }
.hz-app:active .hz-app-sh { transform: scale(.9); }
@media (hover: hover) { .hz-app:hover .hz-app-sh { transform: translateY(-3px); } }

/* 收起来的「试试这样问」：一颗小胶囊，点开才是列表 */
.hz-fold { width: 100%; max-width: 560px; text-align: left; margin-top: -6px; }
.hz-fold > summary { list-style: none; display: inline-flex; align-items: center; gap: 4px; margin: 0 auto; padding: 7px 14px; border-radius: 999px;
  background: var(--soft); color: var(--dim); cursor: pointer; }
.hz-fold > summary::-webkit-details-marker { display: none; }
.hz-fold { display: grid; justify-items: center; }
.hz-fold > summary b { font-size: 13.5px; font-weight: 600; color: var(--dim); }
.hz-fold > summary .icon { width: 15px; height: 15px; transition: transform .2s; }
.hz-fold[open] > summary .icon { transform: rotate(180deg); }
.hz-fold > .agent-ex { width: 100%; padding-top: 10px; animation: dzFade .22s ease both; }
.hz-fold .hz-gq { grid-template-columns: minmax(0, 1fr); }
.hz-fold .agent-tabs { justify-content: flex-start; }
.hz .hz-guide { margin-top: -8px; justify-content: center; }
.hz .hz-guide-go { flex: none; }

/* 输入条左边的「+」也是一个设计过的形状：靛蓝渐变的超椭圆（照小红书中间那颗「+」的思路） */
.chat-main .chat-bar #chatImg.chat-plus { border-radius: 0; color: #fff;
  -webkit-mask: url(/assets/squircle.svg) center / 100% 100% no-repeat; mask: url(/assets/squircle.svg) center / 100% 100% no-repeat;
  background: radial-gradient(120% 90% at 28% 12%, rgba(255, 255, 255, .35), transparent 55%), linear-gradient(150deg, #6f7dff, #3d4fe0); }
.chat-main .chat-bar #chatImg.chat-plus .icon { stroke: #fff; stroke-width: 2.6; }
@media (max-width: 700px) {
  .chat-empty.today.hz { gap: 26px; padding-top: 6vh; }
  .hz-apps { gap: 10px 10px; grid-template-columns: repeat(4, minmax(0, 1fr)); max-width: 340px; }
}
/* 今天那一行：每一段是一颗小胶囊，换行时不会有孤零零的分隔点 */
.chat-empty .hz-now { gap: 6px; }
.hz-now a { padding: 4px 11px; border-radius: 999px; background: var(--soft); font-size: 13.5px; }
.hz-now a + a::before { content: none; }
.hz-now a.t-amber { background: var(--amber-s); }