/* css/expression.css — 面试表情指导 UI（摄像头小窗 / 状态灯 / 提示气泡 / 报告页）
 * 设计约束：温和不打扰；无弹窗动画滥用；移动端小窗缩到顶部
 */

.expr-root { position: fixed; z-index: 9998; }
.expr-root.is-hidden { display: none; }

/* —— 摄像头小窗（右下角，桌面端；移动端顶部） —— */
.expr-pip {
  position: fixed; right: 16px; bottom: 88px; width: 176px;
  background: #fff; border: 1px solid #E2DDD2; border-radius: 12px;
  box-shadow: 0 4px 16px rgba(4, 44, 83, .12);
  overflow: hidden;
  font-family: inherit;
}
.expr-pip video {
  display: block; width: 100%; height: 132px; object-fit: cover;
  transform: scaleX(-1);          /* 镜像显示，符合照镜子直觉 */
  background: #111;
}
.expr-pip.is-collapsed video { display: none; }

.expr-pip-bar {
  display: flex; align-items: center; gap: 6px;
  padding: 5px 8px; background: #FBFAF7; border-top: 1px solid #EFEAE0;
}
.expr-status {
  width: 9px; height: 9px; border-radius: 50%; flex: none;
  background: #C9C4BA;
}
.expr-status.green  { background: #22A45D; }
.expr-status.yellow { background: #E8A33D; }
.expr-status.gray   { background: #C9C4BA; }
.expr-mode { font-size: 11px; color: #8A8F98; flex: 1; white-space: nowrap; overflow: hidden; }

.expr-collapse, .expr-close {
  flex: none; width: 20px; height: 20px; line-height: 18px; padding: 0;
  border: 1px solid #E2DDD2; border-radius: 6px; background: #fff;
  color: #666; font-size: 12px; cursor: pointer;
}
.expr-collapse:hover, .expr-close:hover { background: #F4F1EA; }

/* —— 提示气泡 —— */
.expr-bubble {
  position: absolute; left: 8px; right: 8px; bottom: calc(100% + 8px);
  background: #042C53; color: #fff;
  font-size: 12.5px; line-height: 1.5;
  padding: 8px 10px; border-radius: 10px;
  opacity: 0; visibility: hidden;
  transition: opacity .35s ease;
  pointer-events: none;
}
.expr-bubble.show { opacity: 1; visibility: visible; }
.expr-bubble.positive { background: #0E9F6E; }

/* —— 校准引导层（面试页内嵌） —— */
.expr-calib {
  position: fixed; inset: 0; z-index: 9999;
  background: rgba(4, 44, 83, .82);
  display: flex; align-items: center; justify-content: center;
}
.expr-calib-card {
  background: #fff; border-radius: 14px; padding: 28px 32px;
  max-width: 320px; text-align: center; color: #042C53;
}
.expr-calib-card h3 { margin: 0 0 8px; font-size: 17px; }
.expr-calib-card p { margin: 0 0 14px; font-size: 13.5px; color: #555; line-height: 1.7; }
.expr-calib-bar { height: 6px; border-radius: 3px; background: #EFEAE0; overflow: hidden; }
.expr-calib-bar i { display: block; height: 100%; width: 0; background: #D85A30; border-radius: 3px; }
.expr-calib-status { margin-top: 10px; font-size: 13px; min-height: 20px; }
.expr-calib-status.ok { color: #0E9F6E; }
.expr-calib-status.bad { color: #C0392B; }

/* —— 报告页 —— */
.expr-report { max-width: 760px; margin: 0 auto; padding: 24px 16px 64px; }
.expr-report .score-hero {
  display: flex; align-items: center; gap: 20px;
  background: #FBFAF7; border: 1px solid #EFEAE0; border-radius: 14px;
  padding: 20px 24px; margin-bottom: 18px;
}
.expr-report .score-num { font-size: 44px; font-weight: 800; color: #042C53; line-height: 1; }
.expr-report .score-grade {
  display: inline-block; padding: 3px 12px; border-radius: 12px;
  background: #F4F1EA; color: #D85A30; font-weight: 700; font-size: 13px;
}
.expr-report section { margin: 22px 0; }
.expr-report h2 { font-size: 16px; color: #042C53; margin: 0 0 10px; }
.expr-report canvas { max-width: 100%; }
.expr-report .dim-rows { display: flex; flex-direction: column; gap: 8px; }
.expr-report .dim-row { display: flex; align-items: center; gap: 10px; font-size: 13.5px; }
.expr-report .dim-row .dim-label { width: 76px; flex: none; color: #333; white-space: nowrap; }
.expr-report .dim-row .dim-bar { flex: 1; height: 8px; border-radius: 4px; background: #EFEAE0; overflow: hidden; }
.expr-report .dim-row .dim-bar i { display: block; height: 100%; background: #D85A30; border-radius: 4px; }
.expr-report .dim-row .dim-score { width: 40px; flex: none; text-align: right; color: #666; font-size: 12.5px; }
.expr-report .advice-li { margin: 6px 0; font-size: 14px; line-height: 1.8; color: #333; }
.expr-report .advice-li.positive { color: #0E9F6E; }
.expr-report .q-line { display: flex; gap: 10px; align-items: baseline; font-size: 13.5px; margin: 6px 0; color: #333; }
.expr-report .q-chip { flex: none; padding: 2px 10px; border-radius: 10px; background: #F4F1EA; font-size: 12.5px; }
.expr-report .qa-question { margin: 8px 0 2px; font-size: 13.5px; color: #042C53; font-weight: 600; line-height: 1.7; }
.expr-report .qa-details { margin: 2px 0 8px; font-size: 13px; color: #555; }
.expr-report .qa-details summary { cursor: pointer; color: #8a8f98; font-size: 12.5px; user-select: none; }
.expr-report .qa-details p { margin: 6px 0 0; line-height: 1.8; white-space: pre-wrap; word-break: break-word; }
.expr-report .sent-list { margin: 4px 0 10px; }
.expr-report .sent-item { margin: 7px 0; }
.expr-report .sent-text { font-size: 13.5px; color: #333; line-height: 1.7; word-break: break-word; }
.expr-report .sent-diag { font-size: 12.5px; color: #C77A2B; margin: 2px 0 0 14px; }
.expr-report .sent-diag.good { color: #0E9F6E; }
.expr-report .sent-diag.none { color: #9aa0ab; }
.expr-report .foot-note { font-size: 12.5px; color: #8a8f98; margin-top: 28px; line-height: 1.8; }
.expr-report .btn-del {
  border: 1px solid #E2DDD2; background: #fff; color: #C0392B;
  border-radius: 8px; padding: 6px 14px; font-size: 13px; cursor: pointer;
}
.expr-report .btn-del:hover { background: #fdecea; }

/* —— 移动端：小窗缩到顶部 —— */
@media (max-width: 640px) {
  .expr-pip { right: auto; left: 12px; top: 12px; bottom: auto; width: 120px; }
  .expr-pip video { height: 90px; }
  .expr-bubble { left: 4px; right: -60px; bottom: calc(100% + 6px); }
  .expr-calib-card { margin: 0 16px; }
}