/* ============================================================
   宠伴小护 · 卡片式趣味视觉（移动默认 + 桌面增强）
   设计语言：暖色奶油底 + 珊瑚橙主色 + 青绿点缀 + 大圆角卡片
   ============================================================ */

:root {
  --primary: #ff7a59;
  --primary-dark: #e8593c;
  --primary-soft: #fff0ea;
  --accent: #2fb8a6;
  --accent-soft: #e6f7f4;
  --yellow: #ffc53d;
  --yellow-soft: #fff6e0;
  --purple: #8b7cf6;
  --purple-soft: #f0edff;
  --bg: #fff6ef;
  --card: #ffffff;
  --text: #33261d;
  --muted: #a08d80;
  --border: #f4e2d3;
  --shadow: 0 4px 16px rgba(255, 122, 89, 0.08);
  --shadow-lg: 0 8px 24px rgba(255, 122, 89, 0.14);
  --radius: 18px;
  --radius-sm: 12px;
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }

html, body {
  margin: 0;
  padding: 0;
  font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "Helvetica Neue", sans-serif;
  color: var(--text);
  background: var(--bg);
}

/* ---------- 布局 ---------- */
.app {
  display: flex;
  flex-direction: column;
  max-width: 480px;
  margin: 0 auto;
  height: 100dvh;
  background: var(--bg);
}

.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 16px;
  background: var(--card);
  border-bottom: 1px solid var(--border);
  position: sticky;
  top: 0;
  z-index: 10;
}
.brand { font-weight: 700; font-size: 17px; color: var(--primary); }
.topbar-right { display: flex; align-items: center; gap: 10px; }
.pet-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: var(--primary-soft);
  color: var(--primary-dark);
  border-radius: 999px;
  padding: 4px 10px;
  font-size: 13px;
  font-weight: 600;
}
.pet-select {
  border: 1px solid var(--border);
  background: var(--card);
  border-radius: 999px;
  padding: 5px 8px;
  font-size: 13px;
  color: var(--text);
  max-width: 110px;
  outline: none;
}
.btn-ghost {
  border: 1px solid var(--border);
  background: var(--card);
  color: var(--muted);
  border-radius: 999px;
  padding: 4px 12px;
  font-size: 12px;
  cursor: pointer;
}
.btn-ghost:hover { color: var(--primary); border-color: var(--primary); }

.app-body { flex: 1; display: flex; flex-direction: column; min-height: 0; }

/* 移动：内容在上、导航在下 */
.sidebar {
  order: 2;
  background: var(--card);
  border-top: 1px solid var(--border);
  padding-bottom: env(safe-area-inset-bottom);
}
.content { order: 1; flex: 1; overflow-y: auto; padding: 14px; }

/* ---------- 导航 ---------- */
.nav { display: flex; flex-direction: row; }
.nav-item {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: 10px 4px;
  border: none;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  font-size: 11px;
  border-radius: 0;
}
.nav-item span { font-size: 22px; }
.nav-item em { font-style: normal; }
.nav-item.active { color: var(--primary); font-weight: 600; }

/* ---------- Tab ---------- */
.tab { display: none; }
.tab.active { display: block; }
/* 对话 tab：填满内容区，输入框钉在底部 */
#tab-chat.active {
  display: flex;
  flex-direction: column;
  height: 100%;
}
#tab-chat .chat-box {
  flex: 1;
  min-height: 0;
  max-height: none;
  overflow-y: auto;
}
#tab-chat .chips { flex-shrink: 0; }
#tab-chat .chat-input {
  position: static;
  flex-shrink: 0;
}
.layout-mobile .content { padding-bottom: 20px; }

/* ---------- 通用卡片 ---------- */
.card {
  background: var(--card);
  border-radius: var(--radius);
  padding: 16px;
  box-shadow: var(--shadow);
  border: 1px solid var(--border);
  margin-bottom: 12px;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.card:hover { transform: translateY(-2px); box-shadow: var(--shadow-lg); }
.cards { margin-top: 6px; }

.panel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 14px;
}
.panel-head h2 { margin: 0; font-size: 20px; }
.sub-tabs {
  display: flex;
  gap: 4px;
  margin-bottom: 14px;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 4px;
  box-shadow: var(--shadow);
}
.sub-tab {
  flex: 1;
  border: none;
  background: transparent;
  padding: 9px 4px;
  border-radius: 9px;
  font-size: 13px;
  color: var(--muted);
  cursor: pointer;
}
.sub-tab.active {
  background: var(--primary);
  color: #fff;
  font-weight: 600;
  box-shadow: 0 2px 8px rgba(255, 122, 89, 0.35);
}
.sub-panel { display: none; }
.sub-panel.active { display: block; }
.seg-row { display: flex; gap: 8px; margin-bottom: 8px; }
.seg-btn {
  flex: 1;
  border: 1px solid var(--border);
  background: var(--card);
  border-radius: 999px;
  padding: 9px 6px;
  font-size: 14px;
  color: var(--muted);
  cursor: pointer;
}
.seg-btn.active {
  background: var(--primary-soft);
  color: var(--primary-dark);
  border-color: var(--primary);
  font-weight: 600;
}
.petvoice-box {
  background: var(--bg);
  border: 1px dashed var(--border);
  border-radius: var(--radius-sm);
  padding: 18px 14px;
  text-align: center;
  line-height: 1.7;
  margin-bottom: 4px;
}
#image-preview img { width: 100%; max-height: 220px; object-fit: contain; border-radius: 12px; margin-top: 4px; display: block; background: #f5f5f0; }
#image-result .card { margin-top: 8px; }
.section-title { font-size: 15px; margin: 20px 0 10px; font-weight: 700; }
.muted { color: var(--muted); font-size: 12px; font-weight: normal; }

.btn {
  border: 1px solid var(--border);
  background: var(--card);
  color: var(--text);
  padding: 9px 16px;
  border-radius: 999px;
  cursor: pointer;
  font-size: 14px;
  transition: all 0.15s ease;
}
.btn:hover { border-color: var(--primary); color: var(--primary); }
.btn:disabled { opacity: 0.6; cursor: not-allowed; }
.btn.primary { background: var(--primary); border-color: var(--primary); color: #fff; box-shadow: 0 4px 12px rgba(255, 122, 89, 0.35); }
.btn.primary:hover { background: var(--primary-dark); color: #fff; }
.btn.wide { width: 100%; padding: 12px; font-size: 15px; }

.hidden { display: none !important; }

/* ---------- 对话 ---------- */
.chat-box {
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-height: 320px;
  max-height: 56vh;
  overflow-y: auto;
  padding: 6px 2px 10px;
}
.msg {
  display: flex;
  gap: 8px;
  max-width: 86%;
  line-height: 1.65;
  word-break: break-word;
  font-size: 14px;
}
.msg .avatar {
  flex-shrink: 0;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  background: var(--primary-soft);
}
.msg .bubble {
  padding: 10px 14px;
  border-radius: 16px;
  white-space: pre-wrap;
}
.msg.bot { align-self: flex-start; }
.msg.bot .bubble { background: var(--card); border: 1px solid var(--border); border-top-left-radius: 6px; box-shadow: var(--shadow); }
.msg.user { align-self: flex-end; flex-direction: row-reverse; }
.msg.user .avatar { background: var(--primary); }
.msg.user .bubble { background: var(--primary); color: #fff; border-top-right-radius: 6px; }

.chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 10px 0; }
.chip {
  border: 1px solid var(--border);
  background: var(--card);
  border-radius: 999px;
  padding: 7px 14px;
  font-size: 13px;
  color: var(--primary-dark);
  cursor: pointer;
  box-shadow: var(--shadow);
}
.chip:hover { background: var(--primary-soft); }
.search-status {
  display: flex; align-items: center; gap: 8px;
  padding: 8px 14px; margin: 10px 0 14px 40px;
  width: fit-content; max-width: calc(100% - 40px);
  font-size: 13px; color: var(--muted);
  background: var(--card); border: 1px solid var(--border); border-radius: 12px;
}
.search-status[hidden] { display: none; }
.search-status-dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--primary); animation: ss-pulse 1s infinite;
}
@keyframes ss-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.25; } }
.msg-meta { font-size: 11px; color: var(--muted); margin: 0 0 4px 4px; }

.chat-input {
  display: flex;
  gap: 8px;
  background: var(--card);
  padding: 8px;
  border-radius: 999px;
  box-shadow: var(--shadow-lg);
  border: 1px solid var(--border);
  position: sticky;
  bottom: 0;
}
.chat-input input {
  flex: 1;
  border: none;
  outline: none;
  padding: 8px 10px;
  font-size: 14px;
  background: transparent;
  color: var(--text);
}
.chat-input button {
  border: none;
  background: var(--primary);
  color: #fff;
  border-radius: 999px;
  padding: 8px 20px;
  cursor: pointer;
  font-size: 14px;
}
.chat-input .chat-upload {
  background: var(--primary-soft);
  color: var(--primary-dark);
  padding: 0;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  flex-shrink: 0;
  font-size: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.chat-input .chat-upload:hover { background: var(--primary); color: #fff; }

/* 确认卡 */
.msg.bot .bubble.confirm-card {
  white-space: normal;
  padding: 16px 18px;
  max-width: 420px;
  width: fit-content;
  border: 1px solid var(--yellow);
  background: var(--yellow-soft);
}
.confirm-title { font-weight: 700; color: #8a6a00; margin-bottom: 6px; }
.confirm-body { font-size: 13px; color: #7a5d00; margin-bottom: 10px; }
.confirm-actions { display: flex; gap: 8px; }
.confirm-actions .btn { padding: 7px 16px; font-size: 13px; }

/* ---------- 表单 ---------- */
.form { display: flex; flex-direction: column; gap: 8px; }
.form input, .form select, .form textarea {
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 11px;
  font-size: 14px;
  background: var(--bg);
  outline: none;
  color: var(--text);
}
.form textarea { resize: vertical; min-height: 70px; font-family: inherit; }
.form input:focus, .form select:focus, .form textarea:focus { border-color: var(--primary); }

/* ---------- 提醒卡片 ---------- */
.reminder-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
  margin-bottom: 16px;
}
.reminder-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 20px 10px;
  cursor: pointer;
  font-size: 30px;
  box-shadow: var(--shadow);
  transition: all 0.15s ease;
}
.reminder-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-lg); border-color: var(--primary); }
.reminder-card b { font-size: 16px; color: var(--text); }
.reminder-card small { font-size: 12px; color: var(--muted); }
.reminder-actions { display: flex; gap: 8px; margin-top: 4px; }
.reminder-actions .btn { flex: 1; }
.ocr-result { font-size: 13px; color: var(--accent); line-height: 1.5; word-break: break-all; }

/* ---------- 列表卡片 ---------- */
.item-card { position: relative; }
.item-card .title { font-weight: 700; margin-bottom: 6px; font-size: 15px; }
.item-card .line { font-size: 13px; color: #6b5a4d; line-height: 1.6; }
.item-card .tag {
  display: inline-block;
  background: var(--primary-soft);
  color: var(--primary-dark);
  border-radius: 999px;
  padding: 2px 10px;
  font-size: 12px;
  margin-right: 6px;
}
.item-card .tag.teal { background: var(--accent-soft); color: #1d8f80; }
.item-card .tag.purple { background: var(--purple-soft); color: var(--purple); }
.item-card .tag.yellow { background: var(--yellow-soft); color: #9a7400; }
.item-card a { color: var(--accent); text-decoration: none; font-weight: 600; word-break: break-all; }
.record-thumb { width: 100%; max-height: 180px; object-fit: cover; border-radius: 12px; margin: 6px 0; display: block; }
#record-photo-preview img { width: 100%; max-height: 180px; object-fit: cover; border-radius: 12px; margin-top: 4px; display: block; }
.item-card .analysis { background: var(--accent-soft); border-radius: 10px; padding: 8px 10px; margin-top: 8px; color: #1d6b60; }
.place-photo { width: 100%; height: 130px; object-fit: cover; border-radius: 12px; margin-bottom: 8px; display: block; }
.place-services { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 2px; }
.place-services .tag { margin-right: 0; }
.place-actions { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin-top: 8px; }
.place-actions a { color: var(--accent); }
.place-tel { color: var(--primary-dark); word-break: break-all; }
.nearby-box { padding: 12px; }
.nearby-row { display: flex; gap: 8px; align-items: center; }
.nearby-row input {
  flex: 1;
  min-width: 0;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 10px;
  font-size: 14px;
  outline: none;
  background: var(--bg);
  color: var(--text);
}
.nearby-row .btn { flex-shrink: 0; }
.load-more { text-align: center; padding: 12px 0 4px; font-size: 13px; }
.insurance-card { display: flex; gap: 12px; align-items: flex-start; }
.insurance-thumb {
  width: 72px;
  height: 72px;
  flex-shrink: 0;
  border-radius: 12px;
  background: var(--primary-soft);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 32px;
  overflow: hidden;
}
.insurance-thumb img { width: 100%; height: 100%; object-fit: cover; }
.insurance-body { flex: 1; min-width: 0; }
.insurance-name { font-weight: 700; font-size: 15px; }
.insurance-premium { color: var(--primary-dark); font-weight: 700; margin: 2px 0 6px; }
.insurance-coverage { display: flex; flex-wrap: wrap; gap: 4px; margin-bottom: 6px; }
.insurance-coverage .tag { margin-right: 0; }

.empty {
  text-align: center;
  color: var(--muted);
  padding: 36px 0;
  font-size: 14px;
}
.empty .big { font-size: 40px; display: block; margin-bottom: 8px; }

/* ---------- 登录页 ---------- */
.login-body {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100dvh;
  padding: 20px;
  background: linear-gradient(160deg, #fff6ef 0%, #ffe8dc 100%);
}
.login-card {
  width: 100%;
  max-width: 380px;
  text-align: center;
  padding: 36px 28px;
  border-radius: 24px;
}
.login-logo { font-size: 56px; }
.login-card h1 { margin: 12px 0 6px; font-size: 22px; color: var(--text); }
.login-card form { display: flex; flex-direction: column; gap: 10px; margin-top: 20px; }
.login-card input {
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 12px;
  font-size: 15px;
  text-align: center;
  outline: none;
  background: var(--bg);
  color: var(--text);
}
.login-card input:focus { border-color: var(--primary); }
.login-msg { margin-top: 12px; font-size: 13px; color: var(--primary-dark); min-height: 18px; }

/* ---------- 弹层 ---------- */
.modal {
  position: fixed;
  inset: 0;
  background: rgba(51, 38, 29, 0.4);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 100;
  padding: 20px;
}
.modal-card { width: 100%; max-width: 320px; margin-bottom: 0; }
.modal-card h3 { margin: 0 0 12px; font-size: 17px; }
.modal-card input {
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 11px;
  font-size: 15px;
  outline: none;
  background: var(--bg);
  color: var(--text);
  width: 100%;
  margin-bottom: 12px;
}

/* 2026-10 参考视觉：奶油白、鼠尾草绿与柔和粉彩。 */
:root {
  --primary:#39572c; --primary-dark:#283f20; --primary-soft:#e5efce;
  --accent:#537b70; --accent-soft:#e9f2e9; --bg:#f6f7f1;
  --text:#283729; --muted:#73806e; --border:#e4e9dd;
  --shadow:0 4px 18px #32482a06; --shadow-lg:0 8px 28px #32482a0d;
  --radius:24px; --radius-sm:15px;
}
body { background:#edf0e5; }
button,input,select,textarea {font-family:inherit;}
button {touch-action:manipulation;}
button:focus-visible,a:focus-visible {outline:3px solid #72994a;outline-offset:3px;}
.topbar {background:#fafbf7;padding:15px 18px;border-bottom:1px solid var(--border);}
.brand {color:var(--text);font-size:16px;letter-spacing:-.4px;white-space:nowrap;}
.topbar-right {gap:5px;}
.btn-ghost {min-height:36px;padding:5px 8px;color:#66745c;}
.pet-select {background:#edf2e4;min-height:36px;max-width:95px;}
.content {padding:18px;}
.app {max-width:480px;}
.sidebar {border-top:0;background:#fff;box-shadow:0 -5px 24px #33442b06;}
.nav {padding:7px 8px;gap:3px;}
.nav-item {border-radius:20px;padding:8px 2px;min-height:58px;}
.nav-item.active {background:#edf3e2;color:var(--primary);}
.nav-item span {font-size:20px;}
.welcome-message {display:none;}
.home-greeting {padding:5px 2px 20px;}
.eyebrow {font-size:9px;letter-spacing:2px;color:#849174;font-weight:600;}
.home-greeting h1 {font-size:25px;line-height:1.4;letter-spacing:-.8px;margin:9px 0 0;}
.home-greeting h1 span {display:block;font-size:13px;color:var(--muted);font-weight:400;letter-spacing:.5px;margin-top:5px;}
.welcome-banner {border-radius:28px;position:relative;isolation:isolate;background:linear-gradient(125deg,#eaf0d4,#dae9b6);padding:23px;overflow:hidden;min-height:208px;}
.welcome-banner:before {content:'';position:absolute;width:200px;height:200px;border:1px solid #ffffff90;border-radius:50%;right:-45px;top:-55px;z-index:-1;}
.status-pill {font-size:10px;color:#5c7143;}
.welcome-banner h2 {font-size:24px;line-height:1.4;margin:12px 0 8px;letter-spacing:-.5px;}
.welcome-banner p {font-size:10px;color:#697c50;max-width:165px;}
.welcome-banner img {position:absolute;right:-19px;bottom:4px;width:55%;height:auto;z-index:-1;}
.hero-button {border:0;border-radius:99px;background:#354e29;color:white;font-size:12px;padding:12px 17px;min-height:42px;margin-top:9px;cursor:pointer;}
.home-section-heading {display:flex;align-items:center;justify-content:space-between;margin:22px 1px 12px;gap:10px;}
.home-section-heading h2 {font-size:15px;margin:0;}
.home-section-heading>span {font-size:10px;color:var(--muted);}
.health-actions {display:grid;grid-template-columns:1fr 1fr;gap:12px;}
.action-tile {text-align:left;position:relative;border:1px solid #ffffffa0;border-radius:24px;min-height:137px;padding:17px 15px;color:var(--text);cursor:pointer;transition:transform .18s,box-shadow .18s;}
.action-tile:hover {transform:translateY(-3px);box-shadow:var(--shadow-lg);}
.action-tile.blue {background:#e3edf5;}.action-tile.green {background:#eaf0dc;}.action-tile.cream {background:#f6efd9;}.action-tile.pink {background:#f5e6e4;}
.tile-icon {display:flex;width:38px;height:38px;align-items:center;justify-content:center;background:#ffffff88;border-radius:13px;font-size:23px;margin-bottom:12px;}
.action-tile strong {display:block;font-size:16px;margin-bottom:5px;}
.action-tile small {font-size:10px;color:#6b7667;}
.tile-arrow {position:absolute;right:16px;top:19px;color:#7c8972;font-size:18px;}
.health-note {text-align:center;font-size:10px;color:#85917c;margin:16px 0 9px;}
#tab-chat .chat-box {padding:0 0 8px;gap:14px;}
#tab-chat .chips {gap:6px;margin:10px 0;}
.chip {font-size:11px;padding:9px 11px;box-shadow:none;background:#fcfdf9;min-height:34px;}
.chat-input {border-radius:23px;padding:8px;box-shadow:0 5px 20px #2a402009;}
.chat-input input {min-width:0;width:0;font-size:13px;padding:8px;}
.chat-input button {padding:9px 16px;min-height:40px;}
.msg.user .bubble {background:#dfedbf;color:#2d4222;border:0;}
.msg.bot .bubble {border:0;border-radius:22px;border-top-left-radius:6px;}
.card:hover {transform:none;}
.btn.primary,.sub-tab.active {box-shadow:none;}
.panel-head {padding:8px 0;gap:8px;}
.panel-head h2 {font-size:22px;letter-spacing:-.6px;}
.reminder-card {border:0;min-height:144px;gap:9px;}
.reminder-card:nth-child(1) {background:#e6eef5;}.reminder-card:nth-child(2) {background:#edf0dc;}.reminder-card:nth-child(3) {background:#f5e8e6;}.reminder-card:nth-child(4) {background:#f7efd9;}
.item-card .line {color:#61705c;}
.modal-card {max-height:85dvh;overflow:auto;}
.login-body {background:radial-gradient(ellipse at 20% 10%,#e0eacb,transparent 55%),linear-gradient(145deg,#f9f8ed,#eaf0e4);}
.login-card {border:1px solid #fff;max-width:420px;border-radius:34px;padding:18px 32px 30px;background:#ffffffbb;box-shadow:0 24px 90px #4b5e3310;}
.login-illustration {background:linear-gradient(135deg,#eff3e2,#dce9c7);border-radius:24px;margin-bottom:22px;}
.login-illustration img {display:block;max-width:100%;height:auto;margin:auto;}
.login-card h1 {font-size:26px;margin:12px 0;}
.login-card p {line-height:1.9;}
.login-card input {background:#fff;text-align:left;padding:15px;}
.login-card .btn {min-height:48px;margin-top:4px;}
@media(max-width:374px) {
 .content {padding:12px;}.brand {font-size:14px;}.topbar {padding:12px;}.topbar-right {gap:3px;}.pet-select {max-width:75px;}.btn-ghost {padding:5px 6px;}
 .welcome-banner {padding:18px;}.welcome-banner h2 {font-size:22px;}.home-section-heading>span {display:none;}.action-tile {padding:14px 12px;}.chip {font-size:10px;padding:8px;}
}
@media(prefers-reduced-motion:reduce) {* {scroll-behavior:auto!important;transition:none!important;}}

/* 首页与咨询互相返回，消息节点始终保留。 */
.chat-viewbar {display:flex;align-items:center;justify-content:space-between;gap:10px;padding:0 0 12px;flex-shrink:0;}
.chat-viewbar>span {font-size:11px;color:var(--muted);}
.chat-viewbar .btn {font-size:12px;min-height:40px;padding:9px 13px;}
#btn-resume-chat {display:none;}
.home-view #btn-health-home,.home-view .chat-viewbar>span {display:none;}
.home-view #btn-resume-chat {display:block;margin-left:auto;}
.home-view #chat-box>.msg {display:none;}
.health-home {flex-shrink:0;}
/* 服务中心：主题入口 + 对应服务工作区。 */
.service-intro {position:relative;overflow:hidden;padding:27px 25px;border-radius:28px;background:linear-gradient(125deg,#e5edd5,#f0f1e2);margin-bottom:20px;}
.service-intro h1 {font-size:25px;letter-spacing:-.7px;margin:11px 0;position:relative;z-index:1;}
.service-intro p {font-size:12px;line-height:1.8;max-width:80%;color:#6f7c61;margin:0;position:relative;z-index:1;}
.service-paw {position:absolute;right:16px;top:22px;font-size:85px;opacity:.12;transform:rotate(-20deg);}
#tab-services .sub-tabs {display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;padding:0;background:none;border:0;box-shadow:none;margin-bottom:24px;}
#tab-services .sub-tab {text-align:left;position:relative;border:2px solid transparent;border-radius:22px;padding:17px 14px;min-height:136px;color:var(--text);transition:transform .15s,border-color .15s;}
#tab-services .sub-tab:nth-child(1) {background:#f1e8ed;}
#tab-services .sub-tab:nth-child(2) {background:#e4edf4;}
#tab-services .sub-tab:nth-child(3) {background:#f6edda;}
#tab-services .sub-tab.active {border-color:#617d47;box-shadow:0 4px 16px #34462909;}
#tab-services .sub-tab.active:after {content:'✓';position:absolute;right:10px;top:10px;color:white;background:#617d47;border-radius:50%;width:19px;height:19px;text-align:center;font-size:11px;line-height:19px;}
.service-icon {display:flex;align-items:center;justify-content:center;background:#ffffff9c;border-radius:14px;width:40px;height:40px;font-size:25px;margin-bottom:13px;}
.sub-tab strong {display:block;font-size:16px;margin-bottom:7px;}
.sub-tab small {display:block;font-size:10px;line-height:1.6;color:#6d7867;font-weight:400;}
.service-panel-heading {display:flex;gap:13px;align-items:center;margin:0 0 18px;padding:0 4px;}
.service-panel-heading>span {font-size:30px;flex-shrink:0;}
.service-panel-heading h2 {font-size:18px;margin:0 0 6px;}
.service-panel-heading p {font-size:12px;color:var(--muted);line-height:1.7;margin:0;}
#tab-services .sub-panel>.card {padding:22px;border:1px solid #e4e9dd;box-shadow:none;border-radius:26px;background:#ffffffd9;}
#tab-services .form {gap:13px;}
#tab-services textarea {min-height:110px;background:#f7f8f3;padding:16px;line-height:1.7;}
#tab-services .wide {min-height:48px;}
#tab-services .seg-btn {min-height:45px;background:#f9faf6;}
#tab-services .seg-btn.active {background:#e5efce;}
#btn-image-upload {border:1px dashed #b5c49f;background:#f4f7ec;border-radius:20px;min-height:100px;color:#52703d;}
@media(max-width:480px) {
 .service-intro {padding:23px 19px;}.service-intro h1 {font-size:22px;}
 #tab-services .sub-tabs {gap:7px;}#tab-services .sub-tab {padding:15px 9px;border-radius:19px;min-height:145px;}
 .sub-tab strong {font-size:14px;}.sub-tab small {font-size:10px;}.service-panel-heading h2 {font-size:16px;}
 #tab-services .sub-panel>.card {padding:16px;}.chat-viewbar>span {font-size:10px;}
}

/* 宠物导航：原创扁平双色图标，同一画布与圆润笔触。 */
.nav-item {gap:5px;min-width:0;}
.nav-item .nav-icon {display:flex;align-items:center;justify-content:center;width:38px;height:34px;color:#87957b;flex-shrink:0;}
.nav-icon svg {display:block;width:32px;height:32px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round;}
.nav-icon .icon-paper {fill:#f4f6ec;}
.nav-icon .icon-fill {fill:#dce6c6;}
.nav-item.active .nav-icon {color:#49683b;}
.nav-item.active .icon-paper {fill:#fffdf3;}
.nav-item.active .icon-fill {fill:#bcd48e;}
.nav-item.active {background:#edf3e2;}
.nav-item em {font-weight:500;letter-spacing:.2px;line-height:1.5;}
.nav-item.active em {font-weight:650;}
.nav-item:hover .nav-icon {color:#49683b;}
.layout-desktop .nav-item .nav-icon {width:32px;height:32px;}
@media(max-width:374px) {.nav-item em {font-size:10px;}.nav-icon svg {width:29px;height:29px;}}

/* 首页不再为继续对话单独预留工具栏。 */
.home-view .chat-viewbar {display:none;}
.home-greeting {position:relative;}
.home-view .home-greeting #btn-resume-chat {display:inline-flex;align-items:center;justify-content:center;position:absolute;right:2px;bottom:18px;min-height:32px;padding:5px 10px;font-size:11px;border:0;background:#e9efdc;color:#49683b;box-shadow:none;margin:0;}
.layout-desktop .home-greeting #btn-resume-chat {bottom:20px;}
@media(max-width:374px) {.home-view .home-greeting #btn-resume-chat {padding:5px 8px;font-size:10px;}.home-greeting h1 span {font-size:12px;}}
.home-greeting h1 span {margin-right:100px;}

/* 对话中的真实医院推荐卡片。 */
.msg.bot:has(.has-hospital-cards) {max-width:94%;width:100%;}
.chat-hospital-list {display:grid;gap:12px;margin-top:14px;white-space:normal;}
.chat-hospital-card {display:block;text-decoration:none;color:var(--text);background:#f6f8ed;border:1px solid #e0e7d2;border-radius:21px;padding:16px;transition:border-color .15s,background .15s;}
.chat-hospital-card:hover {border-color:#90aa72;background:#eff4e2;}
.chat-hospital-card:focus-visible {outline:3px solid #72994a;outline-offset:3px;}
.hospital-card-heading {display:flex;align-items:center;gap:10px;margin-bottom:10px;}
.hospital-card-heading strong {font-size:15px;line-height:1.5;}
.hospital-card-icon {display:flex;align-items:center;justify-content:center;width:34px;height:34px;flex-shrink:0;border-radius:12px;background:#e1ebce;color:#567742;font-size:22px;}
.hospital-card-detail {font-size:12px;line-height:1.8;color:#6c7962;overflow-wrap:anywhere;}
.hospital-card-action {margin-top:12px;padding-top:10px;border-top:1px solid #e1e7d5;color:#49683b;font-size:12px;font-weight:600;}
.layout-desktop .msg.bot:has(.has-hospital-cards) {max-width:85%;}

.chat-reference-note {font-size:11px;line-height:1.7;color:var(--muted);margin:12px 0 0;white-space:normal;}

/* 宠物档案删除：明确目标、取消优先、紧凑确认弹窗。 */
.profile-actions {display:flex;flex-wrap:wrap;gap:8px;justify-content:flex-end;}
.delete-pet-trigger {color:#a23737;}
.delete-pet-dialog {width:min(420px,calc(100vw - 32px));box-sizing:border-box;padding:24px;border:1px solid var(--border);border-radius:22px;background:var(--card);color:var(--text);box-shadow:0 16px 60px #26361c33;}
.delete-pet-dialog::backdrop {background:#17221166;}
.delete-pet-dialog h3 {margin:0 0 12px;font-size:20px;}
.delete-pet-dialog p {margin:0 0 20px;font-size:14px;line-height:1.75;overflow-wrap:anywhere;}
#delete-pet-name {font-weight:700;}
.delete-pet-actions {display:flex;gap:10px;justify-content:flex-end;}
.delete-pet-confirm {background:#a23737;border-color:#a23737;color:white;}
.delete-pet-error {color:#a23737;}
@media(max-width:480px) {.profile-actions .btn {font-size:12px;padding:8px 10px;}.delete-pet-dialog {padding:20px;}.delete-pet-actions .btn {flex:1;}}
.pet-operation-status {padding:10px 14px;border-radius:12px;background:var(--primary-soft);color:var(--text);font-size:13px;}

.topbar-delete {color:#a23737;font-size:12px;white-space:nowrap;}
@media(max-width:480px) {.topbar {flex-wrap:wrap;gap:8px;}.topbar-right {margin-left:auto;justify-content:flex-end;}.topbar-delete {padding:6px 8px;}}

.pet-basic-heading {display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:16px;}
.pet-basic-heading h3 {margin:0;font-size:17px;}
.pet-basic-details {display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;margin:0;}
.pet-basic-details div {padding:12px;background:var(--bg);border-radius:12px;}
.pet-basic-details dt {font-size:12px;color:var(--muted);margin-bottom:5px;}
.pet-basic-details dd {margin:0;font-size:15px;overflow-wrap:anywhere;}
.pet-profile-form {margin-top:18px;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;}
.pet-profile-form[hidden] {display:none;}
.pet-profile-form label {min-width:0;display:grid;gap:6px;font-size:13px;}
.pet-profile-form input,.pet-profile-form select {width:100%;box-sizing:border-box;min-height:42px;padding:10px;border:1px solid var(--border);border-radius:10px;background:var(--card);color:var(--text);}
.pet-profile-form p,.profile-form-actions {grid-column:1 / -1;margin:0;}
.profile-form-actions {display:flex;flex-wrap:wrap;gap:8px;}
.msg.bot .bubble.profile-reminder {white-space:normal;padding:16px 18px;max-width:420px;}
.profile-reminder h4 {margin:0 0 8px;font-size:15px;}
.profile-reminder p {margin:0 0 12px;font-size:13px;line-height:1.7;}
.profile-reminder .profile-form-actions .btn {font-size:12px;padding:8px 12px;}
#profile-error {color:#a23737;}

/* 手机表单保持至少 16px，避免 iOS/微信聚焦时自动放大整个页面。
   保留用户手势缩放，不通过禁用 viewport 缩放掩盖问题。 */
@media (max-width: 768px) {
  .layout-mobile input,
  .layout-mobile textarea,
  .layout-mobile select,
  .layout-mobile .chat-input input { font-size: 16px; }
  .layout-mobile .app,
  .layout-mobile .app-body,
  .layout-mobile .content,
  .layout-mobile .tab { min-width: 0; max-width: 100%; }
  .layout-mobile .chat-input { min-width: 0; max-width: 100%; }
}