/* 现场面诊（望诊）：全屏取景面板 + 结论报告
   设计语言对齐 app.css：白卡圆角 18px、主色 #2F6BE4、柔和阴影
   面诊取景用暖金 #FFC94A 作识别色，与主色区分而不冲突 */

#face-root { position: fixed; inset: 0; z-index: 9000; }

.face-mask { position: absolute; inset: 0; background: rgba(15, 23, 42, .55); animation: fadeIn .18s; }
@keyframes fadeIn { from { opacity: 0 } to { opacity: 1 } }

.face-panel {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  width: min(94vw, 460px); max-height: 92vh; overflow: auto;
  background: #fff; border-radius: 18px; box-shadow: 0 12px 40px rgba(15, 23, 42, .22);
  padding: 18px 18px 16px; animation: facePop .22s ease-out;
}
@keyframes facePop { from { opacity: 0; transform: translate(-50%, -46%) scale(.96) } to { opacity: 1; transform: translate(-50%, -50%) scale(1) } }

/* ---------- 头部 ---------- */
.face-head { position: relative; margin-bottom: 14px; }
.face-title { font-size: 17px; font-weight: 700; color: #2A3040; text-align: center; }
.face-sub { font-size: 12.5px; color: #8A8F99; text-align: center; margin-top: 4px; }
.face-close {
  position: absolute; top: -4px; right: -2px; width: 28px; height: 28px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 14px; color: #8A8F99; cursor: pointer; background: #F2F4F8; transition: all .15s;
}
.face-close:hover { background: #E4E9F2; color: #3D4350; }

/* ---------- 取景舞台 ---------- */
.face-stage {
  position: relative; width: 100%; aspect-ratio: 3/4; background: #0E1424;
  border-radius: 14px; overflow: hidden;
}
.face-stage video { width: 100%; height: 100%; object-fit: cover; transform: scaleX(-1); }
.face-stage-ph {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  padding: 24px; text-align: center; color: #B9C2D4; font-size: 13.5px; line-height: 1.7;
}
.face-guide { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.face-light {
  position: absolute; left: 10px; top: 10px; z-index: 2;
  font-size: 12px; padding: 5px 11px; border-radius: 20px;
  background: rgba(15, 23, 42, .6); color: #fff;
}
.face-light.ok   { background: rgba(20, 84, 46, .88); color: #7CE7A6; }
.face-light.warn { background: rgba(94, 68, 12, .88); color: #FFD98A; }
.face-light.bad  { background: rgba(96, 28, 32, .88); color: #FFA8AC; }

.face-tips {
  margin-top: 10px; font-size: 12.5px; color: #6B7180; line-height: 1.65;
  background: #F7F9FD; border-radius: 10px; padding: 9px 12px;
}
.face-tips b { color: #2A3040; }

/* ---------- 按钮区 ---------- */
.face-acts { display: flex; gap: 10px; margin-top: 14px; }
.face-acts .btn { flex: 1; }

/* ---------- 分析中 ---------- */
.face-loading { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 46px 0 34px; }
.face-spin {
  width: 40px; height: 40px; border-radius: 50%;
  border: 3px solid #E4EBFA; border-top-color: #2F6BE4;
  animation: faceSpin .8s linear infinite;
}
@keyframes faceSpin { to { transform: rotate(360deg) } }
.face-loading-txt { margin-top: 14px; font-size: 13.5px; color: #6B7180; }

/* ---------- 结论报告 ---------- */
.face-body { max-height: 60vh; overflow: auto; margin: 0 -2px; padding: 0 2px; }

.face-score {
  display: flex; align-items: center; gap: 16px;
  background: linear-gradient(135deg, #F3F7FF 0%, #EDF3FF 100%);
  border-radius: 14px; padding: 14px 16px;
}
.face-score-num { font-size: 38px; font-weight: 800; color: #2F6BE4; line-height: 1; }
.face-score-lv { font-size: 14px; font-weight: 700; color: #2A3040; }
.face-score-ft { font-size: 12.5px; color: #6B7180; margin-top: 5px; }

.face-bars { margin-top: 12px; }
.face-bar { display: flex; align-items: center; gap: 9px; margin-bottom: 7px; }
.face-bar .lb { font-size: 12.5px; color: #6B7180; flex: none; width: 44px; }
.face-bar .tr { flex: 1; height: 7px; border-radius: 4px; background: #EDF1F8; overflow: hidden; }
.face-bar .tr i { display: block; height: 100%; border-radius: 4px; background: linear-gradient(90deg, #4C86F5, #2F6BE4); }
.face-bar .vl { font-size: 12px; color: #8A8F99; flex: none; width: 34px; text-align: right; }

.face-sec { margin-top: 16px; }
.face-sec-t { font-size: 14px; font-weight: 700; color: #2A3040; margin-bottom: 9px; }
.face-sec-t .sub { font-weight: 400; font-size: 12px; color: #8A8F99; margin-left: 6px; }

.face-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.face-row .nm { font-size: 13.5px; font-weight: 600; color: #3D4350; }
.face-row .rt { font-size: 12px; color: #8A8F99; margin-left: auto; }
.face-row .tag {
  font-size: 11.5px; font-weight: 700; padding: 2px 8px; border-radius: 6px; flex: none;
}
.face-row .tag.good { background: #E7F7EE; color: #1E9E58; }
.face-row .tag.mid  { background: #FFF4E2; color: #C98A17; }
.face-row .tag.bad  { background: #FDECEC; color: #E0484C; }

.face-desc { font-size: 13px; color: #6B7180; line-height: 1.7; margin: 5px 0 10px; }
/* 面诊分析：模型依据实测数据写就的论述，按小节标题分列 */
.face-an-t { font-size: 13px; font-weight: 700; color: #3A4150; margin: 12px 0 3px; }
.face-an-t:first-child { margin-top: 0; }

/* 流式页面：两张图在上，祖师的话在下逐字显现 */
.face-stream { margin-top: 14px; }
.face-stream-h { font-size: 13px; font-weight: 700; color: #3A4150; margin-bottom: 6px; }
.face-stream-c { font-size: 13.5px; line-height: 1.85; color: #4A5260;
                 word-break: break-word; }
.face-stream-tip { color: #9AA0AB; font-size: 12.5px; }

/* 流式途中正在生长的那一节：按原样保留换行，不整段重排，免得文字跳动 */
.face-live { white-space: pre-wrap; word-break: break-word; }
/* 祖师打腹稿的那半分钟没有任何新增字，光标告诉用户活还在干 */
.face-caret { display: inline-block; width: 6px; height: 15px; margin-left: 3px;
              vertical-align: -2px; background: #C0A778;
              animation: face-blink 1s steps(2, start) infinite; }
@keyframes face-blink { to { visibility: hidden; } }
.face-md-h1 { font-size: 15px; font-weight: 700; color: #2E3542; margin: 14px 0 6px; }
.face-md-h2 { font-size: 14px; font-weight: 700; color: #333B49; margin: 13px 0 5px; }
.face-md-h3 { font-size: 13.5px; font-weight: 700; color: #3A4150; margin: 11px 0 4px; }
.face-md-li { padding-left: 11px; position: relative; }
.face-md-li::before { content: '\00B7'; position: absolute; left: 2px; color: #8A8F99; }
/* 新接口的细目折叠区：默认收起，需要核对数据的人才展开 */
.face-more { margin-top: 16px; text-align: center; }
.face-more-btn { display: inline-block; font-size: 12.5px; color: #8A8F99;
                 cursor: pointer; padding: 7px 16px; border: 1px solid #E3E6EC;
                 border-radius: 15px; }
.face-more-btn:active { opacity: .6; }
.face-detail { margin-top: 4px; padding-top: 12px; border-top: 1px dashed #E3E6EC; }

.face-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 2px; }
.chip { font-size: 12px; color: #C98A17; background: #FFF4E2; border-radius: 8px; padding: 4px 10px; }

.face-quality { font-size: 12.5px; line-height: 1.7; border-radius: 10px; padding: 10px 12px; margin-top: 14px; }
.face-quality.warn { background: #FFF8EA; color: #A57413; border: 1px solid #F3E2BF; }
.face-quality.bad  { background: #FDECEC; color: #B93A3E; border: 1px solid #F5C9CA; }

.face-err { font-size: 14px; color: #B93A3E; background: #FDECEC; border-radius: 10px; padding: 12px; line-height: 1.7; }

.face-disc { font-size: 11.5px; color: #A5ABB8; text-align: center; margin-top: 12px; line-height: 1.6; }

/* ---------- 首页 · 现场面诊 / 舌诊入口 ----------
   两颗按钮已并进提问卡的 .ask-bar 操作条（原 .ask-extra 独占一行已取消），
   尺寸、图标字号统统由 app.css 的 .ask-bar 规则接管；
   这里只留配色与 hover，保持面诊淡蓝、舌诊淡绿。 */
.btn-face {
  width: 100%; display: flex; align-items: center; justify-content: center; gap: 7px;
  padding: 11px 16px; border-radius: 12px; cursor: pointer; font-size: 14.5px; font-weight: 600;
  background: #F5F8FF; border: 1px solid #DCE7FB; color: #2F6BE4; transition: all .15s;
}
.btn-face:hover { background: #EDF3FF; border-color: #C3D7FA; }
.btn-face:active { transform: scale(.98); }
.btn-tongue {
  display: flex; align-items: center; justify-content: center; gap: 5px;
  padding: 10px 13px; border-radius: 12px; cursor: pointer;
  font-size: 13.5px; font-weight: 600;
  background: #EFFAF6; border: 1px solid #C9EDE2; color: #12A179; transition: all .15s;
}
.btn-tongue:hover { background: #E3F6F0; border-color: #AEE3D5; }
.btn-tongue:active { transform: scale(.98); }

/* ---------- 结论报告 · 扩展分区（十二宫/精细特征/性格/健康） ---------- */
.face-summary {
  margin-top: 10px; font-size: 13px; color: #3D4350; line-height: 1.7;
  background: #F7F9FD; border-radius: 10px; padding: 9px 12px;
  border-left: 3px solid #2F6BE4;
}

/* 十二宫：两列网格，12 项一次看清 */
.face-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; }
.face-cell { background: #F7F9FD; border-radius: 10px; padding: 9px 10px; }
.face-cell .cell-hd { display: flex; align-items: center; gap: 6px; }
.face-cell .cell-hd b { font-size: 13px; color: #2A3040; }
.face-cell .cell-st { font-size: 11.5px; color: #8A8F99; margin-top: 4px; }
.face-cell .cell-tx { font-size: 12px; color: #6B7180; line-height: 1.6; margin-top: 3px; }

/* 分区内小标题（优势 / 需注意 / 五官与脏腑 …） */
.face-sub-t {
  font-size: 12.5px; font-weight: 600; color: #4E5566;
  margin: 12px 0 6px; padding-left: 8px; border-left: 3px solid #C3D7FA;
}

/* 信号 / 风险项列表 */
.face-list { margin: 4px 0 8px; }
.face-li {
  font-size: 12.5px; color: #6B7180; line-height: 1.7;
  padding: 4px 0 4px 14px; position: relative;
}
.face-li::before { content: '•'; position: absolute; left: 3px; color: #C98A17; }

/* chip 语义色：优势绿 / 需注意红 */
.chip.good { background: #E7F7EE; color: #1E9E58; }
.chip.bad  { background: #FDECEC; color: #C9565A; }

/* 进度条标签自适应：「精细特征」「内向 / 外向」等标签较长，固定宽会截断 */
.face-bar .lb { width: auto; min-width: 44px; white-space: nowrap; }
.face-bar .vl { width: auto; min-width: 34px; max-width: 86px; overflow: hidden; }

/* ---------- 流年 / 痣相 / 纹路 ---------- */
/* 关键年龄：一行一年龄，紧凑排列便于逐年对照 */
.face-liunian .face-li {
  display: flex; align-items: center; flex-wrap: wrap; gap: 6px;
  padding: 6px 0 6px 16px;
}
.face-liunian .face-li b { font-size: 12.5px; color: #2A3040; }
.face-liunian .face-li::before { top: 6px; }
.ln-pal  { font-size: 11.5px; color: #8A8F99; }
.ln-fort { font-size: 11.5px; color: #C98A17; }
.ln-qi   { font-size: 11.5px; color: #1E9E58; }
.ln-tx   { font-size: 12px; color: #6B7180; line-height: 1.6; margin-top: 2px; }

/* 医学提示 / 相理声明等辅助说明，弱化但不省略 */
.face-desc.tip { font-size: 11.5px; color: #9AA0AB; }

/* 原图与算法标注图并排对照：让「算法究竟看到了什么」可被直接看见 */
.face-cmp { display: flex; gap: 10px; margin-bottom: 8px; }
.face-cmp-item { flex: 1; min-width: 0; }
.face-cmp-cap { font-size: 11.5px; color: #8A8F99; text-align: center; margin-bottom: 5px; }
/* 固定高度 + contain：原图与标注图比例不同（4:3 与 3:2），不统一会一高一矮；
   用 contain 而非 cover，避免裁掉边缘的标注 */
.face-cmp-img { width: 100%; height: 200px; object-fit: contain; display: block;
                border-radius: 10px; background: #F2F3F6; }
.face-cmp-legend { display: flex; flex-wrap: wrap; gap: 9px; font-size: 11px;
                   color: #8A8F99; margin-bottom: 13px; }
.face-cmp-legend i { display: inline-block; width: 9px; height: 9px;
                     border-radius: 2px; margin-right: 4px; }

/* 分析进度：后端按真实步骤回报百分比，前端轮询展示，非假动画 */
.face-prog { width: 100%; max-width: 330px; margin-top: 4px; }
.face-prog-bar { height: 6px; background: #EEF1F6; border-radius: 6px; overflow: hidden; }
.face-prog-bar i { display: block; height: 100%; width: 0; border-radius: 6px;
                   background: #2F6BE4; transition: width .45s ease; }
.face-prog-step { margin-top: 14px; font-size: 13px; color: #2A3040; text-align: center; }
.face-prog-pct { margin-top: 3px; font-size: 12px; color: #9AA0AB; text-align: center; }

/* ---------- 移动端 ---------- */
@media (max-width: 640px) {
  .face-panel { width: 96vw; max-height: 94vh; padding: 15px 14px 13px; border-radius: 16px; }
  .face-score-num { font-size: 32px; }
  .face-body { max-height: 58vh; }
}
/* 极窄屏十二宫改单列，避免两列挤压影响阅读 */
@media (max-width: 380px) {
  .face-grid { grid-template-columns: 1fr; }
}

/* 本次扣费：金额由服务端返回，前端如实展示 */
.face-cost { margin: 0 0 12px; padding: 9px 12px; background: #F4F7FF;
             border: 1px solid #CFDDFF; border-radius: 8px;
             font-size: 12.5px; line-height: 1.55; color: #245BD0; text-align: center; }
.face-cost b { font-weight: 700; color: #1746B0; }

/* 依据与边界说明：让用户知道结论怎么来的、可信到什么程度 */
.face-note { margin-top: 10px; padding: 8px 10px; background: #FAFAFB;
             border-radius: 8px; font-size: 12px; line-height: 1.6; color: #8A9099; }

/* 取景实时引导（位置/角度/是否可拍）；放在底部，与左上角的光照提示互不遮挡 */
.face-guide-tip {
  position: absolute; left: 50%; transform: translateX(-50%); bottom: 12px;
  z-index: 2; font-size: 12.5px; padding: 6px 14px; border-radius: 20px;
  background: rgba(15, 23, 42, .62); color: #FFD98A; white-space: nowrap; }
.face-guide-tip.ok   { background: rgba(20, 84, 46, .9);  color: #7CE7A6; }
.face-guide-tip.warn { background: rgba(94, 68, 12, .9);  color: #FFD98A; }
.face-guide-tip.bad  { background: rgba(96, 28, 32, .9);  color: #FFA8AC; }
/* 达标时才高亮拍照按钮：不禁用，避免误判让用户卡在这里 */
.face-acts .btn.ready { box-shadow: 0 0 0 2px rgba(44, 168, 96, .55); }

/* 前后摄像头切换按钮：右上角，避让左上角光照提示与底部引导条 */
.face-flip {
  position: absolute; right: 10px; top: 10px; z-index: 3;
  width: 34px; height: 34px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: rgba(15, 23, 42, .62); color: #FFC94A;
  font-size: 17px; line-height: 1; cursor: pointer;
  user-select: none; -webkit-tap-highlight-color: transparent; }
.face-flip:active { background: rgba(15, 23, 42, .86); }

/* ---------- 病历识读（首页入口 + 上传页 + 结果页） ----------
   面板骨架沿用面诊那套（mask/panel/head/body/acts/disc），这里只补病历专属件。 */
.btn-medical {
  display: flex; align-items: center; justify-content: center; gap: 5px;
  padding: 10px 13px; border-radius: 12px; cursor: pointer;
  font-size: 13.5px; font-weight: 600;
  background: #FFF8EF; border: 1px solid #F2DFC4; color: #B4791A; transition: all .15s;
}
.btn-medical:hover { background: #FDF1E2; border-color: #E8CDA4; }
.btn-medical:active { transform: scale(.98); }
.btn-medical .ico { font-size: 16px; }

/* 选图九宫格：缩略图 + 「＋」加图格，正方格按内容自适应。
   病历多为竖长 A4 比例，object-fit 用 contain：整张都能看到；
   cover 会把上下裁掉，看起来就像「图没显示全/没显示出来」。 */
.mr-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 4px; }
.mr-thumb {
  position: relative; padding-top: 100%; border-radius: 10px; overflow: hidden;
  background: #fff; border: 1px solid #E4E9F2;
}
.mr-thumb img {
  position: absolute; top: 0; left: 0; width: 100%; height: 100%;
  object-fit: contain; background: #fff;
}
.mr-del {
  position: absolute; top: 4px; right: 4px; width: 20px; height: 20px; border-radius: 50%;
  background: rgba(15, 23, 42, .55); color: #fff; font-size: 12px;
  display: flex; align-items: center; justify-content: center; cursor: pointer;
}
.mr-add {
  position: relative; padding-top: 100%; border-radius: 10px; cursor: pointer;
  border: 1px dashed #C9D6F2; background: #F7FAFF; color: #2F6BE4;
}
.mr-add span { position: absolute; top: 0; left: 0; right: 0; bottom: 0;
               display: flex; align-items: center;
               justify-content: center; font-size: 22px; line-height: 1; }
.mr-add:active { background: #EDF3FF; }

/* 结果页：突出问题卡片与键值行 */
.mr-li { background: #F7F9FD; border-radius: 10px; padding: 9px 11px; margin-bottom: 7px; }
.mr-li .t { font-size: 13px; font-weight: 700; color: #2A3040; line-height: 1.6; }
.mr-li .d { font-size: 12.5px; color: #6B7180; line-height: 1.7; margin-top: 3px; }
.mr-badge { font-size: 11px; padding: 1px 6px; border-radius: 5px; margin-left: 6px; font-weight: 600; }
.mr-badge.高 { background: #FDECEC; color: #E0484C; }
.mr-badge.中 { background: #FFF4E2; color: #C98A17; }
.mr-badge.低 { background: #E7F7EE; color: #1E9E58; }
.mr-kv { display: flex; font-size: 12.5px; line-height: 1.6; padding: 6px 0;
         border-bottom: 1px dashed #EDF0F6; }
.mr-kv:last-child { border-bottom: none; }
.mr-kv .k { color: #8A8F99; width: 76px; flex: none; }
.mr-kv .v { color: #3D4350; flex: 1 1 auto; }