/* ============================================================
   AI 智能陪练 — 主样式
   律兜培训部 · 蓝色商务主题
   ============================================================ */

.coach-shell {
  display: flex;
  flex-direction: column;
  gap: 12px;
  background: linear-gradient(180deg, #0f172a 0%, #1e293b 100%);
  border-radius: 16px;
  padding: 14px 18px 18px;
  min-height: 0;
  color: #e2e8f0;
  font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "Microsoft YaHei", sans-serif;
}

/* ── 顶部模式导航 ── */
.coach-topnav {
  display: flex;
  gap: 6px;
  background: rgba(255,255,255,.05);
  padding: 4px;
  border-radius: 10px;
  border: 1px solid rgba(255,255,255,.08);
}
.coach-topnav-item {
  flex: 1;
  background: transparent;
  color: #94a3b8;
  border: 0;
  padding: 13px 18px;
  font-size: 1.02rem;
  font-weight: 600;
  border-radius: 8px;
  cursor: pointer;
  transition: all .2s;
}
.coach-topnav-item:hover { color: #e2e8f0; background: rgba(255,255,255,.05); }
.coach-topnav-item.on {
  background: linear-gradient(135deg, #3b82f6, #2563eb);
  color: #fff;
  box-shadow: 0 2px 8px rgba(59,130,246,.4);
}

/* ── 客户情景选择条 ── */
.coach-scenariobar {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  padding: 12px 14px;
  background: rgba(255,255,255,.03);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 8px;
}
.coach-scenariobar-label {
  color: #94a3b8;
  font-size: .85rem;
  font-weight: 600;
  margin-right: 4px;
}
.coach-scenariobar-item {
  background: rgba(255,255,255,.06);
  color: #cbd5e1;
  border: 1px solid rgba(255,255,255,.1);
  padding: 10px 20px;
  border-radius: 100px;
  font-size: .92rem;
  font-weight: 600;
  cursor: pointer;
  transition: all .2s;
}
.coach-scenariobar-item:hover { background: rgba(59,130,246,.2); color: #fff; }
.coach-scenariobar-item.on {
  background: linear-gradient(135deg, #3b82f6, #2563eb);
  color: #fff;
  border-color: #3b82f6;
}

/* ── 主体面板 ── */
.coach-panel {
  flex: 1;
  min-height: 480px;
}

/* ── 提示框 ── */
.coach-hint, .coach-empty {
  text-align: center;
  padding: 18px 22px;
  background: rgba(59,130,246,.08);
  border: 1px dashed rgba(59,130,246,.3);
  border-radius: 10px;
  color: #93c5fd;
  font-size: .9rem;
  margin: 12px 0;
}
.coach-empty {
  background: rgba(255,255,255,.03);
  border-color: rgba(255,255,255,.1);
  color: #94a3b8;
}

/* ═══════════════ 文本对练 ═══════════════ */
.coach-text {
  display: flex;
  flex-direction: column;
  min-height: 320px;
  height: auto;
  max-height: calc(100vh - 320px);
}
.coach-chat {
  flex: 1 1 auto;
  min-height: 200px;
  max-height: calc(100vh - 360px);
  overflow-y: auto;
  padding: 16px 8px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  scrollbar-width: thin;
  scrollbar-color: rgba(255,255,255,.2) transparent;
}
.coach-chat::-webkit-scrollbar { width: 6px; }
.coach-chat::-webkit-scrollbar-thumb { background: rgba(255,255,255,.2); border-radius: 3px; }

.coach-msg {
  display: flex;
  flex-direction: column;
  max-width: 80%;
  animation: coach-fade-in .3s ease;
}
@keyframes coach-fade-in {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}
.coach-msg.user { align-self: flex-end; }
.coach-msg.ai { align-self: flex-start; }
.coach-msg-role {
  font-size: .72rem;
  color: #94a3b8;
  margin-bottom: 4px;
  padding: 0 4px;
  font-weight: 600;
}
.coach-msg-body {
  padding: 12px 16px;
  border-radius: 14px;
  font-size: .94rem;
  line-height: 1.65;
  word-wrap: break-word;
  white-space: pre-wrap;
}
.coach-msg.user .coach-msg-body {
  background: linear-gradient(135deg, #3b82f6, #2563eb);
  color: #fff;
  border-bottom-right-radius: 4px;
}
.coach-msg.ai .coach-msg-body {
  background: linear-gradient(135deg, rgba(99,102,241,.18), rgba(30,41,59,.6));
  color: #f1f5f9;
  border: 1px solid rgba(165,180,252,.25);
  border-bottom-left-radius: 4px;
  box-shadow: 0 2px 6px rgba(0,0,0,.15);
}

.coach-inputbar {
  display: flex;
  gap: 8px;
  padding: 12px;
  background: rgba(255,255,255,.04);
  border-radius: 10px;
  border: 1px solid rgba(255,255,255,.08);
  margin-top: 8px;
}
.coach-input {
  flex: 1;
  background: rgba(255,255,255,.06);
  color: #e2e8f0;
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 10px;
  padding: 12px 16px;
  font-size: .95rem;
  min-height: 48px;
  resize: none;
  font-family: inherit;
  outline: none;
  transition: all .2s;
}
.coach-input:focus { border-color: #3b82f6; background: rgba(255,255,255,.08); }
.coach-input::placeholder { color: #64748b; }
.coach-send, .coach-end {
  background: linear-gradient(135deg, #3b82f6, #2563eb);
  color: #fff;
  border: 0;
  height: 52px;
  padding: 0 34px;
  border-radius: 10px;
  font-weight: 600;
  font-size: 1.15rem;
  cursor: pointer;
  transition: all .2s;
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.coach-send:hover, .coach-end:hover { transform: translateY(-1px); box-shadow: 0 4px 12px rgba(59,130,246,.4); }
.coach-end { background: linear-gradient(135deg, #f59e0b, #d97706); padding: 0 38px; }
.coach-end:hover { box-shadow: 0 4px 12px rgba(245,158,11,.4); }

.coach-scorebox {
  margin-top: 14px;
  padding: 18px;
  background: rgba(16,185,129,.08);
  border: 1px solid rgba(16,185,129,.3);
  border-radius: 10px;
  color: #d1fae5;
  display: none;
}
.coach-scorebox.show { display: block; }
.coach-scorebox canvas { max-width: 100%; height: auto; }

/* ═══════════════ 语音对练 ═══════════════ */
.coach-voice {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
  padding: 30px 16px;
  min-height: 400px;
}
.coach-voice canvas {
  width: 100%;
  max-width: 640px;
  height: 110px;
  background: linear-gradient(135deg, rgba(15,23,42,.5), rgba(30,41,59,.4));
  border-radius: 14px;
  border: 1px solid rgba(96,165,250,.25);
  box-shadow: 0 2px 10px rgba(0,0,0,.2);
}

/* 语音对练控制条 */
.coach-voice-ctrl {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  flex-wrap: wrap;
  margin-top: 8px;
}

/* 大型按住说话按钮（主操作） */
.coach-rec {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 20px 40px;
  font-size: 1.25rem;
  font-weight: 700;
  color: #fff;
  background: linear-gradient(135deg, #ef4444, #dc2626);
  border: 0;
  border-radius: 100px;
  cursor: pointer;
  box-shadow: 0 6px 20px rgba(239,68,68,.4), 0 0 0 0 rgba(239,68,68,.5);
  animation: coach-pulse-red 2s infinite;
  transition: all .2s;
  font-family: inherit;
  letter-spacing: 0.5px;
  user-select: none;
}
.coach-rec:hover { transform: translateY(-2px) scale(1.02); box-shadow: 0 10px 28px rgba(239,68,68,.5), 0 0 0 8px rgba(239,68,68,.15); }
.coach-rec:active { transform: translateY(0) scale(0.98); }
.coach-rec.recording {
  background: linear-gradient(135deg, #1e3a5f, #2563eb);
  box-shadow: 0 6px 20px rgba(37,99,235,.5), 0 0 0 8px rgba(37,99,235,.2);
  animation: none;
}
.coach-rec .mic-icon { font-size: 1.4rem; }

/* 兼容旧的 .coach-voice-btn 圆形样式 */
.coach-voice-btn {
  width: 110px;
  height: 110px;
  border-radius: 50%;
  background: linear-gradient(135deg, #3b82f6, #2563eb);
  color: #fff;
  border: 0;
  font-size: 2.5rem;
  cursor: pointer;
  box-shadow: 0 6px 20px rgba(59,130,246,.4), 0 0 0 0 rgba(59,130,246,.5);
  animation: coach-pulse 2s infinite;
  transition: all .2s;
}
.coach-voice-btn:hover { transform: scale(1.08); }
.coach-voice-btn.recording {
  background: linear-gradient(135deg, #ef4444, #dc2626);
  animation: coach-pulse-red 1s infinite;
}

/* 限额提示 */
.coach-limit {
  color: #fbbf24;
  font-size: .85rem;
  text-align: center;
  padding: 6px 14px;
  background: rgba(251,191,36,.08);
  border: 1px solid rgba(251,191,36,.25);
  border-radius: 6px;
  margin-top: 4px;
}
@keyframes coach-pulse {
  0% { box-shadow: 0 0 0 0 rgba(59,130,246,.5); }
  70% { box-shadow: 0 0 0 20px rgba(59,130,246,0); }
  100% { box-shadow: 0 0 0 0 rgba(59,130,246,0); }
}
@keyframes coach-pulse-red {
  0% { box-shadow: 0 0 0 0 rgba(239,68,68,.6); }
  70% { box-shadow: 0 0 0 20px rgba(239,68,68,0); }
  100% { box-shadow: 0 0 0 0 rgba(239,68,68,0); }
}
.coach-voice-status {
  color: #94a3b8;
  font-size: .9rem;
  text-align: center;
  min-height: 22px;
}
.coach-voice-status.live { color: #ef4444; font-weight: 600; }

/* ═══════════════ 情景剧本 ═══════════════ */
.coach-scenario { display: flex; flex-direction: column; gap: 16px; }
.coach-sc-intro {
  padding: 12px 18px;
  background: linear-gradient(90deg, rgba(59,130,246,.18), rgba(15,23,42,.4));
  border-left: 4px solid #3b82f6;
  border-radius: 8px;
  color: #bfdbfe;
  font-size: .9rem;
  font-weight: 500;
}
.coach-sc-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 12px;
  max-height: calc(100vh - 380px);
  min-height: 0;
  overflow-y: auto;
  padding: 4px;
}
.coach-sc-list::-webkit-scrollbar { width: 6px; }
.coach-sc-list::-webkit-scrollbar-thumb { background: rgba(255,255,255,.2); border-radius: 3px; }

.coach-sc-card {
  background: linear-gradient(135deg, rgba(30,58,138,.35), rgba(15,23,42,.55));
  border: 1px solid rgba(96,165,250,.35);
  border-radius: 12px;
  padding: 14px 16px;
  cursor: pointer;
  transition: all .2s;
  display: flex;
  flex-direction: column;
  min-height: 0;
  box-shadow: 0 2px 8px rgba(0,0,0,.18);
}
.coach-sc-card:hover { background: linear-gradient(135deg, rgba(59,130,246,.35), rgba(37,99,235,.4)); border-color: #60a5fa; transform: translateY(-3px); box-shadow: 0 6px 20px rgba(59,130,246,.35); }
.coach-sc-card-title { font-weight: 700; color: #f1f5f9; margin-bottom: 8px; font-size: .98rem; letter-spacing: .3px; }
.coach-sc-card-desc { color: #cbd5e1; font-size: .83rem; line-height: 1.55; margin-bottom: 8px; }
.coach-sc-card-meta { color: #93c5fd; font-size: .76rem; padding-top: 6px; border-top: 1px solid rgba(96,165,250,.2); }

.coach-sc-stage {
  background: rgba(255,255,255,.03);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 10px;
  padding: 18px;
  min-height: 240px;
}

/* ── 情景剧本：节点对话区 ── */
.coach-sc-node {
  background: linear-gradient(135deg, rgba(15,23,42,.4), rgba(30,41,59,.5));
  border-radius: 10px;
  padding: 16px 18px;
  margin-bottom: 14px;
  border: 1px solid rgba(96,165,250,.18);
}
.coach-sc-node.ending {
  background: linear-gradient(135deg, rgba(245,158,11,.1), rgba(15,23,42,.4));
  border-color: rgba(245,158,11,.3);
}
.coach-sc-say {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin-bottom: 4px;
}
.coach-sc-say-role {
  flex-shrink: 0;
  color: #fbbf24;
  font-weight: 700;
  font-size: .9rem;
  min-width: 48px;
}
.coach-sc-say-text {
  color: #f1f5f9;
  font-size: .92rem;
  line-height: 1.65;
  flex: 1;
}
.coach-sc-node-title {
  color: #93c5fd;
  font-size: .82rem;
  font-weight: 600;
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px dashed rgba(96,165,250,.2);
}

/* ── 选项按钮 ── */
.coach-sc-choices {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 14px;
}
.coach-sc-choice {
  display: block;
  width: 100%;
  text-align: left;
  background: linear-gradient(135deg, rgba(59,130,246,.18), rgba(15,23,42,.4));
  color: #e2e8f0;
  border: 1.5px solid rgba(96,165,250,.4);
  border-radius: 10px;
  padding: 12px 16px;
  font-size: .9rem;
  line-height: 1.55;
  font-weight: 500;
  cursor: pointer;
  transition: all .2s;
  font-family: inherit;
}
.coach-sc-choice:hover {
  background: linear-gradient(135deg, rgba(59,130,246,.4), rgba(37,99,235,.35));
  border-color: #60a5fa;
  color: #fff;
  transform: translateY(-1px);
  box-shadow: 0 4px 14px rgba(59,130,246,.3);
}
.coach-sc-choice:active { transform: translateY(0); }

/* ── 加载提示 ── */
.coach-sc-loading {
  text-align: center;
  padding: 30px 20px;
  color: #93c5fd;
  font-size: .92rem;
  background: rgba(59,130,246,.06);
  border-radius: 10px;
  border: 1px dashed rgba(96,165,250,.3);
}

/* ── 结局页 ── */
.coach-sc-endpage {
  text-align: center;
  padding: 30px 24px;
  border-radius: 12px;
  margin-top: 12px;
}
.coach-sc-endpage.pass {
  background: linear-gradient(135deg, rgba(16,185,129,.15), rgba(15,23,42,.4));
  border: 1.5px solid rgba(16,185,129,.4);
}
.coach-sc-endpage.fail {
  background: linear-gradient(135deg, rgba(239,68,68,.12), rgba(15,23,42,.4));
  border: 1.5px solid rgba(239,68,68,.35);
}
.coach-sc-end-badge {
  font-size: 1.5rem;
  font-weight: 800;
  margin-bottom: 10px;
}
.coach-sc-endpage.pass .coach-sc-end-badge { color: #34d399; }
.coach-sc-endpage.fail .coach-sc-end-badge { color: #f87171; }
.coach-sc-end-text {
  color: #e2e8f0;
  font-size: .95rem;
  line-height: 1.6;
  margin-bottom: 16px;
}
.coach-sc-end-sug {
  text-align: left;
  background: rgba(15,23,42,.5);
  border-radius: 8px;
  padding: 14px 18px;
  margin: 14px 0;
}
.coach-sc-end-sug-title {
  color: #93c5fd;
  font-weight: 700;
  margin-bottom: 8px;
  font-size: .88rem;
}
.coach-suggest-item {
  color: #cbd5e1;
  font-size: .85rem;
  line-height: 1.6;
  padding: 2px 0;
}
.coach-sc-again {
  background: linear-gradient(135deg, #3b82f6, #2563eb);
  color: #fff;
  border: 0;
  padding: 10px 24px;
  border-radius: 8px;
  font-weight: 600;
  font-size: .92rem;
  cursor: pointer;
  margin-top: 12px;
  font-family: inherit;
  transition: all .2s;
}
.coach-sc-again:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(59,130,246,.4);
}


/* ═══════════════ 复盘报告 ═══════════════ */
.coach-report { display: flex; flex-direction: column; gap: 14px; }
.coach-rp-intro {
  padding: 12px 16px;
  background: rgba(16,185,129,.08);
  border-left: 3px solid #10b981;
  border-radius: 6px;
  color: #6ee7b7;
  font-size: .88rem;
}
.coach-rp-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-height: 320px;
  overflow-y: auto;
}
.coach-rp-list::-webkit-scrollbar { width: 6px; }
.coach-rp-list::-webkit-scrollbar-thumb { background: rgba(255,255,255,.2); border-radius: 3px; }
.coach-rp-row {
  display: grid;
  grid-template-columns: 100px 1fr 140px 80px;
  gap: 10px;
  align-items: center;
  padding: 12px 14px;
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 8px;
  cursor: pointer;
  transition: all .2s;
  font-size: .88rem;
}
.coach-rp-row:hover { background: rgba(59,130,246,.12); border-color: #3b82f6; }
.coach-rp-row-mode { color: #3b82f6; font-weight: 600; }
.coach-rp-row-sc { color: #cbd5e1; }
.coach-rp-row-date { color: #94a3b8; font-size: .8rem; }
.coach-rp-row-score { font-weight: 700; text-align: right; }

.coach-rp-detail {
  background: rgba(255,255,255,.03);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 10px;
  padding: 18px;
  min-height: 200px;
}

/* ═══════════════ Toast ═══════════════ */
.coach-toast {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scale(.9);
  background: rgba(15,23,42,.95);
  color: #fff;
  padding: 12px 22px;
  border-radius: 10px;
  font-size: .9rem;
  z-index: 10000;
  opacity: 0;
  transition: all .2s;
  pointer-events: none;
  border: 1px solid rgba(255,255,255,.1);
}
.coach-toast.show {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1);
}
.coach-toast.err { background: rgba(239,68,68,.95); }
.coach-toast.ok { background: rgba(16,185,129,.95); }

/* ── 响应式 ── */
@media (max-width: 720px) {
  .coach-shell { padding: 10px 12px 14px; gap: 8px; }
  .coach-topnav-item { font-size: .82rem; padding: 8px 6px; }
  .coach-topnav-item span { display: none; }
  .coach-msg { max-width: 92%; }
  .coach-rp-row { grid-template-columns: 80px 1fr 60px; font-size: .8rem; }
  .coach-rp-row-date { display: none; }
  .coach-voice-btn { width: 80px; height: 80px; font-size: 1.9rem; }
}