/* Medical Conference Presentation Trainer — speaking practice & Q&A workspace.
 * Loaded after styles.css; scoped under #practice so it does not affect the rest
 * of the report. Mirrors the visual language of the revision workspace. */

.practice {
  margin-top: 1.25rem;
  padding-top: 1rem;
  border-top: 1px solid var(--line, #e3e3e8);
}

.practice h3 { margin: 0 0 .35rem; }

.practice-stage {
  margin-top: 1rem;
  padding: 1rem;
  border: 1px solid var(--line, #e3e3e8);
  border-radius: 10px;
  background: var(--card-soft, #fafafb);
}

.practice-stage h4 { margin: 0 0 .5rem; font-size: 1rem; }

/* Teleprompter ----------------------------------------------------------- */
.teleprompter {
  max-height: 220px;
  overflow-y: auto;
  padding: .85rem 1rem;
  border: 1px solid var(--line, #e3e3e8);
  border-radius: 8px;
  background: #fff;
  font-size: 1.05rem;
  line-height: 1.7;
  white-space: pre-wrap;
}

.teleprompter:empty::before {
  content: "No script or slide text yet. 暂无讲稿或幻灯片文字。";
  color: var(--muted, #777);
  font-size: .9rem;
}

.tele-slide { margin-bottom: .85rem; }
.tele-slide-no {
  display: inline-block;
  font-size: .75rem;
  font-weight: 700;
  color: var(--muted, #777);
  text-transform: uppercase;
  letter-spacing: .04em;
}

.tele-toggle-row {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  margin-bottom: .6rem;
}

/* Timer ------------------------------------------------------------------ */
.practice-timer-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .75rem;
  margin: .85rem 0;
}

.practice-clock {
  font-variant-numeric: tabular-nums;
  font-size: 2rem;
  font-weight: 700;
  letter-spacing: .02em;
}

.practice-clock.over { color: #c0392b; }

.practice-hint { color: var(--muted, #777); font-size: .85rem; }

/* Recording controls ----------------------------------------------------- */
.practice-rec-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .6rem;
  margin: .6rem 0;
}

.rec-dot {
  display: inline-block;
  width: 10px; height: 10px;
  border-radius: 50%;
  background: #c0392b;
  margin-right: .35rem;
  animation: rec-pulse 1.1s ease-in-out infinite;
}

@keyframes rec-pulse { 0%, 100% { opacity: 1; } 50% { opacity: .25; } }

.practice textarea {
  width: 100%;
  box-sizing: border-box;
  font-size: 16px;          /* stop iOS zoom (Preference: mobile polish) */
  line-height: 1.5;
}

/* Two-track feedback ----------------------------------------------------- */
.practice-tracks {
  display: grid;
  gap: 1rem;
  grid-template-columns: 1fr 1fr;
  margin-top: .5rem;
}

@media (max-width: 640px) {
  .practice-tracks { grid-template-columns: 1fr; }
}

.track {
  padding: .85rem 1rem;
  border: 1px solid var(--line, #e3e3e8);
  border-radius: 8px;
  background: #fff;
}

.track h5 { margin: 0 0 .5rem; font-size: .95rem; }

.stat-chips { display: flex; flex-wrap: wrap; gap: .4rem; margin: .4rem 0 .6rem; }
.chip {
  display: inline-block;
  padding: .2rem .55rem;
  border-radius: 999px;
  background: var(--accent-soft, #eef2ff);
  color: var(--accent, #3b4cca);
  font-size: .8rem;
  font-weight: 600;
}
.chip.warn { background: #fdecea; color: #c0392b; }

.track ul { margin: .3rem 0 .6rem 1.1rem; padding: 0; }
.track li { margin: .2rem 0; }
.track .label { font-weight: 700; }
.zh { color: var(--muted, #777); }
.small { font-size: .85rem; }
.muted { color: var(--muted, #777); }

/* Q&A -------------------------------------------------------------------- */
.qa-item {
  padding: .85rem 1rem;
  border: 1px solid var(--line, #e3e3e8);
  border-radius: 8px;
  background: #fff;
  margin-bottom: .85rem;
}

.qa-q { font-weight: 600; }
.qa-focus {
  display: inline-block;
  margin-left: .5rem;
  padding: .12rem .5rem;
  border-radius: 999px;
  background: #f0f0f3;
  color: var(--muted, #777);
  font-size: .72rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .03em;
}

.qa-controls { display: flex; flex-wrap: wrap; gap: .5rem; margin: .55rem 0; }

.qa-coaching {
  margin-top: .55rem;
  padding: .65rem .85rem;
  border-left: 3px solid var(--accent, #3b4cca);
  background: var(--card-soft, #fafafb);
  border-radius: 0 6px 6px 0;
}
.qa-coaching .model-answer {
  margin-top: .4rem;
  padding: .5rem .65rem;
  background: #fff;
  border: 1px dashed var(--line, #e3e3e8);
  border-radius: 6px;
}

.practice-status { margin-top: .5rem; min-height: 1.2em; }
.practice-status.ok { color: #1e7e34; }
.practice-status.bad { color: #c0392b; }