/* Step-by-step lesson player inside #lessonBanner. */
.lesson-banner.lesson-player { display: block; max-height: 42vh; overflow-y: auto; }
.lp-head { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.lp-title { font-size: 14px; }
.lp-count { color: #b9cbe1; font-size: 12px; }
.lesson-banner .lp-close { margin-left: auto; }
.lp-dots { display: flex; flex-wrap: wrap; gap: 6px; list-style: none; margin: 8px 0; padding: 0; }
.lesson-banner .lp-dot button { width: 28px; height: 28px; padding: 0; border-radius: 50%; font-size: 12px; }
.lesson-banner .lp-dot.passed button { background: rgba(85, 214, 164, .25); border-color: #55d6a4; }
.lesson-banner .lp-dot.current button { outline: 2px solid #8dc4ff; }
.lesson-banner .lp-dot button:disabled { opacity: .4; cursor: not-allowed; }
.lp-step { padding: 8px 0; }
.lp-kind { margin: 0; color: #8dc4ff; font-size: 11px; }
.lp-step-title { margin: 2px 0 4px; font-size: 15px; }
.lp-instruction { margin: 0 0 6px; white-space: pre-line; font-size: 13px; color: #dcecff; }
.lp-check { margin: 0 0 6px; font-size: 12px; color: #f3d36a; }
.lp-body { display: flex; flex-direction: column; gap: 6px; align-items: flex-start; }
.lp-choice { display: block; font-size: 13px; cursor: pointer; }
.lp-text { width: 100%; max-width: 640px; padding: 6px 8px; border-radius: 6px; border: 1px solid #5e7fa9; background: rgba(10, 16, 28, .6); color: #dcecff; }
.lp-waiting, .lp-passed { margin: 0; font-size: 12px; color: #b9cbe1; }
.lp-passed { color: #91e6ae; }
.lp-hints { margin-top: 6px; }
.lp-hint { margin: 2px 0; font-size: 12px; color: #cfe3fc; }
.lesson-banner .lp-link { border: none; padding: 0; color: #8dc4ff; text-decoration: underline; }
.lp-message { min-height: 16px; margin: 4px 0; font-size: 12px; color: #91e6ae; }
.lp-message.err { color: #ff9b9b; }
.lesson-player #lessonEnvironmentStatus { display: block; color: #f3d36a; font-size: 12px; font-weight: 600; }
.lp-nav { display: flex; gap: 8px; margin-top: 6px; }

/* AI tutor box (hint-only replies, shown after the learner has tried) */
.lp-tutor { margin-top: 8px; padding: 8px 10px; border: 1px solid #2c4466; border-radius: 6px; background: rgba(78, 163, 255, 0.06); }
.lp-tutor-head { margin: 0 0 6px; font-size: 12px; color: #8dc4ff; }
.lp-tutor-reply { margin: 0 0 6px; font-size: 13px; color: #e0e6f0; }
.lp-tutor-reply p { margin: 2px 0 6px; white-space: pre-line; }
.lp-tutor-reply .lp-link { margin-right: 12px; font-size: 12px; }
.lp-tutor-source { font-size: 11px; color: #7d8aa3; }
.lp-tutor-note { margin: 2px 0; font-size: 12px; color: #9aa6bd; }
.lp-tutor-question { width: 100%; box-sizing: border-box; margin: 0 0 6px; padding: 6px 8px; border-radius: 6px; border: 1px solid #2c3447; background: #0e1320; color: #e0e6f0; }
.lp-tutor-error { margin: 4px 0 0; font-size: 12px; color: #ff8a8a; min-height: 0; }
.lp-tutor-error:empty { display: none; }