.narration-player {
  width: 100%; box-sizing: border-box; margin: 0 0 12px;
  padding: 10px 12px; border: 1px solid #d0d5dd; border-radius: 8px;
  background: #fff; color: #344054; box-shadow: 0 2px 8px rgba(16,24,40,.06);
}

.narration-actions { display: flex; align-items: center; gap: 8px; min-width: 0; }
.narration-icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 38px; height: 38px; flex: 0 0 38px; padding: 0;
  border: 1px solid #c7cbd4; border-radius: 6px; background: #fff;
  color: #4c1d95; font: 700 15px/1 var(--ui); cursor: pointer;
}
.narration-icon:hover:not(:disabled) { border-color: #7c3aed; background: #faf5ff; }
.narration-icon:focus-visible, .narration-speed:focus-visible {
  outline: 2px solid #6d28d9; outline-offset: 2px;
}
.narration-icon:disabled { color: #98a2b3; cursor: not-allowed; background: #f2f4f7; }
.narration-voice {
  min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  font-size: 12.5px; font-weight: 700; color: #475467;
}
.narration-spacer { flex: 1; }
.narration-speed {
  min-height: 38px; padding: 0 30px 0 10px; border: 1px solid #c7cbd4;
  border-radius: 6px; background: #fff; color: #344054;
  font: 700 13px/1 var(--ui);
}
.narration-track {
  height: 3px; margin-top: 9px; overflow: hidden; border-radius: 2px; background: #eaecf0;
}
.narration-track i {
  display: block; width: 0; height: 100%; background: #7c3aed; transition: width .2s ease;
}
.narration-status { margin: 6px 0 0; min-height: 18px; font-size: 12px; color: #667085; }

::highlight(narration-current) { background: #fde68a; color: #1f2937; }
.pf-lesson-content .narration-active {
  border-radius: 3px; box-shadow: 0 0 0 3px rgba(245,158,11,.18);
}

@media (max-width: 420px) {
  .narration-player { margin-inline: 0; padding: 9px 10px; }
  .narration-voice { max-width: 116px; }
  .narration-icon { width: 40px; height: 40px; flex-basis: 40px; }
  .narration-speed { min-height: 40px; }
}

@media (prefers-reduced-motion: reduce) {
  .narration-track i { transition: none; }
}