/* 宠医 CHONGYI — Laravel 版补充样式。
   只在原型 web.css 未覆盖的少量交互状态上追加，不改变任何既有视觉规格。 */

/* 供 JS 控制显隐（内联 display 会覆盖样式表，这里只作为语义兜底）。 */
.chongyi-hidden { display: none !important; }

/* 骨架屏在商品网格中的间距，与 .shop-grid 的 2 列布局对齐。 */
.shop-grid .skeleton { border-radius: 22px; }

/* 访客提示条与页面首个模块之间的呼吸，与原型的 margin 一致。 */
.ha-guest-hint + .page-intro { margin-top: 0; }

/* 表单内联错误提示，复用 .ha-status 的配色。 */
.field-error { color: #b13b3b; font-size: 11px; margin-top: 6px; display: block; }

/* 抽屉内的表单沿用面板间距。 */
.drawer-body form > .form-grid:first-child { margin-top: 4px; }

/* 侧栏角标：审核待办与未读消息。 */
.navbadge {
  margin-left: auto;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: 999px;
  background: #b45309;
  color: #fff;
  font-size: 10px;
  font-weight: 800;
  display: grid;
  place-items: center;
  line-height: 1;
}

.navitem { position: relative; }
.navitem .navbadge { position: absolute; right: 12px; }

/* 账户浮层内的角色入口（商户 / 审核员 / 管理员） */
#chongyi-account-popover .chongyi-account-item {
  display: block;
  width: 100%;
  margin-top: 8px;
  border: 1px solid #dfebe1;
  border-radius: 11px;
  padding: 11px;
  background: #f5f9f6;
  color: #266044;
  font-weight: 700;
  font-size: 12px;
  text-align: center;
  text-decoration: none;
}
#chongyi-account-popover .chongyi-account-item:hover {
  background: #eaf4ee;
  border-color: #c8dfd2;
}

/* 内联操作按钮（切换动物、购物车加减、任务状态）需要保持在既有 flex 结构里，
   因此让包裹它们的 form 不参与布局，子元素直接成为父容器的一份子。 */
form.as-inline { display: contents; }

/* 首页「正在照顾」列表里的表单按钮不能撑开行高。 */
.pet-mini form.as-inline > .btn { flex: 0 0 auto; }

/* .site 是 .app 的 flex 子项，默认 min-width:auto 会让它被某个子元素的
   min-content 宽度撑开（访客态的登录按钮比登录态头像更宽），
   在 390px 视口下会把整个内容区顶出屏幕。显式允许收缩即可。 */
.site { min-width: 0; }
.top-actions { min-width: 0; }

@media (max-width: 590px) {
  /* 窄屏下三件套（搜索 / 商户 / 排序）允许换行，避免把商品区挤出视口。 */
  .shopbar { flex-wrap: wrap; }
  .shopbar .search-field { flex: 1 1 100%; min-width: 0; }

  /* 访客态的「登录 / 注册」比登录态的 40px 头像宽很多，
     390px 视口下会被顶栏裁掉。这里收紧到仍可读的尺寸。 */
  .top-actions { gap: 5px; }
  .top-actions .chongyi-auth-trigger { max-width: 84px; padding: 8px 9px; font-size: 11px; }
}

/* ---------------------------------------------------------------- 商品主图 */
/* 有真实主图时隐藏原型里的「包装盒」装饰与短标签，只保留左上角的来源角标。 */
.product-art.has-photo::before { display: none; }
.product-art.has-photo > span:not(.art-tag) { display: none; }
.product-art.has-photo .art-tag { z-index: 2; }
.product-art.has-photo img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* 商家工作台里的商品缩略图 */
.thumb {
  width: 52px;
  height: 52px;
  flex: 0 0 52px;
  border-radius: 12px;
  overflow: hidden;
  background: linear-gradient(140deg, #e8f2ee, #edf0ec);
  display: grid;
  place-items: center;
}
.thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.thumb-fallback {
  font-size: 8px;
  letter-spacing: .08em;
  color: #4f7668;
  font-weight: 800;
  text-align: center;
  padding: 0 4px;
  line-height: 1.3;
}

/* ---------------------------------------------------------------- 免费问诊对话 */
/* 关键问题答完后进入对话框：气泡负责「回放」，结论仍然渲染在对话下方。
   这里只加布局与对话质感，配色沿用原型的 --pine / --mint / --line。 */

.chat-card {
  max-width: 880px;
  margin: 0 auto;
  border: 1px solid var(--line);
  border-radius: 26px;
  background: var(--paper);
  box-shadow: 0 12px 44px rgba(29, 67, 51, .05);
  overflow: hidden;
}

.chat-head {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 17px 22px 15px;
}

.chat-avatar {
  width: 38px;
  height: 38px;
  flex: 0 0 38px;
  border-radius: 13px;
  display: grid;
  place-items: center;
  background: #153e34;   /* 固定深松绿：暗色主题下 --darkpine 会翻成浅色，白字就看不清了 */
  color: #fff;
  font-size: 14px;
  font-weight: 800;
  letter-spacing: -.02em;
}

.chat-who b { display: block; font-size: 14px; letter-spacing: -.02em; }
.chat-who small { font-size: 11px; color: var(--sub); }

.chat-progress-tag {
  margin-left: auto;
  padding: 5px 11px;
  border-radius: 99px;
  background: var(--mint);
  color: var(--pine);
  font-size: 11px;
  font-weight: 750;
  white-space: nowrap;
}

.chat-progress { height: 3px; background: var(--line); }
.chat-progress span {
  display: block;
  height: 100%;
  background: var(--pine);
  transition: width .4s var(--ease);
}

/* 气泡区自己滚动，长对话不会把整页顶长。
   高度跟着视口走：矮屏（笔记本）留 340 的底，高屏最多到 620，
   中间按 56vh 连续变化——比原来死板的 min(52vh, 440) 高一截，长对话不用一直蹭滚动条。 */
.chat-body {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 20px 22px;
  max-height: clamp(340px, 56vh, 620px);
  overflow-y: auto;
  scrollbar-width: thin;
}

/* 进行中的对话卡：高度随内容长，上限撑到视口，下限保底一个像样的历史窗。
   - max-height：长对话最多长到这里，再长就在历史区内部滚动；
   - min-height：对话只有两三句时卡片不至于缩成一条，但也不像「撑满整屏」那样在顶部留一大片空白。
   140/220 是卡片上方（app padding 16 + topbar 73 + content padding 28）加底部与保底留白。 */
@media (min-height: 640px) {
  .chat-card:not(.is-done) {
    display: flex;
    flex-direction: column;
    min-height: min(470px, calc(100vh - 260px));
    max-height: calc(100vh - 140px);
  }
  .chat-card:not(.is-done) .chat-body {
    flex: 1 1 auto;
    min-height: 0;   /* flex 子项不加这句不会收缩，overflow 也就不会触发 */
    max-height: none;
  }
  /* 消息贴着输入框往上长（聊天软件的惯例），空出来的位置留在顶部。
     用首个子元素的 margin-top:auto 而不是 justify-content:flex-end——
     后者在内容超长时会顶掉顶部、滚不到最早那几条。 */
  .chat-card:not(.is-done) .chat-body > :first-child { margin-top: auto; }
}

.chat-row {
  display: flex;
  align-items: flex-end;
  gap: 9px;
  animation: chatIn .3s var(--ease) both;
}
.chat-row.me { justify-content: flex-end; }
/* 连续两条 AI 消息只保留一个头像，用 visibility 而不是 display，保证气泡左边线仍然对齐。 */
.chat-row.ai + .chat-row.ai .chat-av { visibility: hidden; }

.chat-av {
  width: 26px;
  height: 26px;
  flex: 0 0 26px;
  border-radius: 9px;
  display: grid;
  place-items: center;
  background: var(--mint);
  color: var(--pine);
  font-size: 10px;
  font-weight: 800;
}

.bubble {
  max-width: min(78%, 560px);
  padding: 11px 14px;
  border-radius: 16px;
  border: 1px solid var(--line);
  background: var(--solid);
  color: var(--ink);
  font-size: 13px;
  line-height: 1.72;
  overflow-wrap: anywhere;
}
.chat-row.ai .bubble { border-bottom-left-radius: 5px; }
.chat-row.me .bubble {
  border-color: transparent;
  border-bottom-right-radius: 5px;
  background: #1f4d40;   /* 同样固定色：保证两种主题下都是白字可读 */
  color: #fff;
}

@keyframes chatIn {
  from { opacity: 0; transform: translateY(7px); }
  to   { opacity: 1; transform: none; }
}

.chat-foot {
  display: flex;
  flex-direction: column;
  gap: 11px;
  padding: 15px 22px 20px;
  border-top: 1px solid var(--line);
  background: linear-gradient(180deg, rgba(255, 255, 255, .5), transparent);
}
html[data-theme=dark] .chat-foot { background: transparent; }

.chat-choices { display: flex; flex-wrap: wrap; gap: 8px; }

.chip {
  border: 1px solid var(--line);
  border-radius: 99px;
  padding: 9px 15px;
  background: var(--solid);
  color: var(--ink);
  font-size: 12px;
  font-weight: 650;
  transition: transform .2s var(--ease), background .2s, border-color .2s;
}
.chip:hover { transform: translateY(-1px); border-color: #cfe4d9; background: var(--mint); }
.chip:active { transform: scale(.97); }
/* 危险信号用暖色，和「以上都没有」在视觉上分开 */
.chip.warn { border-color: #f3d6cc; background: #fae7df; color: #923d35; }
.chip.warn:hover { border-color: #ecc7ba; background: #f7ded3; }
.chip.quiet { border-color: transparent; background: var(--mint); color: var(--pine); font-weight: 750; }

.chat-say { display: flex; align-items: center; gap: 8px; }
.chat-say .input { flex: 1; min-width: 0; padding: 10px 13px; font-size: 12px; }

.chat-tools { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.chat-tools .subtle { font-size: 11px; }


/* 出结论之后对话收窄一些，让结论更早进入视野；但别压到看不全刚问过的那几题。 */
.chat-card.is-done .chat-body { max-height: clamp(260px, 42vh, 460px); }

/* 结论与对话之间的间距，避免两块面板粘在一起。 */
.chat-result { margin-top: 26px; }

/* 报告里的「本次对话要点」折叠块 */
.report-dialog { margin: 0 0 18px; }
.dialog-list { list-style: none; margin: 10px 0 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.dialog-list li {
  display: flex;
  gap: 12px;
  justify-content: space-between;
  padding-bottom: 8px;
  border-bottom: 1px dashed var(--line);
  font-size: 12px;
  line-height: 1.6;
}
.dialog-list li:last-child { border-bottom: 0; padding-bottom: 0; }
.dialog-list li b { flex: 1; min-width: 0; font-weight: 600; color: var(--sub); }
.dialog-list li span { font-weight: 750; color: var(--ink); text-align: right; }

.dialog-lean {
  margin: 12px 0 0;
  padding: 10px 12px;
  border-radius: 12px;
  background: var(--mint);
  color: var(--pine);
  font-size: 12px;
  line-height: 1.7;
}
.dialog-lean small { display: block; margin-top: 3px; font-size: 11px; color: var(--sub); }

@media (max-width: 590px) {
  .chat-card { border-radius: 22px; }
  .chat-head { padding: 14px 16px 12px; gap: 10px; }
  .chat-body { padding: 16px; max-height: 58vh; }
  .bubble { max-width: 86%; font-size: 12.5px; }
  .chat-foot { padding: 13px 16px 17px; }
  .chat-say { flex-wrap: wrap; }
  .chat-say .btn { flex: 0 0 auto; }
  .chip { padding: 8px 13px; font-size: 11.5px; }
}

/* ---------------------------------------------------------------- 问诊结论页 */
/* 结论先行：先给「是什么 + 现在做什么」，再给依据。所有数字都属于可核对的段落编号。 */

.verdict { padding: 24px 28px; }

.verdict h2 {
  font-size: 29px;
  line-height: 1.26;
  margin: 9px 0 10px;
  letter-spacing: -.05em;
  color: inherit;
}

.verdict-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 9px; }

/* 保留结论层次即可，徽标在白/彩底上都要能读 */
.verdict .badge { background: #ffffffc2; color: inherit; font-weight: 800; }

.verdict-lead { font-size: 14px; font-weight: 750; color: inherit; }

.verdict p { margin: 0 0 5px; font-size: 12.5px; line-height: 1.7; color: inherit; opacity: .84; }

.verdict-expect {
  margin-top: 9px !important;
  padding-top: 9px;
  border-top: 1px dashed #ffffff7a;
  opacity: .95 !important;
}

/* 分时段步骤：左边固定宽的时间标签，扫一眼就知道「现在该干什么」 */
.plan-steps {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin: 8px 0 0;
  padding: 0;
  list-style: none;
}

.plan-steps li {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin: 0;
  font-size: 12.5px;
  line-height: 1.7;
}

.plan-steps li b {
  flex: 0 0 auto;
  min-width: 76px;
  padding: 3px 9px;
  border-radius: 8px;
  background: var(--mint);
  color: var(--pine);
  font-size: 11px;
  font-weight: 800;
  text-align: center;
  white-space: nowrap;
}

.plan-steps li span { color: var(--ink); }

/* 证据：+ 支持 / − 不支持 / ! 升级信号 */
.evidence { display: flex; flex-direction: column; gap: 8px; margin: 8px 0 0; padding: 0; list-style: none; }

.evidence li { position: relative; padding-left: 16px; margin: 0; font-size: 12px; line-height: 1.68; color: var(--ink); }

.evidence li::before { position: absolute; left: 0; top: 0; font-weight: 800; }
.evidence li.yes::before { content: '+'; color: #2f7d5f; }
.evidence li.no::before { content: '−'; color: #b45309; }
.evidence li.flag::before { content: '!'; color: #b13b3b; }

.evidence li.no { color: var(--sub); }

/* 决策句：整份报告里字号最大的一句话 */
.decision-line {
  margin: 0 0 8px;
  font-size: 15px;
  font-weight: 800;
  letter-spacing: -.02em;
  color: var(--ink);
  line-height: 1.55;
}

.exam-list { margin-top: 12px; }
.exam-list b { display: block; margin-bottom: 7px; font-size: 11px; font-weight: 750; color: var(--sub); }

.avoid-list { margin: 10px 0 0; padding-left: 18px; }
.avoid-list li { font-size: 12px; line-height: 1.7; color: #a4483f; }

/* 其他可能 */
.alt-list { display: flex; flex-direction: column; gap: 10px; margin: 10px 0 0; padding: 0; list-style: none; }

.alt-list li {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 8px;
  padding-bottom: 9px;
  border-bottom: 1px dashed var(--line);
  font-size: 12px;
}

.alt-list li:last-child { border-bottom: 0; padding-bottom: 0; }
.alt-list b { font-weight: 750; }

.alt-score {
  padding: 2px 8px;
  border-radius: 99px;
  background: var(--mint);
  color: var(--pine);
  font-size: 11px;
  font-weight: 750;
}

.alt-list small { flex: 1 0 100%; color: var(--sub); font-size: 11px; }

@media (max-width: 590px) {
  .verdict { padding: 20px 18px; }
  .verdict h2 { font-size: 23px; }
  .plan-steps li { flex-direction: column; gap: 4px; }
  .plan-steps li b { align-self: flex-start; }
}

/* 结论卡底部：这次结论由谁给出（大模型 / 规则兜底），一行小字，不抢结论。 */
.verdict-model {
  margin-top: 10px !important;
  font-size: 11px !important;
  letter-spacing: .01em;
  opacity: .62 !important;
}

/* 大模型判断中的三点动画（只在无刷新提交时临时插入，替换 DOM 后自然消失） */
.bubble.typing {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 12px;
  color: var(--sub);
}

.bubble.typing span {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--pine);
  opacity: .35;
  animation: chatDot 1.1s infinite;
}

.bubble.typing span:nth-child(2) { animation-delay: .15s; }
.bubble.typing span:nth-child(3) { animation-delay: .3s; margin-right: 4px; }

@keyframes chatDot {
  0%, 80%, 100% { opacity: .2; transform: translateY(0); }
  40% { opacity: 1; transform: translateY(-2px); }
}

/* 证据图例：＋支持 / −已排除，避免把「排除掉的危险」读成「不利于诊断」 */
.evidence-legend {
  margin: -2px 0 10px !important;
  font-size: 11px;
  color: var(--sub);
  letter-spacing: .02em;
}

/* 诊断卡：病因是主角，机制单独一行；处置用浅色小字降级 */
.verdict-mechanism {
  margin: 2px 0 8px !important;
  font-size: 13px !important;
  line-height: 1.72;
  opacity: .95 !important;
}

.verdict-urgency {
  padding: 4px 10px;
  border-radius: 99px;
  background: #ffffff8f;
  font-size: 11px;
  font-weight: 750;
  letter-spacing: .01em;
}

.med-line {
  margin: 14px 0 0 !important;
  padding-top: 12px;
  border-top: 1px dashed var(--line);
  font-size: 12.5px;
  line-height: 1.7;
  color: var(--ink);
}

/* 用药明细：通用名 + 剂量 + 途径 + 频率 + 疗程，一条一行，处方药单独标注 */
.drug-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 12px;
}

.drug {
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--solid);
}

.drug-head {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  font-size: 13px;
}

.drug-head b { font-weight: 800; letter-spacing: -.01em; }

.drug-class { font-size: 11px; color: var(--sub); }

.drug-rx {
  padding: 2px 7px;
  border-radius: 6px;
  background: #fff1dd;
  color: #98652a;
  font-size: 10px;
  font-weight: 800;
}

.drug-meta {
  margin-top: 5px;
  font-size: 12px;
  line-height: 1.65;
  color: var(--ink);
}

.drug small { display: block; margin-top: 5px; font-size: 11px; color: var(--sub); line-height: 1.6; }

/* 补充信息重新判断 */
.refine-box .chat-say { margin-top: 12px; }
.refine-box .input { font-size: 12px; }

/* 危险信号多选：勾选态要一眼看得出来，否则用户会以为只能点一个 */
.flag-form { display: flex; flex-direction: column; gap: 10px; }

.flag-hint {
  margin: 0 !important;
  font-size: 11.5px;
  line-height: 1.6;
  color: var(--sub);
}

.chip-check {
  position: relative;
  display: inline-flex;
  align-items: center;
  padding: 9px 15px;
  border: 1px solid var(--line);
  border-radius: 99px;
  background: var(--solid);
  color: var(--ink);
  font-size: 12px;
  font-weight: 650;
  cursor: pointer;
  user-select: none;
  transition: background .18s, border-color .18s, transform .18s var(--ease);
}

.chip-check:hover { transform: translateY(-1px); border-color: #f3d6cc; background: #fdf3ee; }

.chip-check input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

/* 选中：暖色底 + 勾号（:has 不可用时下面的 +span 规则仍能把文字标出来） */
.chip-check:has(input:checked) {
  background: #fae7df;
  border-color: #e8c3b3;
  color: #923d35;
}

.chip-check input:checked + span { color: #923d35; font-weight: 800; }
.chip-check input:checked + span::before { content: '✓ '; }

.chip-check input:focus-visible + span { outline: 2px solid #75b8a1; outline-offset: 3px; border-radius: 4px; }

.flag-actions { display: flex; gap: 8px; flex-wrap: wrap; }

/* 逐条对应：左边症状（用户说的原话），右边这个病因怎么解释它 */
.coverage-list {
  display: flex;
  flex-direction: column;
  gap: 9px;
  margin: 4px 0 14px;
  padding: 0;
  list-style: none;
}

.coverage-list li {
  display: grid;
  grid-template-columns: minmax(0, 200px) minmax(0, 1fr);
  gap: 12px;
  padding-bottom: 9px;
  border-bottom: 1px dashed var(--line);
  font-size: 12px;
  line-height: 1.66;
}

.coverage-list li:last-child { border-bottom: 0; }
.coverage-list b { font-weight: 750; color: var(--ink); }
.coverage-list span { color: var(--sub); }

@media (max-width: 590px) {
  .coverage-list li { grid-template-columns: 1fr; gap: 3px; }
}

/* ---------------------------------------------------------------- 病例档案 */
.case-group { margin-bottom: 22px; }

.case-group-head {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 10px;
  font-size: 13px;
}

.case-group-head .pet-letter {
  width: 30px;
  height: 30px;
  border-radius: 10px;
  font-size: 14px;
}

.case-group-head b { font-weight: 800; letter-spacing: -.02em; }

.case-card {
  border: 1px solid var(--line);
  border-radius: 18px;
  background: var(--paper);
  padding: 15px 18px;
  margin-bottom: 10px;
}

.case-head {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  font-size: 12px;
}

.case-date {
  font-size: 15px;
  font-weight: 800;
  letter-spacing: -.02em;
  font-variant-numeric: tabular-nums;
}

.case-dx { font-weight: 750; color: var(--pine); }
.case-time { margin-left: auto; font-size: 11px; }
.case-del { margin-left: 4px; }

.case-summary {
  margin: 8px 0 0 !important;
  font-size: 12px;
  line-height: 1.7;
  color: var(--sub);
}

.case-body { margin-top: 10px; border: 0; padding: 0; background: transparent; }
.case-body > summary { font-size: 12px; color: var(--pine); font-weight: 750; }

.case-block { margin-top: 14px; }
.case-block > b { display: block; margin-bottom: 7px; font-size: 11px; font-weight: 800; color: var(--sub); letter-spacing: .03em; }

.case-line { margin: 4px 0 !important; font-size: 12px; line-height: 1.7; color: var(--ink); }
.case-line b { margin-right: 8px; color: var(--sub); font-weight: 750; }

@media (max-width: 590px) {
  .case-time { margin-left: 0; }
}

/* 确诊后的补充输入：紧贴对话底部，不能藏到报告最后 */
.chat-foot-done { gap: 9px; }

.chat-done-hint {
  margin: 0 !important;
  font-size: 11.5px;
  line-height: 1.65;
  color: var(--sub);
}

.chat-foot-done .input { font-size: 12px; }
.chat-foot-done .btn { white-space: nowrap; }

/* ---------------------------------------------------------------- 动物档案照片 */
/* 有照片时把字符图标换成照片，圆角与尺寸沿用 .pet-letter，不改动原有布局 */
.pet-letter.has-photo {
  padding: 0;
  overflow: hidden;
  background: linear-gradient(145deg, #dbeae0, #efeadc);
}

.pet-letter.has-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  border-radius: inherit;
}

/* 抽屉里的上传块：左边方框预览，右边说明 + 选择按钮 */
.pet-photo {
  display: flex;
  gap: 16px;
  align-items: flex-start;
  padding: 14px;
  margin-bottom: 18px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: var(--solid);
}

.pet-photo-frame {
  width: 92px;
  height: 92px;
  flex: 0 0 92px;
  border-radius: 18px;
  border: 1px dashed #cddcd2;
  background: linear-gradient(145deg, #eef4ef, #f6f3ec);
  display: grid;
  place-items: center;
  color: #7b968a;
  font-size: 24px;
  overflow: hidden;
}

.pet-photo-frame.has-photo { border-style: solid; border-color: transparent; }

.pet-photo-frame img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.pet-photo-meta { display: flex; flex-direction: column; gap: 7px; min-width: 0; }
.pet-photo-meta b { font-size: 13px; letter-spacing: -.02em; }
.pet-photo-meta small { font-size: 11px; line-height: 1.6; color: var(--sub); }
.pet-photo-pick { align-self: flex-start; }
.pet-photo-meta .tiny { font-size: 10px; color: var(--sub); }

/* ---------------------------------------------------------------------------
   症状选择器：搜索 + 系统分组折叠（目录有 200+ 条，平铺会看不到头）
   --------------------------------------------------------------------------- */
.case-search { display: flex; gap: 9px; align-items: center; margin-bottom: 14px; }
.case-search .input { flex: 1; }
.case-group { border: 1px solid var(--line); border-radius: 17px; background: var(--solid); padding: 13px 16px; margin-bottom: 9px; }
.case-group summary { display: flex; align-items: center; gap: 10px; font-size: 13px; }
.case-group summary .tile-icon { width: 32px; height: 32px; font-size: 16px; border-radius: 11px; }
.case-group summary small { margin-left: auto; color: var(--sub); font-size: 11px; font-weight: 600; }
.case-group[open] summary { margin-bottom: 13px; }
.case-group .tile-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.case-group .tile { min-height: 0; padding: 15px; gap: 7px; }
.case-group .tile .tile-icon { width: 32px; height: 32px; font-size: 16px; border-radius: 11px; }
.case-group .tile b { font-size: 13px; }
.case-group .tile small { font-size: 10px; }
@media (max-width: 980px) { .case-group .tile-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 590px) { .case-group .tile-grid { grid-template-columns: 1fr; } }

/* 报告 04 段里「只有线下能做的」那几项 */
.clinic-only { border: 1px dashed var(--line); border-radius: 13px; padding: 13px 15px; background: var(--solid); }
.clinic-only b { font-size: 12px; display: block; margin-bottom: 7px; }
.clinic-only ul { margin: 0; padding-left: 18px; }
.clinic-only li { font-size: 12px; color: var(--sub); margin: 4px 0; line-height: 1.7; }
.clinic-only small { display: block; margin-top: 8px; font-size: 10.5px; color: var(--sub); line-height: 1.6; }

/* ---------------------------------------------------------------------------
   多症状入口：一句话描述 + 可多选的症状 chips
   --------------------------------------------------------------------------- */
.ask-form .input { width: 100%; min-height: 76px; resize: vertical; }
.ask-form .form-actions { margin-top: 12px; align-items: center; gap: 12px; }
.ask-chips { gap: 8px; }
.ask-chips .chip-check { font-size: 12px; }
.ask-chips .chip-check span { padding: 6px 11px; }

/* 报告：待解释的事实 */
.unexplained { border: 1px dashed var(--line); border-radius: 13px; padding: 12px 14px; margin: 0 0 12px; background: var(--solid); }
.unexplained b { display: block; font-size: 12px; margin-bottom: 6px; }
.unexplained ul { margin: 0; padding-left: 18px; }
.unexplained li { font-size: 12px; color: var(--sub); line-height: 1.7; }

/* ---------------------------------------------------------------------------
   全部症状的兜底浏览：默认折叠，别抢走「一句话描述」的主路径
   --------------------------------------------------------------------------- */
.browse-all {
  border: 1px solid var(--line);
  border-radius: 17px;
  background: var(--solid);
  padding: 14px 16px;
  margin-top: 14px;
}
.browse-all > summary {
  display: flex;
  align-items: baseline;
  gap: 10px;
  cursor: pointer;
  list-style: none;
}
.browse-all > summary::-webkit-details-marker { display: none; }
.browse-all > summary b { font-size: 13px; }
.browse-all > summary small { color: var(--sub); font-size: 11px; }
.browse-all[open] > summary { margin-bottom: 12px; }
.browse-all .case-group { background: transparent; border: 0; border-top: 1px dashed var(--line); border-radius: 0; padding: 10px 0 0; margin: 8px 0 0; }
.browse-all .case-group:first-of-type { border-top: 0; }

/* ---------------------------------------------------------------------------
   医疗项目：19 个分类全部平铺，但每项只占一小行 —— 不折叠、不抢眼球
   --------------------------------------------------------------------------- */
.ask-group { margin: 12px 0 4px; }
.ask-group > b { font-size: 12px; margin-right: 6px; }
.ask-group > small { color: var(--sub); font-size: 10.5px; }

.med-list { display: grid; gap: 6px; }
.med-group {
  display: grid;
  grid-template-columns: 128px minmax(0, 1fr);
  gap: 8px;
  align-items: start;
  padding: 5px 0;
  border-bottom: 1px dashed var(--line);
}
.med-group:last-child { border-bottom: 0; }
.med-group-name {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 11px;
  font-weight: 750;
  color: var(--sub);
  line-height: 1.5;
  padding-top: 3px;
}
.med-group-name i { font-style: normal; font-size: 12px; opacity: .8; }
.med-items { display: flex; flex-wrap: wrap; gap: 4px; }
.med-item {
  border: 1px solid var(--line);
  background: var(--solid);
  color: var(--ink);
  border-radius: 8px;
  padding: 3px 7px;
  font-size: 11px;
  line-height: 1.45;
  cursor: pointer;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  transition: border-color .18s, background .18s;
}
.med-item:hover { border-color: #85bfa5; background: var(--mint); }

@media (max-width: 700px) {
  .med-group { grid-template-columns: 1fr; gap: 3px; }
  .med-group-name { padding-top: 0; }
}

/* 搜索命中结果也用同一套紧凑行 */
.case-search { margin: 14px 0 10px; }

/* ---------------------------------------------------------------------------
   问诊表单里的文字整体放大一号（原 11—12px → 12—13px）
   --------------------------------------------------------------------------- */
.ask-form textarea.input { font-size: 14px; line-height: 1.7; }
.ask-group > b { font-size: 13px; }
.ask-group > small { font-size: 11.5px; }
.ask-chips .chip-check { font-size: 13px; }
.ask-chips .chip-check span { padding: 7px 12px; }
.ask-form .form-actions .subtle { font-size: 13px; }
.ask-form .btn.primary { font-size: 13px; padding: 12px 18px; }

/* ---------------------------------------------------------------------------
   完整医疗项目 v3：一行入口 + 右侧抽屉（按 UI/UX 设计文档 v1.0）
   --------------------------------------------------------------------------- */
.med-entry {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  min-height: 60px;
  padding: 10px 16px;
  margin-top: 16px;
  border: 1px solid #e8eeea;
  border-radius: 12px;
  background: #fff;
  color: inherit;
  text-align: left;
  cursor: pointer;
  transition: background .15s ease-out, border-color .15s ease-out;
}
.med-entry:hover { background: #f7faf8; border-color: #d9e6dd; }
.med-entry:active { background: #f2f7f4; }
.med-entry:focus-visible { outline: 2px solid #4d9b74; outline-offset: 2px; }
.med-entry-icon { font-size: 16px; line-height: 1; color: #95a49a; }
.med-entry-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.med-entry-text b { font-size: 13px; font-weight: 500; color: #253a30; }
.med-entry-text small { font-size: 11px; color: #89988f; }
.med-entry-meta { margin-left: auto; font-size: 11px; color: #89988f; white-space: nowrap; }
.med-entry-arrow { font-size: 16px; color: #95a49a; transition: transform .15s ease-out; }
.med-entry:hover .med-entry-arrow { transform: translateX(2px); }

/* 抽屉 */
.med-drawer-root[hidden] { display: none; }
.med-drawer-root { position: fixed; inset: 0; z-index: 60; }
.med-drawer-mask {
  position: absolute; inset: 0;
  background: rgba(15, 30, 22, .20);
  animation: medFade .2s ease-out;
}
.med-drawer {
  position: absolute; top: 0; right: 0; bottom: 0;
  width: 440px; max-width: 100%;
  display: flex; flex-direction: column;
  background: #fff;
  border-left: 1px solid #e8eeea;
  box-shadow: -20px 0 60px rgba(20, 40, 30, .12);
  animation: medSlide .2s ease-out;
}
@keyframes medFade { from { opacity: 0; } to { opacity: 1; } }
@keyframes medSlide { from { transform: translateX(24px); opacity: .6; } to { transform: none; opacity: 1; } }

.med-drawer-head {
  flex: 0 0 auto;
  display: flex; align-items: flex-start; gap: 12px;
  padding: 18px 18px 14px;
  border-bottom: 1px solid #eef3ef;
}
.med-drawer-head h2 { margin: 0; font-size: 17px; letter-spacing: -.02em; color: #253a30; }
.med-drawer-head small { display: block; margin-top: 4px; font-size: 11.5px; color: #89988f; }
.med-drawer-x {
  margin-left: auto;
  width: 32px; height: 32px;
  display: grid; place-items: center;
  border: 1px solid #e8eeea; border-radius: 50%;
  background: #fff; color: #6d8076; cursor: pointer;
}
.med-drawer-x:hover { background: #f7faf8; }

.med-drawer-search { flex: 0 0 auto; padding: 12px 18px; }
/* 图标、输入框、清除按钮排成一行，靠 flex 定位——不用 absolute，中英文混排也不会叠字 */
.med-search-box {
  display: flex; align-items: center; gap: 9px;
  height: 40px; padding: 0 12px;
  border: 1px solid #e8eeea; border-radius: 10px;
  background: #fff;
  transition: border-color .15s, box-shadow .15s;
}
.med-search-box:focus-within { border-color: #85bfa5; box-shadow: 0 0 0 3px #91ccb12b; }
.med-drawer-search-ico { flex: 0 0 auto; display: block; color: #95a49a; }
.med-drawer-search input {
  flex: 1 1 auto; min-width: 0; height: 100%;
  padding: 0; border: 0; background: transparent;
  color: #253a30; font-size: 12.5px;
}
.med-drawer-search input:focus { outline: none; }
.med-drawer-clear {
  flex: 0 0 auto;
  width: 20px; height: 20px; padding: 0;
  border: 0; border-radius: 50%;
  background: #eef3ef; color: #6d8076; font-size: 10px; cursor: pointer;
}

.med-drawer-body { flex: 1 1 auto; display: grid; grid-template-columns: 140px minmax(0, 1fr); min-height: 0; }
.med-cats { overflow: auto; border-right: 1px solid #eef3ef; padding: 8px 0 14px; }
.med-cat {
  display: flex; align-items: center; gap: 6px;
  width: 100%; padding: 8px 12px;
  border: 0; background: transparent; color: #4d6157;
  font-size: 11.5px; text-align: left; cursor: pointer;
  border-radius: 0 8px 8px 0;
}
.med-cat:hover { background: #f7faf8; }
.med-cat.is-active { background: #eef6f1; color: #236d51; font-weight: 700; }
.med-cat em { margin-left: auto; font-style: normal; font-size: 10px; color: #9aaba2; }
.med-cat.is-active em { color: #4d8f6f; }

.med-syms-wrap { overflow: auto; padding: 12px 16px 16px; }
.med-syms-title { margin: 0 0 8px; font-size: 11.5px; color: #89988f; }
.med-syms { display: flex; flex-wrap: wrap; gap: 7px; }
.med-sym {
  display: inline-flex; align-items: center; gap: 5px;
  min-height: 34px; padding: 6px 11px;
  border: 1px solid #e2eae5; border-radius: 9px;
  background: #fff; color: #466054;
  font-size: 12px; line-height: 1.5; text-align: left; cursor: pointer;
  transition: background .15s, border-color .15s, color .15s;
}
.med-sym:hover { background: #f4f9f6; }
.med-sym[aria-pressed="true"] { background: #e7f4ec; border-color: #8ec3a6; color: #175c45; font-weight: 600; }
.med-sym[aria-pressed="true"]::before { content: '✓'; font-size: 10px; color: #2a7a58; }
.med-syms-empty { margin: 20px 0 0; font-size: 12px; color: #89988f; line-height: 1.8; }

.med-drawer-foot {
  flex: 0 0 auto;
  display: flex; align-items: center; gap: 12px;
  padding: 12px 18px;
  padding-bottom: max(12px, env(safe-area-inset-bottom));
  border-top: 1px solid #eef3ef;
  background: #fff;
}
.med-picked { font-size: 12px; color: #6d8076; }
.med-drawer-foot .btn {
  margin-left: auto;
  flex: 0 0 auto;
  min-height: 40px;
  padding: 10px 16px;
  font-size: 12px;
}
.med-drawer-foot .btn:disabled { opacity: .45; cursor: not-allowed; }

@media (max-width: 768px) {
  .med-drawer { width: 100%; border-left: 0; }
  .med-drawer-body { grid-template-columns: 1fr; grid-template-rows: auto minmax(0, 1fr); }
  .med-cats {
    display: flex; gap: 6px; overflow-x: auto; overflow-y: hidden;
    border-right: 0; border-bottom: 1px solid #eef3ef; padding: 8px 12px;
  }
  .med-cat { width: auto; flex: 0 0 auto; border-radius: 99px; padding: 7px 11px; background: #f7faf8; }
  .med-cat em { margin-left: 2px; }
  .med-sym { min-height: 40px; }
}
/* 抽屉打开时锁住页面滚动；padding-right 由 JS 按滚动条宽度补齐，页面不位移 */
body.med-lock { overflow: hidden; }

@media (prefers-reduced-motion: reduce) {
  .med-drawer, .med-drawer-mask, .med-entry, .med-entry-arrow { animation: none; transition: none; }
}

/* ---------------------------------------------------------------------------
   报告 02 应对措施：拆成「治疗方案」+「用药方案」两块，两块都必有内容
   --------------------------------------------------------------------------- */
.treat-block + .treat-block {
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px solid var(--line);
}

.treat-title {
  display: flex;
  align-items: baseline;
  gap: 8px;
  flex-wrap: wrap;
  margin: 0 0 8px;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: -.01em;
  color: var(--ink);
}
.treat-title::before {
  content: '';
  width: 3px;
  height: 12px;
  border-radius: 2px;
  background: var(--pine);
  transform: translateY(1px);
}
.treat-title em {
  font-style: normal;
  font-size: 11px;
  font-weight: 600;
  color: var(--sub);
}

.treat-block .plan-steps { margin-top: 6px; }

.treat-review {
  margin: 10px 0 0;
  font-size: 12px;
  line-height: 1.7;
  color: var(--sub);
}
.treat-review b {
  display: inline-block;
  margin-right: 7px;
  padding: 2px 7px;
  border-radius: 6px;
  background: var(--mint);
  color: var(--pine);
  font-size: 10.5px;
  font-weight: 800;
}

/* 用药结论句在新结构里紧跟小标题，不需要再拉一条分隔线 */
.treat-block .med-line {
  margin: 4px 0 0 !important;
  padding-top: 0;
  border-top: 0;
}

.med-sub {
  margin: 14px 0 6px;
  font-size: 11px;
  font-weight: 800;
  color: var(--sub);
  letter-spacing: .04em;
}

.med-when {
  margin: 12px 0 0;
  padding: 10px 12px;
  border-radius: 10px;
  background: var(--mint);
  font-size: 12px;
  line-height: 1.7;
  color: var(--ink);
}
.med-when b {
  display: block;
  margin-bottom: 3px;
  font-size: 10.5px;
  color: var(--pine);
  letter-spacing: .04em;
}

/* ---------------------------------------------------------------- 侧栏入口间距 */
/* 相邻两个一级入口之间留 2px，分组标题前后的呼吸由 .navlabel 自己的 padding 负责，
   这里只做「按钮挨着按钮」的情况，不改变分组结构。 */
.sidebar-scroll .navitem + .navitem { margin-top: 2px; }

/* ---------------------------------------------------------------- 当前档案标记 */
/* 「当前」不再用文字徽标，改成头像角标上的对勾；位置在头像右上角，带一圈纸色描边，
   压在照片上也看得清。语义留给 title 与 aria-label。 */
.pet-letter { position: relative; }
.pet-letter .pet-current {
  position: absolute;
  top: -3px;
  right: -3px;
  width: 15px;
  height: 15px;
  border-radius: 999px;
  background: var(--pine);
  color: #fff;
  display: grid;
  place-items: center;
  box-shadow: 0 0 0 2px var(--paper);
  pointer-events: none;
}

/* ---------------------------------------------------------------- 问诊页右侧动物卡 */
/* 只在 ≥1500 的宽屏切两栏：此时左栏仍有 870px 上下，不比现在（880 居中）窄；
   窄屏维持原样，不为塞侧栏把对话压小。 */
@media (min-width: 1500px) {
  .consult-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 300px;
    gap: 19px;
    align-items: start;
  }
  .consult-layout .chat-card { max-width: none; margin: 0; }
  /* 宽屏两栏之后左栏变高，历史区再放一档：1920×1080 下约 690px，长对话几乎不用滚。 */
  .consult-layout .chat-body { max-height: clamp(420px, 64vh, 760px); }
}

.consult-side {
  position: sticky;
  top: 89px;
  display: grid;
  gap: 14px;
}
@media (max-width: 1499px) {
  .consult-side { display: none; }
}

.consult-pet-face {
  aspect-ratio: 4 / 3;
  border-radius: 18px;
  overflow: hidden;
  background: var(--mint);
  display: grid;
  place-items: center;
  color: var(--darkpine);
}
.consult-pet-face img { width: 100%; height: 100%; object-fit: cover; display: block; }
.consult-pet-face span { font-size: 40px; line-height: 1; }
.consult-pet-face svg { width: 40px; height: 40px; }

.consult-pet-line { margin: 10px 0 0; }
.consult-pet-go { margin-top: 14px; width: 100%; }