/* ===========================================================================
   宠医图标系统 + /consult 问诊界面
   移植自 chongyi-icon-kit/index.html：24 × 24 画布 · 1.8px 描边 · Round 端点与转角。

   图标本体（<symbol>）内联在 partials/icons.blade.php，只用一次；
   页面里一律 <svg class="icon"><use href="#i-名字"/></svg>，颜色跟随 currentColor。
   颜色全部走 web.css 的设计变量，深色主题自动跟着变。

   改这个文件之前先看一眼 web.css：.ask-card / .symptom-card 这些名字
   在 web.css 里**没有**同名规则，冲突风险只在 .panel、.tile-icon 这类已有类上。
   =========================================================================== */

/* --- 图标本体 --------------------------------------------------------------- */
svg.icon {
  width: 20px;
  height: 20px;
  flex: none;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}
svg.icon.sm { width: 16px; height: 16px; }
svg.icon.xs { width: 14px; height: 14px; }
svg.icon.lg { width: 24px; height: 24px; }
svg.icon.xl { width: 29px; height: 29px; }

/* 侧栏 / 服务目录：字符图标换成线性图标，外层占位格子沿用原有尺寸 */
.navitem .nicon { font-size: 0; }
.navitem .nicon svg.icon { width: 17px; height: 17px; }
.navitem.active .nicon { color: var(--darkpine); }
.tile-icon svg.icon { width: 20px; height: 20px; }
.brand-mark svg.icon { width: 23px; height: 23px; }

/* --- 问诊主卡 --------------------------------------------------------------- */
.ask-card {
  border: 1px solid var(--line);
  background: var(--solid);
  border-radius: 22px;
  padding: 26px 26px 24px;
  box-shadow: 0 12px 38px rgba(28, 65, 47, .045);
}
.card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 15px;
  margin-bottom: 20px;
}
.card-title {
  font-size: 18px;
  font-weight: 850;
  letter-spacing: -.025em;
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0;
}
.card-title:before {
  content: '';
  width: 5px;
  height: 19px;
  background: var(--pine);
  border-radius: 10px;
}
.step-indicator {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 11px;
  font-weight: 770;
  color: var(--sub);
}
.step-indicator .pill {
  background: var(--mint);
  border-radius: 30px;
  padding: 6px 11px;
  color: var(--pine);
}

/* 动物选择：一只动物一颗药丸 */
.pet-group { display: flex; gap: 9px; flex-wrap: wrap; margin-bottom: 22px; }
.pet-chip {
  border: 1px solid var(--line);
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 13px;
  border-radius: 11px;
  background: var(--bg);
  color: var(--sub);
  font-size: 12px;
  font-weight: 760;
  transition: border-color .18s, background .18s, color .18s, box-shadow .18s;
}
.pet-chip svg.icon { width: 17px; height: 17px; }
.pet-chip:hover { border-color: #87b49a; color: var(--ink); }
.pet-chip.active {
  background: var(--darkpine);
  border-color: var(--darkpine);
  color: #fff;
  box-shadow: 0 4px 13px #173e341c;
}

.field-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  margin-bottom: 11px;
}
.field-label { font-size: 14px; font-weight: 820; color: var(--ink); }
.field-hint { font-size: 11px; color: var(--sub); }

.input-shell {
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--bg);
  overflow: hidden;
  transition: border-color .2s, box-shadow .2s;
}
.input-shell:focus-within { border-color: #87b59c; box-shadow: 0 0 0 4px #cde8d740; }
.input-shell textarea {
  border: 0;
  background: transparent;
  display: block;
  resize: vertical;
  width: 100%;
  min-height: 92px;
  padding: 15px 16px 3px;
  outline: none;
  font-size: 14px;
  line-height: 1.8;
  color: var(--ink);
}
.input-shell textarea::placeholder { color: var(--sub); }
.input-bottom {
  padding: 0 14px 9px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  color: var(--sub);
  font-size: 11px;
}
.prompt-suggestion { display: flex; align-items: center; gap: 6px; min-width: 0; }
.prompt-suggestion .icon { color: var(--pine); }
.input-bottom .count { flex: none; }

.popular-label {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 20px 0 10px;
  color: var(--ink);
  font-size: 11px;
  font-weight: 800;
}
.popular-label .subtle { font-weight: 500; color: var(--sub); }

/* 常见症状多选：用 <label> 包原生 checkbox，勾选即 .selected，提交时照常进 symptoms[] */
.quick-tags { display: flex; gap: 9px; flex-wrap: wrap; }
.quick-tag {
  position: relative;
  display: inline-flex;
  gap: 7px;
  align-items: center;
  border-radius: 100px;
  background: var(--bg);
  border: 1px solid var(--line);
  color: var(--ink);
  font-size: 12px;
  font-weight: 740;
  padding: 8px 12px;
  cursor: pointer;
  transition: background .15s, border-color .15s, color .15s;
}
.quick-tag:hover { background: var(--mint); border-color: #b6d5bf; }
.quick-tag svg.icon { width: 16px; height: 16px; color: var(--pine); }
.quick-tag input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  margin: 0;
  pointer-events: none;
}
.quick-tag:has(input:checked) {
  background: var(--mint);
  border-color: #85b99a;
  color: var(--darkpine);
  font-weight: 800;
}
.quick-tag:has(input:checked) svg.icon { color: var(--pine); }
.quick-tag:has(input:focus-visible) { outline: 3px solid #a0cdb7; outline-offset: 3px; }

.ask-actions {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 20px;
  flex-wrap: wrap;
  margin-top: 24px;
}
.primary-btn {
  height: 44px;
  border: none;
  padding: 0 19px;
  display: inline-flex;
  gap: 10px;
  align-items: center;
  justify-content: center;
  color: #fff;
  background: var(--darkpine);
  border-radius: 12px;
  font-weight: 800;
  font-size: 13px;
  white-space: nowrap;
  transition: background .15s, transform .15s;
}
.primary-btn:hover { background: #285c49; transform: translateY(-1px); }
.primary-btn svg.icon { width: 17px; height: 17px; }
.primary-btn:focus-visible { outline: 3px solid #a0cdb7; outline-offset: 3px; }
.action-note { font-size: 11px; color: var(--sub); line-height: 1.7; }
.text-btn {
  border: 0;
  background: none;
  color: var(--pine);
  font-size: 12px;
  font-weight: 800;
  padding: 7px 0;
}
.text-btn:hover { text-decoration: underline; }
.ask-actions-main { display: flex; align-items: center; gap: 13px; flex-wrap: wrap; }

/* /consult 的第一列：主卡 + 症状区两块卡片竖排。
   .split 是两列网格，不包这层的话第二块卡片会把右栏挤到下一行。 */
.split-main { display: flex; flex-direction: column; gap: 19px; min-width: 0; }

/* --- 症状区 ----------------------------------------------------------------- */
.section-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 14px;
  margin: 30px 0 18px;
}
.section-head h2 { font-size: 19px; letter-spacing: -.025em; line-height: 1.2; margin: 0; font-weight: 850; }
.section-head p { margin: 7px 0 0; color: var(--sub); font-size: 12px; }
.section-head .section-link {
  display: inline-flex;
  gap: 6px;
  align-items: center;
  color: var(--pine);
  font-size: 12px;
  font-weight: 800;
  border: none;
  background: none;
  padding: 5px 0;
  white-space: nowrap;
}

/* 症状搜索：kit 的 search-box 外观，行为还是原来的 GET 表单 */
.ask-search {
  display: flex;
  gap: 9px;
  align-items: center;
  margin: 0 0 16px;
}
.ask-search .search-box {
  height: 42px;
  border: 1px solid var(--line);
  border-radius: 11px;
  background: var(--bg);
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 0 13px;
  color: var(--sub);
  flex: 1 1 auto;
  min-width: 0;
  transition: border-color .15s, box-shadow .15s;
}
.ask-search .search-box:focus-within { border-color: #85bfa5; box-shadow: 0 0 0 3px #91ccb12b; }
.ask-search .search-box input {
  width: 100%;
  min-width: 0;
  border: 0;
  outline: 0;
  background: none;
  color: var(--ink);
  font-size: 13px;
}
.ask-search .search-box input::placeholder { color: var(--sub); }
.ask-search .btn { flex: none; }

.symptoms-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 13px;
}
.symptom-card {
  min-width: 0;
  min-height: 156px;
  text-align: left;
  border: 1px solid var(--line);
  background: var(--solid);
  border-radius: 17px;
  padding: 18px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  box-shadow: 0 2px 1px #2b4f3302;
  color: var(--ink);
  transition: transform .2s, border-color .2s, box-shadow .2s;
}
.symptom-card:hover { border-color: #9dc4ad; transform: translateY(-3px); box-shadow: 0 13px 25px #1e553013; }
.symptom-top { display: flex; width: 100%; justify-content: space-between; align-items: flex-start; }
.symptom-icon {
  height: 43px;
  width: 43px;
  display: grid;
  place-items: center;
  border-radius: 14px;
  color: var(--pine);
  background: var(--mint);
}
.symptom-icon svg.icon { width: 24px; height: 24px; }
.symptom-card:hover .symptom-icon { background: #dcefe1; }
.card-arr { color: var(--sub); transition: all .15s; }
.symptom-card:hover .card-arr { color: var(--pine); transform: translate(2px, -2px); }
.symptom-name {
  font-size: 13px;
  font-weight: 850;
  line-height: 1.5;
  color: var(--ink);
  margin: 13px 0 6px;
}
.symptom-meta { font-size: 10px; color: var(--sub); line-height: 1.65; }

.more-row {
  margin-top: 13px;
  border: 1px solid var(--line);
  background: var(--solid);
  width: 100%;
  border-radius: 14px;
  padding: 15px 18px;
  display: flex;
  align-items: center;
  gap: 12px;
  color: var(--ink);
  text-align: left;
  transition: background .15s;
}
.more-row:hover { background: var(--mint); }
.more-row .more-symbol {
  width: 33px;
  height: 33px;
  display: grid;
  place-items: center;
  border-radius: 10px;
  background: var(--mint);
  color: var(--pine);
  flex: none;
}
.more-row strong { display: block; font-size: 12px; }
.more-row small { display: block; color: var(--sub); font-size: 10px; margin-top: 1px; }
.more-row .more-right { margin-left: auto; font-size: 11px; color: var(--sub); display: flex; gap: 9px; align-items: center; }

/* --- 全部症状抽屉：沿用 med-* 结构，换成 kit 的图标与卡片观感 --------------- */
.med-drawer-foot .primary-btn { margin-left: auto; flex: none; height: 40px; font-size: 12px; }
.med-drawer-foot .primary-btn:disabled { opacity: .45; cursor: not-allowed; transform: none; }
.med-entry-icon svg.icon { width: 18px; height: 18px; }
.med-entry-arrow { display: inline-flex; }
.med-entry-arrow svg.icon { width: 16px; height: 16px; }

.med-cat > .med-cat-ico { display: grid; place-items: center; flex: none; color: var(--sub); }
.med-cat > .med-cat-ico svg.icon { width: 16px; height: 16px; }
.med-cat.is-active > .med-cat-ico { color: var(--pine); }

/* 症状项：从一排小 chip 换成两列「图标 + 名称」卡片（kit 的 result-card） */
.med-syms { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px; }
.med-sym {
  position: relative;
  min-height: 66px;
  border: 1px solid var(--line);
  background: var(--solid);
  border-radius: 12px;
  padding: 10px 11px;
  display: flex;
  align-items: flex-start;
  gap: 9px;
  text-align: left;
  color: var(--ink);
  font-size: 12px;
  line-height: 1.55;
  font-weight: 730;
  transition: background .16s, border-color .16s;
}
.med-sym:hover { background: var(--bg); border-color: #a6ccb4; }
.med-sym[aria-pressed="true"] { background: var(--mint); border-color: #85b69a; color: var(--darkpine); }
.med-sym .med-sym-ico {
  width: 29px;
  height: 29px;
  display: grid;
  place-items: center;
  flex: none;
  background: var(--mint);
  color: var(--pine);
  border-radius: 9px;
}
.med-sym .med-sym-ico svg.icon { width: 18px; height: 18px; }
.med-sym[aria-pressed="true"] .med-sym-ico { background: #d1e9d9; color: var(--darkpine); }
.med-sym .med-sym-text { flex: 1; min-width: 0; padding-top: 3px; overflow-wrap: anywhere; }
.med-sym[aria-pressed="true"] .med-sym-ico + .med-sym-text { padding-right: 18px; }
.med-sym[aria-pressed="true"]::after {
  content: '';
  position: absolute;
  right: 9px;
  bottom: 8px;
  width: 14px;
  height: 14px;
  background: currentColor;
  color: var(--pine);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m4 12 5 5L20 6'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m4 12 5 5L20 6'/%3E%3C/svg%3E") center / contain no-repeat;
}
.med-syms-empty { margin: 18px 0 0; font-size: 12px; color: var(--sub); line-height: 1.8; }

@media (max-width: 1180px) {
  .symptoms-grid { gap: 10px; }
  .symptom-card { padding: 15px; }
}
@media (max-width: 768px) {
  .ask-card { padding: 20px 17px; border-radius: 17px; }
  .card-head { flex-wrap: wrap; gap: 10px; }
  .card-title { font-size: 16px; }
  .field-row { align-items: flex-start; }
  .field-hint { font-size: 10px; max-width: 52%; text-align: right; }
  .pet-group { gap: 6px; }
  .pet-chip { padding: 7px 10px; }
  .quick-tag { font-size: 11px; padding: 8px 10px; }
  .ask-actions { flex-direction: column; align-items: stretch; gap: 9px; }
  .ask-actions .primary-btn { width: 100%; }
  .action-note { text-align: center; }
  .symptoms-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .symptom-card { min-height: 150px; padding: 14px; }
  .symptom-name { font-size: 12px; }
  .symptom-icon { width: 38px; height: 38px; }
  .symptom-icon svg.icon { width: 21px; height: 21px; }
  .more-row { padding: 12px; }
  .more-row .more-right { font-size: 10px; }
  .med-syms { grid-template-columns: 1fr; gap: 8px; }
  .med-sym { min-height: 56px; }
}
@media (prefers-reduced-motion: reduce) {
  .symptom-card, .more-row, .primary-btn, .pet-chip, .quick-tag { transition: none; }
  .symptom-card:hover { transform: none; }
  .primary-btn:hover { transform: none; }
}