/* 索引云 · 屏幕右边的小绿鸟 + 它头顶的任务清单气泡
 * ------------------------------------------------------------------
 * 页面接入只要两行（DOM 全部由 bird.js 自己插，HTML 不用改）：
 *   <link rel="stylesheet" href="assets/bird.css">
 *   <script src="assets/bird.js"></script>
 *
 * ⚠️ 几条要注意的：
 *   ① 层级用 --z-bird（在 style.css 的层级总表里），**不要写死数字** ——
 *      它要让开浮窗、抽屉、设置面板、成就提示条，只浮在页面内容之上。
 *   ② 右下角本来就是「前往练习」那颗大按钮（英语的练习页 / 复习页会显示），
 *      所以那两页把小鸟往上抬，别叠在一起（见下面 body.prac-setup / body.rev-page）。
 *   ③ 眼睛是**一条杠**（用户明确要求：不会睁开）。别手滑给它加眼白 / 瞳孔。
 *   ④ 颜色全在下面的 :root 里，想换个色只改这一块。
 * ------------------------------------------------------------------ */

:root {
  --bird-size: 104px;

  /* ---- 配色：照用户自己画的那张来的（粗黑描边 + 几个很纯的色块）----
     改颜色只改这一块。 */
  --bird-green: #a8da7d;      /* 身子：黄绿 */
  --bird-green-dk: #93ce6b;   /* 呆毛 / 翅膀：同一个绿压深一档，做出层次（比原图精细一点） */
  --bird-belly: #fbf7e0;      /* 肚子：奶白 */
  --bird-blush: #e8467f;      /* 腮红：亮玫红 */
  --bird-blush-hot: #ff2f77;  /* 撸的时候更红一档 */
  --bird-beak: #ffd63d;       /* 嘴：黄 */
  --bird-line: #141414;       /* 大黑边（原画是纯黑，屏幕上用近黑更柔和） */
  --bird-stroke: 2.6;         /* 描边粗细（viewBox 单位） */

  /* 手里拿的两样东西 */
  --bird-book: #5f86d6;       /* 本子封面：墨蓝 */
  --bird-book-dk: #4a6fbd;    /* 书脊 */
  --bird-paper: #fdfaf0;      /* 纸边 / 封面上的标签 */
  --bird-pen: #ffd63d;        /* 铅笔杆 */
  --bird-pen-wood: #f0d2a4;   /* 削出来的木头 */
  --bird-pen-nib: #3a3a3a;    /* 笔尖那块铅 */
  --bird-pen-band: #c9d2dc;   /* 笔尾那圈金属 */
  --bird-pen-eraser: #f2919f; /* 橡皮头 */
  --bird-alarm-face: #ffd63d; /* 闹钟盘面（切到定时钟时手里抱的那个）：跟嘴一个黄 */
  --bird-alarm-bell: #e8467f; /* 闹钟那两只铃：跟腮红一个玫红 */
}

/* ============================ 外层定位 ============================ */
/* ⚠️ `bottom` 从 16px 抬到 **40px**：右下角最底那一条让给了「页面版本号」
   （`assets/version.js` 的 `.ver-tag`，占 10px 起、约 14px 高）。
   两边位置是**联动**的 —— 改这边的 bottom 或那边的字号，记得一起看，别又叠上。 */
/* ⚠️ `right` 要和右下角那几颗「前往…」大按钮（`.side-jump`，`right:22px`）**对齐**，
   所以这里也是 22px —— 别退回 16px。
   原因：复习页 / 语法页 / 数学练习进行中，小鸟会被抬到按钮正上方（见下面 bottom:120px 那几条）。
   两个元素一上一下堆在同一个右下角，右边差 6px（16 vs 22）看着就是**没对齐、歪的**，
   用户报的"小绿豆位置有的时候不对"就是这个。
   注：`position:fixed` 的 right 是相对**内容区**算的（含/不含滚动条都一致），
   所以这里写多少，各页面看着就都是多少，不会因为滚动条而跳。
   ⚠️ 版本号 `.ver-tag` 是贴边小角标（right:14px），**不跟着动** —— 它本来就该比主元素更贴边。 */
.bird-wrap {
  position: fixed;
  right: 22px;
  /* 40 = 默认离底（让开右下角的版本号）；--bird-lift 由 JS 按"附近有没有按钮"动态加 */
  bottom: calc(40px + var(--bird-lift, 0px));
  width: var(--bird-size);
  z-index: var(--z-bird, 1190);
  /* 容器本身不吃事件：只有小鸟和气泡吃 —— 免得挡住下面页面的按钮 */
  pointer-events: none;
  user-select: none;
  -webkit-user-select: none;
}
/* 英语的练习设置屏 / 复习页 / 语法页右下角都有一颗「前往」的大按钮 ——
   ⚠️ 把小(鸟)抬到它上面。按钮高 53 + 离底 22 = 顶到 75px，所以抬到 96px 就绝不重叠。
   现在再叠上版本号那一条 → 96 + 24 = **120px**。
   ⚠️ **加了新的一颗侧边按钮，记得把对应的 body 类也加到这里** ——
      漏了就会被小鸟压住、点不到（语法页那次就是这么漏的）。 */
/* ⚠️ 2026-10-18：抬升改成**变量驱动**（`--bird-lift`）——
   原来这里是三行 body 类硬编码 `bottom:120px`，只在"认得出来的那几页"生效；
   现在 JS 会**量右下角那颗按钮实际有多高**再决定抬多少（见 bird.js 的 measureLift），
   这里的 body 类是**兜底**（按钮还没渲染出来 / JS 没跑到时先抬起来，别被压住）。
   120 - 40（默认离底）= 80。 */
body.prac-setup .bird-wrap,
body.rev-page .bird-wrap,
body.grammar-page .bird-wrap { --bird-lift: 80px; }

/* ============================ 小鸟本体 ============================ */
.bird-stage {
  position: relative;
  width: 100%;
  pointer-events: auto;
  cursor: pointer;
  touch-action: none;          /* 手机上按住撸的时候别顺手滚页面 */
  outline: none;
}
.bird-svg { display: block; width: 100%; height: auto; overflow: visible; }

/* ---- 绿豆的人形图（2026-10-06 用户给的图）----
   ⚠️⚠️ **2026-10-17 起：她就是这个人，一直显示。**
      用户："绿豆是一个人，已经不是鸟了" + "她说话时为什么会扑棱翅膀？她是一个人，已经没有翅膀了"。
      所以下面的 SVG 小鸟**不再显示**（DOM 还留着，只是 `display:none` —— 测试还在数它的结构），
      人形改成**默认可见**。原来"撸满 25 下才变身"那套只保留**计数 / 反应**，不再换形象。
   图比原来那只鸟大一圈（118%），往左右各溢 9%。
   ⚠️ 只换显示，**别去动 .bird-stage 的尺寸** —— 页面里别的东西（顶栏上的小窗、
      英语练习页那颗大按钮）都是按 104px 让位的，改布局基准会连累一大片。 */
.bird-svg { display: none; }
.bird-human {
  display: block;
  /* 尺寸：2026-10-07 用户先要"减小 25%"（150% → 112.5%），随后"变大 5%" → **118%**。
     缩到 118% 之后不用再往左偏躲屏幕边（原来 150% 居中时右边缘会顶出视口）——
     左右各溢 9% ≈ 9.4px，离屏幕边还有 16px 富余，居中即可。 */
  width: 118%;
  margin-left: -9%;
  margin-bottom: -4px;
  -webkit-user-drag: none;
  user-select: none;
  -webkit-user-select: none;
  filter: drop-shadow(0 8px 16px rgba(16, 24, 40, .18));
  transform-origin: 50% 100%;
  /* ⚠️ 撸她的时候要往 .bird-human 上挂 animation（压扁 / 晃），
        **别在这里再写 animation** —— 两处都写的话，撸完摘掉动画时会重播一次入场。 */
  opacity: 1;
  transform: none;
  transition: opacity .28s var(--ease, ease),
              transform .42s var(--spring, cubic-bezier(.34, 1.56, .64, 1));
}
/* 旧的两条（撸满 25 下 → 换成人形）现在已经是默认状态，留着只为兼容旧的 class 判定 */
.bird-wrap.human .bird-human { display: block; opacity: 1; transform: none; }
/* ---- 人形**能被撸**（用户 2026-10-07：「点击这个形态时也要有同样的动画」）----
   ⚠️ birdPat / birdHop 直接复用：它们只动 transform。
   ⚠️ 人形是 PNG，改不了腮红颜色，所以「正在被撸」用轻轻晃代替。
   ⚠️ **没有翅膀**：原来那条 `.patting .bird-wing-l` 扇翅膀的规则已删 ——
      用户 2026-10-17 明确"她是一个人，已经没有翅膀了"。 */
.bird-wrap.patting .bird-human { animation: birdHumanWob .34s var(--ease, ease) infinite; }
.bird-wrap.squish .bird-human { animation: birdPat .34s var(--spring, cubic-bezier(.34, 1.56, .64, 1)) 1; }
.bird-wrap.happy .bird-human { animation: birdHop .62s var(--spring, cubic-bezier(.34, 1.56, .64, 1)) 1; }
@keyframes birdHumanWob {
  0%, 100% { transform: rotate(-1.6deg) scale(1.005, .995); }
  50%      { transform: rotate(1.6deg) scale(.995, 1.005); }
}
/* 撸的时候整只鸟从**脚底**压扁（不是从中心缩），才有"被按下去"的手感 */
.bird-all {
  transform-box: fill-box;
  transform-origin: 50% 100%;
  animation: birdBreathe 3.6s var(--ease, ease-in-out) infinite;
}
.bird-ahoge {
  transform-box: fill-box;
  transform-origin: 50% 100%;
  animation: birdAhoge 2.8s var(--ease, ease-in-out) infinite;
}
/* 翅膀：撸的时候会轻轻扇两下（平时不动，别让它一直晃，太闹） */
.bird-wing {
  transform-box: fill-box;
  transform-origin: 50% 25%;
}
.bird-shadow { fill: rgba(30, 58, 28, .13); }

/* ---- 描边：粗细 / 颜色 / 圆角全在这一组里 ----
   想整体加粗或改描边颜色，只改这里（别一个一个形状去写）。 */
.bird-body,
.bird-belly,
.bird-ahoge,
.bird-wing,
.bird-beak,
.bird-lens,
.bird-bridge,
.bird-squint,
.bird-toe {
  stroke: var(--bird-line);
  stroke-width: var(--bird-stroke);
  stroke-linejoin: round;
  stroke-linecap: round;
}

.bird-body { fill: var(--bird-green); }
.bird-belly { fill: var(--bird-belly); }
/* 呆毛和翅膀压深一档：原图是同一个绿、只靠黑边分开；深一点层次更清楚 */
.bird-ahoge, .bird-wing { fill: var(--bird-green-dk); }
/* 镜片：里面是空的（透出身子的绿），跟原图一样就是两个黑圈 */
.bird-lens { fill: none; stroke-width: 2.9; }
.bird-bridge { fill: none; }
/* 眯眼：就是一条横杠。**没有眼白、没有瞳孔**，也不会睁开 */
.bird-squint { fill: none; stroke-width: 2.7; }
.bird-beak { fill: var(--bird-beak); }
.bird-toe { fill: none; stroke-width: 2.7; }

/* ---- 手里拿的东西 ----
   本子件儿大，描边跟主体一样粗；
   ⚠️ 铅笔杆只有 5.6 宽，描边必须调细（1.8）—— 用主体的 2.6 的话，
      中间那点黄色会被两条黑边吃掉，远看就是一根黑棍子。 */
.bird-book-cover, .bird-book-spine, .bird-book-page, .bird-book-label {
  stroke: var(--bird-line); stroke-width: 2.4; stroke-linejoin: round;
}
.bird-pen-eraser, .bird-pen-band, .bird-pen-body, .bird-pen-wood, .bird-pen-nib {
  stroke: var(--bird-line); stroke-width: 1.8; stroke-linejoin: round;
}
.bird-book-line {
  fill: none; stroke: var(--bird-line); stroke-width: 1.6;
  stroke-linecap: round; opacity: .42;
}
.bird-book-cover { fill: var(--bird-book); }
.bird-book-spine { fill: var(--bird-book-dk); }
.bird-book-page, .bird-book-label { fill: var(--bird-paper); }
.bird-pen-eraser { fill: var(--bird-pen-eraser); }
.bird-pen-band { fill: var(--bird-pen-band); }
.bird-pen-body { fill: var(--bird-pen); }
.bird-pen-wood { fill: var(--bird-pen-wood); }
.bird-pen-nib { fill: var(--bird-pen-nib); }

/* ---- 闹钟（2026-10-06 加）：切到「定时钟」模式时，手里抱的就是它 ---- */
.bird-alarm-face, .bird-alarm-bell { stroke: var(--bird-line); stroke-width: 2.2; }
.bird-alarm-handle, .bird-alarm-foot {
  fill: none; stroke: var(--bird-line); stroke-width: 2.4; stroke-linecap: round;
}
.bird-alarm-hand { fill: none; stroke: var(--bird-line); stroke-width: 2.2; stroke-linecap: round; }
.bird-alarm-face { fill: var(--bird-alarm-face); }
.bird-alarm-bell { fill: var(--bird-alarm-bell); }

.bird-blush {
  fill: var(--bird-blush);
  transition: fill var(--dur-1, .13s) var(--ease, ease),
              transform var(--dur-2, .24s) var(--spring, ease);
  transform-box: fill-box; transform-origin: 50% 50%;
}
.bird-stage:focus-visible { outline: none; }
.bird-stage:focus-visible .bird-svg {
  border-radius: 50%;
  box-shadow: 0 0 0 3px var(--brand-ring, rgba(24, 95, 165, .22));
}

/* ---- 正在被撸 ----
   ⚠️ 分成两个 class，别合并：
     .patting = **状态**（脸红 / 呆毛乱晃），一直按着就一直亮着；
     .squish  = **一次性动画**（压扁），每撸一下要重播一次。
   一开始只有一个 .patting、靠"摘掉→重排→加回"来重播压扁 ——
   结果一直按着的时候每 190ms 就被摘一次，腮红跟着一明一暗地闪。（踩过） */
.bird-wrap.patting .bird-blush { fill: var(--bird-blush-hot); transform: scale(1.3); }
.bird-wrap.patting .bird-ahoge { animation: birdAhogeFast .3s linear infinite; }
.bird-wrap.squish .bird-all, .bird-wrap.squish .bird-human { animation: birdPat .34s var(--spring, ease) 1; }
/* 连着撸好几下 → 高兴得跳一下 */
.bird-wrap.happy .bird-all, .bird-wrap.happy .bird-human { animation: birdHop .62s var(--spring, ease) 1; }

@keyframes birdBreathe {
  0%, 100% { transform: scale(1, 1); }
  50%      { transform: scale(1.016, .986); }
}
@keyframes birdAhoge {
  0%, 100% { transform: rotate(-7deg); }
  50%      { transform: rotate(7deg); }
}
@keyframes birdAhogeFast {
  0%, 100% { transform: rotate(-13deg); }
  50%      { transform: rotate(13deg); }
}
@keyframes birdPat {
  0%   { transform: scale(1, 1); }
  38%  { transform: scale(1.09, .9); }
  100% { transform: scale(1, 1); }
}
@keyframes birdWing {
  0%, 100% { transform: rotate(0deg); }
  50%      { transform: rotate(-9deg); }
}
@keyframes birdHop {
  0%   { transform: translateY(0) scale(1, 1); }
  30%  { transform: translateY(-9px) scale(.96, 1.06); }
  62%  { transform: translateY(0) scale(1.07, .93); }
  100% { transform: translateY(0) scale(1, 1); }
}

/* ---- 撸出来的小反应（飘一句 + 冒颗心）---- */
.bird-say {
  position: absolute;
  right: 78%;
  bottom: 58%;
  white-space: nowrap;
  padding: 3px 10px;
  border-radius: 999px;
  background: var(--surface, #fff);
  border: 1px solid var(--line, #e4e7ed);
  box-shadow: var(--sh-2, 0 2px 6px rgba(16, 24, 40, .06));
  color: var(--text-2, #58616f);
  font-size: 12.5px;
  font-weight: 600;
  pointer-events: none;
  animation: birdSay 1.05s var(--ease-out, ease-out) forwards;
}
@keyframes birdSay {
  0%   { opacity: 0; transform: translate(6px, 4px) scale(.86); }
  22%  { opacity: 1; transform: translate(0, 0) scale(1); }
  100% { opacity: 0; transform: translate(-6px, -34px) scale(1.02); }
}
.bird-heart {
  position: absolute;
  color: var(--bird-blush);
  font-size: 15px;
  line-height: 1;
  pointer-events: none;
  animation: birdHeart .95s var(--ease-out, ease-out) forwards;
}
@keyframes birdHeart {
  0%   { opacity: 0; transform: translate(0, 0) scale(.5); }
  25%  { opacity: 1; transform: translate(-3px, -10px) scale(1); }
  100% { opacity: 0; transform: translate(-10px, -40px) scale(1.15); }
}

/* 第一次进来、还没被撸过：提示一下「这儿能摸」 */
.bird-hint {
  position: absolute;
  /* ⚠️ 2026-10-17 她是人形了（118% 宽，左右各溢 9%）——
     原来的 `right: 92%` 会把小提示压在她的头发上。改成**挂在气泡正上方、右对齐**。 */
  right: 8px;
  bottom: calc(100% + 40px);
  white-space: nowrap;
  padding: 4px 10px;
  border-radius: 999px;
  background: var(--surface, #fff);
  border: 1px dashed var(--line-strong, #ccd2dc);
  color: var(--text-3, #8b95a3);
  font-size: 12px;
  pointer-events: none;
  animation: birdHintIn .3s var(--ease-out, ease-out);
}
@keyframes birdHintIn { from { opacity: 0; transform: translateX(6px); } to { opacity: 1; } }

/* ============================ 头顶的气泡 ============================
 * ⚠️ 2026-10-11 用户："把绿豆的功能排版做成**竖着的**"。
 *    原来是**横排**（三条杠 + 气泡/面板 并排往左溢出，靠 nowrap + flex-end）。
 *    现在改成**竖排**：所有东西在鸟头顶**往上堆**（column，靠下对齐）。
 *    好处：面板宽、模式栏长也不会横着顶出屏幕左边；绿豆这一竖列始终贴屏幕右边。
 *   ⚠️ 竖排的风险是"往上堆太高顶出屏幕顶" —— 所以整列有 max-height，
 *      面板自己带 overflow 滚动（见 .bird-panel / .bird-study）。
 *   ⚠️ right:0 + align-items:flex-end：所有子元素**右对齐**，跟小鸟右边一条线。 */
.bird-pop {
  position: absolute;
  right: 0;
  bottom: calc(100% + 2px);
  display: flex;
  flex-direction: column;        /* ← 竖排 */
  align-items: flex-end;         /* ← 全部右对齐（跟鸟右边一条线） */
  justify-content: flex-end;
  gap: 8px;                      /* 竖排时元素之间的间距 */
  /* ⚠️ 这只是**默认上限**：JS 每次打开面板会按"她头顶到屏幕顶还剩多少"重算，
     写回 inline 的 max-height —— 不然她被按钮抬起来之后，面板会长到屏幕外面去
     （顶部标题栏 / 清空按钮被裁掉，用户 2026-10-18 反馈的就是这个）。 */
  max-height: min(72vh, 620px);
  /* ⚠️ 容器只有一只鸟那么宽（--bird-size），竖排后气泡/面板都比它宽 ——
     右对齐（flex-end）+ 不收缩，让它们**往左边长**，不会被压成 104px。 */
  white-space: nowrap;
  pointer-events: none;          /* 收起态时只有那颗小气泡吃事件 */
}
.bird-bubble,
.bird-panel,
.bird-timer,
.bird-study,
.bird-modes { flex-shrink: 0; }

/* ---- 收起态：一颗小气泡 ---- */
.bird-bubble {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 11px 6px 9px;
  border: 1px solid var(--line, #e4e7ed);
  border-radius: 999px;
  background: var(--surface, #fff);
  box-shadow: var(--sh-2, 0 2px 6px rgba(16, 24, 40, .06));
  color: var(--text-2, #58616f);
  font-size: 12.5px;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  pointer-events: auto;
  transition: transform var(--dur-1, .13s) var(--ease, ease),
              box-shadow var(--dur-2, .24s) var(--ease, ease),
              border-color var(--dur-2, .24s) var(--ease, ease);
}
.bird-bubble:hover {
  border-color: var(--line-strong, #ccd2dc);
  box-shadow: var(--sh-3, 0 8px 22px rgba(16, 24, 40, .09));
  transform: translateY(-1px);
}
.bird-bubble:active { transform: translateY(0) scale(.97); }
.bird-bubble svg { display: block; flex-shrink: 0; }
/* 小尾巴：指向小鸟的头 */
.bird-bubble::after {
  content: '';
  position: absolute;
  right: 22px;
  bottom: -5px;
  width: 9px;
  height: 9px;
  background: var(--surface, #fff);
  border-right: 1px solid var(--line, #e4e7ed);
  border-bottom: 1px solid var(--line, #e4e7ed);
  transform: rotate(45deg);
  border-bottom-right-radius: 2px;
}
/* 一条任务都没有时，气泡淡一点，别像"有事没做" */
.bird-wrap.no-task .bird-bubble { color: var(--text-3, #8b95a3); font-weight: 500; }
.bird-count {
  min-width: 18px;
  padding: 0 5px;
  border-radius: 999px;
  background: var(--brand-soft, #e5f0fb);
  color: var(--brand-strong, #12507f);
  font-size: 11.5px;
  font-weight: 700;
  text-align: center;
  line-height: 17px;
}
.bird-wrap.no-task .bird-count { background: var(--surface-2, #f1f3f7); color: var(--text-3, #8b95a3); }

/* ---- 展开态：任务清单 ---- */
.bird-panel {
  display: none;
  width: 330px;
  max-width: calc(100vw - 32px);
  border: 1px solid var(--line, #e4e7ed);
  border-radius: var(--radius, 14px);
  background: var(--surface, #fff);
  box-shadow: var(--sh-4, 0 18px 46px rgba(16, 24, 40, .16));
  overflow: hidden;
  pointer-events: auto;
  /* ⚠️ 上面 .bird-pop 为了不被压窄写了 white-space:nowrap，会**继承**下来 ——
     面板里有要折行的说明文字，必须在这里恢复。不然底部那句会被裁掉（踩过）。 */
  white-space: normal;
}
.bird-wrap.open .bird-bubble { display: none; }
/* ⚠️ 展开时显示**哪个**面板由模式决定（`.mode-note` / `.mode-timer` 由 bird.js 的 render()
   加在 .bird-wrap 上）。别写成 `.open .bird-panel { display: block }` —— 那样两个面板会一起冒出来。 */
.bird-wrap.open.mode-note .bird-panel { display: block; animation: birdPanelIn .3s var(--ease-out, ease-out); }
.bird-wrap.open.mode-timer .bird-timer { display: block; animation: birdPanelIn .3s var(--ease-out, ease-out); }
@keyframes birdPanelIn {
  from { opacity: 0; transform: translateY(10px) scale(.97); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}
.bird-wrap.open .bird-pop { pointer-events: auto; }

/* ============================================================
 * 模式：三条杠 + 那一排气泡（2026-10-06 加）
 * ------------------------------------------------------------
 * 用户要的："鸟旁边加一个三条杠按钮，点了能选模式（记事本 / 定时钟），
 * 选择用气泡栏显示"。所以是一排**并列的气泡**，不是一个下拉菜单。
 * ============================================================ */
/* ============================ 三条杠（模式按钮） ============================
 * ⚠️ 2026-10-11 用户："三条杠按钮要回到原来的位置（小鸟身边）"。
 * ⚠️ 2026-10-12 用户进一步明确："跟之前一样，挂在（收起态那颗）**按钮的旁边**" ——
 *    也就是**贴着那颗气泡（模式气泡）的左边、底部对齐**（最早就是"并排"的）。
 *    做法：**绝对定位**到 .bird-wrap 的左上外侧，`right: 100% + 8px` 贴鸟左边缘、
 *    `bottom: calc(--bird-size + 2px)` 跟气泡**底边齐平**（气泡就是挂在
 *    `bottom: calc(100% + 2px)` 上的，两者用同一个基准 → 永远并排）。
 *    ⚠️ 用 `--bird-size` 写死基准，**别用 `100%`** —— `100%` 会跟着 wrap 高度变
 *       （人形态 wrap 会高一截），三条杠就会自己往上蹿。
 * ⚠️ 展开态（面板开着）气泡是藏起来的，这一条没有"参考物"了，而且面板正占着上方 ——
 *    所以展开时把三条杠**落到小鸟身边**（`bottom: 54px`），免得被面板压住点不到。 */
.bird-mode-btn {
  position: absolute;
  /* ⚠️ 2026-10-18：右边那格让给「藏起来」（11 + 26 + 6 = 43），两颗并排一行 */
  right: calc(100% + 43px);                    /* ← 贴到小鸟左边外侧（让开藏起来那颗） */
  /* ⚠️ 2026-10-17：原来是 `--bird-size + 2px`（因为那时候 wrap 高就是 104）。
     绿豆改成**常驻人形**后 wrap 高变成 ~135，再用固定值就跟气泡对不齐了（差 27px）。
     现在跟气泡用**同一个基准** `100%` —— 人形是常驻的，高度不会再变，放心用。 */
  bottom: calc(100% + 2px);
  flex-shrink: 0;
  width: 26px; height: 26px;
  display: inline-flex; align-items: center; justify-content: center;
  padding: 0;
  border: 1px solid var(--line, #e4e7ed);
  border-radius: 8px;
  background: var(--surface, #fff);
  color: var(--text-2, #58616f);
  cursor: pointer;
  pointer-events: auto;         /* wrap 是 pointer-events:none，它得自己吃事件 */
  z-index: 2;                   /* 压在气泡 / 面板上面一点点，别被盖住 */
  box-shadow: var(--sh-1, 0 1px 3px rgba(16, 24, 40, .05));
  transition: background var(--dur-1, .13s) var(--ease, ease),
              border-color var(--dur-2, .24s) var(--ease, ease),
              color var(--dur-2, .24s) var(--ease, ease),
              transform var(--dur-1, .13s) var(--ease, ease);
}
.bird-mode-btn:hover {
  border-color: var(--line-strong, #ccd2dc);
  color: var(--text, #161a20);
  transform: translateY(-1px);
}
.bird-mode-btn:active { transform: translateY(0) scale(.95); }
/* ⚠️⚠️ 2026-10-14 用户："这个按键会往下跑，不要让它往下跑，就待在原来的地方就行"。
    原来这里有一条 `.bird-wrap.open .bird-mode-btn { bottom: 54px }`（展开面板时落到鸟身边）——
    **已删掉**。三条杠现在**任何状态下都待在"跟气泡底边对齐"那一个位置**，跟气泡实时对齐。
    （实测：展开伴学时它落在面板下边缘**再往下 1px**，没被面板压住、点得到。） */
/* 展开态：三条杠自己也高亮一下 */
.bird-mode-btn[aria-expanded="true"] {
  border-color: var(--brand, #185fa5);
  color: var(--brand, #185fa5);
  background: var(--brand-soft, #e5f0fb);
}

/* ---- 模式栏（竖排，2026-10-11 改）----
   原来是横着一排气泡；现在跟着整体竖排：每个模式气泡一行，从三条杠往上冒。
   ⚠️ 靠右对齐（跟上面的 .bird-pop 一致），别让它横着撑宽。 */
.bird-modes {
  display: none;
  flex-direction: column;
  align-items: flex-end;
  gap: 7px;
  flex-shrink: 0;
}
.bird-wrap.modes-open .bird-modes { display: flex; }

/* ⚠️ 2026-10-18 用户："隐藏按钮放在伴学的右边"。
   之前它是个 absolute 的小方块，钉在三条杠上方；模式列一展开，
   那个位置正好压在最底下那颗「伴学」气泡上（截图可见，看着像按钮浮在字上）。
   ✅ 办法：模式列展开时**整列往左让出 34px**（26 的按钮 + 8 的缝），
      把最右边那一格留给它 —— 它就跟「伴学」同一行、在右边，谁也不压谁。
   收起时不动：它仍旧待在三条杠上方（那边没有气泡，不冲突）。 */
.bird-wrap.modes-open .bird-modes { margin-right: 34px; }
/* ⚠️⚠️ 2026-10-14 用户（截图指出）：挑模式时，最底下那颗「伴学」气泡**压住了三条杠**，不美观。
   根因：模式栏 / 面板原来都是**贴着鸟头顶**往上冒的，而三条杠也正好在鸟头顶那个高度 → 必然撞上。

   ✅ 最终办法（三条一起看才成立）：
     · **三条杠自己永远不动** —— 死死钉在「跟气泡底边对齐」那一格（用户："不要往下跑"）。
     · 上面那坨（模式栏 / 记事本 / 定时钟 / 伴学面板）**统一往上让 32px**，把三条杠那格腾出来。
     · 模式栏本来就已经让过（有自己的 offset），这里合并成一条，别再写第二处。
   ⚠️ 2026-10-17 更新：原来写死 `--bird-size` 是因为"人形态下 wrap 会变高"。
      现在**人形是常驻的**、wrap 高度固定，所以统一改用 `100%`（跟气泡同一基准），
      这样三条杠、气泡、面板三者永远对得齐。
   ⚠️ 收起态**不受影响**（不改 `.bird-pop` 的默认值），气泡才跟三条杠底边严格齐平。 */
.bird-wrap.open .bird-pop,
.bird-wrap.modes-open .bird-pop {
  /* ⚠️ 2026-10-17：绿豆改成常驻人形后 wrap 变高（~135），三条杠也随之上移到 621~647。
     `--bird-size + 34px` 只把面板抬到 642，正好压在三条杠上（点不到）——
     改成跟气泡同一个基准 `100% + 34px` → 面板底边落到 615，稳稳在三条杠上面。 */
  bottom: calc(100% + 34px);
}
/* 挑模式的时候，面板 / 气泡都让开 —— 三个东西同时杵着就成了一坨 */
.bird-wrap.modes-open .bird-bubble,
.bird-wrap.modes-open .bird-panel,
.bird-wrap.modes-open .bird-timer,
.bird-wrap.modes-open .bird-study { display: none; }

.bird-mode {
  display: inline-flex; align-items: baseline; gap: 7px;
  padding: 7px 12px 7px 10px;
  border: 1px solid var(--line, #e4e7ed);
  border-radius: 999px;
  background: var(--surface, #fff);
  box-shadow: var(--sh-2, 0 2px 6px rgba(16, 24, 40, .06));
  color: var(--text-2, #58616f);
  font: inherit; font-size: 12.5px; font-weight: 600;
  cursor: pointer;
  pointer-events: auto;
  white-space: nowrap;
  animation: birdModeIn .26s var(--ease-out, ease-out) backwards;
  transition: border-color var(--dur-2, .24s) var(--ease, ease),
              color var(--dur-2, .24s) var(--ease, ease),
              background var(--dur-2, .24s) var(--ease, ease),
              transform var(--dur-1, .13s) var(--ease, ease);
}
.bird-mode:nth-child(2) { animation-delay: .05s; }
.bird-mode:nth-child(3) { animation-delay: .1s; }
/* 竖排：从下面冒上来（原来是 translateX 往左滑） */
@keyframes birdModeIn { from { opacity: 0; transform: translateY(8px); } }
.bird-mode .ic { display: inline-flex; color: var(--text-3, #8b95a3); }
.bird-mode .ds { font-weight: 400; font-size: 11.5px; color: var(--text-3, #8b95a3); }
.bird-mode:hover { border-color: var(--line-strong, #ccd2dc); transform: translateY(-1px); }
.bird-mode:active { transform: translateY(0) scale(.97); }
/* 当前用的那个模式 */
.bird-mode.on {
  border-color: #bcd9f2;
  background: var(--brand-soft, #e5f0fb);
  color: var(--brand-strong, #12507f);
}
.bird-mode.on .ic { color: var(--brand, #185fa5); }

/* ---- 手里的东西：本子 + 铅笔 ↔ 闹钟（2026-10-06） ----
   ⚠️ 本子 / 铅笔 / 闹钟里面那个 <g> 自带 transform **属性**（定位 + 倾斜）——
      CSS 里别再动它们的 transform，会直接盖掉属性、东西就飞走了。
      所以能缩放的只有闹钟外面那层 .bird-alarm-pop 壳子。 */
.bird-book, .bird-pencil { transition: opacity .26s var(--ease, ease); }
.bird-alarm-pop {
  opacity: 0;
  transform: scale(.5);
  transform-box: fill-box;
  transform-origin: 50% 55%;
  transition: opacity .24s var(--ease, ease),
              transform .38s var(--spring, cubic-bezier(.34, 1.56, .64, 1));
}
.bird-wrap.mode-timer .bird-alarm-pop { opacity: 1; transform: scale(1); }
.bird-wrap.mode-timer .bird-book,
.bird-wrap.mode-timer .bird-pencil { opacity: 0; }

/* ---- 换模式时跳一下 ----
   bird.js 的 playHop() 打上 .mode-hop，动画播完自己摘（靠 animationend）。 */
.bird-wrap.mode-hop .bird-all, .bird-wrap.mode-hop .bird-human {
  animation: birdModeHop .72s var(--spring, cubic-bezier(.34, 1.56, .64, 1)) 1;
}
@keyframes birdModeHop {
  0%   { transform: scale(1, 1) translateY(0); }
  16%  { transform: scale(.93, 1.09) translateY(0); }       /* 先蹲一下 */
  46%  { transform: scale(1.02, .96) translateY(-15px); }   /* 跳起来 */
  72%  { transform: scale(1, 1) translateY(0); }
  86%  { transform: scale(1.05, .94) translateY(0); }       /* 落地压一下 */
  100% { transform: scale(1, 1) translateY(0); }
}

/* ---- 定时钟面板 ---- */
.bird-timer {
  display: none;
  width: 300px;
  max-width: calc(100vw - 32px);
  border: 1px solid var(--line, #e4e7ed);
  border-radius: var(--radius, 14px);
  background: var(--surface, #fff);
  box-shadow: var(--sh-4, 0 18px 46px rgba(16, 24, 40, .16));
  overflow: hidden;
  pointer-events: auto;
  /* ⚠️ .bird-pop 那句 nowrap 会继承下来，面板里有要折行的说明，这里必须恢复 */
  white-space: normal;
}
.bird-clock {
  display: flex; flex-direction: column; align-items: center; gap: 3px;
  padding: 16px 12px 12px;
  background: linear-gradient(180deg, #fbfdff, #f4f9ff);
  border-bottom: 1px solid var(--line, #e4e7ed);
}
.bird-t-left {
  font-size: 38px; font-weight: 700; letter-spacing: -1.5px; line-height: 1.1;
  font-variant-numeric: tabular-nums;
  color: var(--text, #161a20);
  transition: color var(--dur-2, .24s) var(--ease, ease);
}
.bird-wrap.timing .bird-t-left { color: var(--brand, #185fa5); }
.bird-t-hint { font-size: 12px; color: var(--text-3, #8b95a3); }

.bird-quick { display: flex; flex-wrap: wrap; gap: 7px; padding: 12px 12px 2px; }
.bird-q {
  padding: 6px 11px;
  border: 1px solid var(--line, #e4e7ed);
  border-radius: 999px;
  background: var(--surface, #fff);
  color: var(--text-2, #58616f);
  font: inherit; font-size: 12.5px;
  cursor: pointer;
  transition: border-color var(--dur-2, .24s) var(--ease, ease),
              color var(--dur-2, .24s) var(--ease, ease),
              background var(--dur-2, .24s) var(--ease, ease),
              transform var(--dur-1, .13s) var(--ease, ease);
}
.bird-q:hover {
  border-color: var(--brand, #185fa5);
  color: var(--brand, #185fa5);
  background: var(--brand-soft, #e5f0fb);
}
.bird-q:active { transform: scale(.96); }

.bird-t-set { display: flex; align-items: center; gap: 8px; padding: 11px 12px 2px; }
.bird-t-inp { width: 68px; text-align: center; }
.bird-t-unit { font-size: 12.5px; color: var(--text-3, #8b95a3); }

.bird-cancel {
  padding: 5px 11px;
  border: 1px solid var(--line, #e4e7ed);
  border-radius: 999px;
  background: transparent;
  color: var(--text-2, #58616f);
  font: inherit; font-size: 12px;
  cursor: pointer;
  transition: border-color var(--dur-2, .24s) var(--ease, ease),
              color var(--dur-2, .24s) var(--ease, ease);
}
.bird-cancel:hover:not(.off):not(:disabled) { border-color: var(--bad, #d0533f); color: var(--bad, #d0533f); }
.bird-cancel.off, .bird-cancel:disabled { opacity: .45; cursor: default; }

/* ============================================================
 * 伴学面板（2026-10-11 加）
 * ------------------------------------------------------------
 * 用户要的："加入伴学功能，这个功能**在点击展开功能时是一直在其他功能最上边**的，
 *   并且可以和她聊天、对话"。聊的是绿豆本人（人形态）。
 * ⚠️ "一直在其他功能最上边" —— 这一条靠**两件事**一起保证：
 *    ① **竖排顺序**：.bird-pop 是竖列，伴学面板排在最后 → 在**最上面**（CSS 顺序）。
 *    ② **层级**：给它一个比同列别的件更高的 z-index，免得被气泡/记事本压住。
 *    （跟页面其它浮层的层级关系仍由 --z-bird 那个总变量管，别在这层写死跨模块的大数。）
 * ============================================================ */
.bird-study {
  display: none;
  position: relative;
  z-index: 3;                       /* ← 同列最高：永远盖在气泡 / 记事本 / 定时钟上面 */
  width: 340px;
  max-width: calc(100vw - 32px);
  border: 1px solid var(--line, #e4e7ed);
  border-radius: var(--radius, 14px);
  background: var(--surface, #fff);
  box-shadow: var(--sh-4, 0 18px 46px rgba(16, 24, 40, .16));
  overflow: hidden;
  pointer-events: auto;
  white-space: normal;
}
.bird-wrap.open.mode-study .bird-study { display: block; animation: birdPanelIn .3s var(--ease-out, ease-out); }
/* ⚠️ 2026-10-12 用户："把那个框往左边移动，移到小鸟头上（别压鸟头）"。
   面板右边缘往左挪 84px → 小鸟的头就从框的**右下角露出来**了。
   ⚠️ 为什么只能往左：面板 340 宽、鸟只有 104，而鸟贴着屏幕右边缘 —— 往右挪会让框顶出屏幕。
   ⚠️ 窄屏不加这一条（否则框左边缘会被推出屏幕外），窄屏维持原来的右对齐。 */
@media (min-width: 720px) {
  .bird-study { margin-right: 84px; }
}

/* ---- 聊天记录（可滚动） ---- */
.bird-s-log {
  max-height: min(42vh, 320px);
  min-height: 96px;
  overflow-y: auto;
  padding: 12px 12px 8px;
  border-top: 1px solid var(--line, #e4e7ed);
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.bird-msg { display: flex; }
.bird-msg.me { justify-content: flex-end; }
.bird-msg-tx {
  max-width: 84%;
  padding: 7px 11px;
  border-radius: 12px;
  font-size: 13.5px;
  line-height: 1.5;
  white-space: pre-wrap;
  word-break: break-word;
}
.bird-msg.ai .bird-msg-tx {
  background: var(--surface-2, #f1f3f7);
  color: var(--text, #161a20);
  border-bottom-left-radius: 4px;
}
.bird-msg.me .bird-msg-tx {
  background: var(--brand, #185fa5);
  color: #fff;
  border-bottom-right-radius: 4px;
}
.bird-msg.typing .bird-msg-tx { color: var(--text-3, #8b95a3); font-style: italic; }
/* 微信那样的时间分隔（2026-10-15）：隔得久才出现一行居中小字 */
.bird-msg-when {
  align-self: center;
  padding: 2px 0;
  font-size: 11.5px;
  color: var(--text-3, #8b95a3);
}
.bird-s-hi { padding: 4px 2px; color: var(--text-2, #58616f); font-size: 13.5px; line-height: 1.6; }
.bird-s-hi p { margin: 0 0 5px; }
.bird-s-hi .bird-s-tips { color: var(--text-3, #8b95a3); font-size: 12px; }
/* 空态那三个"能听懂的例子"（2026-10-15）：点一下直接发出去，顺便当说明书 */
.bird-s-ex { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 2px 0 7px; }
.bird-s-ex-t { font-size: 12px; color: var(--text-3, #8b95a3); }
.bird-s-ex button {
  padding: 5px 10px;
  border: 1px solid var(--line, #e4e7ed);
  border-radius: 999px;
  background: var(--surface, #fff);
  color: var(--brand-strong, #12507f);
  font: inherit; font-size: 12px;
  cursor: pointer;
  white-space: nowrap;
  transition: border-color var(--dur-2, .24s) var(--ease, ease),
              background var(--dur-2, .24s) var(--ease, ease),
              transform var(--dur-1, .13s) var(--ease, ease);
}
.bird-s-ex button:hover { border-color: var(--brand, #185fa5); background: var(--brand-soft, #e5f0fb); }
.bird-s-ex button:active { transform: scale(.96); }

/* ---- 输入区 ---- */
.bird-s-foot { display: flex; gap: 7px; padding: 10px 12px; align-items: center; }
.bird-s-inp { flex: 1; min-width: 0; }
.bird-s-send { flex-shrink: 0; }
.bird-s-send:disabled { opacity: .6; cursor: default; }
/* 「说给我听」麦克风（2026-10-15）：跟发送按钮同高，平时安静、听着的时候亮起来 */
.bird-s-mic {
  flex-shrink: 0;
  display: inline-flex; align-items: center; justify-content: center;
  width: 34px; height: 34px;
  padding: 0;
  border: 1px solid var(--line-strong, #ccd2dc);
  border-radius: var(--radius-sm, 9px);
  background: var(--surface, #fff);
  color: var(--text-2, #58616f);
  cursor: pointer;
  transition: border-color var(--dur-2, .24s) var(--ease, ease),
              color var(--dur-2, .24s) var(--ease, ease),
              background var(--dur-2, .24s) var(--ease, ease),
              transform var(--dur-1, .13s) var(--ease, ease);
}
.bird-s-mic:hover { border-color: var(--brand, #185fa5); color: var(--brand, #185fa5); }
.bird-s-mic:active { transform: scale(.94); }
.bird-s-mic.on {
  border-color: var(--bad, #d0533f);
  color: #fff;
  background: var(--bad, #d0533f);
  animation: birdMicPulse 1.1s var(--ease, ease) infinite;
}
@keyframes birdMicPulse { 50% { opacity: .6; } }
@media (prefers-reduced-motion: reduce) { .bird-s-mic.on { animation: none; } }
.bird-s-note {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 0 12px 11px;
  font-size: 11.5px;
  color: var(--text-3, #8b95a3);
  line-height: 1.5;
}
.bird-s-note-tx { flex: 1; min-width: 0; }
/* 「接上 AI 接口」—— 没接接口时那个直达设置的小按钮（用户说"没找到 API 接口"） */
.bird-s-cfg {
  flex-shrink: 0;
  padding: 4px 9px;
  border: 1px solid var(--brand, #185fa5);
  border-radius: 999px;
  background: var(--brand-soft, #e5f0fb);
  color: var(--brand-strong, #12507f);
  font: inherit; font-size: 11.5px; font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  transition: background var(--dur-2, .24s) var(--ease, ease),
              transform var(--dur-1, .13s) var(--ease, ease);
}
.bird-s-cfg:hover { background: #d7e9fb; }
.bird-s-cfg:active { transform: scale(.96); }

/* ---- "对话时图片变成人形的绿豆" ----
   ⚠️ 用**独立类** `.study-form`，不复用 `.human`：
      `.human` 是"撸满 25 下变身 2.5 秒"那套，会自己 timeout 变回来；
      伴学要的是"**一直在人形态**"，两处混用会打架（聊到一半被变回小鸟）。
   下面这几条跟 `.human` 的显示规则并列写一份即可。 */
.bird-wrap.study-form .bird-svg { display: none; }
.bird-wrap.study-form .bird-human {
  display: block;
  opacity: 1;
  transform: scale(1) translateY(0);
}
/* ⚠️⚠️ 2026-10-15 用户："绿豆在伴学下怎么没有撸的动画，加上" ——
   所以 `.study-form` 也要**能撸**，动画跟 `.human` 那套一模一样（复用同一批 keyframes）。
   （2026-10-14 曾经反着来过一版"伴学不能撸"，**已按用户要求撤掉**。） */
.bird-wrap.study-form.patting .bird-human { animation: birdHumanWob .34s var(--ease, ease) infinite; }
.bird-wrap.study-form.squish .bird-human { animation: birdPat .34s var(--spring, cubic-bezier(.34, 1.56, .64, 1)) 1; }
.bird-wrap.study-form.happy .bird-human { animation: birdHop .62s var(--spring, cubic-bezier(.34, 1.56, .64, 1)) 1; }


/* ---- 计时中：收起态那颗小气泡也标一下（不用点开就看得见） ---- */
.bird-wrap.timing .bird-bubble::before {
  content: '';
  display: block;
  flex-shrink: 0;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--ok, #1a9e5c);
  animation: birdDot 1.4s var(--ease, ease) infinite;
}
@keyframes birdDot { 50% { opacity: .25; } }

/* ---- 到点提示（自己贴着鸟头顶，不塞进 .bird-pop） ---- */
.bird-alert {
  display: none;
  position: absolute;
  right: 0;
  bottom: calc(100% + 2px);
  align-items: center;
  gap: 13px;
  /* 2026-10-06：用户说"提示太小了" —— 整条做大一档，边框也加粗，隔着房间也看得见 */
  padding: 14px 18px;
  border: 2px solid #eeb98d;
  border-radius: var(--radius, 14px);
  background: linear-gradient(180deg, #fff8f0, #fff1e2);
  box-shadow: var(--sh-4, 0 18px 46px rgba(16, 24, 40, .2));
  color: #8a4a12;
  pointer-events: auto;
  white-space: nowrap;
}
.bird-wrap.ringing .bird-alert { display: flex; animation: birdAlertIn .3s var(--ease-out, ease-out); }
/* 提示优先：别跟气泡/面板挤在同一块地方 */
.bird-wrap.ringing .bird-pop { display: none; }
@keyframes birdAlertIn { from { opacity: 0; transform: translateY(10px) scale(.96); } }
.bird-a-ic { font-size: 28px; line-height: 1; }
.bird-a-tx { display: flex; flex-direction: column; gap: 2px; }
.bird-a-tx b { font-size: 16px; }
.bird-a-tx .sub { font-size: 12.5px; color: #a2703a; }
/* 到点了：**整只鸟蹦起来**（2026-10-06 用户要求 —— 原来只是原地抖两下，他觉得"提示太小了"）。
   一直跳到点「知道了」为止；跳得比换模式那下（-15）更高（-24），一眼就看得见。 */
.bird-wrap.ringing .bird-all, .bird-wrap.ringing .bird-human { animation: birdRingJump 1.05s var(--ease, ease) infinite; }
@keyframes birdRingJump {
  0%, 100% { transform: scale(1, 1) translateY(0); }
  10%  { transform: scale(.9, 1.12) translateY(0); }        /* 蹲一下 */
  34%  { transform: scale(1.05, .93) translateY(-24px); }   /* 蹦起来 */
  58%  { transform: scale(1, 1) translateY(0); }
  70%  { transform: scale(1.08, .9) translateY(-11px); }    /* 再颠一下 */
  86%  { transform: scale(1, 1) translateY(0); }
}
/* 到点抖 / 计时小点闪 / 模式气泡滑入 —— 怕晕动的关掉这三个，
   其余（被撸的压扁那些）本来就在 style.css 那边有统一降级，这里只补鸟自己的新增件 */
@media (prefers-reduced-motion: reduce) {
  .bird-wrap.ringing .bird-all, .bird-wrap.ringing .bird-human { animation: none; }
  .bird-wrap.timing .bird-bubble::before { animation: none; }
  .bird-mode { animation: none; }
  .bird-wrap.mode-hop .bird-all, .bird-wrap.mode-hop .bird-human { animation: none; }      /* 换模式别跳了 */
  .bird-wrap.human .bird-human { transition: none; }      /* 变身直接换，别缩放 */
  .bird-alarm-pop { transition: none; }                   /* 手里换东西直接换 */
}

.bird-head {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 11px 12px 10px 14px;
  background: linear-gradient(135deg, #f4fbf2 0%, #f7fdf3 100%);
  border-bottom: 1px solid var(--line, #e4e7ed);
}
.bird-head .ttl { font-size: 13.5px; font-weight: 700; color: var(--text, #161a20); }
.bird-head .sub { font-size: 11.5px; color: var(--text-3, #8b95a3); }
.bird-x {
  margin-left: auto;
  width: 26px; height: 26px;
  display: flex; align-items: center; justify-content: center;
  border: 0; border-radius: 8px; background: transparent;
  color: var(--text-3, #8b95a3); cursor: pointer;
  transition: background var(--dur-1, .13s) var(--ease, ease), color var(--dur-1, .13s) var(--ease, ease);
}
.bird-x:hover { background: var(--surface-3, #e9edf3); color: var(--text, #161a20); }

.bird-add { display: flex; gap: 7px; padding: 12px 12px 10px; }
.bird-input {
  flex: 1; min-width: 0;
  height: 34px;
  padding: 0 11px;
  border: 1px solid var(--line, #e4e7ed);
  border-radius: var(--radius-sm, 9px);
  background: var(--surface, #fff);
  color: var(--text, #161a20);
  font-size: 13.5px;
  font-family: inherit;
  outline: none;
  transition: border-color var(--dur-2, .24s) var(--ease, ease), box-shadow var(--dur-2, .24s) var(--ease, ease);
}
.bird-input::placeholder { color: var(--text-3, #8b95a3); }
.bird-input:focus { border-color: var(--brand, #185fa5); box-shadow: 0 0 0 3px var(--brand-ring, rgba(24, 95, 165, .22)); }
.bird-btn {
  height: 34px; padding: 0 13px;
  border: 1px solid var(--brand, #185fa5);
  border-radius: var(--radius-sm, 9px);
  background: var(--brand, #185fa5);
  color: #fff;
  font-size: 13px; font-weight: 600; font-family: inherit;
  cursor: pointer;
  transition: transform var(--dur-1, .13s) var(--ease, ease), background var(--dur-2, .24s) var(--ease, ease);
}
.bird-btn:hover { background: var(--brand-strong, #12507f); }
.bird-btn:active { transform: scale(.96); }
.bird-btn.ghost {
  background: var(--surface, #fff); color: var(--text-2, #58616f);
  border-color: var(--line-strong, #ccd2dc);
}
.bird-btn.ghost:hover { background: var(--surface-2, #f1f3f7); color: var(--text, #161a20); }

.bird-list {
  max-height: min(46vh, 340px);
  overflow-y: auto;
  padding: 2px 8px 6px;
  border-top: 1px solid var(--line, #e4e7ed);
}
.bird-task {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  padding: 8px 6px;
  border-radius: var(--radius-sm, 9px);
  transition: background var(--dur-2, .24s) var(--ease, ease);
}
.bird-task + .bird-task { border-top: 1px dashed var(--line, #e4e7ed); }
.bird-task:hover { background: var(--surface-2, #f1f3f7); }
/* 编号：**创建时的顺序号**，删掉中间那条后面的也不会往前挪 → 所以是个小圆牌 */
.bird-no {
  flex-shrink: 0;
  min-width: 21px; height: 21px;
  margin-top: 1px;
  padding: 0 5px;
  border-radius: 999px;
  background: var(--brand-soft, #e5f0fb);
  color: var(--brand-strong, #12507f);
  font-size: 11.5px; font-weight: 700; line-height: 21px;
  text-align: center;
}
.bird-tx {
  flex: 1; min-width: 0;
  font-size: 13.5px; line-height: 1.5;
  color: var(--text, #161a20);
  white-space: pre-wrap; word-break: break-word;
  padding-top: 1px;
}
/* 「改一下 / 删掉」两个小按钮：平时就露一半，鼠标碰上去才全亮 ——
   完全藏起来（opacity:0）看着干净，但"这条能改吗"就没人知道了。 */
.bird-acts { display: flex; gap: 1px; flex-shrink: 0; opacity: .5; transition: opacity var(--dur-2, .24s) var(--ease, ease); }
.bird-task:hover .bird-acts,
.bird-task.editing .bird-acts { opacity: 1; }
/* 触屏 / 键盘：没有 hover 也得看得见那两个按钮 */
@media (hover: none) { .bird-acts { opacity: 1; } }
.bird-task:focus-within .bird-acts { opacity: 1; }
.bird-ib {
  width: 25px; height: 25px;
  display: flex; align-items: center; justify-content: center;
  border: 0; border-radius: 7px; background: transparent;
  color: var(--text-3, #8b95a3); cursor: pointer;
  transition: background var(--dur-1, .13s) var(--ease, ease), color var(--dur-1, .13s) var(--ease, ease);
}
.bird-ib:hover { background: var(--surface-3, #e9edf3); color: var(--text, #161a20); }
.bird-ib.del:hover { background: var(--bad-soft, #fcebeb); color: var(--bad, #d64545); }
/* 正在改的那一行 */
.bird-task.editing { background: var(--brand-soft, #e5f0fb); }
.bird-task.editing .bird-input { height: 30px; font-size: 13px; }
.bird-edit-row { flex: 1; min-width: 0; display: flex; gap: 6px; align-items: center; }
.bird-edit-row .bird-btn { height: 30px; padding: 0 10px; font-size: 12.5px; }

.bird-empty {
  padding: 22px 12px;
  text-align: center;
  color: var(--text-3, #8b95a3);
  font-size: 13px;
}
.bird-empty b { color: var(--text-2, #58616f); font-weight: 600; }

.bird-foot {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px 10px 12px;
  border-top: 1px solid var(--line, #e4e7ed);
  background: var(--surface-2, #f1f3f7);
}
.bird-note { flex: 1; min-width: 0; font-size: 11.5px; line-height: 1.45; color: var(--text-3, #8b95a3); }
.bird-clear {
  flex-shrink: 0;
  height: 28px; padding: 0 11px;
  border: 1px solid var(--line-strong, #ccd2dc);
  border-radius: 999px;
  background: var(--surface, #fff);
  color: var(--text-2, #58616f);
  font-size: 12px; font-family: inherit; font-weight: 600;
  cursor: pointer;
  transition: background var(--dur-2, .24s) var(--ease, ease), color var(--dur-2, .24s) var(--ease, ease),
              border-color var(--dur-2, .24s) var(--ease, ease);
}
.bird-clear:hover { border-color: var(--bad, #d64545); color: var(--bad, #d64545); background: var(--bad-soft, #fcebeb); }
.bird-clear.arm { background: var(--bad, #d64545); border-color: var(--bad, #d64545); color: #fff; }
.bird-clear.arm:hover { background: #c33c3c; border-color: #c33c3c; color: #fff; }
.bird-wrap.readonly .bird-add,
.bird-wrap.readonly .bird-foot { display: none; }

/* ============================ 窄屏 ============================ */
@media (max-width: 720px) {
  :root { --bird-size: 84px; }
  .bird-panel { width: min(330px, calc(100vw - 24px)); }
  /* 窄屏也跟 `.side-jump` 一样退到 22px 的位置，保持上下对齐
     （那边窄屏没有再覆盖，仍是 22px） */
  .bird-wrap { right: 22px; bottom: 32px; }
  body.prac-setup .bird-wrap,
  body.rev-page .bird-wrap { bottom: 110px; }
}

/* ---- 清除对话（2026-10-17 用户："或者也加入一个清除对话的功能，太卡了"）----
   放在标题栏最右边、✕ 的左边。**点两下**才真清：第一下变「确认清空」（3 秒后自己撤回）。
   ⚠️ 不用原生 confirm —— iframe / 预览面板里会被静默拦掉。
   `.bird-x` 本来靠 `margin-left:auto` 顶到最右；这里让**清空**吃掉这个 auto，✕ 紧跟其后。 */
.bird-s-clr {
  margin-left: auto;
  height: 24px;
  padding: 0 8px;
  border: 1px solid transparent;
  border-radius: 7px;
  background: transparent;
  color: var(--text-3, #8b95a3);
  font-size: 11.5px;
  line-height: 1;
  cursor: pointer;
  transition: background var(--dur-1, .13s) var(--ease, ease),
              color var(--dur-1, .13s) var(--ease, ease),
              border-color var(--dur-1, .13s) var(--ease, ease);
}
.bird-s-clr:hover { background: var(--surface-3, #e9edf3); color: var(--text, #161a20); }
.bird-s-clr.armed { color: var(--bad, #d64545); border-color: var(--bad, #d64545); background: var(--bad-soft, #fcebeb); }
.bird-s-clr + .bird-x { margin-left: 0; }

/* ============================================================
 * 选中文字后的浮标（复制 / 问绿豆）  2026-10-18
 * ------------------------------------------------------------
 * 由 bird.js 的 §4g 动态插进 body，只在**页面里有选中文字**时出现。
 * 层级用 --z-pick（style.css 的层级总表），要比内容高、比抽屉/设置低。
 * ⚠️ 别给它写死 z-index。
 * ============================================================ */
.bird-pick {
  position: fixed;
  z-index: var(--z-pick, 1210);
  left: 0; top: 0;
  display: none;                       /* 默认不显示，由 JS 加 .on */
  align-items: center;
  gap: 2px;
  padding: 3px;
  border-radius: 11px;
  background: #22302a;
  box-shadow: 0 8px 22px rgba(0, 0, 0, .26), 0 0 0 1px rgba(255, 255, 255, .06) inset;
  font-size: 12.5px;
  line-height: 1;
  user-select: none;
  -webkit-user-select: none;
}
.bird-pick.on { display: flex; }

.bp-btn {
  border: 0;
  background: transparent;
  color: #d9e6dd;
  font: inherit;
  padding: 7px 10px;
  border-radius: 8px;
  cursor: pointer;
  white-space: nowrap;
  transition: background var(--dur-1, .13s) var(--ease, ease), color var(--dur-1, .13s) var(--ease, ease);
}
.bp-btn:hover { background: rgba(255, 255, 255, .12); color: #fff; }
.bp-btn:active { transform: translateY(1px); }
.bp-btn.bp-main { color: #b6e88a; font-weight: 600; }
.bp-btn.bp-main:hover { background: rgba(168, 218, 125, .18); color: #cdf2a8; }
.bp-ok { padding: 7px 10px; color: #b6e88a; font-weight: 600; }

@media (prefers-reduced-motion: reduce) {
  .bp-btn { transition: none; }
  .bp-btn:active { transform: none; }
}

/* =====================================================================
 * 拖动 / 调节大小 / 钻桌子底（2026-10-18 用户要的三样）
 * ---------------------------------------------------------------------
 * · 她拖到哪儿，三条杠 / 气泡 / 面板**自动跟着走**（都挂在 .bird-wrap 里，
 *   而 .bird-wrap 是 position:fixed，JS 只改 left/top）。
 * · 调节大小**只改 --bird-size**：按钮是写死的 26px，所以不会跟着变大变小，
 *   只是位置跟着挪 —— 这正是用户要的"按钮不缩放、跟着移"。
 * · 藏起来 = 整个 wrap 往下钻，页面底部留一条「桌面」，点它回来。
 * ===================================================================== */

/* 拖动中：光标换成"抓着"，别顺手选中页面文字 */
.bird-wrap.dragging, .bird-wrap.dragging * { cursor: grabbing !important; }

/* 钻桌底 / 冒出来：走 transform，不影响别的布局 */
.bird-wrap {
  transition: transform .34s var(--spring, cubic-bezier(.34, 1.56, .64, 1)),
              opacity .3s var(--ease, ease);
}
.bird-wrap.buried {
  /* ⚠️ 用 100vh 而不是 100%：她在页面中间时"往下挪自己那么高"根本没挪出屏幕
     （踩过：拖到 y=160 再藏，只挪到 372，还在脸上）。整屏往下推才一定钻到桌沿下面。 */
  transform: translateY(100vh);
  pointer-events: none;            /* 藏起来就彻底让开，别挡着下面的按钮 */
}

/* 「桌子」：藏起来之后只剩这一小块 —— 桌沿 + 她露出来的一点脑袋。
   ⚠️ 2026-10-18 用户给了图（`assets/bird-hide.png`，原图自带透明底，
      只按内容裁到 199×71）。以前是"横贯整屏的一条浅木条"，现在换成这张小插画。
   点一下叫她出来（见 bird.js 的 ensureDesk / setBuried）。
   ⚠️ 只在 body.bird-buried 时显示；层级比小鸟低一档。 */
.bird-desk {
  position: fixed;
  right: 22px; bottom: 0;
  width: 75px;                        /* JS 会按当前大小改它（鸟的 0.72 倍），这只是兜底 */
  aspect-ratio: 199 / 71;
  display: none;
  z-index: calc(var(--z-bird, 1190) - 1);
  background: url(bird-hide.png) no-repeat center bottom / contain;
  cursor: pointer;
  pointer-events: auto;
  animation: deskIn .22s ease-out;
}
body.bird-buried .bird-desk { display: block; }
@keyframes deskIn {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .bird-desk { animation: none; }
}

/* 调节大小：右下角那颗小方角（像拉窗口），平时透明，hover / 拖的时候才亮 */
.bird-grip {
  position: absolute;
  right: -6px; bottom: 2px;
  width: 20px; height: 20px;
  border-radius: 6px;
  border: 1px solid var(--line-strong, #ccd2dc);
  background-color: rgba(255, 255, 255, .94);
  background-image: radial-gradient(circle, #9aa6b4 1.1px, transparent 1.2px);
  background-size: 5px 5px;
  background-position: 11px 11px;
  box-shadow: var(--sh-1, 0 1px 3px rgba(16, 24, 40, .08));
  cursor: nwse-resize;
  opacity: 0;
  pointer-events: auto;
  transition: opacity .15s var(--ease, ease);
}
.bird-wrap:hover .bird-grip,
.bird-wrap.resizing .bird-grip { opacity: 1; }

/* 藏起来那颗按钮：收起时挂在三条杠上方；**模式栏展开时挪到「伴学」右边**（见下面 .modes-open 那段） */
.bird-hide-btn {
  position: absolute;
  /* 2026-10-18 用户："把隐藏按钮放在伴学按钮的右边" ——
     所以它跟三条杠**并排一行**、站在三条杠右边（贴着鸟，11px）。 */
  right: calc(100% + 11px);
  bottom: calc(100% + 2px);
  width: 26px; height: 26px;
  display: inline-flex; align-items: center; justify-content: center;
  padding: 0;
  border: 1px solid var(--line, #e4e7ed);
  border-radius: 8px;
  background: var(--surface, #fff);
  color: var(--text-2, #58616f);
  font-size: 10px; line-height: 1;
  cursor: pointer;
  pointer-events: auto;
  z-index: 2;
  box-shadow: var(--sh-1, 0 1px 3px rgba(16, 24, 40, .05));
  transition: background var(--dur-1, .13s) var(--ease, ease),
              color var(--dur-1, .13s) var(--ease, ease);
}
.bird-hide-btn:hover { background: var(--surface-3, #e9edf3); color: var(--text, #161a20); }