/* Consultation Component Styles */
:root {
  --consultation-radius: 14px;
  --consultation-border: 1px solid #ece7f1;
  --consultation-bg: #ffffff;
  --consultation-bg-alt: #faf8fc;
  --consultation-accent: #580658;
  --consultation-accent-soft: #8b3d8b;
  --consultation-shadow: 0 2px 4px -2px rgba(27, 8, 53, .08), 0 4px 18px -4px rgba(27, 8, 53, .10);
  --consultation-font-stack: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', Arial, sans-serif;
  --consultation-avatar-max-height: 200px; /* 头像最大高度，可按需调整 */
}

.consultation-list { 
  display: flex; 
  flex-direction: column; 
  gap: 1.25rem; 
  margin-top: 1.5rem; 
  font-family: var(--consultation-font-stack); 
}

.consultation-item { 
  background: linear-gradient(120deg,#fff 0%,#fff 60%,#f6f2f9 100%); 
  border: var(--consultation-border); 
  border-radius: var(--consultation-radius); 
  box-shadow: var(--consultation-shadow);
  overflow: hidden; 
  position: relative; 
  transition: box-shadow .25s, transform .25s, border-color .25s; 
}

.consultation-item:not(.is-open):hover { 
  box-shadow: 0 4px 8px -2px rgba(27,8,53,.10),0 8px 28px -6px rgba(27,8,53,.15);
  border-color: #dacbe6; 
}

.consultation-item.is-open { 
  border-color: var(--consultation-accent); 
  box-shadow: 0 4px 10px -2px rgba(88,6,88,.25),0 10px 34px -8px rgba(88,6,88,.35); 
}

.consultation-header { 
  display: grid; 
  grid-template-columns: auto 1fr auto; 
  gap: 1rem; 
  align-items: center; 
  padding: 1rem 1.25rem; 
  cursor: pointer; 
  position: relative; 
}

.consultation-avatar { 
  margin: 0; 
  width: auto; /* 由内容自然决定 */
  height: auto; /* 不强制固定高度 */
  max-height: var(--consultation-avatar-max-height); /* 限制最大高度 */
  border-radius: 14px; 
  overflow: hidden; 
  background: #ddd; 
  box-shadow: 0 0 0 1px #ede5f1 inset; 
  flex-shrink: 0; 
  display: inline-block; /* 根据内容尺寸收缩 */
  line-height: 0; /* 去除图片底部空隙 */
  position: relative; 
  transition: transform .35s ease; 
}

.consultation-avatar img { 
  width: auto; 
  height: auto; 
  max-height: var(--consultation-avatar-max-height); 
  max-width: 100%; 
  object-fit: contain; 
  display: block; 
}

.consultation-summary { 
  display: flex; 
  flex-direction: column; 
  gap: .35rem; 
  min-width: 0; 
}

.consultation-name { 
  margin: 0; 
  font-size: 1.15rem; 
  font-weight: 700; 
  color: rgb(88, 6, 88); 
  letter-spacing: .5px; 
}

.consultation-role { 
  margin: 0; 
  font-size: .88rem; 
  line-height: 1.25; 
  font-weight: 500; 
  color: #333; 
}

.consultation-meta { 
  display: flex; 
  flex-wrap: wrap; 
  gap: .9rem 1.25rem; 
  margin-top: .25rem; 
  font-size: .72rem; 
  font-weight: 600; 
  text-transform: uppercase; 
  letter-spacing: .08em; 
  color: #5b2c5b; 
  opacity: .85; 
}

.consultation-toggle { 
  border: 0; 
  background: var(--consultation-bg-alt); 
  color: var(--consultation-accent); 
  font: inherit; 
  font-size: .75rem; 
  font-weight: 600; 
  letter-spacing: .06em; 
  text-transform: uppercase; 
  border-radius: 999px; 
  padding: .55rem .95rem .5rem; 
  display: inline-flex; 
  align-items: center; 
  gap: .5rem; 
  cursor: pointer; 
  transition: background .25s, color .25s, box-shadow .25s; 
  position: relative; 
  box-shadow: 0 0 0 1px #e1d5ea inset; 
}

.consultation-toggle:hover { 
  background: #efe6f4; 
  color: var(--consultation-accent-soft); 
}

.consultation-toggle:focus-visible { 
  outline: 2px solid var(--consultation-accent); 
  outline-offset: 2px; 
}

.consultation-toggle-icon { 
  width: 14px; 
  height: 14px; 
  display: inline-block; 
  position: relative; 
}

.consultation-toggle-icon::before,
.consultation-toggle-icon::after { 
  content: ""; 
  position: absolute; 
  top: 50%; left: 50%; 
  width: 100%; height: 2px; 
  background: currentColor; 
  transform: translate(-50%, -50%); 
  transition: transform .35s; 
  border-radius: 2px; 
}

.consultation-toggle-icon::after { 
  transform: translate(-50%, -50%) rotate(90deg); 
}

.consultation-item.is-open .consultation-toggle-icon::after { 
  transform: translate(-50%, -50%) rotate(180deg); 
}

.consultation-item.is-open .consultation-toggle-text { 
  content: "Collapse"; 
}

.consultation-body { 
  padding: .25rem 1.6rem 1.4rem 1.6rem; 
  border-top: 1px solid #efe5f4; 
  background: #fff; 
  animation: consultationFade .4s ease; 
}

@keyframes consultationFade { 
  from { opacity: 0; transform: translateY(-4px); } 
  to { opacity:1; transform: translateY(0);} 
}

.consultation-content { 
  font-size: .92rem; 
  line-height: 1.6; 
  color: #222; 
}

.consultation-content p { 
  margin: .75rem 0 0; 
  text-align: left; /* 改回左对齐 */
  hyphens: auto; 
  direction: ltr; 
}

.consultation-content p:first-child { 
  margin-top: 0; 
}

.consultation-takeaway { 
  background: linear-gradient(100deg,#faf6ff,#f0e5f7); 
  padding: .85rem 1rem .85rem; 
  border-left: 4px solid var(--consultation-accent); 
  border-radius: 6px; 
  font-weight: 500; 
  position: relative; 
  margin-top: 1rem; 
}

.consultation-takeaway-label { 
  font-weight: 700; 
  color: var(--consultation-accent); 
  margin-right: .25rem; 
}

/* Compact state styles when collapsed */
.consultation-item:not(.is-open) .consultation-body { 
  display: none; 
}

.consultation-item:not(.is-open) .consultation-avatar { 
  filter: grayscale(.05) contrast(1.02); 
  transform: scale(0.98); /* 轻微缩小强调可展开 */
}

/* 折叠态整体高度增大，给头像更多垂直空间 */
.consultation-item:not(.is-open) .consultation-header { 
  min-height: 170px; 
  align-items: center; 
}

/* Responsive */
@media (max-width: 780px) {
  .consultation-header { grid-template-columns: 100px 1fr auto; padding: 1rem .95rem; }
  .consultation-avatar { max-height: 160px; border-radius: 12px; }
  .consultation-item:not(.is-open) .consultation-avatar { transform: scale(.96); }
  .consultation-item:not(.is-open) .consultation-header { min-height: 150px; }
  .consultation-name { font-size: 1rem; }
  .consultation-role { font-size: .78rem; }
  .consultation-meta { font-size: .6rem; }
  .consultation-content { font-size: .88rem; }
}

@media (prefers-reduced-motion: reduce) { 
  .consultation-item, .consultation-toggle-icon::after { transition: none !important; } 
  .consultation-body { animation: none; } 
}