sundynix-pets/pets-fe/components/bottom-sheet/bottom-sheet.wxss

.overlay{
  position:fixed;inset:0;z-index:200;
  background:rgba(26,18,12,.30);
  opacity:0;pointer-events:none;transition:.2s ease;
  backdrop-filter:blur(6rpx);-webkit-backdrop-filter:blur(6rpx);
}
.overlay.show{opacity:1;pointer-events:auto}
.sheet{
  position:absolute;left:0;right:0;bottom:0;
  background:#fff;border-radius:48rpx 48rpx 0 0;
  padding:var(--sp-5) 0 0;
  transform:translateY(106%);transition:.24s ease;
  box-shadow:var(--sd-3);
}
.overlay.show .sheet{transform:translateY(0)}
.sheet-scroll{
  box-sizing:border-box;
  /* exportData / manageTasks / comments 是最长的三型，圆角间距变化后靠这个上限内滚 */
  max-height:80vh;
  padding:0 var(--sp-5) calc(120rpx + env(safe-area-inset-bottom));
}
.sheet-scroll::-webkit-scrollbar,.plan-chat::-webkit-scrollbar{width:0;height:0;display:none}
.sheetbar{width:80rpx;height:8rpx;border-radius:var(--r-full);background:#E1D8CF;margin:0 auto var(--sp-4)}

.sheet-h3{font-size:var(--fs-xl);font-weight:var(--fw-b);margin-bottom:var(--sp-3)}
.sheet-p{font-size:var(--fs-md);color:var(--text-2);line-height:1.65;margin-bottom:var(--sp-4)}
.sheet-p.pre,.poster-list.pre{white-space:pre-line}
.poster-h3{font-size:var(--fs-xl);font-weight:var(--fw-b);margin-bottom:var(--sp-3)}

.ai-input-row{display:flex;gap:var(--sp-3);align-items:center}
.ai-input-row .input{flex:1}
.ai-send{height:88rpx;line-height:88rpx;padding:0 var(--sp-4)}

/* 弹层内的日期选择器展示 */
.picker-box{color:var(--text)}
.del-btn{background:var(--red-soft);color:var(--red-ink)}

/* 管理任务 / 管理宠物 */
.mtask-row{display:flex;align-items:center;gap:var(--sp-3);padding:var(--sp-3) 0;border-bottom:1rpx solid var(--line)}
.mtask-body{flex:1;min-width:0}
.mtask-b{font-size:var(--fs-md);font-weight:var(--fw-b)}
.mtask-pri{
  margin-left:var(--sp-2);font-size:var(--fs-cap);font-weight:var(--fw-b);
  color:var(--primary-ink);background:var(--primary-soft);padding:2rpx var(--sp-2);border-radius:var(--r-full);
}
.mtask-p{margin-top:6rpx;font-size:var(--fs-sm);color:var(--muted)}
.mtask-op{
  flex:none;font-size:var(--fs-sm);font-weight:var(--fw-b);color:var(--primary-dark);
  padding:var(--sp-1) var(--sp-3);background:var(--surface-2);border-radius:var(--r-xs);
}
.mtask-op.del{color:var(--red-ink)}
.mtask-form-row{display:flex;align-items:center;gap:var(--sp-3)}
/* 这条覆写了全局 .seg-btn 的高度，全局值变化时要一起看 */
.mtask-form-row .seg-btn{flex:none;padding:0 var(--sp-4);height:var(--h-sm);line-height:var(--h-sm)}
.mtask-form-row .picker-box{flex:1}

/* 图片选择器 */
.img-picker{display:flex;flex-wrap:wrap;gap:var(--sp-3)}
.img-thumb{position:relative;width:160rpx;height:160rpx;border-radius:var(--r-sm);overflow:hidden}
.img-thumb image{width:100%;height:100%}
.img-del{
  position:absolute;top:0;right:0;width:44rpx;height:44rpx;
  display:flex;align-items:center;justify-content:center;
  background:rgba(0,0,0,.55);color:#fff;border-radius:0 var(--r-sm) 0 var(--r-sm);
}
.img-add{
  width:160rpx;height:160rpx;border-radius:var(--r-sm);border:2rpx dashed #D8CFC4;
  display:flex;align-items:center;justify-content:center;color:var(--muted2);background:var(--surface-2);
}

/* 导出健康档案 */
.export-box{
  max-height:560rpx;overflow-y:auto;background:var(--surface-2);border-radius:var(--r-md);
  padding:var(--sp-4);font-size:var(--fs-sm);line-height:1.7;color:var(--text-2);white-space:pre-line;
  border:1rpx solid var(--line);margin-bottom:var(--sp-4);
}
.export-box::-webkit-scrollbar{width:0;height:0;display:none}
.mine-tag{
  margin-left:var(--sp-1);font-size:var(--fs-cap);font-weight:var(--fw-b);
  color:var(--primary-ink);background:var(--primary-soft);padding:2rpx var(--sp-1);border-radius:var(--r-full);
}

/* 离屏画布：挪到可视区外而不是 display:none，否则 selectorQuery 取不到节点 */
.poster-canvas{position:fixed;left:-9999rpx;top:0;width:600rpx;height:840rpx}

/* ── 评论：头 + 滚动列表 + 常驻输入栏 ── */
.sheet.sheet-cmp{display:flex;flex-direction:column;height:82vh;padding-bottom:0}
.cmp-head{
  flex:none;text-align:center;padding:0 0 var(--sp-3);
  font-size:var(--fs-md);font-weight:var(--fw-b);color:var(--text);border-bottom:1rpx solid var(--line);
}
/* 空态：图标 + 两行字，居中在列表区，不再是一行字飘在大片留白里 */
.cmp-empty{
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  padding:120rpx 0;color:var(--muted);
}
.cmp-empty-ic{
  width:140rpx;height:140rpx;border-radius:50%;margin-bottom:var(--sp-4);
  display:flex;align-items:center;justify-content:center;
  background:var(--primary-soft);color:var(--primary);
}
.cmp-empty-t{font-size:var(--fs-lg);font-weight:var(--fw-b);color:var(--text-2)}
.cmp-empty-p{margin-top:var(--sp-1);font-size:var(--fs-sm);color:var(--muted2)}
.cmp-list{flex:1;min-height:0;padding:var(--sp-3) var(--sp-5) 0}
.cmp-dock{
  flex:none;background:#fff;border-top:1rpx solid var(--line);
  padding:var(--sp-3) var(--sp-5) calc(20rpx + env(safe-area-inset-bottom));
  transition:padding-bottom .2s ease;
}

.cm{display:flex;gap:var(--sp-3);padding:var(--sp-3) 0}
.cm-av{
  width:64rpx;height:64rpx;border-radius:50%;flex:none;
  display:flex;align-items:center;justify-content:center;
  background:var(--primary-soft);color:var(--primary-ink);
  font-size:var(--fs-md);font-weight:var(--fw-b);
}
.cm-av-sm{width:48rpx;height:48rpx;font-size:var(--fs-sm)}
.cm-body{flex:1;min-width:0}
.cm-name{font-size:var(--fs-sm);color:var(--muted)}
.cm-at{color:var(--muted2)}
.cm-text{margin-top:6rpx;font-size:var(--fs-md);line-height:1.55;word-break:break-word}
.cm-imgs{display:flex;flex-wrap:wrap;gap:var(--sp-1);margin-top:var(--sp-2)}
.cm-img{width:150rpx;height:150rpx;border-radius:var(--r-sm)}
.cm-meta{display:flex;align-items:center;gap:var(--sp-4);margin-top:var(--sp-2);font-size:var(--fs-cap);color:var(--muted2)}
.cm-reply-btn{color:var(--muted)}
.cm-del{color:var(--red-ink)}
.cm-replies{margin-top:var(--sp-2)}
.cm-reply{display:flex;gap:var(--sp-2);padding:var(--sp-2) 0}
.cm-more{margin-top:4rpx;font-size:var(--fs-cap);color:var(--muted)}

/* 「回复 @xxx」的提示条 */
.cm-replying{
  display:inline-flex;align-items:center;gap:var(--sp-2);margin-bottom:var(--sp-2);
  padding:4rpx var(--sp-3);border-radius:var(--r-full);
  background:var(--primary-soft);color:var(--primary-ink);font-size:var(--fs-cap);
}
.cm-cancel{display:flex;align-items:center}
/* 相机 + 输入框 + 发送 合成一条圆角输入栏，像聊天输入条；
   textarea 撑开时相机和发送贴着底部 */
.cm-inputrow{
  display:flex;align-items:flex-end;gap:var(--sp-2);
  background:var(--surface-2);border:1rpx solid var(--line);
  border-radius:32rpx;padding:10rpx var(--sp-2) 10rpx var(--sp-3);
}
.cm-pic{flex:none;display:flex;align-items:center;height:64rpx;color:var(--muted)}
.cm-ta{
  flex:1;min-width:0;min-height:64rpx;max-height:280rpx;height:auto;
  padding:16rpx 0;background:transparent;font-size:var(--fs-md);line-height:1.4;
}
.cm-send{
  flex:none;height:64rpx;padding:0 var(--sp-4);border-radius:var(--r-full);
  display:flex;align-items:center;justify-content:center;
  background:var(--line);color:#fff;font-size:var(--fs-sm);font-weight:var(--fw-b);transition:.16s ease;
}
.cm-send.on{background:var(--cta)}
.cm-count{display:block;text-align:right;margin-top:6rpx;color:var(--muted2);font-size:var(--fs-cap)}