/* ==========================================================================
   星宠伙伴 · 宠物系统样式（css/pet.css）
   --------------------------------------------------------------------------
   服务两块：悬浮宠物组件（pet-widget.js）与宠物小屋（pet.html）。
   颜色/圆角/阴影全部沿用 css/style.css 的 CSS 变量，粉梦皮肤下自动跟随。
   ========================================================================== */

/* ---------------------------------------------------------- 悬浮宠物 */
.pet-widget {
  position: fixed; right: 18px; bottom: 18px; z-index: 940;
  display: flex; flex-direction: column; align-items: center;
  touch-action: none; user-select: none; -webkit-user-select: none;
  -webkit-touch-callout: none;
}
.pet-widget[hidden] { display: none; }

/* 说话气泡（20261106 改为绝对定位）：
   原来气泡在 flex 纵向流里，气泡一冒出来就把组件整体撑高 ~50px，
   组件贴底时积分条会被顶出屏幕（"宠物跳出视野"的来源之一）。
   改为浮在组件上方后，气泡出现/消失不再改变组件高度与位置。 */
.petw-bubble {
  position: absolute; left: 50%; bottom: calc(100% + 8px);
  transform: translateX(-50%);
  z-index: 3; width: max-content; max-width: 220px;
  background: var(--surface); border: 1.5px solid var(--border-2);
  border-radius: 14px; padding: 9px 13px;
  font-size: 13px; font-weight: 650; line-height: 1.55; color: var(--text);
  box-shadow: var(--shadow);
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  animation: petw-pop .28s ease;
  /* 纯文字气泡不拦截点击（20261110）：气泡浮在宠物上方，会压住页面底部按钮。
     气泡里的按钮单独恢复可点，避免误伤「聊聊 / 去领养 / 关闭引导」。 */
  pointer-events: none;
}
.petw-bubble button, .petw-bubble a { pointer-events: auto; }
.petw-bubble::after {
  content: ''; position: absolute; left: var(--petw-tail, 50%); bottom: -7px;
  width: 12px; height: 12px; background: var(--surface);
  border-right: 1.5px solid var(--border-2); border-bottom: 1.5px solid var(--border-2);
  transform: translateX(-50%) rotate(45deg);
}
.petw-bubble .plus {
  display: block; margin-top: 3px; font-size: 12.5px; font-weight: 800;
  color: var(--accent);
}
/* 上方空间不够（宠物被拖到屏幕顶部）时气泡翻到宠物下方，小三角朝上 */
.petw-bubble.is-below {
  bottom: auto; top: calc(100% + 8px);
}
.petw-bubble.is-below::after {
  bottom: auto; top: -7px;
  border-right: 0; border-bottom: 0;
  border-left: 1.5px solid var(--border-2); border-top: 1.5px solid var(--border-2);
}

.petw-body {
  position: relative; padding-top: 6px;
  perspective: 700px; perspective-origin: 50% 62%;
}
/* 纯宠物展示：无托盘无边框无影子，透明立绘直接悬浮 */
.petw-stage {
  position: relative; width: 96px; height: 96px; cursor: grab;
  transform-origin: center bottom; z-index: 1;
  transform-style: preserve-3d;
}
.petw-stage:active { cursor: grabbing; }
.petw-stage img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  pointer-events: none;
  filter: drop-shadow(0 5px 7px rgba(40, 50, 78, .16));
}

/* ---- 3D 立体感（20261105）：真透视 + 体积光 + 接触阴影 ---- */
/* 体积光：用立绘自身 alpha 做遮罩，只在身体内部打光，绝不会出现方块边缘
   三层光源叠加：移动的高光点 + 明暗过渡 + 地面反弹冷光 */
.pet-shade {
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background:
    radial-gradient(120% 90% at 22% 6%, rgba(255, 255, 255, .55), rgba(255, 255, 255, 0) 50%),
    linear-gradient(104deg, rgba(255, 255, 255, .26), rgba(0, 0, 0, .34) 82%),
    linear-gradient(0deg, rgba(88, 130, 255, .20), rgba(88, 130, 255, 0) 40%);
  -webkit-mask-size: 100% 100%; mask-size: 100% 100%;
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  -webkit-mask-position: center; mask-position: center;
  opacity: .38; transition: opacity .18s linear;
  animation: petw-breathe 4.2s ease-in-out infinite;
  transform-origin: center bottom;
}
/* 侧面暗部：转身时把远离观众的一侧压暗，让"转到侧面"有真实的厚度感，
   而不是整张正面立绘被挤窄。默认不可见（yaw=0 时 opacity 0）。 */
.pet-side {
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(90deg,
    rgba(18, 28, 56, 0) 40%, rgba(18, 28, 56, .14) 68%, rgba(18, 28, 56, .55));
  -webkit-mask-size: 100% 100%; mask-size: 100% 100%;
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  -webkit-mask-position: center; mask-position: center;
  opacity: 0; transition: opacity .14s linear;
  transform-origin: center bottom;
}
/* 接触阴影：跟着跳跃/落地变大变小、变浓变淡（是投影，不是背景） */
.pet-shadow {
  position: absolute; left: 50%; bottom: 2px; width: 64px; height: 15px;
  margin-left: -32px; z-index: 0; pointer-events: none;
  border-radius: 50%; transform-origin: center bottom;
  will-change: transform, opacity;
  background: radial-gradient(ellipse at 50% 50%,
    rgba(34, 44, 70, .30), rgba(34, 44, 70, .12) 55%, rgba(34, 44, 70, 0) 74%);
}
.petw-stage.happy { animation: petw-bounce .5s ease; }

/* 立绘叠加装饰（帽子/眼镜/围巾/徽章） */
.petw-deco {
  position: absolute; transform: translateX(-50%); pointer-events: none;
}
.petw-deco svg { width: 100%; height: auto; display: block; overflow: visible; }

.petw-name {
  margin-top: 5px; max-width: 110px; overflow: hidden; text-overflow: ellipsis;
  white-space: nowrap; text-align: center;
  font-size: 11.5px; font-weight: 800; color: var(--text-2);
  background: var(--surface); border-radius: 999px; padding: 2px 10px;
  border: 1px solid var(--border);
  transform-origin: center top; will-change: transform;
}

.petw-bar {
  display: flex; align-items: center; gap: 5px; margin-top: 4px;
  font-size: 11px; font-weight: 800; color: #b45309;
  background: #fef7ec; border: 1px solid #f0dfba; border-radius: 999px;
  padding: 2px 9px; white-space: nowrap;
  transform-origin: center top; will-change: transform;
}

/* 收起态：一个小圆钮（无底色，直接是缩小的宠物） */
.petw-mini {
  width: 46px; height: 46px; padding: 0; border: 0; background: none;
  cursor: pointer;
}
.petw-mini img { width: 100%; height: 100%; object-fit: contain; display: block; }

/* 收起小球（功能入口在右键 / 长按菜单里，身上不再挂按钮） */
.petw-miniwrap { display: flex; align-items: center; gap: 5px; }

/* 未领养引导气泡（20261106）：首次访问出现一次，点气泡去领养，× 关闭 */
.petw-guide {
  max-width: 210px; padding-right: 25px; cursor: pointer;
  text-align: left;
}
.petw-guide-x {
  position: absolute; top: 2px; right: 2px; width: 24px; height: 24px;
  padding: 0; border: 0; border-radius: 50%; background: none;
  font-family: inherit; font-size: 15px; line-height: 1; color: var(--muted);
  cursor: pointer;
}
.petw-guide-x:hover, .petw-guide-x:focus-visible {
  background: var(--bg-soft); color: var(--text); outline: none;
}
.petw-guide-go {
  display: block; width: fit-content; margin-top: 7px; padding: 4px 12px; border: 0;
  border-radius: 999px; background: var(--primary); color: #fff;
  font-family: inherit; font-size: 12px; font-weight: 800; cursor: pointer;
}
.petw-guide-go:hover, .petw-guide-go:focus-visible {
  filter: brightness(1.06); outline: none;
}

/* 功能菜单（20261106）：电脑端右键、手机端长按唤出，
   收纳原来常驻在宠物身上的「缩小成小球 / 隐藏宠物」。
   位置由 JS 按指针坐标贴边收拢，绝不出屏。 */
.petw-menu {
  position: fixed; left: 0; top: 0; z-index: 985; min-width: 132px;
  padding: 5px; border-radius: 12px;
  background: var(--surface); border: 1.5px solid var(--border-2);
  box-shadow: var(--shadow-lg);
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  animation: petw-menu-in .16s ease-out;
}
.petw-menu[hidden] { display: none; }
.petw-menu button {
  display: flex; align-items: center; gap: 8px; width: 100%;
  padding: 8px 11px; border: 0; border-radius: 8px; background: none;
  font-family: inherit; font-size: 12.5px; font-weight: 700; line-height: 1.4;
  color: var(--text); text-align: left; white-space: nowrap; cursor: pointer;
  transition: background .14s, color .14s;
}
.petw-menu button:hover, .petw-menu button:focus-visible {
  background: var(--bg-soft); outline: none;
}
.petw-menu button.danger { color: var(--danger); }
.petw-menu button.danger:hover, .petw-menu button.danger:focus-visible {
  background: var(--danger-l);
}
.petw-menu-ico { font-size: 13px; line-height: 1; }
@keyframes petw-menu-in {
  from { opacity: 0; transform: translateY(4px) scale(.96); }
  to   { opacity: 1; transform: none; }
}

/* 彻底隐藏后的唤回小爪印 */
.petw-peek {
  width: 38px; height: 38px; border-radius: 50%; padding: 0;
  border: 1.5px dashed var(--border-2); background: var(--surface);
  font-size: 17px; cursor: pointer; opacity: .65;
  transition: opacity .18s, transform .18s;
}
.petw-peek:hover { opacity: 1; transform: scale(1.12); }

@keyframes petw-pop {
  /* 气泡绝对定位后靠 translateX(-50%) 居中，动画必须带着它，
     否则入场瞬间会向右跳半个气泡宽 */
  from { opacity: 0; transform: translate(-50%, 8px) scale(.92); }
  to   { opacity: 1; transform: translate(-50%, 0) scale(1); }
}
@keyframes petw-bounce {
  0% { transform: translateY(0); }
  35% { transform: translateY(-12px) scale(1.05); }
  70% { transform: translateY(2px) scale(.98); }
  100% { transform: translateY(0); }
}

/* ------------------------------------------------ 活体行为（20261105）
   宠物不再是挂饰：立绘常驻呼吸微动，JS 调度随机小动作（歪头/蹦跳/转圈/
   伸懒腰/踱步/张望/眨眼蹲），久不理会打瞌睡冒 💤。动画全走 transform/opacity。 */

/* 呼吸：常驻微动，宠物"活着"（幅度调小、周期放慢，避免与动作节奏打架） */
.petw-stage img, .ph-stage img {
  animation: petw-breathe 4.2s ease-in-out infinite;
  transform-origin: center bottom;
}
/* 表情层（星星眼/腮红/情绪芯片）必须与立绘同一呼吸节奏，否则会错位 */
.pf-layer {
  position: absolute; inset: 0; z-index: 2; pointer-events: none;
  animation: petw-breathe 4.2s ease-in-out infinite;
  transform-origin: center bottom;
}
.petw-body.is-sleeping .pf-layer,
.ph-stage.is-sleeping .pf-layer { animation-duration: 6s; }
.pf-star {
  position: absolute; transform: translate(-50%, -50%);
  color: #ffd166; text-shadow: 0 0 6px rgba(255, 200, 80, .9);
  opacity: 0; transition: opacity .18s ease;
}
.pf-blush {
  position: absolute; transform: translate(-50%, -50%);
  border-radius: 50%; opacity: 0;
  background: radial-gradient(closest-side, rgba(255, 140, 170, .55), rgba(255, 140, 170, 0));
  transition: opacity .3s ease;
}
.pf-blush-on .pf-blush { opacity: 1; }
.pf-chips { position: absolute; inset: 0; }
.pf-chip {
  position: absolute; transform: translate(-50%, -50%);
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 14px; font-weight: 800; color: #f472b6;
  animation: pf-chip 1.5s ease forwards;
}
/* 互动结果小表情（20261109）：内联 SVG，24 网格描边 2 */
.pf-chip svg {
  display: block; width: 16px; height: 16px;
  fill: none; stroke: currentColor; stroke-width: 2;
  stroke-linecap: round; stroke-linejoin: round;
}
@keyframes pf-chip {
  0%   { opacity: 0; transform: translate(-50%, -50%) scale(.6); }
  25%  { opacity: 1; transform: translate(-50%, -80%) scale(1.1); }
  100% { opacity: 0; transform: translate(-50%, -220%) scale(1); }
}
@keyframes petw-breathe {
  0%, 100% { transform: scale(1) translateY(0); }
  50% { transform: scale(1.018) translateY(-1px); }
}

/* 随机小动作由物理引擎直接驱动（rAF 物理积分），
   不再使用 act-* CSS 硬切换（20261105 二次升级）。 */

/* 瞌睡：慢呼吸 + 冒 💤（is-sleeping 挂在舞台父层） */
.petw-body.is-sleeping .petw-stage img,
.ph-stage.is-sleeping img { animation-duration: 6s; }
.petw-body.is-sleeping .petw-stage::after,
.ph-stage.is-sleeping::after {
  content: '💤'; position: absolute; top: 5px; right: 7px; z-index: 2;
  font-size: 15px; pointer-events: none;
  animation: petw-zzz 2.6s ease-in-out infinite;
}
@keyframes petw-zzz {
  0% { opacity: 0; transform: translateY(8px) scale(.7) rotate(-8deg); }
  35% { opacity: 1; }
  100% { opacity: 0; transform: translateY(-12px) scale(1.15) rotate(8deg); }
}

/* 积分飘字 */
.pet-fly {
  position: fixed; z-index: 960; pointer-events: none;
  font-size: 15px; font-weight: 800; color: var(--accent);
  text-shadow: 0 1px 4px rgba(255, 255, 255, .9);
  animation: pet-fly 1s ease forwards;
}
@keyframes pet-fly {
  from { opacity: 1; transform: translateY(0); }
  to   { opacity: 0; transform: translateY(-52px); }
}

@media (prefers-reduced-motion: reduce) {
  .petw-bubble, .petw-stage.happy, .pet-fly, .petw-menu { animation: none; }
  .pf-layer, .pf-chip { animation: none; }
}

/* 手机端缩小 */
@media (max-width: 640px) {
  /* bottom 由 js/pet-widget.js 按「底部操作条 / 页面末尾主按钮」动态抬升，
     加过渡让上移下移不突兀；拖动时 bottom 为 auto，过渡不生效。 */
  .pet-widget { right: 10px; bottom: 10px; transition: bottom .18s ease; }
  /* 页面末尾的滚动余量：让最后一个按钮能滚到宠物上方（桌面端不生效） */
  body.pet-safe-pad { padding-bottom: calc(150px + env(safe-area-inset-bottom, 0px)); }
  .petw-stage { width: 72px; height: 72px; }
  .pet-shadow { width: 48px; height: 12px; margin-left: -24px; }
  .petw-bubble { max-width: 170px; font-size: 12px; }
  .petw-mini { width: 38px; height: 38px; }
}

/* ---------------------------------------------------------- 宠物小屋 */
/* 页眉（20261105）：补齐顶栏与返回入口，沿用全站 topbar 规格 */
.ph-topbar { border-bottom-color: rgba(244, 114, 182, .22); }
/* 品牌标已换成「书页星升」透明底图片（20261111），不再需要渐变方块底 */
.ph-back { display: inline-flex; align-items: center; gap: 5px; }
html[data-skin="pink"] .ph-topbar { border-bottom-color: rgba(219, 39, 119, .18); }

.ph-wrap { max-width: 960px; margin: 0 auto; padding: 20px 22px 80px; }

.ph-card {
  border: 1px solid var(--border); border-radius: var(--radius);
  background: var(--surface); padding: 16px; box-shadow: var(--shadow-sm);
}
.ph-card + .ph-card { margin-top: 14px; }
.ph-card h2 {
  font-size: 15px; margin: 0 0 12px; display: flex; align-items: center; gap: 8px;
}
/* 儿童向线性小图标（20261109）：与背单词「更多」抽屉同一套画法，
   24 viewBox / fill none / stroke currentColor / stroke-width 2，只取现有令牌 */
.ph-h2ic { display: inline-flex; width: 18px; height: 18px; flex: 0 0 auto; color: var(--primary); }
.ph-h2ic svg,
.ph-btn .ph-btnic,
.ph-baric svg {
  fill: none; stroke: currentColor; stroke-width: 2;
  stroke-linecap: round; stroke-linejoin: round;
}
.ph-h2ic svg { width: 100%; height: 100%; display: block; }
.ph-btn .ph-btnic { width: 17px; height: 17px; flex: 0 0 auto; }
.ph-baric { display: inline-flex; width: 13px; height: 13px; flex: 0 0 auto; color: var(--primary); }
.ph-baric svg { width: 100%; height: 100%; display: block; }

/* 领养卡片网格 */
.ph-adopt-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 12px;
}
.ph-adopt-card {
  border: 2px solid var(--border); border-radius: var(--radius);
  background: var(--surface); padding: 12px; text-align: center;
  cursor: pointer; transition: all .18s;
}
.ph-adopt-card:hover { border-color: var(--primary); transform: translateY(-3px); box-shadow: var(--shadow); }
.ph-adopt-card.sel { border-color: var(--primary); background: var(--primary-l); }
.ph-adopt-card img {
  width: 116px; height: 116px; border-radius: 50%; object-fit: cover;
  border: 2px solid var(--border); background: #fff;
}
.ph-adopt-card .nm { font-size: 15px; font-weight: 800; margin-top: 8px; }
.ph-adopt-card .sp { font-size: 11.5px; color: var(--muted); margin-top: 2px; }
.ph-adopt-card .tg { font-size: 12px; color: var(--text-2); margin-top: 6px; line-height: 1.5; }
.ph-tag {
  display: inline-block; font-size: 10.5px; font-weight: 800; border-radius: 999px;
  padding: 1px 8px; margin-top: 6px;
}
.ph-tag.boys { background: #e0f2fe; color: #0369a1; }
.ph-tag.girls { background: #fce7f3; color: #be185d; }
.ph-tag.any { background: #fef3c7; color: #b45309; }

/* 我的宠物主面板 */
.ph-stage-wrap {
  display: flex; gap: 18px; flex-wrap: wrap; align-items: flex-start;
}
.ph-stage-box { position: relative; width: 220px; flex: none; }
.ph-say {
  position: absolute; left: 50%; top: -14px; transform: translateX(-50%);
  z-index: 3; max-width: 240px; white-space: nowrap;
  background: var(--surface); border: 1.5px solid var(--border-2);
  border-radius: 12px; padding: 6px 12px;
  font-size: 12.5px; font-weight: 700; color: var(--text);
  box-shadow: var(--shadow); animation: petw-pop .28s ease;
}
.ph-say::after {
  content: ''; position: absolute; left: 50%; bottom: -6px;
  width: 10px; height: 10px; background: var(--surface);
  border-right: 1.5px solid var(--border-2); border-bottom: 1.5px solid var(--border-2);
  transform: translateX(-50%) rotate(45deg);
}
/* 纯宠物舞台：无底色无边框，透明立绘直接站在卡片上 */
.ph-stage {
  position: relative; width: 220px; height: 220px; flex: none;
  perspective: 700px; perspective-origin: 50% 62%;
  /* 上滑跳跃手势（20261112）：舞台内不响应当页滚动，否则手指上划会被浏览器
     当成滚动并取消 pointer 事件，跳跃永远触发不了 */
  touch-action: none;
}
.ph-stage img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  filter: drop-shadow(0 8px 12px rgba(40, 50, 78, .16));
}
.ph-stage .ph-live {
  position: absolute; inset: 0; z-index: 1;
  transform-origin: center bottom; will-change: transform;
  transform-style: preserve-3d;
}
/* 小屋里的接触阴影比悬浮件大一圈 */
.ph-stage .pet-shadow {
  width: 132px; height: 30px; margin-left: -66px; bottom: 9px;
}
.ph-stage .ph-deco {
  position: absolute; transform: translateX(-50%); pointer-events: none;
}
.ph-stage .ph-deco svg { width: 100%; height: auto; display: block; overflow: visible; }

.ph-info { flex: 1 1 300px; min-width: 260px; }
.ph-name-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.ph-name-row .nm { font-size: 20px; font-weight: 800; }
.ph-name-row .fm {
  font-size: 11.5px; font-weight: 800; color: var(--purple);
  background: #f3eefe; border-radius: 999px; padding: 2px 10px;
}

.ph-bar { margin-top: 12px; }
.ph-bar .lb {
  display: flex; justify-content: space-between; font-size: 12px;
  font-weight: 700; color: var(--text-2); margin-bottom: 4px;
}
.ph-track {
  height: 10px; border-radius: 999px; background: var(--bg-soft); overflow: hidden;
}
.ph-track i { display: block; height: 100%; border-radius: 999px; transition: width .35s ease; }
.ph-track i.exp { background: linear-gradient(90deg, #60a5fa, #8b5cf6); }
.ph-track i.mood { background: linear-gradient(90deg, #f472b6, #fbbf24); }

/* 10 阶成长进度（20261106）：已达成 / 当前 / 未解锁 */
.ph-stages {
  display: flex; align-items: center; gap: 4px; margin-top: 10px; flex-wrap: nowrap;
}
.ph-stage-dot {
  flex: 1 1 0; min-width: 0; height: 18px; border-radius: 999px;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 10px; font-weight: 800; color: #9aa3b5;
  background: var(--bg-soft); border: 1px solid transparent;
  transition: background .2s, color .2s, box-shadow .2s;
}
.ph-stage-dot.done { background: linear-gradient(135deg, #93c5fd, #a78bfa); color: #fff; }
.ph-stage-dot.now {
  background: linear-gradient(135deg, #60a5fa, #8b5cf6); color: #fff;
  box-shadow: 0 0 0 3px rgba(139, 92, 246, .16);
  animation: phStagePulse 1.8s ease-in-out infinite;
}
.ph-stage-dot.locked { color: #b6bdcb; }
.ph-stage-hint { margin-top: 6px; font-size: 11.5px; color: var(--muted); line-height: 1.5; }
@keyframes phStagePulse {
  0%, 100% { box-shadow: 0 0 0 3px rgba(139, 92, 246, .14); }
  50% { box-shadow: 0 0 0 5px rgba(139, 92, 246, .05); }
}
@media (max-width: 640px) {
  .ph-stages { gap: 3px; }
  .ph-stage-dot { height: 16px; font-size: 9px; }
  .ph-stage-hint { font-size: 11px; }
}
@media (prefers-reduced-motion: reduce) {
  .ph-stage-dot.now { animation: none; }
}

.ph-actions { display: flex; gap: 9px; flex-wrap: wrap; margin-top: 16px; }

.ph-btn {
  font: inherit; font-size: 13px; font-weight: 750; cursor: pointer;
  border: 1px solid var(--border-2); background: var(--surface); color: var(--text);
  border-radius: 999px; padding: 8px 16px; transition: all .16s;
  display: inline-flex; align-items: center; gap: 6px;
}
.ph-btn:hover { border-color: var(--primary); color: var(--primary); }
.ph-btn.primary { background: var(--primary); border-color: var(--primary); color: #fff; }
.ph-btn.primary:hover { background: var(--primary-d); color: #fff; }
.ph-btn:disabled { opacity: .5; cursor: not-allowed; }

.ph-coins {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 14px; font-weight: 800; color: #b45309;
  background: #fef7ec; border: 1px solid #f0dfba;
  border-radius: 999px; padding: 5px 14px;
}

/* 装饰商店 / 背包 */
.ph-deco-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 10px;
}
.ph-deco-item {
  border: 1.5px solid var(--border); border-radius: var(--radius-sm);
  padding: 10px; text-align: center; background: var(--surface-2);
}
.ph-deco-item .ic {
  width: 54px; height: 44px; margin: 0 auto 6px; display: flex;
  align-items: center; justify-content: center;
}
.ph-deco-item .ic svg { max-width: 100%; max-height: 100%; }
.ph-deco-item .nm { font-size: 12.5px; font-weight: 750; }
.ph-deco-item .pr { font-size: 11.5px; color: #b45309; font-weight: 800; margin: 3px 0 7px; }
.ph-deco-item .st { font-size: 11px; color: var(--muted); margin: 3px 0 7px; }

/* 成长日记 */
.ph-diary { list-style: none; padding: 0; margin: 0; }
.ph-diary li {
  display: flex; gap: 10px; padding: 9px 2px;
  border-bottom: 1px dashed var(--border); font-size: 13px;
}
.ph-diary li:last-child { border-bottom: none; }
.ph-diary .ic { flex: none; font-size: 16px; }
.ph-diary .tx { flex: 1 1 auto; color: var(--text); line-height: 1.6; }
.ph-diary .tm { flex: none; font-size: 11px; color: var(--muted); }

.ph-empty {
  text-align: center; color: var(--muted); font-size: 13px; padding: 18px 0;
}

/* 弹层 */
.ph-veil {
  position: fixed; inset: 0; z-index: 950; background: rgba(27, 36, 55, .45);
  display: flex; align-items: center; justify-content: center; padding: 20px;
}
.ph-veil[hidden] { display: none; }
.ph-dialog {
  background: var(--surface); border-radius: var(--radius-lg);
  padding: 22px; width: 100%; max-width: 380px; box-shadow: var(--shadow-lg);
}
.ph-dialog h3 { margin: 0 0 10px; font-size: 16px; }
.ph-dialog p { font-size: 13px; color: var(--text-2); line-height: 1.7; margin: 0 0 14px; }
.ph-dialog input {
  width: 100%; box-sizing: border-box; font: inherit; font-size: 14px;
  padding: 9px 12px; border: 1.5px solid var(--border-2); border-radius: var(--radius-sm);
  margin-bottom: 14px;
}
.ph-dialog input:focus { outline: 2px solid var(--primary); border-color: var(--primary); }
.ph-dialog .row { display: flex; gap: 9px; justify-content: flex-end; }

.ph-toast {
  position: fixed; left: 50%; bottom: 88px; transform: translateX(-50%);
  z-index: 970; background: rgba(27, 36, 55, .92); color: #fff;
  font-size: 13px; font-weight: 700; border-radius: 999px;
  padding: 10px 20px; box-shadow: var(--shadow-lg);
  animation: petw-pop .25s ease;
}

@media (max-width: 640px) {
  .ph-stage { width: 170px; height: 170px; }
  .ph-stage-box { width: 170px; }
  .ph-say { max-width: 190px; font-size: 11.5px; }
}

/* ==========================================================================
   宠物 AI 学伴（js/pet-ai.js）
   报告卡片 + 聊天面板 + 记忆/确认弹层 + 录音/朗读态
   颜色全部走 css/style.css 变量，粉梦皮肤自动跟随
   ========================================================================== */

/* 悬浮宠物气泡里的「聊聊」按钮 */
.petw-bubble-act {
  display: inline-flex; align-items: center; justify-content: center;
  margin-left: 6px; padding: 2px 8px; border-radius: 999px;
  border: 1px solid var(--primary); background: var(--primary-l);
  color: var(--primary); font: inherit; font-size: 11.5px; font-weight: 800;
  cursor: pointer; vertical-align: middle; white-space: nowrap;
}
.petw-bubble-act:hover { background: var(--primary); color: #fff; }

/* ---------------------------------------------------------- 聊天面板 */
.petai-veil {
  position: fixed; inset: 0; z-index: 975;
  background: rgba(15, 23, 42, .08);
}
.petai-veil[hidden] { display: none; }

.petai-panel {
  position: fixed; right: 16px; bottom: 150px; z-index: 980;
  width: 380px; max-width: calc(100vw - 32px);
  height: min(560px, 72vh);
  display: flex; flex-direction: column;
  background: var(--surface); border: 1.5px solid var(--border-2);
  border-radius: 20px; box-shadow: var(--shadow-lg); overflow: hidden;
  animation: petai-in .22s ease-out;
  --pet-accent: var(--primary);
}
.petai-panel[hidden] { display: none; }
/* 拖动缩放：右下角锚定，桌面拖左下角，手机拖顶部横条 */
.petai-panel.resizing { animation: none; user-select: none; }
.petai-panel.resizing * { user-select: none; }
body.petai-resizing { cursor: nesw-resize; user-select: none; }
body.petai-resizing * { cursor: inherit !important; }
.petai-grip {
  position: absolute; left: 0; bottom: 0; z-index: 6;
  width: 22px; height: 22px; border-bottom-left-radius: 18px;
  cursor: nesw-resize; touch-action: none; opacity: .65;
  transition: opacity .15s, background .15s;
}
.petai-grip::before {
  content: ''; position: absolute; left: 5px; bottom: 5px; width: 9px; height: 9px;
  border-left: 2px solid var(--border-2); border-bottom: 2px solid var(--border-2);
  border-bottom-left-radius: 3px;
}
.petai-grip:hover { opacity: 1; background: rgba(99, 102, 241, .09); }
/* 全屏：铺满可视区，隐藏缩放手柄 */
.petai-panel.is-full {
  left: 12px; right: 12px; top: 12px; bottom: 12px;
  width: auto; height: auto; max-width: none; max-height: none;
  border-radius: 18px;
}
.petai-panel.is-full .petai-grip { display: none; }
.petai-panel.is-full .petai-msg-main { max-width: min(760px, 82%); }
/* 全屏时把对话收进中间一列，避免左右两侧拉得太开、阅读疲劳 */
.petai-panel.is-full .petai-messages {
  padding-left: max(16px, calc((100% - 860px) / 2));
  padding-right: max(16px, calc((100% - 860px) / 2));
}
body.petai-full-lock { overflow: hidden; }
/* 全屏时头部、标签、学情条、快捷话题、输入栏都收进同一条 860px 内容列，
   否则大屏上左右两侧被拉得太散，和居中的消息列对不齐 */
.petai-panel.is-full .petai-head,
.petai-panel.is-full .petai-tabs,
.petai-panel.is-full .petai-context,
.petai-panel.is-full .petai-chips,
.petai-panel.is-full .petai-foot,
.petai-panel.is-full .petai-note,
.petai-panel.is-full .petai-rec {
  padding-left: max(14px, calc((100% - 860px) / 2));
  padding-right: max(14px, calc((100% - 860px) / 2));
}
.petai-panel.is-full #petaiReport { width: 100%; max-width: 860px; margin: 0 auto; }
/* 固定区不参与压缩：面板拖到最小高度时优先压缩消息区，头部与输入栏始终完整 */
.petai-head, .petai-tabs, .petai-context, .petai-chips, .petai-note { flex: none; }
/* 横屏手机 / 矮窗口（高 ≤ 640px）：上下贴边，保证头部、关闭键与输入栏都在视口内 */
.petai-panel.is-short:not(.is-full) {
  top: 8px; bottom: 8px; height: auto !important; max-height: none;
}
.petai-panel.is-short:not(.is-full) .petai-grip { cursor: ew-resize; }
/* 面板高度不足 460px：收起学情条、快捷话题压成单行横滑，把高度让给消息区 */
.petai-panel.is-tight .petai-context { display: none; }
.petai-panel.is-tight .petai-chips {
  flex-wrap: nowrap; overflow-x: auto; overflow-y: hidden;
  scrollbar-width: none; -webkit-overflow-scrolling: touch;
}
@keyframes petai-in {
  from { opacity: 0; transform: translateY(10px) scale(.98); }
  to   { opacity: 1; transform: none; }
}

.petai-head {
  position: relative; display: flex; align-items: center; gap: 9px;
  padding: 12px 12px 10px 14px;
  background: linear-gradient(135deg, var(--primary-l), var(--surface) 62%);
  border-bottom: 1px solid var(--border);
}
.petai-head::before {
  content: ''; position: absolute; left: 0; right: 0; top: 0; height: 3px;
  background: linear-gradient(90deg, var(--pet-accent), var(--accent));
}
.petai-avatar {
  width: 40px; height: 40px; border-radius: 50%; object-fit: cover;
  background: #fff; border: 2px solid var(--pet-accent); flex: none;
}
.petai-id { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.petai-id b { font-size: 14px; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.petai-id span { font-size: 11px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.petai-mute, .petai-more, .petai-close, .petai-full {
  flex: none; width: 36px; height: 36px; border: 0; border-radius: 10px;
  background: transparent; color: var(--text-2); font-size: 17px; line-height: 1;
  cursor: pointer; transition: background .14s, color .14s;
  display: grid; place-items: center;
}
.petai-mute svg, .petai-more svg, .petai-close svg, .petai-full svg {
  width: 18px; height: 18px; display: block;
}
.petai-mute:hover, .petai-more:hover, .petai-close:hover, .petai-full:hover {
  background: var(--bg-soft); color: var(--text);
}
.petai-full[aria-pressed="true"] { background: var(--primary-l); color: var(--primary); }
.petai-mute.muted { color: var(--muted); }

.petai-tabs { display: flex; gap: 2px; padding: 0 10px; border-bottom: 1px solid var(--border); background: var(--surface); }
.petai-tabs button {
  flex: 1 1 0; padding: 9px 6px 8px; border: 0; border-bottom: 2px solid transparent;
  background: none; font: inherit; font-size: 12.5px; font-weight: 750;
  color: var(--muted); cursor: pointer;
}
.petai-tabs button.on { color: var(--primary); border-bottom-color: var(--primary); }

.petai-context {
  padding: 7px 14px; font-size: 11.5px; line-height: 1.5; color: var(--text-2);
  background: var(--primary-l); border-bottom: 1px solid var(--border);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

.petai-body { flex: 1 1 auto; min-height: 0; display: flex; }
.petai-pane { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; }
.petai-pane[hidden] { display: none; }
.petai-pane[data-pane="report"] { overflow-y: auto; overscroll-behavior: contain; }
.petai-panel.is-report .petai-foot,
.petai-panel.is-report .petai-note,
.petai-panel.is-report .petai-rec { display: none; }

.petai-messages {
  flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain;
  padding: 14px 14px 8px; display: flex; flex-direction: column; gap: 11px;
  background: var(--surface-2);
}
.petai-msg { display: flex; gap: 7px; align-items: flex-start; max-width: 100%; }
.petai-msg-user { justify-content: flex-end; }
.petai-msg-ava {
  width: 28px; height: 28px; border-radius: 50%; object-fit: cover;
  background: #fff; border: 1px solid var(--border); flex: none; margin-top: 2px;
}
.petai-msg-main { display: flex; flex-direction: column; max-width: 82%; min-width: 0; }
.petai-msg-user .petai-msg-main { align-items: flex-end; }
.petai-bubble {
  padding: 9px 12px; border-radius: 14px 14px 14px 4px;
  background: var(--surface); border: 1px solid var(--border);
  font-size: 13px; line-height: 1.68; color: var(--text);
  overflow-wrap: anywhere; word-break: break-word;
  box-shadow: var(--shadow-sm);
}
.petai-msg-user .petai-bubble {
  border-radius: 14px 14px 4px 14px; background: var(--primary); color: #fff;
  border-color: var(--primary); box-shadow: none;
}
/* 语音转文字：紫蓝渐变气泡 + 气泡内玻璃标签，和打字消息一眼区分 */
.petai-msg-user .petai-bubble.is-voice {
  position: relative; overflow: hidden;
  background-image:
    radial-gradient(circle at 92% 2%, rgba(255, 255, 255, .28), rgba(255, 255, 255, 0) 46%),
    linear-gradient(135deg, #5560dc 0%, #6a4fe6 55%, #8248ef 100%);
  border-color: rgba(255, 255, 255, .22);
  box-shadow: 0 6px 16px -10px rgba(106, 79, 230, .95), inset 0 1px 0 rgba(255, 255, 255, .22);
}
.petai-voice-tag {
  display: flex; width: fit-content; align-items: center; gap: 4px; white-space: nowrap;
  margin-bottom: 5px; padding: 3px 9px 3px 6px; border-radius: 999px;
  background: rgba(255, 255, 255, .94); border: 1px solid rgba(255, 255, 255, .9);
  color: #5b4fe0; font-size: 11px; font-weight: 800; line-height: 1.6;
  box-shadow: 0 1px 3px rgba(31, 41, 55, .14);
}
.petai-voice-tag svg { display: block; width: 12px; height: 12px; }
/* 可回放的语音气泡：标签里多一个圆形播放键和时长，整块气泡都能点 */
.petai-voice-tag.playable { padding-left: 3px; gap: 5px; padding-right: 8px; }
.petai-voice-play {
  flex: none; display: grid; place-items: center;
  width: 18px; height: 18px; border-radius: 50%;
  background: linear-gradient(160deg, #6a4fe6 0%, #8248ef 100%);
  color: #fff; box-shadow: 0 1px 3px rgba(90, 70, 220, .35);
}
.petai-voice-play svg { width: 10px; height: 10px; }
.petai-voice-dur {
  font-size: 10.5px; font-weight: 700; color: #7c6ce8;
  font-variant-numeric: tabular-nums; letter-spacing: .2px;
}
.petai-bubble.can-play { cursor: pointer; transition: transform .16s ease, box-shadow .16s ease; }
.petai-bubble.can-play:hover {
  transform: translateY(-1px);
  box-shadow: 0 10px 22px -12px rgba(106, 79, 230, .95), inset 0 1px 0 rgba(255, 255, 255, .24);
}
.petai-bubble.can-play:active { transform: scale(.985); }
.petai-bubble.can-play:focus-visible { outline: none; box-shadow: 0 0 0 3px rgba(124, 108, 232, .45); }
.petai-bubble.playing {
  box-shadow: 0 0 0 2px rgba(167, 139, 250, .5), 0 10px 22px -12px rgba(106, 79, 230, .95),
    inset 0 1px 0 rgba(255, 255, 255, .24);
}
.petai-voice-tag.playing { background: #fff; }
/* 播放中：标签里三根声波柱来回跳 */
.petai-eq rect {
  transform-box: fill-box; transform-origin: center;
  animation: petai-eq .95s ease-in-out infinite;
}
.petai-eq .b1 { animation-delay: -.25s; }
.petai-eq .b2 { animation-delay: .08s; }
.petai-eq .b3 { animation-delay: -.4s; }
@keyframes petai-eq {
  0%, 100% { transform: scaleY(.45); }
  50%      { transform: scaleY(1); }
}
.petai-msg-user .petai-bubble.pending { opacity: .72; }
.petai-msg-user .petai-bubble.failed { background: #fee2e2; color: #991b1b; border-color: #fecaca; }
.petai-msg-user .petai-bubble.is-voice.failed {
  background-image: none; box-shadow: none; border-color: #fecaca;
}
.petai-msg-user .petai-bubble.is-voice.failed .petai-voice-tag {
  background: rgba(255, 255, 255, .65); border-color: #fecaca; color: #991b1b;
}
.petai-msg-meta {
  display: flex; align-items: center; gap: 6px; margin-top: 3px;
  font-size: 11px; color: var(--muted); min-height: 26px;
}
.petai-msg-meta button {
  border: 0; background: none; padding: 0 8px; min-height: 26px; border-radius: 999px;
  color: var(--primary);
  font: inherit; font-size: 11px; font-weight: 700; cursor: pointer;
}
.petai-speak {
  height: 28px; padding: 0 10px; border-radius: 999px !important;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--surface) !important; border: 1px solid var(--border) !important;
  color: var(--text-2) !important; font-size: 11px !important; font-weight: 700;
}
.petai-speak.on { background: var(--primary-l) !important; border-color: var(--primary) !important; }
.petai-msg-ai .petai-bubble { border-bottom-left-radius: 4px; }
.petai-typing .petai-bubble { display: flex; align-items: center; gap: 4px; color: var(--muted); }
.petai-typing .petai-bubble i {
  width: 5px; height: 5px; border-radius: 50%; background: var(--muted);
  animation: petai-dot 1s infinite ease-in-out;
}
.petai-typing .petai-bubble i:nth-child(2) { animation-delay: .15s; }
.petai-typing .petai-bubble i:nth-child(3) { animation-delay: .3s; }
.petai-typing .petai-bubble span { margin-left: 4px; font-size: 11px; }
@keyframes petai-dot {
  0%, 80%, 100% { opacity: .3; transform: translateY(0); }
  40% { opacity: 1; transform: translateY(-3px); }
}
.petai-older { text-align: center; font-size: 10.5px; color: var(--muted); padding: 2px 0 4px; }

.petai-chips {
  display: flex; flex-wrap: wrap; gap: 6px; padding: 8px 14px 10px;
  background: var(--surface-2);
}
.petai-chips::-webkit-scrollbar { display: none; }
.petai-chips button {
  flex: none; min-height: 32px; padding: 7px 12px; border-radius: 999px;
  border: 1px solid var(--border-2); background: var(--surface);
  font: inherit; font-size: 11.5px; font-weight: 650; color: var(--text-2);
  cursor: pointer; white-space: nowrap;
}
.petai-chips button:hover { border-color: var(--primary); color: var(--primary); background: var(--primary-l); }

.petai-foot {
  position: relative;
  display: flex; align-items: center; gap: 8px; padding: 9px 12px;
  border-top: 1px solid var(--border); background: var(--surface); flex: none;
}
/* 输入框与录音条共用一块位置：录音时整条替换，不挤压聊天区、不遮挡消息 */
.petai-field { position: relative; flex: 1 1 auto; min-width: 0; display: flex; }
.petai-foot input {
  flex: 1 1 auto; min-width: 0; width: 100%; height: 44px; padding: 0 13px;
  border: 1.5px solid var(--border-2); border-radius: 13px;
  font: inherit; font-size: 13px; color: var(--text); background: var(--surface);
}
.petai-foot input:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px var(--primary-l); }
.petai-foot input:disabled { background: var(--bg-soft); color: var(--muted); }

/* 麦克风：糖果色圆钮 + 粗描边话筒 + 小金星星，给小学生更亲切的手感 */
.petai-mic {
  position: relative; flex: none;
  width: 44px; height: 44px; padding: 0; border-radius: 50%;
  border: 1.5px solid #dbe3fb; color: #6366f1;
  background: linear-gradient(160deg, #ffffff 0%, #eef3ff 100%);
  box-shadow: 0 3px 8px -5px rgba(79, 70, 229, .5), inset 0 -2px 4px rgba(99, 102, 241, .06);
  display: grid; place-items: center; cursor: pointer;
  transition: transform .18s cubic-bezier(.2, .8, .3, 1), color .18s,
              border-color .18s, background .18s, box-shadow .18s;
  touch-action: none; user-select: none; -webkit-user-select: none;
  -webkit-touch-callout: none;
}
.petai-mic-ico { display: block; width: 26px; height: 26px; }
.petai-mic-star { transform-box: fill-box; transform-origin: center; }
.petai-mic:hover:not(.off) {
  transform: translateY(-1px);
  border-color: #c7d2fe;
  background: linear-gradient(160deg, #ffffff 0%, #e6ecff 100%);
  box-shadow: 0 7px 14px -7px rgba(79, 70, 229, .55), inset 0 -2px 4px rgba(99, 102, 241, .06);
}
.petai-mic:hover:not(.off) .petai-mic-star { animation: petai-star-twinkle .9s ease-in-out infinite; }
.petai-mic:active:not(.off):not(.recording) { transform: scale(.94); }
.petai-mic:focus-visible { outline: none; box-shadow: 0 0 0 3px rgba(99, 102, 241, .3); }
.petai-mic.off {
  color: #94a3b8; background: #f1f5f9; border-color: #e2e8f0;
  box-shadow: none; opacity: .7; cursor: not-allowed;
}
/* 录音转写中 / 限流禁用：看起来必须"不能按"，否则孩子会一直戳 */
.petai-mic:disabled {
  opacity: .5; cursor: not-allowed; box-shadow: none;
}
.petai-mic:disabled:hover { transform: none; background: linear-gradient(160deg, #ffffff 0%, #eef3ff 100%); }
.petai-mic.busy { opacity: .6; cursor: wait; }
/* 正在申请麦克风：按钮套一圈转动的细环，明确告诉孩子"已经在准备了" */
.petai-mic.arming {
  color: #6366f1; border-color: #c7d2fe; background: #fff;
  box-shadow: 0 0 0 3px rgba(99, 102, 241, .1);
}
.petai-mic.arming .petai-mic-ico { opacity: .3; }
.petai-mic.arming::after {
  content: ''; position: absolute; inset: 5px; border-radius: 50%;
  border: 2.5px solid rgba(99, 102, 241, .16); border-top-color: #6366f1;
  animation: petai-spin .7s linear infinite; pointer-events: none;
}
/* 录音中：糖果粉红渐变 + 呼吸光环，一眼看出"正在听" */
.petai-mic.recording {
  color: #fff; border-color: #fb7185;
  background: linear-gradient(160deg, #ffa1b8 0%, #f4385c 100%);
  transform: scale(1.05);
  box-shadow: 0 0 0 0 rgba(244, 63, 94, .45), 0 8px 16px -8px rgba(244, 63, 94, .8);
  animation: petai-mic-pulse 1.1s ease-in-out infinite;
}
.petai-mic.recording::before {
  content: ''; position: absolute; inset: -5px; border-radius: 50%;
  border: 2px solid rgba(244, 63, 94, .4);
  animation: petai-mic-ring 1.4s ease-out infinite; pointer-events: none;
}
.petai-mic.recording:active { transform: scale(1.01); }
.petai-mic.recording .petai-mic-star { fill: #fff2b8; }
@keyframes petai-mic-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(244, 63, 94, .4), 0 8px 16px -8px rgba(244, 63, 94, .8); }
  50%      { box-shadow: 0 0 0 7px rgba(244, 63, 94, 0), 0 8px 16px -8px rgba(244, 63, 94, .8); }
}
@keyframes petai-mic-ring {
  0%   { transform: scale(.92); opacity: .85; }
  100% { transform: scale(1.2); opacity: 0; }
}
@keyframes petai-star-twinkle {
  0%, 100% { transform: scale(1) rotate(0deg); opacity: 1; }
  50%      { transform: scale(1.25) rotate(18deg); opacity: .85; }
}
.petai-send {
  flex: none; height: 44px; padding: 0 18px; border: 0; border-radius: 13px;
  background: var(--primary); color: #fff; font: inherit; font-size: 13px;
  font-weight: 800; cursor: pointer;
}
.petai-send:hover { background: var(--primary-d); }
.petai-send:disabled { opacity: .5; cursor: default; }
.petai-note {
  flex: none; padding: 0 12px 9px; font-size: 11px; line-height: 1.6;
  color: var(--text-2); background: var(--surface);
}
/* 录音条覆盖在输入框原位置：出现/消失时布局不跳动，也不会遮住聊天记录 */
.petai-rec {
  position: absolute; inset: 0; z-index: 3;
  display: flex; align-items: center; gap: 8px;
  padding: 0 7px 0 11px; border-radius: 13px;
  border: 1.5px solid #fbcfe8;
  background: linear-gradient(180deg, #fff8fa 0%, #fff0f4 100%);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .7);
  font-size: 11.5px; font-weight: 700; color: #be123c;
}
.petai-rec[hidden] { display: none; }
.petai-rec-dot {
  flex: none; width: 8px; height: 8px; border-radius: 50%; background: #f43f5e;
  animation: petai-dot-beat .9s ease-in-out infinite;
}
@keyframes petai-dot-beat {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%      { opacity: .45; transform: scale(.78); }
}
.petai-rec-txt { flex: none; white-space: nowrap; letter-spacing: .2px; }
/* 实时音量波形：说多大声，柱子就跳多高，孩子一眼确认"真的听到了" */
.petai-wave {
  flex: 1 1 auto; min-width: 0; height: 24px; display: flex;
  align-items: center; justify-content: center; gap: 2px; overflow: hidden;
}
.petai-wave i {
  width: 3px; height: 24px; border-radius: 2px; flex: none;
  background: linear-gradient(180deg, #fda4af 0%, #f43f5e 100%);
  transform: scaleY(.14); transform-origin: center;
  transition: transform .09s linear;
}
.petai-rec-time {
  flex: none; font-size: 11px; font-weight: 800; color: #be123c;
  font-variant-numeric: tabular-nums; letter-spacing: .3px;
}
.petai-rec-time.warn {
  color: #e11d48; animation: petai-time-blink .75s ease-in-out infinite;
}
@keyframes petai-time-blink {
  0%, 100% { opacity: 1; }
  50%      { opacity: .4; }
}
.petai-rec-x {
  flex: none; width: 22px; height: 22px; padding: 0; border: 0; border-radius: 50%;
  background: rgba(244, 63, 94, .1); color: #be123c; cursor: pointer;
  display: grid; place-items: center;
}
.petai-rec-x:hover { background: rgba(244, 63, 94, .18); }
.petai-rec-x svg { width: 12px; height: 12px; }
/* 转写中：波形收起，换成旋转环 + "正在转成文字"，让等待有明确进度感 */
.petai-rec.is-loading {
  background: #f8fafc; border-color: #e2e8f0; color: #475569;
}
.petai-rec.is-loading .petai-rec-dot,
.petai-rec.is-loading .petai-wave,
.petai-rec.is-loading .petai-rec-time { display: none; }
.petai-rec.is-loading::before {
  content: ''; flex: none; width: 13px; height: 13px; border-radius: 50%;
  border: 2px solid #cbd5e1; border-top-color: #6366f1;
  animation: petai-spin .75s linear infinite;
}
.petai-rec.is-loading .petai-rec-txt { flex: 1 1 auto; }
.petai-rec.is-loading .petai-rec-x { background: rgba(100, 116, 139, .1); color: #475569; }
@keyframes petai-spin { to { transform: rotate(360deg); } }

/* 转写结果确认条：浮在输入栏上方，给出 重说 / 发送，不改用户已打的草稿 */
.petai-vresult {
  position: absolute; left: 10px; right: 10px; bottom: calc(100% + 6px); z-index: 7;
  display: flex; align-items: center; gap: 8px;
  padding: 8px 7px 8px 10px;
  border: 1.5px solid #dbeafe; border-radius: 13px; background: #fff;
  box-shadow: 0 12px 26px -16px rgba(30, 58, 138, .5);
  animation: petai-vresult-in .18s cubic-bezier(.2, .8, .3, 1);
}
.petai-vresult[hidden] { display: none; }
@keyframes petai-vresult-in {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}
.petai-vresult-ico {
  flex: none; width: 20px; height: 20px; border-radius: 50%;
  background: #dcfce7; color: #16a34a;
  display: grid; place-items: center; font-size: 12px; font-weight: 900;
}
.petai-vresult.is-error { border-color: #fecaca; box-shadow: 0 12px 26px -16px rgba(190, 18, 60, .45); }
.petai-vresult.is-error .petai-vresult-ico { background: #fee2e2; color: #dc2626; }
.petai-vresult-main { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.petai-vresult-main b { font-size: 11.5px; font-weight: 800; color: var(--text); }
.petai-vresult-main span {
  font-size: 10.5px; color: var(--text-2);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.petai-vresult-acts { flex: none; display: flex; align-items: center; gap: 4px; }
.petai-vresult-acts button {
  height: 27px; padding: 0 9px; border: 1.5px solid var(--border-2);
  border-radius: 8px; background: #fff; cursor: pointer;
  font: inherit; font-size: 11px; font-weight: 800; color: var(--text-2);
}
.petai-vresult-acts button:hover { border-color: #c7d2fe; color: var(--primary); }
.petai-vresult-acts button.primary {
  background: var(--primary); border-color: var(--primary); color: #fff;
}
.petai-vresult-acts button.primary:hover { background: var(--primary-d); color: #fff; }
.petai-vresult-acts .petai-vresult-x {
  width: 22px; padding: 0; border: 0; background: transparent;
  color: #94a3b8; font-size: 15px; line-height: 1;
}
.petai-vresult-acts .petai-vresult-x:hover { color: var(--text); }

.petai-moremenu {
  position: absolute; right: 12px; top: 52px; z-index: 5; min-width: 168px;
  background: var(--surface); border: 1.5px solid var(--border-2);
  border-radius: 12px; box-shadow: var(--shadow-lg); padding: 5px;
}
.petai-moremenu[hidden] { display: none; }
.petai-moremenu button {
  display: block; width: 100%; padding: 8px 10px; border: 0; border-radius: 8px;
  background: none; text-align: left; font: inherit; font-size: 12px;
  font-weight: 650; color: var(--text); cursor: pointer;
}
.petai-moremenu button:hover { background: var(--bg-soft); }
.petai-moremenu button.danger { color: var(--danger); }

.petai-empty {
  margin: auto; padding: 28px 18px; text-align: center; color: var(--text-2);
}
.petai-empty-ico { font-size: 34px; margin-bottom: 8px; }
.petai-empty b { display: block; font-size: 14px; color: var(--text); margin-bottom: 6px; }
.petai-empty p { margin: 0 0 14px; font-size: 12px; line-height: 1.7; color: var(--muted); }
.petai-login-btn, .ph-advice-btn {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 8px 16px; border-radius: 999px; border: 0;
  background: var(--primary); color: #fff; font: inherit; font-size: 12.5px;
  font-weight: 750; cursor: pointer; text-decoration: none;
}
.petai-skeleton { padding: 18px 14px; display: flex; flex-direction: column; gap: 8px; }
.petai-skeleton i {
  display: block; height: 16px; border-radius: 8px;
  background: linear-gradient(90deg, var(--bg-soft), var(--surface), var(--bg-soft));
  background-size: 200% 100%; animation: petai-sk 1.2s linear infinite;
}
.petai-skeleton i:nth-child(2) { width: 78%; }
.petai-skeleton i:nth-child(3) { width: 55%; }
@keyframes petai-sk { to { background-position: -200% 0; } }

/* ---------------------------------------------------------- 快捷条 / 操作卡 / 信息面板 */
.petai-quick {
  display: flex; gap: 6px; padding: 0 14px 8px; flex: none;
  overflow-x: auto; scrollbar-width: none;
}
.petai-quick::-webkit-scrollbar { display: none; }
.petai-quick[hidden] { display: none; }
.petai-quick button {
  flex: none; min-height: 30px; padding: 5px 11px; border-radius: 999px;
  border: 1px solid var(--border-2); background: var(--surface);
  font: inherit; font-size: 11.5px; font-weight: 700; color: var(--text-2);
  cursor: pointer; white-space: nowrap;
  transition: border-color .15s, color .15s, background .15s;
}
.petai-quick button:hover {
  border-color: var(--primary); color: var(--primary);
  background: var(--primary-l);
}
.petai-panel.is-tight .petai-quick,
.petai-panel.is-report .petai-quick { display: none; }

.petai-acts { display: flex; flex-direction: column; gap: 6px; margin-top: 6px; }
.petai-act {
  display: flex; align-items: center; gap: 8px; width: 100%;
  padding: 8px 9px; border-radius: 12px; text-align: left;
  border: 1px solid var(--border); background: var(--surface);
  font: inherit; cursor: pointer;
  transition: border-color .15s, transform .15s, box-shadow .15s;
}
.petai-act:hover {
  border-color: var(--pet-accent, var(--primary));
  transform: translateY(-1px); box-shadow: var(--shadow-sm);
}
.petai-act-ico {
  flex: none; width: 28px; height: 28px; border-radius: 9px;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--primary-l); font-size: 14px;
}
.petai-act.tone-vocab .petai-act-ico { background: #eff6ff; }
.petai-act.tone-wrongbook .petai-act-ico { background: #fff1f2; }
.petai-act.tone-composition .petai-act-ico { background: #f5f3ff; }
.petai-act.tone-pet .petai-act-ico { background: #ecfdf5; }
.petai-act.tone-profile .petai-act-ico { background: #f8fafc; }
.petai-act-body { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.petai-act-body b { font-size: 12.5px; color: var(--text); }
.petai-act-body small { font-size: 10.5px; color: var(--muted); line-height: 1.5; }
.petai-act-cta {
  flex: none; font-size: 11px; font-weight: 800;
  color: var(--pet-accent, var(--primary)); white-space: nowrap;
}

/* 家庭计划草稿卡：卡片本身就是确认卡，避免再弹一层 */
.petai-plan-card {
  margin-top: 6px; padding: 10px 11px 9px;
  border: 1px solid var(--border); border-radius: 14px;
  background: var(--surface-2); min-width: 0;
}
.petai-plan-head {
  display: flex; align-items: center; gap: 6px;
  font-size: 10.5px; font-weight: 700; color: var(--muted);
}
.petai-plan-ico {
  width: 22px; height: 22px; border-radius: 7px; flex: none;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--primary-l); font-size: 12px;
}
.petai-plan-old {
  margin-top: 4px; font-size: 10.5px; color: var(--muted);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.petai-plan-title {
  display: block; margin: 5px 0 4px;
  font-size: 14px; line-height: 1.4; color: var(--text);
  word-break: break-word;
}
.petai-plan-meta { display: flex; flex-wrap: wrap; gap: 4px; }
.petai-plan-meta span {
  font-size: 10px; font-weight: 700; color: var(--text-2);
  background: var(--surface); border: 1px solid var(--border);
  border-radius: 999px; padding: 1px 7px;
}
.petai-plan-steps {
  margin: 7px 0 0; padding: 0; list-style: none;
  font-size: 10.5px; color: var(--muted); line-height: 1.6;
}
.petai-plan-steps li::before { content: "· "; }
.petai-plan-steps li.more { color: var(--primary); }
.petai-plan-acts { display: flex; gap: 6px; margin-top: 9px; }
.petai-plan-acts button {
  flex: 1; min-height: 32px; padding: 6px 8px;
  border: 1px solid var(--border-2); border-radius: 9px;
  background: var(--surface); color: var(--text-2);
  font: inherit; font-size: 11.5px; font-weight: 700; cursor: pointer;
}
.petai-plan-acts button:hover { border-color: var(--primary); color: var(--primary-d); }
.petai-plan-acts button.primary {
  background: var(--primary); border-color: var(--primary); color: #fff;
}
.petai-plan-acts button.primary:hover { background: var(--primary-d); }
.petai-plan-acts button:disabled { opacity: .6; cursor: default; }
.petai-plan-card.done { background: var(--surface); }
.petai-plan-done-row {
  display: flex; align-items: center; gap: 6px;
  font-size: 12px; color: var(--text);
}
.petai-plan-done-row .ok { flex: none; font-size: 13px; }
.petai-plan-link {
  display: inline-block; margin-top: 6px;
  font-size: 11.5px; font-weight: 700;
  color: var(--primary); text-decoration: none;
}
html[data-skin="pink"] .petai-plan-card {
  background: #fff5fa; border-color: #f0cfe0;
}
html[data-skin="pink"] .petai-plan-meta span {
  background: #fffbfd; border-color: #f0cfe0;
}
html[data-skin="pink"] .petai-plan-acts button {
  background: #fffbfd; border-color: #f0cfe0; color: #7d4560;
}
html[data-skin="pink"] .petai-plan-acts button.primary {
  background: #db2777; border-color: #db2777; color: #fff;
}
html[data-skin="pink"] .petai-plan-ico { background: #fde9f2; }

.petai-sheet {
  position: fixed; inset: 0; z-index: 990; background: rgba(15, 23, 42, .38);
  display: flex; align-items: flex-end; justify-content: center;
  padding: 12px 0 0;
}
.petai-sheet[hidden] { display: none; }
.petai-sheet-box {
  width: min(440px, 100%); max-height: 78vh; overflow: auto;
  padding: 0 18px calc(18px + env(safe-area-inset-bottom));
  background: var(--surface); border-radius: 18px 18px 0 0;
  box-shadow: var(--shadow-lg); animation: petw-pop .22s ease;
}
.petai-sheet-head {
  position: sticky; top: 0; z-index: 2;
  margin: 0 -18px 12px; padding: 16px 18px 10px;
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  background: var(--surface); border-bottom: 1px solid var(--border);
}
.petai-sheet-head b { font-size: 16px; color: var(--text); }
.petai-sheet-close {
  width: 32px; height: 32px; border-radius: 50%; border: 1px solid var(--border);
  background: var(--surface-2); color: var(--muted); font-size: 18px;
  line-height: 1; cursor: pointer;
}
.petai-sheet-close:hover { color: var(--text); border-color: var(--border-3); }
.petai-sheet-loading, .petai-sheet-empty {
  padding: 24px 8px; text-align: center; font-size: 12.5px; color: var(--muted);
}
.petai-sheet-empty b { display: block; color: var(--text); font-size: 14px; margin-bottom: 6px; }
.petai-sheet-empty p { margin: 0 0 12px; line-height: 1.7; }
.petai-sheet-note {
  margin: 10px 0 4px; font-size: 10.5px; line-height: 1.7; color: var(--muted);
}
.petai-sec-title {
  margin: 16px 0 8px; font-size: 12px; font-weight: 800; color: var(--text-2);
}
.petai-profile-hero {
  display: flex; align-items: center; gap: 12px; padding: 12px;
  border-radius: 14px; border: 1px solid var(--border);
  background: linear-gradient(135deg, var(--primary-l), var(--surface) 72%);
}
.petai-profile-ava {
  flex: none; width: 46px; height: 46px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--pet-accent, var(--primary)); color: #fff;
  font-size: 20px; font-weight: 800;
}
.petai-profile-hero b { display: block; font-size: 15px; color: var(--text); }
.petai-profile-hero small { display: block; margin-top: 2px; font-size: 11px; color: var(--muted); }
.petai-rows { margin-top: 12px; }
.petai-row {
  display: flex; align-items: center; gap: 8px;
  padding: 9px 0; border-bottom: 1px dashed var(--border);
  font-size: 12.5px;
}
.petai-row > span:first-child { flex: none; color: var(--muted); }
.petai-row > b { flex: 1 1 auto; min-width: 0; text-align: right; color: var(--text); font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.petai-row-btn {
  flex: none; padding: 4px 9px; border-radius: 999px; border: 1px solid var(--border-2);
  background: var(--surface); font: inherit; font-size: 10.5px; font-weight: 700;
  color: var(--text-2); cursor: pointer;
}
.petai-row-btn:hover { border-color: var(--primary); color: var(--primary); }
.petai-badge {
  flex: none; margin-left: auto; padding: 2px 8px; border-radius: 999px;
  font-size: 10.5px; font-weight: 800;
}
.petai-badge.on { color: #047857; background: #ecfdf5; border: 1px solid #a7f3d0; }
.petai-badge.off { color: #64748b; background: #f1f5f9; border: 1px solid #e2e8f0; }
.petai-btn-row { display: flex; flex-wrap: wrap; gap: 8px; }
.petai-btn {
  min-height: 36px; padding: 7px 14px; border-radius: 10px;
  border: 1px solid var(--border-2); background: var(--surface);
  font: inherit; font-size: 12px; font-weight: 700; color: var(--text-2); cursor: pointer;
}
.petai-btn:hover { border-color: var(--primary); color: var(--primary); }
.petai-btn.primary { border-color: var(--primary); background: var(--primary); color: #fff; }
.petai-btn.primary:hover { background: var(--primary-d); color: #fff; }
.petai-link {
  margin-top: 10px; padding: 4px 0; border: 0; background: none;
  font: inherit; font-size: 11.5px; font-weight: 800; color: var(--primary); cursor: pointer;
}
.petai-pet-card {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  padding: 10px; border-radius: 13px; border: 1px solid var(--border);
  background: var(--bg-soft);
}
.petai-pet-card img { border-radius: 12px; background: #fff; flex: none; }
.petai-pet-body { flex: 1 1 140px; min-width: 0; }
.petai-pet-body b { display: block; font-size: 13px; color: var(--text); }
.petai-pet-body small { display: block; margin-top: 2px; font-size: 10.5px; color: var(--muted); }
.petai-pet-btns { display: flex; flex-wrap: wrap; gap: 6px; width: 100%; }
.petai-pet-btns button {
  flex: 1 1 auto; min-height: 32px; padding: 5px 10px; border-radius: 9px;
  border: 1px solid var(--border-2); background: var(--surface);
  font: inherit; font-size: 11px; font-weight: 700; color: var(--text-2); cursor: pointer;
}
.petai-pet-btns button:hover { border-color: var(--primary); color: var(--primary); }

.petai-page-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.petai-page {
  display: flex; flex-direction: column; align-items: flex-start; gap: 2px;
  padding: 10px; border-radius: 13px; border: 1px solid var(--border);
  background: var(--surface); text-align: left; font: inherit; cursor: pointer;
  transition: border-color .15s, transform .15s, box-shadow .15s;
}
.petai-page:hover {
  border-color: var(--pet-accent, var(--primary));
  transform: translateY(-1px); box-shadow: var(--shadow-sm);
}
.petai-page .ico { font-size: 18px; line-height: 1.2; }
.petai-page b { font-size: 12px; color: var(--text); }
.petai-page small { font-size: 10px; color: var(--muted); line-height: 1.5; }

.petai-pet-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.petai-pet-pick {
  position: relative; display: flex; align-items: center; gap: 8px;
  padding: 8px; border-radius: 12px; border: 1px solid var(--border);
  background: var(--surface); text-align: left; font: inherit; cursor: pointer;
}
.petai-pet-pick:hover { border-color: var(--pet-accent, var(--primary)); }
.petai-pet-pick.active { border-color: var(--pet-accent, var(--primary)); background: var(--primary-l); }
.petai-pet-pick img { flex: none; border-radius: 9px; background: #fff; }
.petai-pet-pick span { min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.petai-pet-pick b { font-size: 12px; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.petai-pet-pick small { font-size: 9.5px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.petai-pet-pick em {
  position: absolute; top: 5px; right: 5px; font-style: normal;
  font-size: 9px; font-weight: 800; color: var(--primary);
  background: #fff; border-radius: 999px; padding: 1px 5px;
}

.petai-dialog {
  position: fixed; inset: 0; z-index: 992; background: rgba(15, 23, 42, .38);
  display: flex; align-items: center; justify-content: center; padding: 20px;
}
.petai-dialog[hidden] { display: none; }
.petai-dialog-box {
  width: 100%; max-width: 360px; padding: 20px;
  background: var(--surface); border-radius: var(--radius-lg); box-shadow: var(--shadow-lg);
  animation: petw-pop .22s ease;
}
.petai-dialog-box h3 { margin: 0 0 8px; font-size: 16px; color: var(--text); }
.petai-dialog-desc { margin: 0 0 12px; font-size: 12px; line-height: 1.7; color: var(--muted); }
.petai-dialog-box input {
  display: block; width: 100%; box-sizing: border-box; height: 42px;
  padding: 0 12px; border-radius: 11px; border: 1.5px solid var(--border-2);
  font: inherit; font-size: 13px; color: var(--text); background: var(--surface);
}
.petai-dialog-box input:focus {
  outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px var(--primary-l);
}
.petai-dialog-msg { min-height: 18px; margin: 6px 0 4px; font-size: 11px; }
.petai-dialog-msg.err { color: var(--danger, #b91c1c); }
.petai-dialog-row { display: flex; justify-content: flex-end; gap: 8px; }
.petai-dialog-row button {
  min-height: 36px; padding: 7px 15px; border-radius: 10px;
  border: 1px solid var(--border-2); background: var(--surface);
  font: inherit; font-size: 12px; font-weight: 700; color: var(--text-2); cursor: pointer;
}
.petai-dialog-row button.primary { border-color: var(--primary); background: var(--primary); color: #fff; }

.petai-sheet button:focus-visible,
.petai-dialog button:focus-visible,
.petai-quick button:focus-visible,
.petai-acts button:focus-visible {
  outline: 2px solid var(--primary); outline-offset: 2px;
}

@media (min-width: 641px) {
  .petai-sheet { align-items: center; padding: 20px; }
  .petai-sheet-box { border-radius: 18px; }
}

@media (max-width: 640px) {
  .petai-quick button { min-height: 34px; padding: 7px 12px; }
  .petai-btn, .petai-dialog-row button { min-height: 40px; }
  .petai-page-grid, .petai-pet-grid { grid-template-columns: 1fr; }
  .petai-act-cta { font-size: 10.5px; }
}

@media (prefers-reduced-motion: reduce) {
  .petai-sheet-box, .petai-dialog-box { animation: none; }
}

/* ---------------------------------------------------------- 记忆 / 确认 / Toast */
.petai-memory, .petai-confirm {
  position: fixed; inset: 0; z-index: 990; background: rgba(15, 23, 42, .38);
  display: flex; align-items: center; justify-content: center; padding: 20px;
}
.petai-memory[hidden], .petai-confirm[hidden] { display: none; }
.petai-memory-box, .petai-confirm-box {
  width: 100%; max-width: 380px; background: var(--surface);
  border-radius: var(--radius-lg); box-shadow: var(--shadow-lg);
  padding: 20px; animation: petw-pop .22s ease;
}
.petai-memory-box h3, .petai-confirm-box h3 { margin: 0 0 10px; font-size: 16px; }
.petai-memory-summary {
  font-size: 12.5px; line-height: 1.75; color: var(--text-2);
  background: var(--bg-soft); border-radius: 10px; padding: 10px 12px;
}
.petai-memory-list { margin: 10px 0 0; padding-left: 20px; color: var(--text); font-size: 12.5px; line-height: 1.8; }
.petai-memory-stale { margin: 8px 0 0; font-size: 11px; color: var(--accent); }
.petai-memory-foot {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  margin-top: 16px; padding-top: 12px; border-top: 1px solid var(--border);
  font-size: 10.5px; color: var(--muted);
}
.petai-memory-foot > div { display: flex; gap: 7px; }
.petai-memory-foot button, .petai-confirm-row button {
  padding: 7px 13px; border-radius: 9px; border: 1px solid var(--border-2);
  background: var(--surface); font: inherit; font-size: 12px; font-weight: 700;
  color: var(--text-2); cursor: pointer;
}
.petai-memory-foot button.danger, .petai-confirm-row button.danger {
  border-color: #fecaca; background: #fef2f2; color: #b91c1c;
}
.petai-confirm-box p { margin: 0 0 16px; font-size: 13px; line-height: 1.75; color: var(--text-2); }
.petai-confirm-row { display: flex; justify-content: flex-end; gap: 8px; }
.petai-toast {
  position: fixed; left: 50%; bottom: 210px; transform: translateX(-50%);
  z-index: 995; background: rgba(27, 36, 55, .94); color: #fff;
  padding: 9px 18px; border-radius: 999px; font-size: 12.5px; font-weight: 700;
  box-shadow: var(--shadow-lg); max-width: 86vw; text-align: center;
}
.petai-toast[hidden] { display: none; }

/* 键盘焦点环：面板内按钮统一，不依赖浏览器默认样式 */
.petai-panel button:focus-visible,
.petai-panel [tabindex]:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
}
/* 去掉移动端双击缩放等待；麦克风需要长按，保持 touch-action:none */
.petai-panel button:not(.petai-mic) { touch-action: manipulation; }
.petai-msg-meta span { font-variant-numeric: tabular-nums; }

/* ---------------------------------------------------------- 学习小报告 */
.ph-report-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 10px; }
.ph-report-head h2 { margin: 0; }
.ph-report-head .ph-btn { padding: 5px 11px; font-size: 11.5px; }
.ph-report-petline {
  display: flex; gap: 10px; align-items: flex-start;
  padding: 12px; border-radius: 13px;
  background: linear-gradient(135deg, var(--primary-l), var(--surface) 72%);
  border: 1px solid var(--border);
}
.ph-report-petline img { width: 42px; height: 42px; border-radius: 50%; object-fit: cover; border: 2px solid var(--pet-accent, var(--primary)); background: #fff; flex: none; }
.ph-report-petline b { display: block; font-size: 12.5px; line-height: 1.65; color: var(--text); }
.ph-badges { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 6px; }
.ph-badge {
  font-size: 10.5px; font-weight: 700; color: var(--primary-d);
  background: #fff; border: 1px solid var(--border); border-radius: 999px; padding: 1px 7px;
}
.ph-report-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin-top: 10px; }
.ph-stat {
  padding: 9px 6px; border-radius: 12px; text-align: center;
  background: var(--bg-soft); border: 1px solid var(--border);
}
.ph-stat b { display: block; font-size: 20px; line-height: 1.2; color: var(--primary-d); }
.ph-stat span { display: block; margin-top: 2px; font-size: 10.5px; color: var(--muted); }
.ph-report-sec { padding: 12px 0 4px; border-top: 1px dashed var(--border); margin-top: 10px; }
.ph-report-sec:first-of-type { border-top: 0; }
.ph-sec-head { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.ph-sec-head b { font-size: 13px; color: var(--text); }
.ph-sec-head span { font-size: 10.5px; color: var(--muted); }
.ph-week { display: flex; align-items: flex-end; gap: 8px; margin-top: 8px; }
.ph-week-bars { display: flex; align-items: flex-end; gap: 4px; height: 46px; flex: 1 1 auto; }
.ph-week-bars i {
  flex: 1 1 0; min-height: 5px; border-radius: 4px 4px 2px 2px;
  background: linear-gradient(180deg, var(--primary), #93c5fd); opacity: .82;
}
.ph-week small { font-size: 10px; color: var(--muted); white-space: nowrap; }
.ph-mini { margin-top: 6px; font-size: 11.5px; line-height: 1.75; color: var(--muted); }
.ph-pack { margin-top: 8px; }
.ph-pack-top { display: flex; justify-content: space-between; gap: 8px; font-size: 11px; color: var(--text-2); }
.ph-pack-bar { height: 6px; border-radius: 999px; background: var(--bg-soft); overflow: hidden; margin-top: 3px; }
.ph-pack-bar i { display: block; height: 100%; border-radius: 999px; background: var(--accent); }
.ph-pack small { display: block; margin-top: 2px; font-size: 10px; color: var(--muted); }
.ph-tags { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 7px; }
.ph-tag {
  font-size: 10.5px; font-weight: 700; color: #be123c;
  background: #fff1f2; border: 1px solid #fecdd3; border-radius: 999px; padding: 2px 8px;
}
.ph-comp-title { margin-top: 6px; font-size: 12.5px; font-weight: 750; color: var(--text); }
.ph-dims { display: flex; flex-wrap: wrap; gap: 6px 12px; margin-top: 5px; }
.ph-dim { display: inline-flex; align-items: center; gap: 4px; font-size: 11px; color: var(--text-2); }
.ph-dim em { font-style: normal; color: var(--accent); letter-spacing: .5px; }
.ph-comp-note { margin: 5px 0 0; font-size: 11.5px; line-height: 1.65; color: var(--muted); }
.ph-advice { margin-top: 12px; }
.ph-advice-card {
  display: flex; align-items: center; gap: 9px; width: 100%;
  margin-top: 6px; padding: 9px 10px; border-radius: 12px;
  border: 1px solid var(--border); background: var(--surface);
  text-align: left; font: inherit; cursor: pointer;
  transition: border-color .15s, transform .15s, box-shadow .15s;
}
.ph-advice-card:hover { border-color: var(--primary); transform: translateY(-1px); box-shadow: var(--shadow-sm); }
.ph-advice-ico {
  flex: none; width: 28px; height: 28px; border-radius: 9px;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--primary-l); font-size: 14px;
}
.ph-advice-body { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.ph-advice-body b { font-size: 12.5px; color: var(--text); }
.ph-advice-body small { font-size: 10.5px; color: var(--muted); line-height: 1.5; }
.ph-advice-cta { flex: none; font-size: 11px; font-weight: 800; color: var(--primary); white-space: nowrap; }
.ph-report-foot { margin-top: 10px; padding-top: 9px; border-top: 1px dashed var(--border); font-size: 10.5px; color: var(--muted); }
.ph-report-privacy { margin-top: 4px; font-size: 10px; color: var(--muted); opacity: .85; }
.ph-report-empty { text-align: center; padding: 24px 10px 16px; }
.ph-report-empty-ico { font-size: 36px; margin-bottom: 6px; }
.ph-report-empty b { display: block; font-size: 14px; color: var(--text); }
.ph-report-empty p { margin: 6px 0 12px; font-size: 12px; color: var(--muted); line-height: 1.7; }
.ph-report[data-compact="1"] .ph-week,
.ph-report[data-compact="1"] .ph-pack,
.ph-report[data-compact="1"] .ph-report-foot,
.ph-report[data-compact="1"] .ph-report-privacy { display: none; }
#petaiReport[data-compact="1"] .ph-week,
#petaiReport[data-compact="1"] .ph-pack,
#petaiReport[data-compact="1"] .ph-report-foot,
#petaiReport[data-compact="1"] .ph-report-privacy { display: none; }
#petaiReport { padding: 12px 14px 18px; }
#petaiReport .ph-report-petline { padding: 10px; }
#petaiReport .ph-report-stats { grid-template-columns: repeat(2, 1fr); }
#petaiReport .ph-report-foot { display: none; }

/* ---------------------------------------------------------- 触屏适配 */
/* 触屏设备点击热区加大；输入框 ≥16px，避免 iPad 聚焦时自动放大整页 */
@media (pointer: coarse) {
  .ph-dialog input { font-size: 16px; }
  .petai-head .petai-mute, .petai-head .petai-more,
  .petai-head .petai-close, .petai-head .petai-full { width: 44px; height: 44px; }
  .petai-chips button { min-height: 40px; padding: 9px 14px; }
  .petai-foot input { font-size: 16px; }
}
/* 平板等触屏宽屏：左下角缩放手柄热区加大，底部声明右移避让 */
@media (pointer: coarse) and (min-width: 641px) {
  .petai-grip { width: 40px; height: 40px; opacity: .8; }
  .petai-grip::before { left: 12px; bottom: 12px; width: 10px; height: 10px; }
  .petai-note { padding-left: 48px; }
}
/* 超小屏：副标题放不下时直接隐藏，避免出现半截省略号 */
@media (max-width: 360px) {
  .petai-id span { display: none; }
}

/* ---------------------------------------------------------- 手机端 */
@media (max-width: 640px) {
  body.petai-lock { overflow: hidden; }
  .petai-veil { background: rgba(15, 23, 42, .32); }
  .petai-panel {
    left: 0; right: 0; bottom: 0; width: 100% !important; max-width: none;
    height: 86vh; border-radius: 18px 18px 0 0; border-bottom: 0;
    animation: petai-up .24s ease-out;
  }
  /* 手机上拖顶部横条改高度；全屏时铺满整屏 */
  .petai-head { padding-top: 20px; gap: 5px; }
  /* 小手点得准：头部按钮放大到 44px，消息下「朗读」也加高 */
  .petai-head .petai-mute, .petai-head .petai-more,
  .petai-head .petai-close, .petai-head .petai-full { width: 44px; height: 44px; }
  .petai-speak { height: 30px; font-size: 11.5px !important; }
  .petai-chips button { min-height: 34px; padding: 8px 13px; }
  .petai-grip {
    left: 50%; top: 6px; bottom: auto; transform: translateX(-50%);
    width: 56px; height: 20px; border-radius: 0; cursor: grab; opacity: .8;
  }
  .petai-grip::before {
    left: 50%; bottom: auto; top: 7px; transform: translateX(-50%);
    width: 38px; height: 4px; border: 0; border-radius: 999px;
    background: var(--border-2);
  }
  .petai-panel.is-full {
    left: 0; right: 0; top: 0; bottom: 0;
    height: 100% !important; border-radius: 0; border: 0;
  }
  .petai-panel.is-full .petai-msg-main { max-width: 84%; }
  .petai-panel.is-full .petai-head { padding-top: calc(20px + env(safe-area-inset-top)); }
  @keyframes petai-up {
    from { opacity: .6; transform: translateY(24px); }
    to   { opacity: 1; transform: none; }
  }
  .petai-foot { padding-bottom: calc(9px + env(safe-area-inset-bottom)); }
  .petai-note { padding-bottom: calc(9px + env(safe-area-inset-bottom)); }
  .petai-msg-main { max-width: 84%; }
  .petai-bubble { font-size: 13.5px; }
  .petai-chips { padding-bottom: 8px; }
  .petai-foot input { font-size: 16px; }
  .petai-toast { bottom: 30px; }
  /* 触屏上按钮给足手指面积 */
  .petai-vresult-acts button { height: 32px; padding: 0 11px; font-size: 12px; }
  .petai-vresult-acts .petai-vresult-x { width: 26px; }
  .petai-rec-x { width: 26px; height: 26px; }
  .ph-report-stats { grid-template-columns: repeat(2, 1fr); }
  .ph-report-petline b { font-size: 12px; }
}
/* 移动浏览器地址栏伸缩时，dvh 跟随当前可视高度，避免抽屉底部被挡住 */
@supports (height: 100dvh) {
  @media (max-width: 640px) {
    .petai-panel { height: 86dvh; }
  }
}

@media (prefers-reduced-motion: reduce) {
  .petai-panel, .petai-memory-box, .petai-confirm-box { animation: none; }
  .petai-mic.recording, .petai-rec-dot, .petai-rec-time.warn { animation: none; }
  .petai-mic.recording::before { animation: none; opacity: 0; }
  .petai-mic.arming::after, .petai-rec.is-loading::before { animation: none; }
  .petai-wave i { transition: none; }
  .petai-vresult { animation: none; }
  .petai-mic:hover .petai-mic-star { animation: none; }
  .petai-eq rect { animation: none; }
  .petai-typing .petai-bubble i { animation: none; opacity: .6; }
  .petai-skeleton i { animation: none; }
  .petai-mic, .petai-bubble.can-play { transition: none; }
}

/* 星空首页是深色玻璃风；聊天面板保持浅色卡片，保证长文可读 */
body[data-page="portal"] .petai-panel,
body[data-page="portal"] .petai-memory-box,
body[data-page="portal"] .petai-confirm-box {
  --bg: #f4f6fb; --bg-soft: #eef2f9;
  --surface: #ffffff; --surface-2: #f8fafc;
  --border: #e3e9f2; --border-2: #cbd5e1;
  --text: #1b2437; --text-2: #46536b; --muted: #7b879c;
  --primary: #2563eb; --primary-d: #1d4ed8; --primary-l: #e8f0fe;
  --accent: #f59e0b; --danger: #dc2626; --danger-l: #fee2e2;
  color: var(--text);
}
body[data-page="portal"] .petai-panel { background: #fff; }
body[data-page="portal"] .petai-memory-box,
body[data-page="portal"] .petai-confirm-box { background: #fff; }
/* 星空首页是深色底：右键菜单保持深色玻璃，
   宠物说话气泡改成白色小卡片，避免深色气泡糊在背景里看不清 */
body[data-page="portal"] .petw-menu {
  background: rgba(13, 24, 48, .94);
}
body[data-page="portal"] .petw-bubble {
  --surface: #ffffff;
  --text: #1b2437;
  --text-2: #46536b;
  --border-2: #d7e2f7;
  --accent: #b45309;
  --primary: #2563eb;
  background: #ffffff;
  color: var(--text);
  border-color: #d7e2f7;
  box-shadow: 0 12px 30px -18px rgba(2, 8, 24, .95), 0 3px 10px rgba(2, 8, 24, .35);
}
body[data-page="portal"] .petw-bubble::after {
  background: #ffffff;
  border-color: #d7e2f7;
}
body[data-page="portal"] .petw-bubble-act {
  background: #e8f0fe;
  border-color: #bfd4fb;
  color: #1d4ed8;
}
body[data-page="portal"] .petw-bubble-act:hover {
  background: #2563eb;
  border-color: #2563eb;
  color: #fff;
}