/**
 * ---
 * Project      : Coding Campus Platform
 * Module       : Static / Css
 * File         : ai_lesson_player.css
 *
 * Description  : Project css source for Ai Lesson Player.
 *
 * Author       : Jihun Kang
 * Organization : Coding Campus / OrbiSync
 * Contact      : makers.dev.ci@gmail.com
 *
 * Copyright (c) 2026 Jihun Kang. All rights reserved.
 * ---
 */
@import url("ai_lesson_player/chrome.css");
@import url("ai_lesson_player/subtitles.css");
@import url("ai_lesson_player/ott_controls.css");
@import url("ai_lesson_player/intro_preview.css");
@import url("ai_lesson_player/loading_notice.css");

/* 플레이어 페이지: 대시보드 검은 푸터(95px+170px padding) 완전 숨김 */
body:has(.ai-lesson-page) footer,
.c-body:has(.ai-lesson-page) > footer {
  display: none !important;
  height: 0 !important;
  min-height: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  overflow: hidden !important;
  visibility: hidden !important;
}

/* 영상 플레이어 placeholder — URL 없을 때는 템플릿/JS에서 생성하지 않음 */
.ai-lesson-page .video-player,
.ai-lesson-page .lesson-video,
.ai-lesson-page .player-stage,
.ai-lesson-page [data-lesson-video],
.ai-lesson-page [data-video-placeholder] {
  display: none !important;
}

.ai-lesson-page {
  background: #f4f7fb;
  overflow-x: hidden;
}

.ai-lesson-page *,
.ai-lesson-page *::before,
.ai-lesson-page *::after {
  box-sizing: border-box;
}

.ai-lesson-page .container-fluid {
  max-width: 1280px;
  margin: 0 auto;
  padding-right: clamp(12px, 2vw, 24px);
  padding-left: clamp(12px, 2vw, 24px);
}

.ai-lesson-breadcrumb {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0 0 16px;
  color: #64748b;
  font-size: 14px;
}

.ai-lesson-breadcrumb a {
  color: #2563eb;
  font-weight: 700;
}

.ai-player-layout,
.ai-lesson-shell {
  display: grid;
  grid-template-columns: minmax(220px, 280px) minmax(0, 1fr);
  align-items: start;
  gap: clamp(16px, 2vw, 24px);
  min-width: 0;
}

.ai-player-main {
  min-width: 0;
}

.ai-lesson-sidebar,
.ai-lesson-player {
  border: 1px solid #e5e7eb;
  border-radius: 22px;
  background: #fff;
  box-shadow: 0 18px 46px rgba(15, 23, 42, 0.08);
}

/* Legacy embedded lesson page sidebars only — not full-screen .ai-player-shell */
.ai-lesson-page .ai-player-sidebar,
.ai-lesson-page .ai-lesson-sidebar,
.ai-lesson-shell .ai-player-sidebar,
.ai-lesson-shell .ai-lesson-sidebar,
.ai-player-layout .ai-player-sidebar,
.ai-player-layout .ai-lesson-sidebar {
  position: sticky;
  top: 90px;
  max-height: calc(100vh - 120px);
  overflow: hidden;
  align-self: start;
  min-width: 0;
  display: flex;
  flex-direction: column;
}

.ai-lesson-sidebar__header {
  padding: 18px;
  border-bottom: 1px solid #eef2f7;
}

.ai-lesson-sidebar__header span,
.ai-lesson-player__eyebrow {
  display: block;
  margin-bottom: 6px;
  color: #2563eb;
  font-size: 12px;
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.ai-lesson-sidebar__header strong {
  color: #111827;
  font-size: 17px;
}

.ai-lesson-sidebar__list {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  padding: 10px;
}

.ai-lesson-sidebar__item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 14px;
  border-radius: 14px;
  color: #334155;
  font-weight: 700;
  text-decoration: none;
}

.ai-lesson-sidebar__item:hover,
.ai-lesson-sidebar__item.is-active {
  background: #eef4ff;
  color: #1d4ed8;
  text-decoration: none;
}

.ai-lesson-sidebar__item em {
  flex-shrink: 0;
  color: #16a34a;
  font-size: 12px;
  font-style: normal;
  font-weight: 900;
}

.ai-lesson-player {
  min-width: 0;
  padding: clamp(18px, 2.5vw, 30px);
}

.ai-lesson-player__note {
  margin: 8px 0 0;
  color: #64748b;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.5;
}

.ai-lesson-player__header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
  margin-bottom: 22px;
}

.ai-lesson-player__header h1 {
  margin: 0;
  color: #0f172a;
  font-size: clamp(26px, 4vw, 40px);
  font-weight: 900;
  letter-spacing: -0.035em;
}

.ai-lesson-score {
  min-width: 118px;
  padding: 12px 14px;
  border-radius: 18px;
  background: linear-gradient(135deg, #fff7ed 0%, #ffedd5 100%);
  text-align: center;
}

.ai-lesson-score span {
  display: block;
  color: #9a3412;
  font-size: 11px;
  font-weight: 900;
  text-transform: uppercase;
}

.ai-lesson-score strong {
  display: block;
  color: #7c2d12;
  font-size: 28px;
  line-height: 1;
}

.ai-lesson-progress {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 22px;
}

.ai-lesson-progress__bar {
  flex: 1;
  height: 10px;
  overflow: hidden;
  border-radius: 999px;
  background: #e5e7eb;
}

.ai-lesson-progress__bar span {
  display: block;
  width: 0;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #2563eb, #06b6d4);
  transition: width 0.2s ease;
}

.ai-lesson-progress p {
  margin: 0;
  color: #475569;
  font-weight: 800;
}

.lesson-slide-card {
  display: flex;
  flex-direction: column;
  max-width: 860px;
  margin: 0 auto;
  padding: 0;
  overflow: hidden;
}

.lesson-slide-card .slide-content {
  flex: 0 1 auto;
  padding: clamp(22px, 3vw, 32px);
}

.ai-lesson-card {
  display: flex;
  flex-direction: column;
  gap: 16px;
  min-height: 0;
  border: 1px solid #dbeafe;
  border-radius: 20px;
  background:
    radial-gradient(circle at top right, rgba(37, 99, 235, 0.08), transparent 32%),
    linear-gradient(180deg, #ffffff 0%, #f8fbff 100%);
  box-shadow: 0 12px 32px rgba(15, 23, 42, 0.06);
}

.ai-lesson-card__lead {
  margin: 0;
  color: #475569;
  font-size: 17px;
  line-height: 1.7;
}

.ai-lesson-card__section {
  padding: 14px 16px;
  border: 1px solid #e2e8f0;
  border-radius: 14px;
  background: #fff;
}

.ai-lesson-card__section-title {
  margin: 0 0 8px;
  color: #0f172a;
  font-size: 14px;
  font-weight: 900;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.ai-lesson-card__section p,
.ai-lesson-card__section ul {
  margin: 0;
  color: #334155;
  font-size: 16px;
  line-height: 1.65;
}

.ai-lesson-card__section ul {
  padding-left: 1.2rem;
}

.ai-lesson-card__section--compact {
  max-width: min(100%, 36rem);
  margin-inline: 0;
  padding: 8px 12px;
  border-radius: 10px;
}

.ai-lesson-card__section--compact .ai-lesson-card__section-title {
  margin-bottom: 4px;
  font-size: 0.78rem;
}

.ai-lesson-card__section--compact p,
.ai-lesson-card__section--compact ul {
  font-size: clamp(0.88rem, 1.5vw, 0.98rem);
  line-height: 1.5;
}

.slide-actions,
.ai-lesson-card__nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin: 0;
  padding: 14px clamp(18px, 3vw, 28px) 18px;
  border-top: 1px solid #e2e8f0;
  background: #f8fafc;
}

.slide-actions__buttons,
.ai-lesson-card__nav-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: flex-end;
}

.ai-lesson-admin-next-hint {
  max-width: 860px;
  margin: 12px auto 0;
  color: #475569;
  font-size: 14px;
  font-weight: 700;
}

.ai-lesson-card__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  margin-bottom: 4px;
}

.ai-lesson-card__type {
  display: inline-flex;
  align-self: flex-start;
  margin-bottom: 0;
  padding: 6px 10px;
  border-radius: 999px;
  background: #dbeafe;
  color: #1e3a8a;
  font-size: 12px;
  font-weight: 900;
}

.ai-lesson-card__index {
  color: #64748b;
  font-size: 12px;
  font-weight: 800;
}

.ai-lesson-card h2 {
  margin: 0;
  color: #0f172a;
  font-size: clamp(26px, 4vw, 42px);
  font-weight: 900;
  letter-spacing: -0.035em;
}

.ai-lesson-card p {
  max-width: 720px;
  margin: 0;
  color: #334155;
  font-size: 18px;
  line-height: 1.75;
}

.ai-lesson-question {
  font-weight: 800;
}

.ai-lesson-code {
  display: block;
  white-space: pre-wrap;
  margin: 0;
  padding: 18px;
  border-radius: 18px;
  background: #0f172a;
  color: #e0f2fe;
  font-family: Menlo, Consolas, monospace;
  font-size: 14px;
  line-height: 1.6;
}

.ai-lesson-code--example,
.slide-content pre.ai-lesson-code {
  background: #f1f5f9;
  color: #0f172a;
  border: 1px solid #cbd5e1;
}

.ai-lesson-sample-prompt {
  padding: 14px 16px;
  border: 1px solid #bfdbfe;
  border-radius: 18px;
  background: #eff6ff;
  color: #1e3a8a;
}

.ai-lesson-sample-prompt strong {
  display: block;
  margin-bottom: 8px;
  font-size: 13px;
  font-weight: 900;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.ai-lesson-prompt--featured,
.ai-lesson-sample-prompt.ai-lesson-prompt--featured {
  margin: 20px 0;
  padding: 18px 20px;
  border: 2px solid #2563eb;
  border-radius: 14px;
  background: #eff6ff;
}

.ai-lesson-prompt--featured pre,
.ai-lesson-sample-prompt.ai-lesson-prompt--featured pre {
  font-size: 15px;
  line-height: 1.55;
  white-space: pre-wrap;
  word-break: break-word;
}

.ai-lesson-prompt--bad {
  border-color: #f87171;
  background: #fef2f2;
  color: #991b1b;
}

.ai-lesson-run-checklist li,
.ai-lesson-mission-tasks li {
  margin-bottom: 8px;
  line-height: 1.5;
}

.ai-lesson-sample-prompt pre {
  margin: 0;
  color: #1e293b;
  font-family: inherit;
  font-size: 15px;
  line-height: 1.6;
  white-space: pre-wrap;
}

.ai-lesson-input,
.ai-lesson-code-input,
.ai-lesson-mission-input {
  width: 100%;
  padding: 14px 16px;
  border: 1px solid #cbd5e1;
  border-radius: 16px;
  background: #fff;
  color: #0f172a;
  font-size: 16px;
  line-height: 1.6;
}

.ai-lesson-code-input {
  min-height: 240px;
  font-family: Menlo, Consolas, monospace;
  resize: vertical;
}

.ai-lesson-mission-input {
  min-height: 180px;
  resize: vertical;
}

.ai-code-preview {
  overflow: hidden;
  border: 1px solid #dbeafe;
  border-radius: 18px;
  background: #ffffff;
  box-shadow: 0 12px 28px rgba(15, 23, 42, 0.06);
}

.ai-code-preview[hidden],
.ai-code-preview__body[hidden] {
  display: none;
}

.ai-code-preview__head {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  border-bottom: 1px solid #e0f2fe;
  background: #f0f9ff;
  color: #0f172a;
}

.ai-code-preview__head strong {
  font-size: 14px;
  font-weight: 900;
}

.ai-code-preview__mode {
  margin-right: auto;
  padding: 5px 9px;
  border-radius: 999px;
  background: #dbeafe;
  color: #1e40af;
  font-size: 12px;
  font-weight: 900;
}

.ai-code-preview__head button {
  min-height: 34px;
  padding: 7px 12px;
  border: 1px solid #bfdbfe;
  border-radius: 999px;
  background: #fff;
  color: #1d4ed8;
  cursor: pointer;
  font-weight: 900;
}

.ai-code-preview__frame {
  display: block;
  width: 100%;
  min-height: 320px;
  border: 0;
  background: #fff;
}

.ai-lesson-choice-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}

.ai-lesson-choice {
  min-height: 58px;
  padding: 16px 18px;
  border: 1px solid #cbd5e1;
  border-radius: 18px;
  background: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
  color: #1f2937;
  font-weight: 800;
  text-align: left;
  box-shadow: 0 8px 18px rgba(15, 23, 42, 0.05);
  transition: border-color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
}

.ai-lesson-choice:hover,
.ai-lesson-choice:focus-visible {
  border-color: #60a5fa;
  box-shadow: 0 12px 26px rgba(37, 99, 235, 0.12);
  transform: translateY(-1px);
  outline: none;
}

.ai-lesson-choice.is-selected {
  border-color: #2563eb;
  background: #eff6ff;
  color: #1d4ed8;
  box-shadow: 0 14px 30px rgba(37, 99, 235, 0.16);
}

.ai-lesson-feedback {
  display: none;
  padding: 16px 18px;
  border: 1px solid #e2e8f0;
  border-left-width: 5px;
  border-radius: 18px;
  background: #f8fafc;
  color: #334155;
  font-weight: 700;
  line-height: 1.6;
}

.ai-lesson-feedback.is-visible {
  display: block;
}

.ai-lesson-feedback.is-correct {
  border-color: #86efac;
  background: #dcfce7;
  color: #166534;
}

.ai-lesson-feedback.is-wrong {
  border-color: #fecaca;
  background: #fee2e2;
  color: #991b1b;
}

.ai-lesson-admin-quiz-review {
  margin-top: 14px;
  padding: 12px 14px;
  border-radius: 14px;
  border: 1px dashed #cbd5e1;
  background: #f8fafc;
  font-size: 0.875rem;
  line-height: 1.55;
  color: #334155;
}

.ai-lesson-admin-quiz-review strong {
  color: #0f172a;
}

.ai-lesson-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.ai-kiki-panel--compact {
  padding: 12px 14px;
}

.ai-kiki-panel--compact h2 {
  font-size: 18px;
}

.ai-kiki-panel {
  max-width: 860px;
  margin: 16px auto 0;
  padding: 18px;
  border: 1px solid #bfdbfe;
  border-radius: 22px;
  background:
    radial-gradient(circle at top left, rgba(59, 130, 246, 0.12), transparent 34%),
    #ffffff;
}

.ai-kiki-panel__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
}

.ai-kiki-panel__eyebrow {
  margin: 0 0 5px;
  color: #2563eb;
  font-size: 12px;
  font-weight: 900;
  letter-spacing: 0.08em;
}

.ai-kiki-panel h2 {
  margin: 0;
  color: #0f172a;
  font-size: 22px;
  font-weight: 900;
}

.ai-kiki-panel__head p,
.ai-kiki-panel__result p {
  margin: 4px 0 0;
  color: #475569;
  line-height: 1.65;
}

.ai-kiki-panel__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 8px;
}

.ai-kiki-panel[data-kiki-busy="true"] .ai-lesson-btn {
  cursor: progress;
}

.ai-kiki-panel__result {
  min-height: 74px;
  margin-top: 14px;
  padding: 14px;
  border: 1px solid #dbeafe;
  border-radius: 18px;
  background: #f8fbff;
  color: #334155;
}

.ai-kiki-panel__result[hidden] {
  display: none;
}

.ai-kiki-panel__summary,
.ai-kiki-panel__section {
  margin-bottom: 10px;
  padding: 12px;
  border: 1px solid #e2e8f0;
  border-radius: 14px;
  background: #fff;
}

.ai-kiki-panel__summary {
  border-color: #bfdbfe;
  background: #eff6ff;
}

.ai-kiki-panel__section--suggestion {
  border-color: #bbf7d0;
  background: #f0fdf4;
}

.ai-kiki-panel__result strong {
  color: #0f172a;
}

.ai-kiki-panel__result ul {
  margin: 6px 0 12px;
  padding-left: 20px;
}

.ai-kiki-panel__result pre {
  overflow-x: auto;
  margin: 8px 0 0;
  padding: 12px;
  border-radius: 12px;
  background: #0f172a;
  color: #e0f2fe;
  white-space: pre-wrap;
}

.ai-kiki-panel__notice {
  color: #64748b;
  font-weight: 800;
}

.ai-lesson-upsell {
  margin: 0 0 16px;
  padding: 16px 18px;
  border: 1px solid #bfdbfe;
  border-radius: 16px;
  background: linear-gradient(135deg, #eff6ff 0%, #ffffff 72%);
}

.ai-lesson-upsell__eyebrow {
  margin: 0 0 6px;
  color: #2563eb;
  font-size: 12px;
  font-weight: 900;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.ai-lesson-upsell__text {
  margin: 0 0 12px;
  color: #334155;
  font-size: 14px;
  line-height: 1.65;
}

.ai-lesson-upsell .ai-lesson-btn--primary {
  width: 100%;
}

.ai-lesson-player__footer,
.ai-lesson-next-links__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: flex-end;
}

.ai-lesson-next-links {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 18px;
}

.ai-lesson-next-links__actions {
  justify-content: space-between;
}

.ai-sample-complete-modal {
  position: fixed;
  inset: 0;
  z-index: 12000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: max(16px, env(safe-area-inset-top, 0px)) 16px max(16px, env(safe-area-inset-bottom, 0px));
  box-sizing: border-box;
  opacity: 0;
  transition: opacity 0.25s ease;
}

.ai-sample-complete-modal.is-visible {
  opacity: 1;
}

.ai-sample-complete-modal[hidden] {
  display: none !important;
}

.ai-sample-complete-modal__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(2, 6, 23, 0.62);
  opacity: 0;
  transition: opacity 0.25s ease;
}

.ai-sample-complete-modal.is-visible .ai-sample-complete-modal__backdrop {
  opacity: 1;
}

.ai-sample-complete-modal__dialog {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  width: min(92vw, 560px);
  max-height: 90vh;
  max-height: min(90vh, 90dvh);
  padding: 28px 28px 24px;
  border-radius: 24px;
  background: #fff;
  box-shadow: 0 20px 48px rgba(15, 23, 42, 0.22);
  box-sizing: border-box;
  overflow: hidden;
  opacity: 0;
  transform: translateY(10px) scale(0.98);
  transition: opacity 0.25s ease, transform 0.25s ease;
}

.ai-sample-complete-modal.is-visible .ai-sample-complete-modal__dialog {
  opacity: 1;
  transform: translateY(0) scale(1);
}

.ai-sample-complete-modal__title {
  flex-shrink: 0;
  margin: 0 0 16px;
  padding: 0;
  color: #0f172a;
  font-size: 20px;
  font-weight: 800;
  line-height: 1.35;
  letter-spacing: -0.02em;
}

.ai-sample-complete-modal__dialog [data-lesson-complete-body] {
  flex: 1 1 auto;
  min-height: 0;
  margin: 0 0 24px;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

.ai-sample-complete-modal__body {
  margin: 0 0 10px;
  color: #475569;
  font-size: 16px;
  line-height: 1.7;
}

.ai-sample-complete-modal__body:last-child {
  margin-bottom: 0;
}

.ai-sample-complete-modal__actions {
  flex-shrink: 0;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  gap: 12px;
  margin: 0;
  padding: 0;
}

.ai-sample-complete-modal__actions .ai-lesson-btn {
  flex: 1 1 calc(50% - 6px);
  min-width: 140px;
  min-height: 52px;
  padding: 12px 20px;
  border-radius: 999px;
  font-size: 17px;
  font-weight: 700;
  text-decoration: none;
  box-sizing: border-box;
}

.ai-sample-complete-modal__actions .ai-lesson-btn--primary {
  border: 1px solid #2563eb;
  background: #2563eb;
  color: #fff;
}

.ai-sample-complete-modal__actions .ai-lesson-btn--ghost {
  border: 1px solid #e2e8f0;
  background: #f8fafc;
  color: #334155;
}

body.ai-sample-complete-modal-open {
  overflow: hidden;
}

@media (max-width: 640px) {
  .ai-sample-complete-modal {
    padding: max(12px, env(safe-area-inset-top, 0px)) 12px max(12px, env(safe-area-inset-bottom, 0px));
  }

  .ai-sample-complete-modal__dialog {
    width: calc(100vw - 24px);
    max-height: 88vh;
    max-height: min(88vh, 88dvh);
    padding: 22px 18px 18px;
    border-radius: 20px;
  }

  .ai-sample-complete-modal__title {
    margin: 0 0 14px;
    font-size: 18px;
  }

  .ai-sample-complete-modal__dialog [data-lesson-complete-body] {
    margin-bottom: 20px;
  }

  .ai-sample-complete-modal__body {
    font-size: 15px;
    line-height: 1.6;
  }

  .ai-sample-complete-modal__actions {
    flex-direction: column;
    gap: 10px;
    padding-bottom: env(safe-area-inset-bottom, 0px);
  }

  .ai-sample-complete-modal__actions .ai-lesson-btn {
    flex: 1 1 auto;
    width: 100%;
    min-width: 0;
    min-height: 48px;
    font-size: 16px;
  }
}

.ai-lesson-resume-modal {
  position: fixed;
  inset: 0;
  z-index: 11950;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px 16px;
}

.ai-lesson-resume-modal[hidden] {
  display: none !important;
}

.ai-lesson-resume-modal__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(15, 23, 42, 0.5);
}

.ai-lesson-resume-modal__dialog {
  position: relative;
  z-index: 1;
  width: min(100%, 420px);
  padding: 24px 22px 20px;
  border-radius: 18px;
  background: #fff;
  box-shadow: 0 20px 56px rgba(15, 23, 42, 0.24);
}

.ai-lesson-resume-modal__title {
  margin: 0 0 10px;
  font-size: 1.12rem;
  font-weight: 700;
  color: #0f172a;
}

.ai-lesson-resume-modal__body {
  margin: 0 0 18px;
  font-size: 0.94rem;
  line-height: 1.55;
  color: #475569;
}

.ai-lesson-resume-modal__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: flex-end;
}

.ai-lesson-resume-modal__actions .ai-lesson-btn {
  min-width: 118px;
}

body.ai-lesson-resume-modal-open {
  overflow: hidden;
}

@media (max-width: 768px) {
  .ai-lesson-resume-modal {
    padding: 12px;
    align-items: flex-end;
  }

  .ai-lesson-resume-modal__dialog {
    width: 100%;
    max-height: calc(100vh - 24px);
    overflow: auto;
    padding: 22px 18px 18px;
    border-radius: 18px 18px 14px 14px;
  }

  .ai-lesson-resume-modal__title {
    font-size: 18px;
  }

  .ai-lesson-resume-modal__body {
    font-size: 14px;
  }

  .ai-lesson-resume-modal__actions {
    flex-direction: column;
  }

  .ai-lesson-resume-modal__actions .ai-lesson-btn {
    width: 100%;
  }
}

.ai-lesson-next-notice {
  margin: 0;
  padding: 10px 12px;
  border-radius: 12px;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  color: #475569;
  font-size: 13px;
  font-weight: 800;
  line-height: 1.5;
}

.ai-lesson-next-links a {
  color: #2563eb;
  font-weight: 800;
  text-decoration: none;
}

.ai-lesson-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 44px;
  padding: 11px 18px;
  border: 0;
  border-radius: 999px;
  font-weight: 900;
  text-decoration: none;
}

.ai-lesson-btn--primary {
  background: #2563eb;
  color: #fff;
}

.ai-lesson-btn--success {
  background: #16a34a;
  color: #fff;
}

.ai-lesson-btn--ghost {
  border: 1px solid #cbd5e1;
  background: #fff;
  color: #334155;
}

.ai-lesson-btn[disabled] {
  opacity: 0.45;
  cursor: not-allowed;
}

.ai-lesson-btn:focus-visible,
.ai-lesson-choice:focus-visible,
[data-copy-prompt]:focus-visible,
[data-narration-play]:focus-visible,
[data-narration-stop]:focus-visible {
  outline: 2px solid #38bdf8;
  outline-offset: 2px;
}

.ai-lesson-btn--sm {
  min-height: 34px;
  padding: 7px 12px;
  font-size: 12px;
}

@media (max-width: 992px) {
  .ai-player-layout,
  .ai-lesson-shell {
    grid-template-columns: 1fr;
  }

  .ai-lesson-player {
    order: 1;
  }

  .ai-player-sidebar,
  .ai-lesson-sidebar {
    position: static;
    top: auto;
    max-height: none;
    order: 2;
  }

  .ai-lesson-sidebar__list {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    max-height: 240px;
  }
}

@media (max-width: 640px) {
  .ai-lesson-page .container-fluid {
    padding-right: 10px;
    padding-left: 10px;
  }

  .ai-lesson-breadcrumb {
    gap: 6px;
    font-size: 12px;
  }

  .ai-lesson-player {
    padding: 14px;
    border-radius: 18px;
  }

  .slide-actions,
  .ai-lesson-card__nav {
    flex-direction: column;
    align-items: stretch;
  }

  .slide-actions__buttons,
  .ai-lesson-card__nav-actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .ai-lesson-player__header {
    flex-direction: column;
    gap: 12px;
  }

  .ai-lesson-player__header h1 {
    font-size: clamp(24px, 7vw, 34px);
  }

  .ai-lesson-score {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
  }

  .ai-lesson-btn {
    width: 100%;
    min-width: 0;
  }

  .ai-lesson-card {
    padding: 20px;
    border-radius: 20px;
  }

  .ai-lesson-card h2 {
    font-size: clamp(24px, 8vw, 32px);
  }

  .ai-lesson-card p {
    font-size: 16px;
  }

  .ai-kiki-panel {
    padding: 14px;
    border-radius: 18px;
  }

  .ai-kiki-panel__head {
    flex-direction: column;
  }

  .ai-kiki-panel__actions {
    display: grid;
    grid-template-columns: 1fr;
    width: 100%;
  }

  .ai-lesson-choice-list {
    grid-template-columns: 1fr;
  }

  .ai-lesson-code-input {
    min-height: 260px;
  }

  .ai-code-preview__frame {
    min-height: 300px;
  }

  .ai-code-preview__head {
    align-items: flex-start;
    flex-direction: column;
  }

  .ai-code-preview__mode {
    margin-right: 0;
  }

  .ai-lesson-mission-input {
    min-height: 200px;
  }

  .ai-lesson-actions,
  .ai-lesson-next-links__actions {
    display: grid;
    grid-template-columns: 1fr;
  }

  .ai-lesson-upsell .ai-lesson-btn--primary {
    min-height: 48px;
  }
}

/* ===== 집중형 플레이어 모드 (ai_player_layout) — 2열: 목차 + 본문 ===== */
body.ai-player-mode {
  margin: 0;
  overflow: hidden;
  background: #081120;
}

body.ai-player-mode footer,
body.ai-player-mode .c-sidebar,
body.ai-player-mode .c-header,
body.ai-player-mode .cc-user-dash-sidebar {
  display: none !important;
}

.ai-player-shell {
  --ai-player-viewport-h: 100dvh;
  --ai-player-admin-nav-stack: 0px;
  --ai-player-header-stack: 56px;
  --ai-player-progress-stack: 28px;
  --ai-player-footer-stack: 64px;
  --ai-player-chrome-stack: calc(
    var(--ai-player-admin-nav-stack) +
    var(--ai-player-header-stack) +
    var(--ai-player-progress-stack) +
    var(--ai-player-footer-stack)
  );
  --ai-player-available-height: calc(var(--ai-player-viewport-h) - var(--ai-player-admin-nav-stack));
  --ai-slide-content-height: calc(
    var(--ai-player-available-height) -
    var(--ai-player-header-stack) -
    var(--ai-player-progress-stack) -
    var(--ai-player-footer-stack)
  );
  --ai-slide-content-min: 280px;
  --ai-slide-canvas-safe-inline: clamp(16px, 2.2vw, 36px);
  --ai-slide-canvas-safe-block: clamp(10px, 1.4vh, 24px);
  --ai-slide-canvas-safe-top: var(--ai-slide-canvas-safe-block);
  --ai-slide-stage-nav-safe-inline: 0px;
  --ai-slide-stage-nav-safe-bottom: 0px;
  --ai-player-chrome-footer-reserve: 0px;
  --ai-slide-content-max-w: min(1520px, calc(100% - (var(--ai-slide-canvas-safe-inline) * 2) - (var(--ai-slide-stage-nav-safe-inline) * 2)));
  /* Responsive chrome (admin + player shared) */
  --ai-header-pad-block: 8px;
  --ai-header-pad-inline: 12px;
  --ai-topbar-gap: 12px;
  --ai-topbar-lesson-size: clamp(17px, 2vw, 22px);
  --ai-topbar-course-size: 11px;
  --ai-topbar-btn-pad-y: 6px;
  --ai-topbar-btn-pad-x: 12px;
  --ai-topbar-btn-font: 13px;
  --ai-status-font-size: 13px;
  /* Lesson presentation typography (normal / play-preview / edit) */
  --lesson-present-h1: clamp(32px, 3.2vw, 52px);
  --lesson-present-title: clamp(24px, 2.6vw, 36px);
  --lesson-present-heading: clamp(28px, 2.5vw, 40px);
  --lesson-present-body: clamp(18px, 1.5vw, 26px);
  --lesson-present-small: clamp(15px, 1.1vw, 19px);
  --lesson-present-table: clamp(17px, 1.2vw, 22px);
  --lesson-present-cell-pad-y: clamp(12px, 1vh, 18px);
  --lesson-present-cell-pad-x: clamp(14px, 1.2vw, 18px);
  --lesson-present-slide-pad-top: clamp(12px, 2vh, 28px);
  --lesson-present-slide-pad-block: clamp(14px, 1.8vh, 24px);
  --lesson-present-slide-pad-inline: clamp(20px, 2.4vw, 36px);
  --lesson-present-screen-gap: clamp(12px, 1.5vh, 20px);
  --lesson-present-visual-min: min(320px, 50vh);
  /* Shared top chrome height — sidebar brand + learning header align (matches dashboard .c-sidebar-brand) */
  --player-header-height: 96px;
  --player-sidebar-width: 288px;
  display: grid;
  grid-template-columns: var(--player-sidebar-width) minmax(0, 1fr);
  grid-template-rows: minmax(0, 1fr);
  height: 100dvh;
  min-height: 100dvh;
  max-height: 100dvh;
  background: #081120;
  color: #e2e8f0;
  position: relative;
  overflow: hidden;
}

/* 왼쪽 Lesson 목차 — 데스크탑 기본 open */
.ai-player-shell > .ai-player-sidebar {
  grid-row: 1;
  grid-column: 1;
  position: relative;
  top: auto;
  max-height: none;
  height: 100%;
  align-self: stretch;
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  padding: 0;
  border-right: 1px solid rgba(255, 255, 255, 0.08);
  background: #0f1b2d;
}

/* Brand row — flush top, fixed chrome (dashboard .c-sidebar-brand) */
.ai-player-shell > .ai-player-sidebar > .ai-player-sidebar__brand {
  box-sizing: border-box;
  flex: 0 0 auto;
  flex-shrink: 0;
  height: var(--player-header-height);
  min-height: var(--player-header-height);
  max-height: var(--player-header-height);
  display: flex;
  align-items: center;
  justify-content: flex-start;
  padding: 0 16px;
  margin: 0;
  border-bottom: 1px solid rgba(148, 163, 184, 0.18);
  background: #0a1424;
}

.ai-player-shell > .ai-player-sidebar .ai-player-sidebar__brand-link {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  width: auto;
  max-width: 100%;
  height: 100%;
  text-decoration: none;
  line-height: 0;
}

.ai-player-shell > .ai-player-sidebar .ai-player-sidebar__logo {
  display: block;
  width: auto;
  max-width: 120px;
  height: auto;
  max-height: 52px;
  object-fit: contain;
  object-position: left center;
}

/* Lessons section — title + scrollable list (separate from brand) */
.ai-player-shell > .ai-player-sidebar > .ai-player-sidebar__lessons {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.ai-player-shell > .ai-player-sidebar .ai-player-sidebar__title {
  flex: 0 0 auto;
  flex-shrink: 0;
  margin: 0;
  padding: 14px 16px 10px;
  border-bottom: 1px solid rgba(148, 163, 184, 0.1);
  font-size: 14px;
  font-weight: 900;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #94a3b8;
  line-height: 1.3;
}

.ai-player-shell > .ai-player-sidebar .ai-player-sidebar__admin-mark {
  flex: 0 0 auto;
  margin: 0 16px 8px;
  align-self: flex-start;
}

.ai-player-shell > .ai-player-sidebar .ai-player-sidebar__list {
  list-style: none;
  margin: 0;
  padding: 8px 16px 24px;
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

.ai-player-sidebar__list > li + li {
  margin-top: 6px;
}

.ai-player-lesson-item {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 12px 14px;
  border-radius: 14px;
  border: 1px solid transparent;
  color: #cbd5e1;
  font-weight: 700;
  text-decoration: none;
  transition: background 0.15s ease, border-color 0.15s ease;
}

.ai-player-lesson-item__title {
  flex: 1 1 auto;
  min-width: 0;
  line-height: 1.4;
  font-size: 14px;
  font-weight: 600;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  word-break: keep-all;
  overflow-wrap: anywhere;
}

.ai-player-lesson-item__status,
.ai-player-lesson-item__badge {
  flex: 0 0 auto;
  align-self: center;
  margin-left: auto;
  padding-left: 8px;
  font-size: 11px;
  font-style: normal;
  font-weight: 800;
  color: #94a3b8;
  white-space: nowrap;
  line-height: 1.2;
}

.ai-player-lesson-item__badge--sample {
  color: #22c55e;
}

.ai-player-lesson-item:hover {
  background: rgba(59, 130, 246, 0.1);
  color: #e2e8f0;
}

.ai-player-lesson-item.is-active {
  background: rgba(59, 130, 246, 0.14);
  border-color: rgba(59, 130, 246, 0.45);
  color: #f8fafc;
}

.ai-player-lesson-item.is-completed .ai-player-lesson-item__status,
.ai-player-lesson-item.is-completed .ai-player-lesson-item__badge {
  color: #4ade80;
}

.ai-player-lesson-item.is-locked {
  opacity: 0.45;
  cursor: not-allowed;
}

.ai-player-lesson-item.is-locked[data-lock-reason="purchase"] {
  cursor: pointer;
}

/* 오른쪽 본문 영역 */
.ai-player-content {
  grid-row: 1;
  grid-column: 2;
  min-width: 0;
  min-height: 0;
  height: 100%;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: #081120;
  position: relative;
}

.ai-player-main-header {
  flex-shrink: 0;
  padding: var(--ai-header-pad-block) var(--ai-header-pad-inline) 0;
  padding-top: calc(var(--ai-header-pad-block) + env(safe-area-inset-top, 0px));
  border-bottom: 1px solid rgba(148, 163, 184, 0.12);
}

.ai-player-main-header:not(.ai-player-top-overlay) {
  position: relative;
}

.ai-player-main-inner {
  width: 100%;
  max-width: 1600px;
  margin: 0 auto;
}

.ai-player-main-inner--header {
  padding-bottom: 8px;
}

.ai-player-topbar {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, min(100%, 760px)) minmax(0, 1fr);
  align-items: center;
  column-gap: var(--ai-topbar-gap);
}

.ai-player-topbar__left,
.ai-player-topbar__right {
  display: flex;
  align-items: center;
  gap: 10px;
}

.ai-player-topbar__left {
  grid-column: 1;
  justify-self: start;
  min-width: 0;
  flex-wrap: nowrap;
}

.ai-player-topbar__right {
  grid-column: 3;
  justify-self: end;
  flex-wrap: wrap;
}

.ai-player-topbar__center {
  grid-column: 2;
  justify-self: center;
  width: 100%;
  min-width: 0;
  text-align: center;
}

.ai-player-topbar__title-block {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  width: 100%;
  min-width: 0;
}

.ai-player-topbar__course {
  margin: 0 0 4px;
  color: #cbd5e1;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: 0.01em;
  opacity: 0.85;
  max-width: 100%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.ai-player-topbar__lesson {
  margin: 0 0 8px;
  color: #f8fafc;
  font-size: clamp(20px, 2.4vw, 24px);
  font-weight: 700;
  line-height: 1.25;
  max-width: 100%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.ai-player-topbar__dots.ai-slide-progress__dots {
  margin-top: 0;
  justify-content: center;
  align-items: center;
  width: 100%;
}

.ai-player-topbar__link {
  color: #e2e8f0;
  font-size: 13px;
  font-weight: 800;
  text-decoration: none;
}

.ai-player-topbar__btn:not(.ai-player-topbar__btn--back):not(.ai-player-topbar__btn--fullscreen):not(.ai-player-topbar__btn--slide-edit) {
  display: none;
  padding: var(--ai-topbar-btn-pad-y) var(--ai-topbar-btn-pad-x);
  border: 1px solid rgba(148, 163, 184, 0.35);
  border-radius: 999px;
  background: rgba(30, 41, 59, 0.8);
  color: #e2e8f0;
  font-size: var(--ai-topbar-btn-font);
  font-weight: 800;
  cursor: pointer;
}

.ai-player-topbar__btn--menu {
  display: none;
}

.ai-player-topbar__btn--fullscreen {
  display: inline-flex;
}

.ai-admin-menu {
  position: relative;
}

.ai-admin-menu__toggle {
  border: 1px solid rgba(148, 163, 184, 0.35);
  border-radius: 999px;
  background: rgba(15, 23, 42, 0.75);
  color: #e2e8f0;
  font-size: 12px;
  font-weight: 800;
  padding: 7px 11px;
}

.ai-admin-menu__panel {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  min-width: 210px;
  border-radius: 12px;
  border: 1px solid rgba(148, 163, 184, 0.3);
  background: #0f172a;
  box-shadow: 0 16px 30px rgba(0, 0, 0, 0.35);
  padding: 8px;
  z-index: 40;
}

.ai-admin-menu__item {
  display: block;
  width: 100%;
  text-align: left;
  color: #e2e8f0;
  font-size: 13px;
  font-weight: 700;
  text-decoration: none;
  padding: 8px 10px;
  border: 0;
  border-radius: 8px;
  background: transparent;
}

.ai-admin-menu__item:hover {
  background: rgba(59, 130, 246, 0.2);
}

.ai-admin-menu__item--button {
  cursor: pointer;
}

.ai-admin-menu__meta {
  margin: 6px 10px;
  color: #94a3b8;
  font-size: 11px;
  font-weight: 700;
}

/* —— Fullscreen: slide card is the presentation root —— */
body.ai-lesson-fullscreen-active {
  overflow: hidden;
  background: #050b16;
}

body.ai-lesson-fullscreen-active .ai-player-shell,
.ai-player-shell.is-fullscreen-mode {
  display: block;
  width: 100vw;
  height: 100vh;
  max-width: none;
  max-height: none;
  grid-template-columns: 1fr;
  background: #050b16;
}

body.ai-lesson-fullscreen-active .ai-player-content,
.ai-player-shell.is-fullscreen-mode .ai-player-content {
  width: 100vw;
  height: 100vh;
  min-height: 0;
  background: #050b16;
}

body.ai-lesson-fullscreen-active .ai-player-main,
.ai-player-shell.is-fullscreen-mode .ai-player-main {
  width: 100vw;
  height: 100vh;
  padding: 0;
  margin: 0;
}

body.ai-lesson-fullscreen-active .ai-player-main .ai-player-main-inner,
.ai-player-shell.is-fullscreen-mode .ai-player-main .ai-player-main-inner {
  width: 100%;
  height: 100%;
  max-width: none;
  margin: 0;
  padding: 0;
  grid-template-rows: auto minmax(0, 1fr);
}

body.ai-lesson-fullscreen-active .ai-slide-card,
.ai-player-shell.is-fullscreen-mode .ai-slide-card {
  max-width: none;
  width: 100%;
  height: 100%;
  min-height: 0;
}

.ai-slide-card__fs-header {
  display: none;
  flex-shrink: 0;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 56px;
  max-height: 72px;
  padding: 10px 16px 10px 20px;
  border-bottom: 1px solid rgba(148, 163, 184, 0.2);
  background: #0f172a;
  color: #e2e8f0;
  box-sizing: border-box;
}

.ai-slide-card__fs-header-main {
  min-width: 0;
  flex: 1 1 auto;
}

.ai-slide-card__fs-title {
  margin: 0;
  color: #f8fafc;
  font-size: clamp(15px, 2vw, 20px);
  font-weight: 900;
  line-height: 1.25;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.ai-slide-card__fs-meta {
  margin: 4px 0 0;
  color: #94a3b8;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.3;
}

.ai-slide-card__fs-exit {
  flex-shrink: 0;
  padding: 8px 14px;
  border: 1px solid rgba(148, 163, 184, 0.4);
  border-radius: 999px;
  background: rgba(30, 41, 59, 0.9);
  color: #e2e8f0;
  font-size: 12px;
  font-weight: 800;
  cursor: pointer;
}

.ai-slide-card__fs-exit:hover {
  background: rgba(51, 65, 85, 0.95);
}

.ai-slide-card.is-theater-fullscreen {
  position: fixed;
  inset: 0;
  z-index: 10050;
  width: 100vw;
  height: 100vh;
  max-width: none;
  max-height: none;
  margin: 0;
  border-radius: 0;
}

.ai-slide-card:fullscreen,
.ai-slide-card:-webkit-full-screen,
.ai-slide-card.is-theater-fullscreen.is-fullscreen-active {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  width: 100vw;
  height: 100vh;
  max-width: none;
  max-height: none;
  margin: 0;
  border-radius: 0;
  border: 0;
  box-shadow: none;
  background: #f8fafc;
  overflow: hidden;
}

.ai-slide-card:fullscreen .ai-slide-card__fs-header,
.ai-slide-card:-webkit-full-screen .ai-slide-card__fs-header,
.ai-slide-card.is-theater-fullscreen.is-fullscreen-active .ai-slide-card__fs-header {
  display: flex;
  grid-row: 1;
}

.ai-slide-card:fullscreen .ai-player-stage__viewport,
.ai-slide-card:-webkit-full-screen .ai-player-stage__viewport,
.ai-slide-card.is-theater-fullscreen.is-fullscreen-active .ai-player-stage__viewport {
  grid-row: 2;
  width: min(96vw, 1680px);
  height: calc(100vh - 96px);
  min-height: calc(100vh - 96px);
  max-height: calc(100vh - 96px);
  margin: 0 auto;
  position: relative;
  display: flex;
  flex-direction: column;
  background: #f8fafc;
  border-radius: 18px;
  overflow: hidden;
}

.ai-slide-card:fullscreen .ai-kiki-character,
.ai-slide-card:-webkit-full-screen .ai-kiki-character,
.ai-slide-card.is-theater-fullscreen .ai-kiki-character {
  display: flex;
}

/* JS fallback for environments where media query width is inconsistent */
.ai-player-shell.is-mobile-layout {
  grid-template-columns: 1fr;
}

.ai-player-shell.is-mobile-layout .ai-player-sidebar {
  position: fixed;
  left: 0;
  top: 0;
  bottom: 0;
  z-index: 50;
  width: min(300px, 88vw);
  transform: translateX(-100%);
  transition: transform 0.2s ease;
  box-shadow: 8px 0 28px rgba(0, 0, 0, 0.4);
  visibility: hidden;
  pointer-events: none;
}

.ai-player-shell.is-mobile-layout.is-sidebar-open .ai-player-sidebar {
  transform: translateX(0);
  visibility: visible;
  pointer-events: auto;
}

.ai-player-shell.is-mobile-layout .ai-player-topbar__btn--menu {
  display: inline-flex;
}

.ai-player-shell.is-mobile-layout .ai-player-content {
  grid-column: 1;
}

/* Keep desktop 2-column chrome when JS mobile heuristic fires below 1025px */
@media (min-width: 769px) {
  .ai-player-shell.is-mobile-layout {
    grid-template-columns: var(--player-sidebar-width) minmax(0, 1fr);
  }

  .ai-player-shell.is-mobile-layout .ai-player-sidebar {
    position: relative;
    left: auto;
    top: auto;
    bottom: auto;
    z-index: auto;
    width: auto;
    max-width: none;
    transform: none;
    visibility: visible;
    pointer-events: auto;
    box-shadow: none;
  }

  .ai-player-shell.is-mobile-layout .ai-player-content {
    grid-column: 2;
  }

  .ai-player-shell.is-mobile-layout .ai-player-topbar__btn--menu {
    display: none;
  }
}

.ai-player-badge {
  display: inline-flex;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 900;
}

.ai-player-badge--admin {
  background: #fef3c7;
  color: #92400e;
}

.ai-player-status {
  color: #cbd5e1;
  font-size: var(--ai-status-font-size);
  font-weight: 800;
}

.ai-player-main {
  position: relative;
  flex: 1 1 auto;
  min-width: 0;
  min-height: 0;
  height: 100%;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: stretch;
  align-items: stretch;
  padding: 0;
}

.ai-player-content > .ai-player-main {
  flex: 1 1 auto;
  min-height: 0;
}

.ai-player-main .ai-player-main-inner {
  width: 100%;
  max-width: none;
  flex: 1 1 auto;
  min-height: 0;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: flex-start;
  gap: 0;
}

/* Main slide content must stay visible — header is a fixed learning chrome bar */
.ai-player-main,
.ai-player-stage,
.ai-slide-card,
.ai-player-stage__viewport,
.slide-content,
.ai-slide-content,
.ai-slide-body,
.ai-slide-stage,
.ai-slide-media,
.ai-slide-visual,
.ai-slide-video,
.ai-slide-image {
  visibility: visible;
}

.ai-player-stage__viewport:not(.is-fade-out):not(.is-slide-out):not(.is-zoom-out) {
  opacity: 1;
}

/* Main column — header (chrome) vs content (stage) */
.ai-player-shell .ai-player-main__header {
  flex: 0 0 auto;
  flex-shrink: 0;
  min-height: 0;
  z-index: 30;
}

.ai-player-shell .ai-player-main__content {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  overflow: hidden;
  background: transparent;
  box-sizing: border-box;
}

.ai-player-main-header--learning {
  flex: 0 0 auto;
  flex-shrink: 0;
  height: var(--player-header-height);
  min-height: var(--player-header-height);
  max-height: var(--player-header-height);
}

.ai-player-shell .ai-player-main__content > .ai-player-stage,
.ai-player-shell .ai-player-main__content > .ai-slide-card.ai-player-stage {
  flex: 1 1 auto;
  min-height: 0;
}

/* ═══ Player content canvas (student shell — dark chrome, minimal gutter) ═══ */
.ai-player-shell:not(.is-admin-slide-mode) .ai-player-content,
.ai-player-shell:not(.is-admin-slide-mode) .ai-player-main,
.ai-player-shell:not(.is-admin-slide-mode) .ai-player-main .ai-player-main-inner {
  height: 100%;
  min-height: 0;
  background: #081120;
}

.ai-player-shell:not(.is-admin-slide-mode) .ai-player-main:has(.ai-player-main-header--learning) {
  padding-left: 0;
  padding-right: 0;
}

.ai-player-shell:not(.is-admin-slide-mode) .ai-player-main .ai-player-main-inner {
  max-width: none;
  margin: 0;
}

.ai-player-shell:not(.is-admin-slide-mode) .ai-player-main__content {
  padding: 14px;
}

/* Stage fills content — no outer white card frame */
.ai-player-shell:not(.is-admin-slide-mode) .ai-slide-card.ai-player-stage {
  flex: 1 1 auto;
  min-height: 0;
  width: 100%;
  max-width: none;
  margin: 0;
  border: 0;
  border-radius: 10px;
  background: transparent;
  color: #e2e8f0;
  box-shadow: none;
  overflow: hidden;
}

/* Media slides: card shell stays white; inner layout fills card */
.ai-player-shell:not(.is-admin-slide-mode) .ai-slide-card--video-layout,
.ai-player-shell:not(.is-admin-slide-mode) .ai-slide-card--image-layout,
.ai-player-shell:not(.is-admin-slide-mode) .ai-slide-card[data-layout="video"],
.ai-player-shell:not(.is-admin-slide-mode) .ai-slide-card[data-layout="image"],
.ai-player-shell:not(.is-admin-slide-mode) .ai-slide-card:has(.dedicated-slide-layout--media-focus) {
  --ai-slide-content-max-w: none;
  --ai-slide-image-max-h: none;
  --ai-slide-image-focus-max-h: 100%;
  --lesson-slide-image-box-h: 100%;
}

.ai-player-shell:not(.is-admin-slide-mode) .ai-slide-card:has(.dedicated-slide-layout--media-focus) .slide-content,
.ai-player-shell:not(.is-admin-slide-mode) .ai-slide-card--video-layout .slide-content,
.ai-player-shell:not(.is-admin-slide-mode) .ai-slide-card--image-layout .slide-content,
.ai-player-shell:not(.is-admin-slide-mode) .ai-slide-card[data-layout="video"] .slide-content,
.ai-player-shell:not(.is-admin-slide-mode) .ai-slide-card[data-layout="image"] .slide-content {
  --ai-slide-canvas-safe-inline: 0px;
  --ai-slide-canvas-safe-block: 0px;
  --ai-slide-canvas-safe-top: 0px;
  padding: 0;
  align-items: stretch;
  justify-content: stretch;
  gap: 0;
  overflow: hidden;
}

.ai-player-shell:not(.is-admin-slide-mode) .ai-slide-card .slide-content > .dedicated-slide-layout--media-focus,
.ai-player-shell:not(.is-admin-slide-mode) .ai-slide-card--video-layout .slide-content > .video-slide-layout,
.ai-player-shell:not(.is-admin-slide-mode) .ai-slide-card--image-layout .slide-content > .image-slide-layout,
.ai-player-shell:not(.is-admin-slide-mode) .ai-slide-card[data-layout="video"] .slide-content > .dedicated-slide-layout,
.ai-player-shell:not(.is-admin-slide-mode) .ai-slide-card[data-layout="image"] .slide-content > .dedicated-slide-layout {
  width: 100%;
  max-width: none;
  height: 100%;
  flex: 1 1 auto;
  min-height: 0;
  margin: 0;
}

/* Dark letterbox — media inner only (not card shell) */
.ai-player-shell:not(.is-admin-slide-mode) .dedicated-slide-layout--media-focus .video-slide-layout__player-wrap,
.ai-player-shell:not(.is-admin-slide-mode) .ai-slide-card[data-layout="video"] .video-slide-layout__player-wrap,
.ai-player-shell:not(.is-admin-slide-mode) .ai-slide-card--video-layout .video-slide-layout__player-wrap {
  flex: 1 1 auto;
  min-height: 0;
  width: 100%;
  max-width: none;
  margin: 0;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: center;
  background: #0c1628;
}

.ai-player-shell:not(.is-admin-slide-mode) .dedicated-slide-layout--media-focus .video-slide-layout__presentation,
.ai-player-shell:not(.is-admin-slide-mode) .dedicated-slide-layout--media-focus .video-slide-layout__presentation-stage,
.ai-player-shell:not(.is-admin-slide-mode) .ai-slide-card[data-layout="video"] .video-slide-layout__presentation,
.ai-player-shell:not(.is-admin-slide-mode) .ai-slide-card[data-layout="video"] .video-slide-layout__presentation-stage,
.ai-player-shell:not(.is-admin-slide-mode) .ai-slide-card--video-layout .video-slide-layout__presentation-stage {
  flex: 1 1 auto;
  min-height: 0;
  width: 100%;
  max-width: none;
  max-height: none;
  margin: 0 auto;
  aspect-ratio: auto;
  border-radius: 0;
  border: 0;
  background: #0c1628;
  overflow: hidden;
}

.ai-player-shell:not(.is-admin-slide-mode) .dedicated-slide-layout--media-focus .video-slide-layout__player-wrap .ai-lesson-video-player,
.ai-player-shell:not(.is-admin-slide-mode) .dedicated-slide-layout--media-focus .video-slide-layout__presentation-layer--video .ai-lesson-video-player,
.ai-player-shell:not(.is-admin-slide-mode) .ai-slide-card[data-layout="video"] .video-slide-layout__player-wrap .ai-lesson-video-player,
.ai-player-shell:not(.is-admin-slide-mode) .ai-slide-card--video-layout .video-slide-layout__player-wrap .ai-lesson-video-player {
  display: block;
  width: 100%;
  height: 100%;
  max-width: 100%;
  max-height: 100%;
  aspect-ratio: auto;
  margin: 0 auto;
  border-radius: 0;
  border: 0;
  object-fit: contain;
  object-position: center center;
  background: #020617;
}

/* Desktop media stage — width-first 16:9 box inside main column (not height-stretched mobile card) */
.ai-player-shell:not(.is-admin-slide-mode) .video-slide-layout__player-wrap,
.ai-player-shell:not(.is-admin-slide-mode) .dedicated-slide-layout--media-focus .video-slide-layout__player-wrap,
.ai-player-shell:not(.is-admin-slide-mode) .ai-slide-card[data-layout="video"] .video-slide-layout__player-wrap,
.ai-player-shell:not(.is-admin-slide-mode) .ai-slide-card--video-layout .video-slide-layout__player-wrap {
  flex: 1 1 auto;
  min-height: 0;
  width: 100%;
  max-width: 100%;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: center;
}

.ai-player-shell:not(.is-admin-slide-mode) .dedicated-slide-layout--media-focus .video-slide-layout__presentation,
.ai-player-shell:not(.is-admin-slide-mode) .ai-slide-card[data-layout="video"] .video-slide-layout__presentation,
.ai-player-shell:not(.is-admin-slide-mode) .ai-slide-card--video-layout .video-slide-layout__presentation {
  flex: 0 1 auto;
  width: 100%;
  max-width: 100%;
  min-height: 0;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: center;
}

.ai-player-shell:not(.is-admin-slide-mode) .dedicated-slide-layout--media-focus .video-slide-layout__presentation-stage,
.ai-player-shell:not(.is-admin-slide-mode) .ai-slide-card[data-layout="video"] .video-slide-layout__presentation-stage,
.ai-player-shell:not(.is-admin-slide-mode) .ai-slide-card--video-layout .video-slide-layout__presentation-stage {
  box-sizing: border-box;
  flex: 0 1 auto;
  width: 100%;
  max-width: 100%;
  height: auto;
  max-height: min(72vh, 100%);
  aspect-ratio: 16 / 9;
  margin: 0 auto;
  border-radius: 0;
  border: 0;
  overflow: hidden;
  background: #0c1628;
}

.ai-player-shell:not(.is-admin-slide-mode) .dedicated-slide-layout--media-focus .ai-media-video,
.ai-player-shell:not(.is-admin-slide-mode) .ai-slide-card[data-layout="video"] .ai-media-video,
.ai-player-shell:not(.is-admin-slide-mode) .ai-slide-card--video-layout .ai-media-video {
  box-sizing: border-box;
  flex: 0 1 auto;
  width: 100%;
  max-width: 100%;
  height: auto;
  max-height: min(72vh, 100%);
  aspect-ratio: 16 / 9;
  margin: 0 auto;
  border-radius: 0;
  border: 0;
  overflow: hidden;
  background: #0c1628;
}

.ai-player-shell:not(.is-admin-slide-mode) .dedicated-slide-layout--media-focus .ai-media-video__player-shell,
.ai-player-shell:not(.is-admin-slide-mode) .ai-slide-card[data-layout="video"] .ai-media-video__player-shell,
.ai-player-shell:not(.is-admin-slide-mode) .ai-slide-card--video-layout .ai-media-video__player-shell {
  width: 100%;
  height: 100%;
  min-height: 0;
  max-width: 100%;
  max-height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.ai-player-shell:not(.is-admin-slide-mode) .dedicated-slide-layout--media-focus .video-slide-layout__presentation-layer--video,
.ai-player-shell:not(.is-admin-slide-mode) .ai-slide-card[data-layout="video"] .video-slide-layout__presentation-layer--video,
.ai-player-shell:not(.is-admin-slide-mode) .ai-slide-card--video-layout .video-slide-layout__presentation-layer--video {
  width: 100%;
  height: 100%;
  min-height: 0;
  max-width: 100%;
  max-height: 100%;
}

.ai-player-shell:not(.is-admin-slide-mode) .dedicated-slide-layout--media-focus .image-slide-layout__hero,
.ai-player-shell:not(.is-admin-slide-mode) .ai-slide-card--image-layout .image-slide-layout__hero,
.ai-player-shell:not(.is-admin-slide-mode) .ai-slide-card[data-layout="image"] .image-slide-layout__hero {
  flex: 1 1 auto;
  min-height: 0;
  height: 100%;
  max-height: none;
  background: #0c1628;
}

.ai-player-shell:not(.is-admin-slide-mode) .ai-slide-card--image-layout .ai-slide-image__img,
.ai-player-shell:not(.is-admin-slide-mode) .ai-slide-card[data-layout="image"] .ai-slide-image__img,
.ai-player-shell:not(.is-admin-slide-mode) .image-slide-layout__hero .ai-slide-image__img,
.ai-player-shell:not(.is-admin-slide-mode) .image-slide-layout__hero img {
  max-height: 100%;
  object-fit: contain;
  object-position: center center;
}

/* Text / interactive slides — light reading surface inside dark player chrome */
.ai-player-shell:not(.is-admin-slide-mode) .ai-slide-card:not(:has(.dedicated-slide-layout--media-focus)):not(.ai-slide-card--video-layout):not(.ai-slide-card--image-layout):not([data-layout="video"]):not([data-layout="image"]) .slide-content {
  flex: 1 1 auto;
  min-height: 0;
  width: 100%;
  align-items: stretch;
  background: #ffffff;
  color: #0f172a;
  border-radius: 10px;
}

@media (max-width: 768px) {
  .ai-player-shell:not(.is-admin-slide-mode) .ai-player-main__content {
    padding: 8px;
  }

  .ai-player-shell:not(.is-admin-slide-mode) .ai-slide-card.ai-player-stage {
    border-radius: 8px;
  }

  .ai-player-shell:not(.is-admin-slide-mode) .ai-slide-card--image-layout .ai-slide-image__img,
  .ai-player-shell:not(.is-admin-slide-mode) .ai-slide-card[data-layout="image"] .ai-slide-image__img,
  .ai-player-shell:not(.is-admin-slide-mode) .image-slide-layout__hero .ai-slide-image__img {
    max-height: 100%;
    width: 100%;
    height: auto;
    object-fit: contain;
  }
}

.ai-slide-progress,
.lesson-progress,
[data-role="ai-lesson-progress"] {
  width: 100%;
  max-width: 100%;
  flex-shrink: 0;
  margin: 0;
  padding: 8px 12px 10px;
  grid-row: 1;
  position: relative;
  z-index: 12;
  box-sizing: border-box;
  background: rgba(248, 250, 252, 0.96);
  border: 0;
  box-shadow: none;
}

/* Progress in top header uses dark chrome styles (see chrome.css) */
.ai-player-topbar__progress.lesson-progress,
.ai-player-topbar__progress[data-role="ai-lesson-progress"] {
  width: auto;
  padding: 0;
  background: transparent;
  grid-row: auto;
}

.lesson-progress::before,
.lesson-progress::after,
[data-role="ai-lesson-progress"]::before,
[data-role="ai-lesson-progress"]::after {
  content: none;
  display: none;
}

.lesson-progress-header,
.ai-slide-progress__meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 8px;
  min-height: 18px;
  font-size: 13px;
  font-weight: 700;
}

.lesson-progress-header__label,
.ai-slide-progress__label {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: #475569;
}

.lesson-progress-header__count,
.ai-slide-progress__count {
  font-size: 13px;
  font-weight: 700;
  color: #0f172a;
  font-variant-numeric: tabular-nums;
}

.lesson-progress-track,
.ai-slide-progress__bar,
[data-player-progress-track] {
  position: relative;
  width: 100%;
  height: 6px;
  border-radius: 999px;
  background: rgba(148, 163, 184, 0.32);
  overflow: hidden;
  border: 0;
  box-shadow: none;
  isolation: isolate;
}

.lesson-progress-bar,
[data-player-progress-bar] {
  position: relative;
  z-index: 1;
  display: block;
  height: 100%;
  width: 0%;
  min-width: 0;
  max-width: 100%;
  border-radius: inherit;
  background-color: #2563eb;
  background-image: linear-gradient(90deg, #2563eb, #3b82f6);
  opacity: 1;
  border: 0;
  box-shadow: none;
  transition: none;
}

.lesson-progress-track.is-empty .lesson-progress-bar,
[data-player-progress-track].is-empty [data-player-progress-bar] {
  transition: none;
}

.lesson-progress-track[hidden],
.ai-slide-progress__bar[hidden],
[data-player-progress-track][hidden] {
  display: none !important;
}

.ai-slide-card {
  grid-row: 2;
  width: 100%;
  height: 100%;
  max-width: none;
  min-height: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  border: 0;
  border-radius: 0;
  background: #f8fafc;
  color: #0f172a;
  box-shadow: none;
  overflow: hidden;
  position: relative;
}

.ai-player-stage__viewport {
  --ai-subtitle-safe-pb: 0px;
  --ai-kiki-subtitle-pad-right: 108px;
  position: relative;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  width: 100%;
  height: 100%;
  min-height: 0;
  max-height: 100%;
  overflow: hidden;
}

.ai-slide-card .slide-content {
  box-sizing: border-box;
  width: 100%;
  height: 100%;
  max-width: none;
  max-height: 100%;
  flex: 1 1 auto;
  min-height: 0;
  overflow-x: hidden;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  transition: opacity 0.2s ease;
  padding: var(--ai-slide-canvas-safe-top) max(var(--ai-slide-canvas-safe-inline), var(--ai-slide-stage-nav-safe-inline)) var(--ai-slide-canvas-safe-block);
  padding-bottom: calc(
    var(--ai-slide-canvas-safe-block) +
    var(--ai-player-chrome-footer-reserve) +
    var(--ai-subtitle-safe-pb, 0px) +
    var(--ai-slide-stage-nav-safe-bottom, 0px)
  );
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: safe center;
  gap: var(--lesson-present-screen-gap);
}

/* Title + description + single content block — compact vertical flow (player + admin preview) */
.ai-slide-card .slide-content.slide-content--compact-flow,
.ai-slide-card .slide-content:has([data-content-blocks="1"]) {
  justify-content: flex-start;
  align-items: stretch;
  gap: clamp(6px, 0.75vh, 12px);
  --lesson-present-screen-gap: clamp(6px, 0.75vh, 12px);
}

.ai-slide-card .slide-content.slide-content--compact-flow > .ai-lesson-card__meta,
.ai-slide-card .slide-content.slide-content--compact-flow > h2,
.ai-slide-card .slide-content:has([data-content-blocks="1"]) > .ai-lesson-card__meta,
.ai-slide-card .slide-content:has([data-content-blocks="1"]) > h2 {
  margin-bottom: clamp(4px, 0.5vh, 8px);
}

.ai-slide-card .slide-content.slide-content--compact-flow > .ai-slide,
.ai-slide-card .slide-content.slide-content--compact-flow > .ai-lesson-screen,
.ai-slide-card .slide-content.slide-content--compact-flow > .dedicated-slide-layout,
.ai-slide-card .slide-content:has([data-content-blocks="1"]) > .ai-slide,
.ai-slide-card .slide-content:has([data-content-blocks="1"]) > .ai-lesson-screen,
.ai-slide-card .slide-content:has([data-content-blocks="1"]) > .dedicated-slide-layout {
  flex: 0 0 auto;
}

/* Canvas-centered lecture block — shared by all slide layouts */
.ai-slide-card .slide-content > .ai-lesson-card__meta,
.ai-slide-card .slide-content > h2,
.ai-slide-card .slide-content > .ai-slide,
.ai-slide-card .slide-content > .ai-lesson-screen,
.ai-slide-card .slide-content > .dedicated-slide-layout,
.ai-slide-card .slide-content > .registry-slide-layout,
.ai-slide-card .slide-content > .prompt-slide,
.ai-slide-card .slide-content > .ai-prompt-slide,
.ai-slide-card .slide-content > [data-role="slide-intro"],
.ai-slide-card .slide-content > [data-role="prompt-slide"] {
  width: 100%;
  max-width: var(--ai-slide-content-max-w);
  box-sizing: border-box;
}

.ai-slide-card .slide-content > .ai-lesson-card__meta,
.ai-slide-card .slide-content > h2 {
  flex: 0 0 auto;
}

.ai-slide-card .slide-content > .ai-slide,
.ai-slide-card .slide-content > .dedicated-slide-layout,
.ai-slide-card .slide-content > .registry-slide-layout {
  flex: 0 1 auto;
  min-height: 0;
  max-height: none;
  width: 100%;
  max-width: var(--ai-slide-content-max-w);
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: flex-start;
}

.ai-slide-card .slide-content > .ai-lesson-screen,
.ai-slide-card .slide-content > .prompt-slide,
.ai-slide-card .slide-content > .ai-prompt-slide,
.ai-slide-card .slide-content > [data-role="slide-intro"],
.ai-slide-card .slide-content > [data-role="prompt-slide"] {
  flex: 0 1 auto;
  min-height: 0;
  max-height: none;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
}

.ai-slide-card .slide-content .ai-lesson-screen {
  width: 100%;
  max-width: var(--ai-slide-content-max-w);
}

.ai-slide-card .slide-content .ai-slide [data-role="slide-intro"] {
  width: 100%;
  max-width: none;
}

/* Lesson-screen slides: keep first visible headline below player chrome when scrolling */
.ai-slide-card .slide-content:has([data-role="lesson-screen"]) .ai-lesson-card__meta,
.ai-slide-card .slide-content:has([data-role="lesson-screen"]) .ai-lesson-screen__headline,
html[data-ai-lesson-edit-mode="on"] .ai-slide-card .slide-content:has([data-role="lesson-screen"]) > h2:first-of-type {
  flex-shrink: 0;
  scroll-margin-top: var(--ai-slide-canvas-safe-top);
}

.ai-slide-card .slide-content:has([data-role="lesson-screen"]) .ai-lesson-screen__headline {
  margin-top: clamp(4px, 0.6vh, 12px);
}

@media (min-width: 901px) {
  .ai-slide-card {
    border-radius: 0;
  }

  .ai-player-stage__viewport {
    overflow: hidden;
  }
}

.ai-slide-card h2 {
  margin: 0 0 clamp(8px, 1vh, 14px);
  font-size: var(--lesson-present-title);
  font-weight: 900;
  line-height: 1.2;
}

.ai-mission-panel {
  position: absolute;
  left: 8px;
  right: 8px;
  bottom: calc(56px + env(safe-area-inset-bottom, 0px));
  z-index: 28;
  width: auto;
  max-width: none;
  margin: 0;
  pointer-events: none;
}

.ai-mission-panel:not(:empty) {
  pointer-events: auto;
}

.ai-mission-panel:empty {
  display: none;
  margin: 0;
}

.ai-mission-panel__inner {
  padding: 14px 16px;
  border-radius: 14px;
  background: rgba(248, 250, 252, 0.95);
  border: 1px solid rgba(148, 163, 184, 0.35);
}

.ai-mission-panel__title {
  margin: 0 0 8px;
  font-size: 14px;
  font-weight: 900;
  color: #334155;
}

.ai-mission-panel__hint {
  margin: 0 0 10px;
  color: #475569;
  font-size: 14px;
  line-height: 1.55;
}

.ai-mission-checklist {
  margin: 0 0 12px;
  padding-left: 0;
  list-style: none;
}

.ai-mission-checklist li {
  margin-bottom: 8px;
}

.ai-mission-checklist label {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  color: #334155;
  font-weight: 600;
}

.ai-player-shell.is-sample-promo-lesson .ai-stage-actions [data-slide-confirm],
.ai-player-shell.is-sample-promo-lesson [data-player-mission-panel] [data-complete-slide] {
  display: none !important;
}

.ai-player-next-lesson {
  width: 100%;
  max-width: min(100%, 1600px);
  margin: 12px 0 0;
  padding: 0;
  color: #94a3b8;
  font-size: 13px;
  font-weight: 700;
  text-align: center;
}

.ai-player-next-lesson a {
  color: #7dd3fc;
}

.ai-kiki-character {
  position: absolute;
  right: 24px;
  bottom: 24px;
  z-index: 20;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  transition: transform 0.2s ease;
}

.ai-kiki-fab {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  min-width: auto;
  min-height: auto;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: #f8fafc;
  cursor: pointer;
  transition: transform 0.2s ease, filter 0.2s ease;
  animation: aiKikiFloat 3.8s ease-in-out infinite;
}

.ai-kiki-fab:hover {
  transform: translateY(-2px) scale(1.03);
  filter: brightness(1.06);
}

.ai-kiki-fab:active,
.ai-kiki-character[data-kiki-state="talking"] .ai-kiki-fab {
  animation: aiKikiBounce 0.55s ease;
}

.ai-kiki-character[data-kiki-state="thinking"] .ai-kiki-fab {
  animation: aiKikiFloat 3.8s ease-in-out infinite, aiKikiThinkPulse 1.3s ease-in-out infinite;
}

.ai-kiki-character[data-kiki-state="listening"] .ai-kiki-fab,
.ai-kiki-character[data-kiki-state="happy"] .ai-kiki-fab {
  filter: drop-shadow(0 0 6px rgba(125, 211, 252, 0.45));
}

.ai-kiki-character[data-kiki-state="warning"] .ai-kiki-fab {
  filter: hue-rotate(-26deg) saturate(1.1);
}

.ai-kiki-fab__avatar {
  width: 72px;
  height: 72px;
  object-fit: contain;
  display: block;
  filter: drop-shadow(0 8px 18px rgba(2, 6, 23, 0.42));
}

.ai-kiki-fab__label {
  font-size: 13px;
  line-height: 1;
  font-weight: 700;
  color: #e2e8f0;
  text-shadow: 0 1px 8px rgba(2, 6, 23, 0.55);
}

.ai-kiki-drawer {
  position: absolute;
  right: 0;
  bottom: calc(100% + 10px);
  width: min(360px, calc(100vw - 24px));
  max-width: 360px;
  max-height: min(420px, 56vh);
  overflow-y: auto;
  padding: 14px;
  border-radius: 14px;
  border: 1px solid rgba(148, 163, 184, 0.3);
  background: rgba(15, 23, 42, 0.97);
  color: #e2e8f0;
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.32);
}

.ai-kiki-drawer__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 8px;
}

.ai-kiki-drawer__close {
  border: 0;
  background: transparent;
  color: #cbd5e1;
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
}

.ai-kiki-bubble__message {
  margin: 0 0 10px;
  padding: 10px 12px;
  max-width: 320px;
  border-radius: 12px;
  background: rgba(30, 41, 59, 0.95);
  border: 1px solid rgba(148, 163, 184, 0.28);
  font-size: 14px;
  line-height: 1.5;
}

.ai-kiki-drawer__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.ai-kiki-drawer__result {
  margin-top: 10px;
  max-height: 200px;
  overflow: auto;
}

body.ai-lesson-fullscreen-active .ai-kiki-character,
.ai-player-shell.is-fullscreen-mode .ai-kiki-character,
.ai-player.ai-player--fullscreen .ai-kiki-character {
  display: flex;
}

.ai-player-stage__viewport.has-subtitle-safe .ai-stage-narration,
.ai-player-stage__viewport.has-subtitle-safe [data-role="slide-kiki-guidance"] {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  margin: -1px !important;
  padding: 0 !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  clip-path: inset(50%) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

.ai-player-stage__viewport.has-subtitle-safe .ai-stage-narration > p,
.ai-player-stage__viewport.has-subtitle-safe .ai-stage-narration__actions,
.ai-player-stage__viewport.has-subtitle-safe .ai-stage-narration__hint {
  display: none !important;
}

.ai-player-stage__viewport.has-subtitle-safe .ai-slide-layout__overlay {
  display: none !important;
}

.ai-player-shell.is-kiki-tutor-disabled .ai-kiki-character,
.ai-player-shell:not(.is-kiki-tutor-enabled) .ai-kiki-character {
  display: none !important;
}

.ai-slide-card:fullscreen .ai-lesson-subtitle-overlay:not(.ai-ott-subtitle),
.ai-slide-card:-webkit-full-screen .ai-lesson-subtitle-overlay:not(.ai-ott-subtitle),
.ai-slide-card.is-theater-fullscreen .ai-lesson-subtitle-overlay:not(.ai-ott-subtitle),
body.ai-lesson-fullscreen-active .ai-lesson-subtitle-overlay:not(.ai-ott-subtitle),
.ai-player-shell.is-fullscreen-mode .ai-lesson-subtitle-overlay:not(.ai-ott-subtitle),
.ai-player.ai-player--fullscreen .ai-lesson-subtitle-overlay:not(.ai-ott-subtitle) {
  position: absolute;
  left: 50%;
  right: auto;
  bottom: 24px;
  width: min(78%, 1100px);
  max-width: calc(100% - 32px);
  margin: 0;
  transform: translateX(-50%);
  align-self: auto;
}

.ai-slide-card:fullscreen .ai-lesson-subtitle-overlay:not(.ai-ott-subtitle).is-exiting,
.ai-slide-card:-webkit-full-screen .ai-lesson-subtitle-overlay:not(.ai-ott-subtitle).is-exiting,
.ai-slide-card.is-theater-fullscreen .ai-lesson-subtitle-overlay:not(.ai-ott-subtitle).is-exiting {
  transform: translateX(-50%) translateY(8px);
}

.ai-slide-card:fullscreen .ai-lesson-screen__inner,
.ai-slide-card:-webkit-full-screen .ai-lesson-screen__inner,
.ai-slide-card.is-theater-fullscreen .ai-lesson-screen__inner,
body.ai-lesson-fullscreen-active .ai-lesson-screen__inner,
.ai-player-shell.is-fullscreen-mode .ai-lesson-screen__inner,
.ai-player.ai-player--fullscreen .ai-lesson-screen__inner {
  width: min(96vw, 1500px);
  max-width: none;
}

.ai-slide-card:fullscreen .ai-player-stage__viewport.has-subtitle-safe,
.ai-slide-card:-webkit-full-screen .ai-player-stage__viewport.has-subtitle-safe,
.ai-slide-card.is-theater-fullscreen .ai-player-stage__viewport.has-subtitle-safe,
body.ai-lesson-fullscreen-active .ai-player-stage__viewport.has-subtitle-safe,
.ai-player-shell.is-fullscreen-mode .ai-player-stage__viewport.has-subtitle-safe,
.ai-player.ai-player--fullscreen .ai-player-stage__viewport.has-subtitle-safe {
  --ai-subtitle-safe-pb: 5.5rem;
}

body.ai-lesson-fullscreen-active .ai-player-stage__viewport.has-subtitle-safe--compact,
.ai-player-shell.is-fullscreen-mode .ai-player-stage__viewport.has-subtitle-safe--compact,
.ai-player.ai-player--fullscreen .ai-player-stage__viewport.has-subtitle-safe--compact {
  --ai-subtitle-safe-pb: 3.5rem;
}

body.ai-lesson-fullscreen-active .ai-player-stage__viewport.has-subtitle-safe--large,
.ai-player-shell.is-fullscreen-mode .ai-player-stage__viewport.has-subtitle-safe--large,
.ai-player.ai-player--fullscreen .ai-player-stage__viewport.has-subtitle-safe--large {
  --ai-subtitle-safe-pb: 5rem;
}

body.ai-lesson-fullscreen-active .ai-player-stage__viewport.has-subtitle-safe--interactive,
.ai-player-shell.is-fullscreen-mode .ai-player-stage__viewport.has-subtitle-safe--interactive,
.ai-player.ai-player--fullscreen .ai-player-stage__viewport.has-subtitle-safe--interactive {
  --ai-subtitle-safe-pb: 6rem;
}

/* —— Fullscreen presentation scaling (typography + visuals) —— */
body.ai-lesson-fullscreen-active,
.ai-slide-card:fullscreen,
.ai-slide-card:-webkit-full-screen,
.ai-slide-card.is-theater-fullscreen.is-fullscreen-active,
.ai-player-shell.is-fullscreen-mode,
.ai-player.ai-player--fullscreen {
  --lesson-fs-scale: 1.35;
  --lesson-fs-title: clamp(36px, 3.2vw, 60px);
  --lesson-fs-heading: clamp(34px, 2.6vw, 48px);
  --lesson-fs-body: clamp(20px, 1.35vw, 28px);
  --lesson-fs-small: clamp(16px, 1.05vw, 22px);
  --lesson-fs-content-max: min(94vw, 1500px);
  --lesson-fs-pad-block: clamp(10px, 1.15vh, 16px);
  --lesson-fs-pad-inline: clamp(18px, 2vw, 32px);
}

@media (max-width: 640px) {
  .ai-player-shell {
    --lesson-present-h1: clamp(26px, 6.5vw, 34px);
    --lesson-present-title: clamp(20px, 5.2vw, 26px);
    --lesson-present-heading: clamp(22px, 5.5vw, 30px);
    --lesson-present-body: clamp(16px, 4.2vw, 20px);
    --lesson-present-small: clamp(14px, 3.6vw, 17px);
    --lesson-present-table: clamp(15px, 4vw, 19px);
    --lesson-present-cell-pad-y: 10px;
    --lesson-present-cell-pad-x: 12px;
    --lesson-present-slide-pad-top: clamp(16px, 3vh, 28px);
    --lesson-present-slide-pad-block: 12px;
    --lesson-present-slide-pad-inline: 14px;
    --lesson-present-visual-min: 0;
  }

  body.ai-lesson-fullscreen-active,
  .ai-slide-card:fullscreen,
  .ai-slide-card:-webkit-full-screen,
  .ai-slide-card.is-theater-fullscreen.is-fullscreen-active,
  .ai-player-shell.is-fullscreen-mode,
  .ai-player.ai-player--fullscreen {
    --lesson-fs-scale: 1.05;
    --lesson-fs-title: clamp(24px, 6vw, 34px);
    --lesson-fs-heading: clamp(22px, 5.5vw, 32px);
    --lesson-fs-body: clamp(17px, 4.2vw, 22px);
    --lesson-fs-small: clamp(14px, 3.6vw, 18px);
    --lesson-fs-pad-block: 10px;
    --lesson-fs-pad-inline: 14px;
  }
}

.ai-slide-card:fullscreen .slide-content,
.ai-slide-card:-webkit-full-screen .slide-content,
.ai-slide-card.is-theater-fullscreen.is-fullscreen-active .slide-content,
body.ai-lesson-fullscreen-active .ai-slide-card .slide-content,
.ai-player-shell.is-fullscreen-mode .ai-slide-card .slide-content,
.ai-player.ai-player--fullscreen .ai-slide-card .slide-content {
  width: 100%;
  height: 100%;
  min-height: 0;
  max-height: 100%;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: flex-start;
  background: #f8fafc;
  border-radius: 18px;
  padding: var(--lesson-fs-pad-block) var(--lesson-fs-pad-inline);
  padding-bottom: calc(var(--lesson-fs-pad-block) + var(--ai-subtitle-safe-pb, 0px) + 8px);
  overflow-x: hidden;
  overflow-y: hidden;
}

html[data-ai-lesson-edit-mode="on"] .ai-slide-card:fullscreen .slide-content,
html[data-ai-lesson-edit-mode="on"] .ai-slide-card:-webkit-full-screen .slide-content,
html[data-ai-lesson-edit-mode="on"] .ai-slide-card.is-theater-fullscreen.is-fullscreen-active .slide-content,
html[data-ai-lesson-edit-mode="on"] body.ai-lesson-fullscreen-active .ai-slide-card .slide-content,
html[data-ai-lesson-edit-mode="on"] .ai-player-shell.is-fullscreen-mode .ai-slide-card .slide-content,
html[data-ai-lesson-edit-mode="on"] .ai-player.ai-player--fullscreen .ai-slide-card .slide-content {
  overflow-y: auto;
}

.ai-slide-card:fullscreen .ai-lesson-screen,
.ai-slide-card:-webkit-full-screen .ai-lesson-screen,
.ai-slide-card.is-theater-fullscreen.is-fullscreen-active .ai-lesson-screen,
body.ai-lesson-fullscreen-active .ai-lesson-screen,
.ai-player-shell.is-fullscreen-mode .ai-lesson-screen,
.ai-player.ai-player--fullscreen .ai-lesson-screen {
  flex: 1 1 auto;
  min-height: 0;
  height: 100%;
  display: grid;
  grid-template-rows: minmax(0, 1fr);
  justify-content: stretch;
}

.ai-slide-card:fullscreen .ai-lesson-screen__inner,
.ai-slide-card:-webkit-full-screen .ai-lesson-screen__inner,
.ai-slide-card.is-theater-fullscreen.is-fullscreen-active .ai-lesson-screen__inner,
body.ai-lesson-fullscreen-active .ai-lesson-screen__inner,
.ai-player-shell.is-fullscreen-mode .ai-lesson-screen__inner,
.ai-player.ai-player--fullscreen .ai-lesson-screen__inner {
  width: var(--lesson-fs-content-max);
  max-width: none;
  flex: 1 1 auto;
  min-height: 0;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: stretch;
  gap: clamp(4px, 0.65vh, 10px);
  margin: 0 auto;
}

.ai-slide-card:fullscreen .ai-lesson-screen__headline,
.ai-slide-card:-webkit-full-screen .ai-lesson-screen__headline,
.ai-slide-card.is-theater-fullscreen.is-fullscreen-active .ai-lesson-screen__headline,
body.ai-lesson-fullscreen-active .ai-lesson-screen__headline,
.ai-player-shell.is-fullscreen-mode .ai-lesson-screen__headline,
.ai-player.ai-player--fullscreen .ai-lesson-screen__headline,
.ai-player-stage--fullscreen .ai-lesson-screen__headline {
  font-size: var(--lesson-fs-heading);
  line-height: 1.15;
  margin-bottom: 2px;
}

.ai-slide-card:fullscreen .ai-lesson-screen__subheadline,
.ai-slide-card:-webkit-full-screen .ai-lesson-screen__subheadline,
.ai-slide-card.is-theater-fullscreen.is-fullscreen-active .ai-lesson-screen__subheadline,
body.ai-lesson-fullscreen-active .ai-lesson-screen__subheadline,
.ai-player-shell.is-fullscreen-mode .ai-lesson-screen__subheadline,
.ai-player.ai-player--fullscreen .ai-lesson-screen__subheadline {
  font-size: clamp(20px, 1.5vw, 28px);
  line-height: 1.35;
  color: #334155;
  margin-bottom: 4px;
}

.ai-slide-card:fullscreen .ai-lesson-screen__visual,
.ai-slide-card:-webkit-full-screen .ai-lesson-screen__visual,
.ai-slide-card.is-theater-fullscreen.is-fullscreen-active .ai-lesson-screen__visual,
body.ai-lesson-fullscreen-active .ai-lesson-screen__visual,
.ai-player-shell.is-fullscreen-mode .ai-lesson-screen__visual,
.ai-player.ai-player--fullscreen .ai-lesson-screen__visual {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: center;
  margin: clamp(3px, 0.55vh, 8px) 0;
}

.ai-slide-card:fullscreen .ai-lesson-screen__focus,
.ai-slide-card:-webkit-full-screen .ai-lesson-screen__focus,
.ai-slide-card.is-theater-fullscreen.is-fullscreen-active .ai-lesson-screen__focus,
body.ai-lesson-fullscreen-active .ai-lesson-screen__focus,
.ai-player-shell.is-fullscreen-mode .ai-lesson-screen__focus,
.ai-player.ai-player--fullscreen .ai-lesson-screen__focus {
  font-size: var(--lesson-fs-body);
}

.ai-slide-card:fullscreen .ai-lesson-screen__focus li,
.ai-slide-card:-webkit-full-screen .ai-lesson-screen__focus li,
.ai-slide-card.is-theater-fullscreen.is-fullscreen-active .ai-lesson-screen__focus li,
body.ai-lesson-fullscreen-active .ai-lesson-screen__focus li,
.ai-player-shell.is-fullscreen-mode .ai-lesson-screen__focus li,
.ai-player.ai-player--fullscreen .ai-lesson-screen__focus li {
  font-size: var(--lesson-fs-body);
  margin-block: 10px;
  color: #334155;
}

.ai-slide-card:fullscreen .ai-lesson-screen__note,
.ai-slide-card:-webkit-full-screen .ai-lesson-screen__note,
.ai-slide-card.is-theater-fullscreen.is-fullscreen-active .ai-lesson-screen__note,
body.ai-lesson-fullscreen-active .ai-lesson-screen__note,
.ai-player-shell.is-fullscreen-mode .ai-lesson-screen__note,
.ai-player.ai-player--fullscreen .ai-lesson-screen__note {
  font-size: var(--lesson-fs-small);
}

.ai-slide-card:fullscreen .ai-pattern,
.ai-slide-card:-webkit-full-screen .ai-pattern,
.ai-slide-card.is-theater-fullscreen.is-fullscreen-active .ai-pattern,
body.ai-lesson-fullscreen-active .ai-pattern,
.ai-player-shell.is-fullscreen-mode .ai-pattern,
.ai-player.ai-player--fullscreen .ai-pattern {
  font-size: var(--lesson-fs-body);
}

.ai-slide-card:fullscreen .ai-lesson-compare-table,
.ai-slide-card:-webkit-full-screen .ai-lesson-compare-table,
.ai-slide-card.is-theater-fullscreen.is-fullscreen-active .ai-lesson-compare-table,
body.ai-lesson-fullscreen-active .ai-lesson-compare-table,
.ai-player-shell.is-fullscreen-mode .ai-lesson-compare-table,
.ai-player.ai-player--fullscreen .ai-lesson-compare-table {
  width: var(--lesson-fs-content-max);
  min-width: min(85vw, var(--lesson-fs-content-max));
  max-width: none;
  margin-left: auto;
  margin-right: auto;
  font-size: var(--lesson-fs-body);
}

.ai-slide-card:fullscreen .ai-lesson-compare-table th,
.ai-slide-card:fullscreen .ai-lesson-compare-table td,
.ai-slide-card:-webkit-full-screen .ai-lesson-compare-table th,
.ai-slide-card:-webkit-full-screen .ai-lesson-compare-table td,
.ai-slide-card.is-theater-fullscreen.is-fullscreen-active .ai-lesson-compare-table th,
.ai-slide-card.is-theater-fullscreen.is-fullscreen-active .ai-lesson-compare-table td,
body.ai-lesson-fullscreen-active .ai-lesson-compare-table th,
body.ai-lesson-fullscreen-active .ai-lesson-compare-table td,
.ai-player-shell.is-fullscreen-mode .ai-lesson-compare-table th,
.ai-player-shell.is-fullscreen-mode .ai-lesson-compare-table td,
.ai-player.ai-player--fullscreen .ai-lesson-compare-table th,
.ai-player.ai-player--fullscreen .ai-lesson-compare-table td {
  padding: 18px 24px;
  line-height: 1.45;
}

.ai-slide-card:fullscreen .ai-pattern--goal-card,
.ai-slide-card:-webkit-full-screen .ai-pattern--goal-card,
.ai-slide-card.is-theater-fullscreen.is-fullscreen-active .ai-pattern--goal-card,
body.ai-lesson-fullscreen-active .ai-pattern--goal-card,
.ai-player-shell.is-fullscreen-mode .ai-pattern--goal-card,
.ai-player.ai-player--fullscreen .ai-pattern--goal-card {
  border-radius: 18px;
}

.ai-slide-card:fullscreen .ai-pattern-goal-card__row,
.ai-slide-card:-webkit-full-screen .ai-pattern-goal-card__row,
.ai-slide-card.is-theater-fullscreen.is-fullscreen-active .ai-pattern-goal-card__row,
body.ai-lesson-fullscreen-active .ai-pattern-goal-card__row,
.ai-player-shell.is-fullscreen-mode .ai-pattern-goal-card__row,
.ai-player.ai-player--fullscreen .ai-pattern-goal-card__row {
  padding: 18px 24px;
  gap: 12px 16px;
}

.ai-slide-card:fullscreen .ai-pattern-goal-card__label,
.ai-slide-card:-webkit-full-screen .ai-pattern-goal-card__label,
.ai-slide-card.is-theater-fullscreen.is-fullscreen-active .ai-pattern-goal-card__label,
body.ai-lesson-fullscreen-active .ai-pattern-goal-card__label,
.ai-player-shell.is-fullscreen-mode .ai-pattern-goal-card__label,
.ai-player.ai-player--fullscreen .ai-pattern-goal-card__label {
  font-size: var(--lesson-fs-small);
}

.ai-slide-card:fullscreen .ai-pattern-goal-card__value,
.ai-slide-card:-webkit-full-screen .ai-pattern-goal-card__value,
.ai-slide-card.is-theater-fullscreen.is-fullscreen-active .ai-pattern-goal-card__value,
body.ai-lesson-fullscreen-active .ai-pattern-goal-card__value,
.ai-player-shell.is-fullscreen-mode .ai-pattern-goal-card__value,
.ai-player.ai-player--fullscreen .ai-pattern-goal-card__value {
  font-size: var(--lesson-fs-body);
}

.ai-slide-card:fullscreen .ai-lesson-before-after__col,
.ai-slide-card:-webkit-full-screen .ai-lesson-before-after__col,
.ai-slide-card.is-theater-fullscreen.is-fullscreen-active .ai-lesson-before-after__col,
body.ai-lesson-fullscreen-active .ai-lesson-before-after__col,
.ai-player-shell.is-fullscreen-mode .ai-lesson-before-after__col,
.ai-player.ai-player--fullscreen .ai-lesson-before-after__col,
.ai-slide-card:fullscreen .ai-pattern-prompt-recipe__col,
.ai-slide-card:-webkit-full-screen .ai-pattern-prompt-recipe__col,
.ai-slide-card.is-theater-fullscreen.is-fullscreen-active .ai-pattern-prompt-recipe__col,
body.ai-lesson-fullscreen-active .ai-pattern-prompt-recipe__col,
.ai-player-shell.is-fullscreen-mode .ai-pattern-prompt-recipe__col,
.ai-player.ai-player--fullscreen .ai-pattern-prompt-recipe__col {
  padding: 24px 28px;
  border-radius: 18px;
}

.ai-slide-card:fullscreen .ai-lesson-before-after__title,
.ai-slide-card:-webkit-full-screen .ai-lesson-before-after__title,
.ai-slide-card.is-theater-fullscreen.is-fullscreen-active .ai-lesson-before-after__title,
body.ai-lesson-fullscreen-active .ai-lesson-before-after__title,
.ai-player-shell.is-fullscreen-mode .ai-lesson-before-after__title,
.ai-player.ai-player--fullscreen .ai-lesson-before-after__title,
.ai-slide-card:fullscreen .ai-pattern-prompt-recipe__col h4,
.ai-slide-card:-webkit-full-screen .ai-pattern-prompt-recipe__col h4,
.ai-slide-card.is-theater-fullscreen.is-fullscreen-active .ai-pattern-prompt-recipe__col h4,
body.ai-lesson-fullscreen-active .ai-pattern-prompt-recipe__col h4,
.ai-player-shell.is-fullscreen-mode .ai-pattern-prompt-recipe__col h4,
.ai-player.ai-player--fullscreen .ai-pattern-prompt-recipe__col h4 {
  font-size: var(--lesson-fs-small);
}

.ai-slide-card:fullscreen .ai-pattern-prompt-recipe__col ul,
.ai-slide-card:-webkit-full-screen .ai-pattern-prompt-recipe__col ul,
.ai-slide-card.is-theater-fullscreen.is-fullscreen-active .ai-pattern-prompt-recipe__col ul,
body.ai-lesson-fullscreen-active .ai-pattern-prompt-recipe__col ul,
.ai-player-shell.is-fullscreen-mode .ai-pattern-prompt-recipe__col ul,
.ai-player.ai-player--fullscreen .ai-pattern-prompt-recipe__col ul {
  font-size: var(--lesson-fs-body);
}

.ai-slide-card:fullscreen .ai-pattern-run-check-card__list,
.ai-slide-card:-webkit-full-screen .ai-pattern-run-check-card__list,
.ai-slide-card.is-theater-fullscreen.is-fullscreen-active .ai-pattern-run-check-card__list,
body.ai-lesson-fullscreen-active .ai-pattern-run-check-card__list,
.ai-player-shell.is-fullscreen-mode .ai-pattern-run-check-card__list,
.ai-player.ai-player--fullscreen .ai-pattern-run-check-card__list {
  font-size: var(--lesson-fs-body);
}

.ai-slide-card:fullscreen .ai-lesson-flow__node,
.ai-slide-card:-webkit-full-screen .ai-lesson-flow__node,
.ai-slide-card.is-theater-fullscreen.is-fullscreen-active .ai-lesson-flow__node,
body.ai-lesson-fullscreen-active .ai-lesson-flow__node,
.ai-player-shell.is-fullscreen-mode .ai-lesson-flow__node,
.ai-player.ai-player--fullscreen .ai-lesson-flow__node {
  font-size: var(--lesson-fs-body);
  padding: 18px 24px;
  min-height: 72px;
  border-radius: 14px;
}

.ai-slide-card:fullscreen .ai-lesson-flow__arrow,
.ai-slide-card:-webkit-full-screen .ai-lesson-flow__arrow,
.ai-slide-card.is-theater-fullscreen.is-fullscreen-active .ai-lesson-flow__arrow,
body.ai-lesson-fullscreen-active .ai-lesson-flow__arrow,
.ai-player-shell.is-fullscreen-mode .ai-lesson-flow__arrow,
.ai-player.ai-player--fullscreen .ai-lesson-flow__arrow {
  font-size: clamp(22px, 1.6vw, 32px);
}

.ai-slide-card:fullscreen .ai-pattern--game-mockup .ai-lesson-mockup--game-screen,
.ai-slide-card:-webkit-full-screen .ai-pattern--game-mockup .ai-lesson-mockup--game-screen,
.ai-slide-card.is-theater-fullscreen.is-fullscreen-active .ai-pattern--game-mockup .ai-lesson-mockup--game-screen,
body.ai-lesson-fullscreen-active .ai-pattern--game-mockup .ai-lesson-mockup--game-screen,
.ai-player-shell.is-fullscreen-mode .ai-pattern--game-mockup .ai-lesson-mockup--game-screen,
.ai-player.ai-player--fullscreen .ai-pattern--game-mockup .ai-lesson-mockup--game-screen {
  width: min(60vw, 760px);
  max-width: min(60vw, 760px);
}

.ai-slide-card:fullscreen .ai-lesson-mockup,
.ai-slide-card:-webkit-full-screen .ai-lesson-mockup,
.ai-slide-card.is-theater-fullscreen.is-fullscreen-active .ai-lesson-mockup,
body.ai-lesson-fullscreen-active .ai-lesson-mockup,
.ai-player-shell.is-fullscreen-mode .ai-lesson-mockup,
.ai-player.ai-player--fullscreen .ai-lesson-mockup {
  padding: clamp(16px, 2vh, 24px);
  border-radius: 20px;
}

.ai-slide-card:fullscreen .ai-lesson-mockup__item,
.ai-slide-card:-webkit-full-screen .ai-lesson-mockup__item,
.ai-slide-card.is-theater-fullscreen.is-fullscreen-active .ai-lesson-mockup__item,
body.ai-lesson-fullscreen-active .ai-lesson-mockup__item,
.ai-player-shell.is-fullscreen-mode .ai-lesson-mockup__item,
.ai-player.ai-player--fullscreen .ai-lesson-mockup__item {
  font-size: var(--lesson-fs-body);
  padding: 16px 18px;
}

.ai-slide-card:fullscreen .ai-lesson-mockup__item--title,
.ai-slide-card:-webkit-full-screen .ai-lesson-mockup__item--title,
.ai-slide-card.is-theater-fullscreen.is-fullscreen-active .ai-lesson-mockup__item--title,
body.ai-lesson-fullscreen-active .ai-lesson-mockup__item--title,
.ai-player-shell.is-fullscreen-mode .ai-lesson-mockup__item--title,
.ai-player.ai-player--fullscreen .ai-lesson-mockup__item--title {
  font-size: var(--lesson-fs-heading);
}

.ai-slide-card:fullscreen .ai-lesson-mockup__item--board,
.ai-slide-card:-webkit-full-screen .ai-lesson-mockup__item--board,
.ai-slide-card.is-theater-fullscreen.is-fullscreen-active .ai-lesson-mockup__item--board,
body.ai-lesson-fullscreen-active .ai-lesson-mockup__item--board,
.ai-player-shell.is-fullscreen-mode .ai-lesson-mockup__item--board,
.ai-player.ai-player--fullscreen .ai-lesson-mockup__item--board {
  min-height: clamp(260px, 32vh, 480px);
  font-size: var(--lesson-fs-body);
}

.ai-slide-card:fullscreen .ai-pattern-badge,
.ai-slide-card:-webkit-full-screen .ai-pattern-badge,
.ai-slide-card.is-theater-fullscreen.is-fullscreen-active .ai-pattern-badge,
body.ai-lesson-fullscreen-active .ai-pattern-badge,
.ai-player-shell.is-fullscreen-mode .ai-pattern-badge,
.ai-player.ai-player--fullscreen .ai-pattern-badge {
  font-size: var(--lesson-fs-small);
  padding: 6px 12px;
}

.ai-slide-card:fullscreen .ai-lesson-code-callout,
.ai-slide-card:-webkit-full-screen .ai-lesson-code-callout,
.ai-slide-card.is-theater-fullscreen.is-fullscreen-active .ai-lesson-code-callout,
body.ai-lesson-fullscreen-active .ai-lesson-code-callout,
.ai-player-shell.is-fullscreen-mode .ai-lesson-code-callout,
.ai-player.ai-player--fullscreen .ai-lesson-code-callout {
  width: var(--lesson-fs-content-max);
  margin-left: auto;
  margin-right: auto;
}

.ai-slide-card:fullscreen .ai-lesson-code-callout__pre,
.ai-slide-card:-webkit-full-screen .ai-lesson-code-callout__pre,
.ai-slide-card.is-theater-fullscreen.is-fullscreen-active .ai-lesson-code-callout__pre,
body.ai-lesson-fullscreen-active .ai-lesson-code-callout__pre,
.ai-player-shell.is-fullscreen-mode .ai-lesson-code-callout__pre,
.ai-player.ai-player--fullscreen .ai-lesson-code-callout__pre,
.ai-slide-card:fullscreen .ai-lesson-code-callout__pre code,
.ai-slide-card:-webkit-full-screen .ai-lesson-code-callout__pre code,
.ai-slide-card.is-theater-fullscreen.is-fullscreen-active .ai-lesson-code-callout__pre code,
body.ai-lesson-fullscreen-active .ai-lesson-code-callout__pre code,
.ai-player-shell.is-fullscreen-mode .ai-lesson-code-callout__pre code,
.ai-player.ai-player--fullscreen .ai-lesson-code-callout__pre code {
  font-size: clamp(17px, 1.05vw, 22px);
  line-height: 1.55;
}

.ai-slide-card:fullscreen .ai-lesson-code-callout__tag,
.ai-slide-card:-webkit-full-screen .ai-lesson-code-callout__tag,
.ai-slide-card.is-theater-fullscreen.is-fullscreen-active .ai-lesson-code-callout__tag,
body.ai-lesson-fullscreen-active .ai-lesson-code-callout__tag,
.ai-player-shell.is-fullscreen-mode .ai-lesson-code-callout__tag,
.ai-player.ai-player--fullscreen .ai-lesson-code-callout__tag {
  font-size: var(--lesson-fs-small);
  padding: 3px 10px;
}

.ai-slide-card:fullscreen .ai-lesson-subtitle-overlay:not(.ai-ott-subtitle),
.ai-slide-card:-webkit-full-screen .ai-lesson-subtitle-overlay:not(.ai-ott-subtitle),
.ai-slide-card.is-theater-fullscreen.is-fullscreen-active .ai-lesson-subtitle-overlay:not(.ai-ott-subtitle),
body.ai-lesson-fullscreen-active .ai-lesson-subtitle-overlay:not(.ai-ott-subtitle),
.ai-player-shell.is-fullscreen-mode .ai-lesson-subtitle-overlay:not(.ai-ott-subtitle),
.ai-player.ai-player--fullscreen .ai-lesson-subtitle-overlay:not(.ai-ott-subtitle) {
  width: min(78vw, 1200px);
}

.ai-slide-card:fullscreen .ai-lesson-subtitle-overlay:not(.ai-ott-subtitle) .ai-lesson-subtitle-overlay__text,
.ai-slide-card:-webkit-full-screen .ai-lesson-subtitle-overlay:not(.ai-ott-subtitle) .ai-lesson-subtitle-overlay__text,
.ai-slide-card.is-theater-fullscreen.is-fullscreen-active .ai-lesson-subtitle-overlay:not(.ai-ott-subtitle) .ai-lesson-subtitle-overlay__text,
body.ai-lesson-fullscreen-active .ai-lesson-subtitle-overlay:not(.ai-ott-subtitle) .ai-lesson-subtitle-overlay__text,
.ai-player-shell.is-fullscreen-mode .ai-lesson-subtitle-overlay:not(.ai-ott-subtitle) .ai-lesson-subtitle-overlay__text,
.ai-player.ai-player--fullscreen .ai-lesson-subtitle-overlay:not(.ai-ott-subtitle) .ai-lesson-subtitle-overlay__text {
  font-size: clamp(20px, 1.3vw, 28px);
  line-height: 1.45;
  max-height: 5.6em;
}

.ai-slide-card:fullscreen .ai-kiki-character,
.ai-slide-card:-webkit-full-screen .ai-kiki-character,
.ai-slide-card.is-theater-fullscreen.is-fullscreen-active .ai-kiki-character,
body.ai-lesson-fullscreen-active .ai-kiki-character,
.ai-player-shell.is-fullscreen-mode .ai-kiki-character,
.ai-player.ai-player--fullscreen .ai-kiki-character {
  right: 28px;
  bottom: calc(var(--ai-subtitle-safe-pb, 0px) + 24px);
  z-index: 25;
}

.ai-slide-card:fullscreen .ai-kiki-fab__avatar,
.ai-slide-card:-webkit-full-screen .ai-kiki-fab__avatar,
.ai-slide-card.is-theater-fullscreen.is-fullscreen-active .ai-kiki-fab__avatar,
body.ai-lesson-fullscreen-active .ai-kiki-fab__avatar,
.ai-player-shell.is-fullscreen-mode .ai-kiki-fab__avatar,
.ai-player.ai-player--fullscreen .ai-kiki-fab__avatar {
  width: 64px;
  height: 64px;
}

.ai-slide-card:fullscreen .ai-kiki-fab__label,
.ai-slide-card:-webkit-full-screen .ai-kiki-fab__label,
.ai-slide-card.is-theater-fullscreen.is-fullscreen-active .ai-kiki-fab__label,
body.ai-lesson-fullscreen-active .ai-kiki-fab__label,
.ai-player-shell.is-fullscreen-mode .ai-kiki-fab__label,
.ai-player.ai-player--fullscreen .ai-kiki-fab__label {
  font-size: 12px;
}

.ai-slide-card:fullscreen .ai-player-stage__viewport.has-subtitle-safe + .ai-kiki-character,
.ai-slide-card:-webkit-full-screen .ai-player-stage__viewport.has-subtitle-safe + .ai-kiki-character,
.ai-slide-card.is-theater-fullscreen.is-fullscreen-active .ai-player-stage__viewport.has-subtitle-safe + .ai-kiki-character {
  bottom: calc(var(--ai-subtitle-safe-pb, 0px) + 24px);
}

.ai-slide-card:fullscreen .ai-tts-toggle,
.ai-slide-card:-webkit-full-screen .ai-tts-toggle,
.ai-slide-card.is-theater-fullscreen.is-fullscreen-active .ai-tts-toggle,
body.ai-lesson-fullscreen-active .ai-tts-toggle,
.ai-player-shell.is-fullscreen-mode .ai-tts-toggle,
.ai-player.ai-player--fullscreen .ai-tts-toggle {
  font-size: 13px;
  min-height: 40px;
  min-width: 80px;
  padding: 8px 12px;
}

@media (max-width: 900px) {
  .ai-slide-card:fullscreen .ai-kiki-character,
  .ai-slide-card:-webkit-full-screen .ai-kiki-character,
  .ai-slide-card.is-theater-fullscreen.is-fullscreen-active .ai-kiki-character,
  body.ai-lesson-fullscreen-active .ai-kiki-character,
  .ai-player-shell.is-fullscreen-mode .ai-kiki-character,
  .ai-player.ai-player--fullscreen .ai-kiki-character {
    display: none !important;
  }
}

@media (max-width: 480px) {
  .ai-player-stage__viewport {
    --ai-kiki-subtitle-pad-right: 84px;
  }

  .ai-lesson-subtitle-overlay:not(.ai-ott-subtitle) {
    width: min(calc(100% - var(--ai-kiki-subtitle-pad-right) - 12px), 100%);
    max-width: calc(100% - 12px);
    bottom: calc(10px + env(safe-area-inset-bottom, 0px));
  }

  .ai-lesson-subtitle-overlay:not(.ai-ott-subtitle) .ai-lesson-subtitle-overlay__inner {
    padding: 7px 10px 9px;
  }

  .ai-lesson-subtitle-overlay:not(.ai-ott-subtitle) .ai-lesson-subtitle-overlay__text {
    font-size: 0.78rem;
    min-height: calc(1.42em * 2);
    max-height: calc(1.42em * 3);
  }

  .ai-player-stage__viewport.has-subtitle-safe {
    --ai-subtitle-safe-pb: 3.75rem;
  }

  .ai-player-stage__viewport.has-subtitle-safe--compact {
    --ai-subtitle-safe-pb: 3rem;
  }

  .ai-player-stage__viewport.has-subtitle-safe--large {
    --ai-subtitle-safe-pb: 4.25rem;
  }

  .ai-player-stage__viewport.has-subtitle-safe--interactive {
    --ai-subtitle-safe-pb: 4.75rem;
  }

  .ai-lesson-screen__inner {
    width: 100%;
  }

  .ai-lesson-screen__visual {
    overflow-x: auto;
  }

  .ai-lesson-compare-table {
    min-width: 0;
    font-size: var(--lesson-present-table);
  }

  .ai-slide-card .slide-content {
    padding: var(--lesson-present-slide-pad-top) var(--lesson-present-slide-pad-inline) var(--lesson-present-slide-pad-block);
    padding-bottom: calc(var(--lesson-present-slide-pad-block) + var(--ai-subtitle-safe-pb, 0px));
  }
}

@keyframes aiKikiFloat {
  0% { transform: translateY(0); }
  50% { transform: translateY(-8px); }
  100% { transform: translateY(0); }
}

@keyframes aiKikiBounce {
  0% { transform: translateY(0) scale(1); }
  35% { transform: translateY(-9px) scale(1.05); }
  70% { transform: translateY(0) scale(0.97); }
  100% { transform: translateY(0) scale(1); }
}

@keyframes aiKikiThinkPulse {
  0%, 100% { filter: saturate(1); }
  50% { filter: saturate(1.35) brightness(1.12); }
}

.ai-lesson-video {
  margin-bottom: 16px;
  border-radius: 12px;
  overflow: hidden;
}

.ai-lesson-video__frame {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  border: 0;
  background: #000;
}

.ai-player-upsell {
  flex-shrink: 0;
  padding: 8px 32px 12px;
}

.ai-player-upsell .ai-player-main-inner {
  padding: 12px 14px;
  border-radius: 10px;
  background: rgba(30, 41, 59, 0.85);
  border: 1px solid rgba(148, 163, 184, 0.25);
}

@media (max-width: 640px) {
  .ai-player-shell {
    --player-header-height: 76px;
  }
}

/* 태블릿: sidebar 약간 축소 */
@media (max-width: 1100px) {
  .ai-player-shell {
    --player-sidebar-width: 272px;
    grid-template-columns: var(--player-sidebar-width) minmax(0, 1fr);
  }

  .ai-player-main-header:not(.ai-player-main-header--learning),
  .ai-player-main:not(:has(.ai-player-main-header--learning)) {
    padding-left: 12px;
    padding-right: 12px;
  }
}

/* Narrow view fallback: force drawer sidebar layout earlier */
@media (max-width: 1200px) {
  .ai-player-shell {
    grid-template-columns: 1fr;
  }

  .ai-player-sidebar {
    position: fixed;
    left: 0;
    top: 0;
    bottom: 0;
    z-index: 50;
    width: min(300px, 88vw);
    transform: translateX(-100%);
    transition: transform 0.2s ease;
    box-shadow: 8px 0 28px rgba(0, 0, 0, 0.4);
    visibility: hidden;
    pointer-events: none;
  }

  .ai-player-shell.is-sidebar-open .ai-player-sidebar {
    transform: translateX(0);
    visibility: visible;
    pointer-events: auto;
  }

  .ai-player-topbar__btn--menu {
    display: inline-flex;
  }
}

/* 모바일: 목차 drawer, 기본 접힘 */
@media (max-width: 900px) {
  .ai-player-shell {
    grid-template-columns: 1fr;
  }

  .ai-player-sidebar {
    position: fixed;
    left: 0;
    top: 0;
    bottom: 0;
    z-index: 50;
    width: min(300px, 88vw);
    transform: translateX(-100%);
    transition: transform 0.2s ease;
    box-shadow: 8px 0 28px rgba(0, 0, 0, 0.4);
    visibility: hidden;
    pointer-events: none;
  }

  .ai-player-shell.is-sidebar-open .ai-player-sidebar {
    transform: translateX(0);
    visibility: visible;
    pointer-events: auto;
  }

  .ai-player-sidebar-backdrop {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 40;
    background: rgba(0, 0, 0, 0.5);
  }

  .ai-player-shell.is-sidebar-open .ai-player-sidebar-backdrop {
    display: block;
  }

  .ai-player-topbar__btn--menu {
    display: inline-flex;
  }

  .ai-player-content {
    grid-column: 1;
  }

  .ai-player-topbar {
    grid-template-columns: minmax(0, 1fr) minmax(0, min(100%, 560px)) minmax(0, 1fr);
    grid-template-areas: none;
    align-items: center;
    gap: 8px;
  }

  .ai-player-topbar__left {
    grid-column: 1;
    grid-area: auto;
    width: auto;
    flex-wrap: nowrap;
    justify-self: start;
  }

  .ai-player-topbar__right {
    grid-column: 3;
    grid-area: auto;
    width: auto;
    margin-left: 0;
    justify-self: end;
    justify-content: flex-end;
    flex-wrap: nowrap;
  }

  .ai-player-topbar__center {
    grid-column: 2;
    grid-area: auto;
    justify-self: center;
    text-align: center;
    width: 100%;
    min-width: 0;
  }

  .ai-player-topbar__title-block {
    align-items: center;
    text-align: center;
  }

  .ai-player-topbar__course {
    font-size: 12px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .ai-player-topbar__lesson {
    writing-mode: horizontal-tb;
    word-break: keep-all;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-size: clamp(17px, 4.2vw, 20px);
    margin-bottom: 6px;
  }

  body.ai-lesson-fullscreen-active .ai-player-main,
  .ai-player-shell.is-fullscreen-mode .ai-player-main {
    padding: 0;
  }

  .ai-player-main {
    min-height: 0;
    padding: 0;
    align-items: stretch;
  }

  .ai-slide-card {
    border-radius: 12px;
  }

  .ai-player-main .ai-player-main-inner {
    min-height: 0;
    height: 100%;
  }

  .ai-slide-card {
    min-height: 0;
    max-height: none;
  }

  .ai-slide-card .slide-content {
    min-height: 0;
    padding: 8px 10px 12px;
    padding-bottom: calc(12px + var(--ai-subtitle-safe-pb, 0px));
  }

  .ai-kiki-character {
    right: 12px;
    bottom: calc(10px + env(safe-area-inset-bottom));
  }

  .ai-kiki-fab__avatar {
    width: 58px;
    height: 58px;
  }

  .ai-kiki-fab__label {
    font-size: 12px;
  }

  .ai-kiki-drawer {
    width: min(320px, calc(100vw - 16px));
    max-height: min(360px, 46vh);
    right: -4px;
  }
}

@media (max-width: 480px) {
  .ai-kiki-character {
    display: none;
  }
}

/* Interactive slide types: mockup, prompt box, code block, checklists */
.ai-lesson-mockup {
  display: flex;
  flex-direction: column;
  gap: 10px;
  width: 100%;
  max-width: none;
  margin: 6px 0;
  padding: 14px;
  border: 2px dashed #94a3b8;
  border-radius: 16px;
  background: linear-gradient(180deg, #f8fafc 0%, #eef2ff 100%);
}

.ai-lesson-screen__visual .ai-lesson-mockup,
.ai-pattern-run-check-card__preview .ai-lesson-mockup {
  width: 100%;
  max-width: 100%;
  margin-left: auto;
  margin-right: auto;
}

.ai-lesson-mockup__item {
  border-radius: 10px;
  padding: var(--lesson-present-cell-pad-y) var(--lesson-present-cell-pad-x);
  text-align: center;
  font-size: var(--lesson-present-body);
  font-weight: 700;
  color: #0f172a;
  background: #fff;
  border: 1px solid #cbd5e1;
}

.ai-lesson-mockup__item--title {
  font-size: var(--lesson-present-heading);
  background: #1e293b;
  color: #f8fafc;
  border-color: #1e293b;
}

.ai-lesson-mockup__item--score {
  background: #dbeafe;
  border-color: #93c5fd;
}

.ai-lesson-mockup__item--board {
  min-height: clamp(240px, 40vh, 480px);
  display: flex;
  align-items: center;
  justify-content: center;
  background: repeating-linear-gradient(
    0deg,
    #e2e8f0,
    #e2e8f0 1px,
    #f1f5f9 1px,
    #f1f5f9 18px
  ),
  repeating-linear-gradient(
    90deg,
    #e2e8f0,
    #e2e8f0 1px,
    #f1f5f9 1px,
    #f1f5f9 18px
  );
  border: 2px solid #64748b;
}

.ai-lesson-mockup__item--btn {
  background: #2563eb;
  color: #fff;
  border-color: #1d4ed8;
}

.ai-lesson-figure {
  margin: 20px 0;
  text-align: center;
}

.ai-lesson-figure__img {
  max-width: 100%;
  height: auto;
  border-radius: 12px;
  border: 1px solid #cbd5e1;
  box-shadow: 0 8px 24px rgba(15, 23, 42, 0.08);
}

.ai-lesson-prompt-box {
  margin: 20px 0;
  padding: 16px 18px;
  border: 2px solid #2563eb;
  border-radius: 14px;
  background: #eff6ff;
}

.ai-lesson-prompt-box--bad {
  border-color: #f87171;
  background: #fef2f2;
}

.ai-lesson-prompt-box--good {
  border-color: #22c55e;
  background: #f0fdf4;
}

.ai-lesson-prompt-box__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 12px;
}

.ai-lesson-prompt-box__head strong {
  font-size: 14px;
  letter-spacing: 0.02em;
}

.ai-lesson-prompt-box__text {
  margin: 0;
  padding: 14px;
  border-radius: 10px;
  background: #fff;
  border: 1px solid #bfdbfe;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: 14px;
  line-height: 1.55;
  white-space: pre-wrap;
  word-break: break-word;
  color: #0f172a;
}

.ai-lesson-prompt-box--bad .ai-lesson-prompt-box__text {
  border-color: #fecaca;
}

.ai-lesson-prompt-box--good .ai-lesson-prompt-box__text {
  border-color: #bbf7d0;
}

.ai-lesson-copy-hint {
  margin: 12px 0 0;
  padding: 10px 12px;
  border-radius: 8px;
  background: #dcfce7;
  color: #166534;
  font-size: 14px;
  font-weight: 600;
}

.ai-lesson-prompt-box [data-copy-manual-confirm] {
  margin-top: 10px;
}

.ai-lesson-prompt-box [data-prompt-confirm] {
  margin-top: 14px;
}

/* —— Layout Kind Registry: shared compact shell (data-layout + data-layout-mode) —— */
.ai-slide-card[data-layout-mode="compact"] .slide-content,
.ai-slide-content[data-layout-mode="compact"] {
  --lesson-present-slide-pad-top: 8px;
  --lesson-present-slide-pad-inline: 12px;
  --lesson-present-slide-pad-block: 6px;
  --lesson-present-screen-gap: 0px;
  padding: 8px 12px 6px;
  padding-bottom: calc(44px + var(--ai-subtitle-safe-pb, 0px));
  gap: 0;
  overflow: hidden;
}

body.admin-ai-lesson-slide-page .ai-player-shell.is-admin-slide-mode:not(.is-fullscreen-mode) .ai-slide-card[data-layout-mode="compact"] .slide-content {
  padding: 6px 10px 4px;
  padding-bottom: calc(40px + var(--ai-subtitle-safe-pb, 0px));
}

body.admin-ai-lesson-slide-page .ai-slide-card[data-layout-mode="compact"] .slide-content {
  overflow: hidden;
}

.ai-slide-card[data-layout-mode="compact"] .ai-player-stage__viewport,
.ai-slide-card[data-layout="prompt"][data-layout-mode="compact"] .ai-player-stage__viewport,
.ai-slide-card[data-layout="flow"][data-layout-mode="compact"] .ai-player-stage__viewport,
.ai-slide-card[data-layout="game"][data-layout-mode="compact"] .ai-player-stage__viewport {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.ai-player-main__content:has(.ai-slide-card[data-layout-mode="compact"]) {
  min-height: 0;
}

/* —— Prompt layout (data-layout="prompt") —— */
.ai-slide-card[data-layout="prompt"] .slide-content,
.ai-slide-content--prompt-layout,
.ai-slide-card--prompt-layout .slide-content,
.ai-slide-card--prompt-step .slide-content,
.ai-slide-content--prompt-step {
  overflow-x: hidden;
  overflow-y: hidden;
  display: flex;
  flex-direction: column;
  min-height: 0;
}

.ai-slide-card[data-layout="prompt"]:not([data-layout-mode="compact"]) .slide-content,
.ai-slide-card--prompt-layout .slide-content:not(:has(.prompt-slide--compact)),
.ai-slide-content--prompt-layout:not(:has(.prompt-slide--compact)) {
  overflow-y: auto;
}

html[data-ai-lesson-edit-mode="on"] .ai-slide-card[data-layout="prompt"] .slide-content,
html[data-ai-lesson-edit-mode="on"] .ai-slide-content--prompt-layout,
html[data-ai-lesson-edit-mode="on"] .ai-slide-card--prompt-step .slide-content,
html[data-ai-lesson-edit-mode="on"] .ai-slide-content--prompt-step {
  overflow-y: auto;
}

.ai-slide-card[data-layout="prompt"] .slide-content > .ai-lesson-card__meta,
.ai-slide-card[data-layout="prompt"] .slide-content > h2:first-of-type,
.ai-slide-card--prompt-layout .slide-content > .ai-lesson-card__meta,
.ai-slide-card--prompt-layout .slide-content > h2:first-of-type,
.ai-slide-content--prompt-layout > .ai-lesson-card__meta,
.ai-slide-content--prompt-layout > h2:first-of-type {
  display: none;
}

.prompt-slide,
.ai-prompt-slide {
  display: flex;
  flex-direction: column;
  gap: 20px;
  width: 100%;
  min-height: 0;
  flex: 1 1 auto;
  position: relative;
  box-sizing: border-box;
}

/* Prompt compact: badge + title + copy + prompt card (narration via TTS only) */
.prompt-slide--compact {
  gap: 6px;
  flex: 1 1 auto;
  min-height: 0;
  height: 100%;
}

/* Flow/diagram compact: maximize diagram area (TTS carries narration) */
.ai-slide-card[data-layout="flow"][data-layout-mode="compact"] .ai-slide-content--text-only,
.ai-slide-card[data-layout="flow"][data-layout-mode="compact"] .ai-slide-content,
.ai-slide-card--flow-layout[data-layout-mode="compact"] .ai-slide-content {
  flex: 1 1 auto;
  min-height: 0;
  height: 100%;
  display: flex;
  flex-direction: column;
}

.ai-slide-card[data-layout="flow"][data-layout-mode="compact"] .ai-slide--no-image,
.ai-slide-card[data-layout="flow"][data-layout-mode="compact"] .ai-slide,
.ai-slide-card--flow-layout[data-layout-mode="compact"] .ai-slide {
  flex: 1 1 auto;
  min-height: 0;
  height: 100%;
  display: flex;
  flex-direction: column;
}

/* Game mockup compact: single-viewport board focus */
.ai-slide-card[data-layout="game"][data-layout-mode="compact"] .slide-content,
.ai-slide-card--game-layout[data-layout-mode="compact"] .slide-content {
  display: flex;
  flex-direction: column;
  min-height: 0;
  overflow-x: hidden;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  justify-content: safe center;
}

.ai-slide-card[data-layout="game"][data-layout-mode="compact"] .ai-lesson-screen,
.ai-slide-card[data-layout="game"][data-layout-mode="compact"] .ai-lesson-screen__inner {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
}

.ai-slide-card[data-layout="game"][data-layout-mode="compact"] .ai-lesson-screen__visual {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: center;
}

.ai-slide-card[data-layout="game"][data-layout-mode="compact"] .ai-pattern--game-mockup,
.ai-slide-card[data-layout="game"][data-layout-mode="compact"] .ai-lesson-mockup--game-screen {
  flex: 1 1 auto;
  min-height: 0;
  max-height: 100%;
  display: flex;
  flex-direction: column;
}

.ai-slide-card[data-layout="game"][data-layout-mode="compact"] .ai-lesson-mockup__item--board {
  flex: 1 1 auto;
  min-height: clamp(220px, 34vh, 460px);
  max-height: min(58vh, 560px);
}

/* —— Registry compact layouts: code_step, quiz_choice, drag_mission, etc. —— */
.ai-slide-card[data-layout-mode="compact"][data-layout="code_step"] .ai-player-stage__viewport,
.ai-slide-card[data-layout-mode="compact"][data-layout="quiz_choice"] .ai-player-stage__viewport,
.ai-slide-card[data-layout-mode="compact"][data-layout="drag_mission"] .ai-player-stage__viewport,
.ai-slide-card[data-layout-mode="compact"][data-layout="compare_before_after"] .ai-player-stage__viewport,
.ai-slide-card[data-layout-mode="compact"][data-layout="checklist_run"] .ai-player-stage__viewport,
.ai-slide-card[data-layout-mode="compact"][data-layout="terminal_demo"] .ai-player-stage__viewport,
.ai-slide-card[data-layout-mode="compact"][data-layout="app_preview"] .ai-player-stage__viewport,
.ai-slide-card[data-layout-mode="compact"][data-layout="emulator_step"] .ai-player-stage__viewport,
.ai-slide-card[data-layout="image"] .ai-player-stage__viewport,
.ai-slide-card--image-layout .ai-player-stage__viewport {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.ai-slide-card[data-layout="code_step"] .slide-content,
.ai-slide-card[data-layout="quiz_choice"] .slide-content,
.ai-slide-card[data-layout="drag_mission"] .slide-content,
.ai-slide-card[data-layout="compare_before_after"] .slide-content,
.ai-slide-card[data-layout="checklist_run"] .slide-content,
.ai-slide-card[data-layout="terminal_demo"] .slide-content,
.ai-slide-card[data-layout="app_preview"] .slide-content,
.ai-slide-card[data-layout="emulator_step"] .slide-content,
.ai-slide-card[data-layout="image"] .slide-content,
.ai-slide-card--image-layout .slide-content {
  display: flex;
  flex-direction: column;
  min-height: 0;
  overflow-x: hidden;
  overflow-y: hidden;
}

.registry-slide-layout {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-height: 0;
  height: 100%;
  gap: 8px;
}

.registry-slide-layout__header {
  flex: 0 0 auto;
}

.registry-slide-layout__header-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  min-width: 0;
}

.registry-slide-layout__badge {
  flex-shrink: 0;
  font-size: 0.72rem;
  line-height: 1.2;
  padding: 2px 8px;
  border-radius: 999px;
}

.registry-slide-layout__title {
  margin: 0;
  font-size: clamp(0.92rem, 1.7vw, 1.15rem);
  line-height: 1.2;
  flex: 1 1 auto;
  min-width: 0;
}

.registry-slide-layout__body {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.ai-layout-code-step {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  border: 1px solid #1e293b;
  border-radius: 12px;
  background: #0f172a;
  overflow: hidden;
}

.ai-layout-code-step__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 8px 12px;
  background: #1e293b;
  color: #e2e8f0;
  font-size: 12px;
  font-weight: 700;
}

.ai-layout-code-step__pre {
  flex: 1 1 auto;
  min-height: 0;
  margin: 0;
  padding: 12px 0;
  overflow: auto;
  color: #e2e8f0;
  font-size: clamp(13px, 0.95vw, 15px);
  line-height: 1.55;
}

.ai-layout-code-step__line {
  display: block;
  padding: 0 12px 0 0;
}

.ai-layout-code-step__line.is-highlight {
  background: rgba(56, 189, 248, 0.12);
}

.ai-layout-code-step__ln {
  display: inline-block;
  width: 2.5em;
  padding-right: 12px;
  margin-right: 8px;
  text-align: right;
  color: #64748b;
  user-select: none;
}

.ai-layout-quiz-choice {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.ai-layout-quiz-choice__question {
  margin: 0;
  font-size: clamp(1rem, 1.5vw, 1.15rem);
  font-weight: 800;
  line-height: 1.35;
}

.ai-layout-quiz-choice__choices {
  flex: 1 1 auto;
  min-height: 0;
  display: grid;
  gap: 10px;
  align-content: start;
}

.ai-layout-quiz-choice__explanation {
  margin: 0;
  font-size: 13px;
  color: #475569;
}

.ai-layout-drag-mission {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.ai-layout-drag-mission__mission {
  margin: 0;
  font-size: clamp(0.95rem, 1.4vw, 1.05rem);
  font-weight: 700;
}

.ai-layout-drag-mission__board {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.ai-layout-drag-mission__slot {
  min-height: 72px;
  border: 2px dashed #cbd5e1;
  border-radius: 12px;
  background: #f8fafc;
  display: flex;
  align-items: center;
  justify-content: center;
}

.ai-layout-drag-mission__slot-no {
  font-size: 18px;
  font-weight: 800;
  color: #94a3b8;
}

.ai-layout-drag-mission__items {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 8px;
}

.ai-layout-drag-mission__item {
  padding: 12px 14px;
  border-radius: 10px;
  border: 1px solid #cbd5e1;
  background: #fff;
  font-weight: 700;
  box-shadow: 0 1px 0 rgba(15, 23, 42, 0.04);
}

.ai-layout-compare {
  flex: 1 1 auto;
  min-height: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

.ai-layout-compare__panel {
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 10px;
  border-radius: 12px;
  border: 1px solid #e2e8f0;
  background: #fff;
  overflow: hidden;
}

.ai-layout-compare__label {
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #64748b;
}

.ai-layout-compare__figure {
  flex: 1 1 auto;
  min-height: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: stretch;
  overflow: hidden;
}

.ai-layout-compare__figure .ai-lesson-image-fit {
  flex: 1 1 auto;
  min-height: 0;
}

.ai-layout-compare__img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.ai-layout-compare__text,
.ai-layout-compare__code {
  margin: 0;
  font-size: 13px;
  line-height: 1.45;
}

.ai-layout-checklist-run {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
  overflow: hidden;
}

.ai-layout-checklist-run__hint {
  margin: 0;
  padding: 8px 10px;
  border-radius: 8px;
  background: #eff6ff;
  color: #1d4ed8;
  font-size: 13px;
  font-weight: 600;
}

.ai-layout-checklist-run .ai-lesson-interactive-check {
  flex: 1 1 auto;
  min-height: 0;
  overflow: auto;
}

.ai-layout-terminal {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  border-radius: 12px;
  border: 1px solid #1e293b;
  background: #0b1220;
  overflow: hidden;
}

.ai-layout-terminal__head {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  background: #111827;
  color: #e2e8f0;
}

.ai-layout-terminal__dots {
  display: inline-flex;
  gap: 4px;
}

.ai-layout-terminal__dots i {
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: #475569;
  display: inline-block;
}

.ai-layout-terminal__title {
  flex: 1 1 auto;
  font-size: 12px;
  font-weight: 700;
}

.ai-layout-terminal__body {
  flex: 1 1 auto;
  min-height: 0;
  padding: 14px 16px;
  overflow: auto;
}

.ai-layout-terminal__cmd,
.ai-layout-terminal__output {
  margin: 0;
  color: #e2e8f0;
  font-size: clamp(14px, 1vw, 16px);
  line-height: 1.55;
  white-space: pre-wrap;
  word-break: break-word;
}

.ai-layout-terminal__output {
  margin-top: 12px;
  color: #86efac;
}

.ai-layout-app-preview {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
}

.ai-layout-app-preview__device {
  flex: 1 1 auto;
  min-height: 0;
  width: min(100%, 320px);
  max-height: 100%;
  border-radius: 24px;
  border: 8px solid #0f172a;
  background: #111827;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: stretch;
}

.ai-layout-app-preview__device .ai-lesson-image-fit {
  flex: 1 1 auto;
  min-height: 0;
}

.ai-layout-app-preview__screen {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.ai-slide-image__img[data-fit="fill"],
.ai-layout-app-preview__screen[data-fit="fill"],
.ai-layout-emulator-step__img[data-fit="fill"],
.ai-layout-compare__img[data-fit="fill"],
.ai-pattern-image-placeholder__img[data-fit="fill"] {
  object-fit: fill;
}

.ai-slide-image__img[data-fit="cover"],
.ai-layout-app-preview__screen[data-fit="cover"],
.ai-layout-emulator-step__img[data-fit="cover"],
.ai-layout-compare__img[data-fit="cover"],
.ai-pattern-image-placeholder__img[data-fit="cover"] {
  object-fit: cover;
}

.ai-slide-image[data-fit="fill"] .ai-slide-image__img,
.ai-layout-emulator-step__frame[data-fit="fill"] .ai-layout-emulator-step__img,
.ai-layout-compare__figure[data-fit="fill"] .ai-layout-compare__img {
  object-fit: fill;
}

.ai-slide-image[data-fit="cover"] .ai-slide-image__img,
.ai-layout-emulator-step__frame[data-fit="cover"] .ai-layout-emulator-step__img,
.ai-layout-compare__figure[data-fit="cover"] .ai-layout-compare__img {
  object-fit: cover;
}

.ai-layout-app-preview__placeholder {
  color: #94a3b8;
  font-weight: 700;
}

.ai-layout-app-preview__caption {
  margin: 0;
  font-size: 13px;
  font-weight: 700;
  color: #475569;
}

.ai-layout-emulator-step {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.ai-layout-emulator-step__step {
  flex: 0 0 auto;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #2563eb;
}

.ai-layout-emulator-step__frame {
  position: relative;
  flex: 1 1 auto;
  min-height: 0;
  border-radius: 12px;
  border: 1px solid #e2e8f0;
  background: #f8fafc;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: stretch;
}

.ai-layout-emulator-step__frame .ai-lesson-image-fit {
  flex: 1 1 auto;
  min-height: 0;
}

.ai-layout-emulator-step__img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.ai-layout-emulator-step__placeholder {
  color: #94a3b8;
  font-weight: 700;
}

.ai-layout-emulator-step__callout {
  position: absolute;
  transform: translate(-50%, -50%);
  padding: 4px 8px;
  border-radius: 999px;
  background: rgba(37, 99, 235, 0.92);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  white-space: nowrap;
  pointer-events: none;
}

.prompt-slide__header--compact {
  flex: 0 0 auto;
  gap: 0;
  margin-bottom: 2px;
}

.prompt-slide__header-title-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  min-width: 0;
}

.prompt-slide__header-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  flex-wrap: nowrap;
}

.prompt-slide__header-main {
  display: flex;
  flex-direction: column;
  gap: 0;
  min-width: 0;
  flex: 1 1 auto;
}

.prompt-slide__header--compact .prompt-slide__badge {
  flex-shrink: 0;
  font-size: 0.72rem;
  line-height: 1.2;
  padding: 2px 8px;
  border-radius: 999px;
}

.prompt-slide__header--compact .prompt-slide__title {
  margin: 0;
  font-size: clamp(0.92rem, 1.7vw, 1.15rem);
  line-height: 1.2;
  flex: 1 1 auto;
  min-width: 0;
}

.prompt-slide__copy-btn {
  flex-shrink: 0;
  align-self: center;
  border-radius: 999px;
  padding: 5px 12px;
  font-size: 12px;
  font-weight: 700;
  white-space: nowrap;
}

.prompt-slide--compact .prompt-copy-card,
.prompt-slide.prompt-slide--compact .prompt-copy-card,
.prompt-copy-card--compact {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  padding: 0 !important;
  margin: 0;
  overflow: hidden;
  border-radius: 12px;
  border: 1px solid rgba(37, 99, 235, 0.35);
  background: #0f172a;
  box-shadow: none;
}

.prompt-copy-card--compact .prompt-copy-header,
.prompt-copy-card--compact .ai-lesson-prompt-box__hint {
  display: none;
}

.prompt-slide--compact .prompt-scroll-box {
  flex: 1 1 auto;
  min-height: 0;
  height: 100%;
  max-height: none;
  overflow-y: auto;
  overflow-x: hidden;
  margin: 0;
  padding: var(--ai-prompt-box-pad-y, 20px) var(--ai-prompt-box-pad-x, 22px);
  border-radius: 12px;
  background: transparent;
  color: #e5e7eb;
  font-size: var(--ai-prompt-box-font-size, clamp(16px, 1.15vw, 19px));
  line-height: var(--ai-prompt-box-line-height, 1.6);
}

.prompt-slide--compact .prompt-scroll-box code {
  display: block;
  height: auto;
  min-height: 100%;
}

.prompt-slide--compact .prompt-copy-card {
  position: relative;
}

.prompt-slide--compact .prompt-copy-card .ai-lesson-copy-hint {
  position: absolute;
  left: 8px;
  right: 8px;
  bottom: 8px;
  margin: 0;
  padding: 6px 10px;
  font-size: 11px;
  font-weight: 600;
  border-radius: 8px;
  z-index: 2;
}

.prompt-slide--compact .prompt-copy-card [data-copy-manual-confirm],
.prompt-slide--compact .prompt-copy-card [data-prompt-confirm] {
  flex: 0 0 auto;
  margin: 0;
  padding: 4px 10px;
  font-size: 11px;
  min-height: 0;
  line-height: 1.3;
  border-radius: 8px;
}

.prompt-slide--compact .prompt-copy-card [data-prompt-confirm]:disabled {
  display: none;
}

.prompt-slide--compact .prompt-copy-card [data-copy-manual-confirm][hidden] {
  display: none;
}

/* Multi-condition prompts: show full text (no inner pre clip), compact typography */
.prompt-copy-card--full-text,
.prompt-slide--compact .prompt-copy-card--full-text {
  overflow: visible;
  flex: 0 1 auto;
}

.prompt-slide--compact:has(.prompt-copy-card--full-text) {
  height: auto;
}

.ai-slide-card[data-layout="prompt"][data-layout-mode="compact"] .slide-content,
.ai-slide-card--prompt-layout[data-layout-mode="compact"] .slide-content {
  overflow-y: auto;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
}

.prompt-copy-card--full-text .prompt-scroll-box,
.prompt-slide--compact .prompt-copy-card--full-text .prompt-scroll-box {
  overflow: visible;
  height: auto;
  max-height: none;
  flex: 0 0 auto;
  padding: var(--ai-prompt-box-pad-y, 20px) var(--ai-prompt-box-pad-x, 22px);
  font-size: var(--ai-prompt-box-font-size, clamp(16px, 1.15vw, 19px));
  line-height: var(--ai-prompt-box-line-height, 1.6);
}

.prompt-copy-card--full-text .prompt-scroll-box .ai-code-block,
.prompt-copy-card--full-text .prompt-scroll-box .ai-code-block__pre,
.prompt-copy-card--full-text .prompt-scroll-box .ai-code-block__pre--scroll,
.prompt-slide--compact .prompt-copy-card--full-text .ai-code-block--compact .ai-code-block__pre {
  max-height: none;
  overflow: visible;
  height: auto;
  padding: 0;
  font-size: inherit;
  line-height: inherit;
}

.prompt-copy-card--full-text.prompt-copy-card--overflow .prompt-scroll-box {
  max-height: var(--ai-prompt-box-max-height, min(66vh, 640px));
  overflow-y: auto;
}

.prompt-scroll-affordance {
  margin: 0;
  padding: 6px 12px 10px;
  font-size: 11px;
  font-weight: 600;
  line-height: 1.35;
  color: #93c5fd;
  text-align: center;
}

.prompt-copy-card--overflow .prompt-scroll-box {
  position: relative;
  mask-image: linear-gradient(to bottom, #000 0%, #000 82%, transparent 100%);
  -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 82%, transparent 100%);
}

/* Flow layout card chrome */
.ai-slide-card[data-layout="flow"] .ai-lesson-card__meta,
.ai-slide-card--flow-layout .ai-lesson-card__meta {
  margin-bottom: 4px;
}

.ai-slide-card[data-layout="flow"] .slide-content > h2,
.ai-slide-card--flow-layout .slide-content > h2 {
  margin: 0 0 4px;
  font-size: clamp(1rem, 1.8vw, 1.35rem);
  line-height: 1.2;
}

.ai-lesson-screen--flow-focus {
  flex: 1 1 auto;
  min-height: 0;
  height: 100%;
  display: flex;
  flex-direction: column;
  margin: 0;
}

.ai-lesson-screen--flow-focus .ai-lesson-screen__inner {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.ai-lesson-screen--flow-focus .ai-lesson-screen__subheadline--compact {
  margin: 0;
  font-size: clamp(13px, 1.05vw, 15px);
  line-height: 1.35;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  color: #64748b;
}

.ai-lesson-screen--flow-focus .ai-lesson-screen__visual--flow {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  align-items: stretch;
  justify-content: center;
  margin: 0;
  width: 100%;
}

.ai-player-shell:has(.ai-slide-card[data-layout="flow"]) .ai-lesson-screen__visual--flow,
.ai-slide-card[data-layout="flow"] .ai-lesson-screen__visual--flow {
  flex: 1 1 auto;
  min-height: 0;
}

.flow-slide-layout {
  flex: 1 1 auto;
  min-height: 0;
  height: 100%;
  width: 100%;
  display: flex;
  flex-direction: column;
}

.flow-slide-visual {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  padding: clamp(6px, 1.2vh, 14px) clamp(6px, 1.2vw, 16px);
}

.flow-diagram,
.ai-pattern--flow-compact[data-role="pattern-flow-diagram"],
.ai-pattern--flow-focus[data-role="pattern-flow-diagram"],
.flow-slide-layout .ai-lesson-flow[data-role="lesson-flow"] {
  width: min(92%, 1100px);
  min-height: clamp(200px, 48vh, 560px);
  max-width: none;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: clamp(16px, 2.8vw, 40px);
  margin: 0;
  align-self: center;
}

.flow-slide-layout .ai-lesson-flow__node,
.flow-diagram .ai-lesson-flow__node,
.ai-pattern--flow-compact .ai-lesson-flow__node {
  background: #eef2ff;
  border: 2px solid #a5b4fc;
  border-radius: clamp(12px, 1.2vw, 18px);
  padding: clamp(16px, 2vw, 30px) clamp(22px, 2.8vw, 44px);
  font-size: clamp(20px, 2.2vw, 40px);
  font-weight: 700;
  line-height: 1.25;
  text-align: center;
  flex: 0 1 auto;
  min-width: min(120px, 26vw);
  box-shadow: 0 8px 24px rgba(99, 102, 241, 0.12);
}

.flow-slide-layout .ai-lesson-flow__arrow,
.flow-diagram .ai-lesson-flow__arrow,
.ai-pattern--flow-compact .ai-lesson-flow__arrow {
  color: #475569;
  font-size: clamp(28px, 3.2vw, 52px);
  font-weight: 800;
  line-height: 1;
  flex-shrink: 0;
}

.ai-slide-card[data-layout="flow"] .ai-player-stage__viewport,
.ai-slide-card--flow-layout .ai-player-stage__viewport {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.ai-player-main-inner:has(.ai-slide-card[data-layout="flow"]) {
  min-height: 0;
}

.ai-slide-card:fullscreen .flow-slide-layout .ai-lesson-flow__node,
.ai-slide-card:-webkit-full-screen .flow-slide-layout .ai-lesson-flow__node,
.ai-slide-card.is-theater-fullscreen.is-fullscreen-active .flow-slide-layout .ai-lesson-flow__node,
body.ai-lesson-fullscreen-active .flow-slide-layout .ai-lesson-flow__node,
.ai-player-shell.is-fullscreen-mode .flow-slide-layout .ai-lesson-flow__node,
.ai-player.ai-player--fullscreen .flow-slide-layout .ai-lesson-flow__node {
  font-size: clamp(24px, 2.8vw, 48px);
  padding: clamp(20px, 2.4vw, 36px) clamp(28px, 3.2vw, 52px);
  min-height: 88px;
}

.ai-slide-card:fullscreen .flow-slide-layout .ai-lesson-flow__arrow,
.ai-slide-card:-webkit-full-screen .flow-slide-layout .ai-lesson-flow__arrow,
.ai-slide-card.is-theater-fullscreen.is-fullscreen-active .flow-slide-layout .ai-lesson-flow__arrow,
body.ai-lesson-fullscreen-active .flow-slide-layout .ai-lesson-flow__arrow,
.ai-player-shell.is-fullscreen-mode .flow-slide-layout .ai-lesson-flow__arrow,
.ai-player.ai-player--fullscreen .flow-slide-layout .ai-lesson-flow__arrow {
  font-size: clamp(36px, 3.8vw, 64px);
}

.ai-slide-card:fullscreen .flow-diagram,
.ai-slide-card:-webkit-full-screen .flow-diagram,
.ai-slide-card.is-theater-fullscreen.is-fullscreen-active .flow-diagram,
body.ai-lesson-fullscreen-active .flow-diagram,
.ai-player-shell.is-fullscreen-mode .flow-diagram,
.ai-player.ai-player--fullscreen .flow-diagram {
  min-height: clamp(260px, 58vh, 680px);
  width: min(94%, 1200px);
}

@media (max-width: 768px) {
  .flow-diagram,
  .ai-pattern--flow-compact[data-role="pattern-flow-diagram"],
  .flow-slide-layout .ai-lesson-flow[data-role="lesson-flow"] {
    min-height: clamp(160px, 38vh, 420px);
    gap: clamp(10px, 2.5vw, 20px);
    width: 96%;
  }

  .flow-slide-layout .ai-lesson-flow__node,
  .flow-diagram .ai-lesson-flow__node,
  .ai-pattern--flow-compact .ai-lesson-flow__node {
    font-size: clamp(16px, 4.2vw, 24px);
    padding: clamp(12px, 2.5vw, 18px) clamp(14px, 3vw, 22px);
    min-width: min(88px, 24vw);
  }

  .flow-slide-layout .ai-lesson-flow__arrow,
  .flow-diagram .ai-lesson-flow__arrow,
  .ai-pattern--flow-compact .ai-lesson-flow__arrow {
    font-size: clamp(22px, 5vw, 32px);
  }
}

@media (max-width: 520px) {
  .flow-diagram,
  .ai-pattern--flow-compact[data-role="pattern-flow-diagram"] {
    flex-direction: column;
    align-items: stretch;
  }

  .flow-slide-layout .ai-lesson-flow__arrow,
  .flow-diagram .ai-lesson-flow__arrow,
  .ai-pattern--flow-compact .ai-lesson-flow__arrow {
    transform: rotate(90deg);
    text-align: center;
    align-self: center;
  }
}

.prompt-slide__header {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.prompt-slide__badge-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  margin: 0;
}

.prompt-slide__badge {
  font-weight: 700;
}

.prompt-slide__index {
  font-variant-numeric: tabular-nums;
}

.prompt-slide__title {
  margin: 0;
  font-size: var(--lesson-present-h1, clamp(1.35rem, 2.8vw, 1.75rem));
  line-height: 1.25;
}

.prompt-slide__description,
.prompt-slide .slide-description,
.ai-lesson-prompt-instruction {
  display: block;
  position: relative;
  margin: 0;
  line-height: 1.65;
  flex: 0 0 auto;
  font-size: var(--lesson-present-body, 1rem);
}

.prompt-slide__run-target {
  flex: 0 0 auto;
  padding: 12px 16px;
  border-radius: 12px;
  background: #f1f5f9;
  border: 1px solid #e2e8f0;
  font-size: 0.95rem;
  line-height: 1.55;
}

.prompt-slide__run-target-label {
  font-weight: 700;
  color: #334155;
}

.prompt-slide__run-target-value {
  color: #0f172a;
}

.prompt-slide__checklist {
  flex: 0 0 auto;
  margin: 0;
  padding: 16px 18px;
  border-radius: 14px;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
}

.prompt-slide__checklist-title {
  margin: 0 0 12px;
  font-size: 1rem;
  font-weight: 700;
  color: #0f172a;
}

.prompt-slide__checklist-list {
  margin: 0;
  padding-left: 1.35rem;
  line-height: 1.65;
}

.prompt-slide__checklist-list li + li {
  margin-top: 6px;
}

.prompt-slide__section {
  flex: 0 0 auto;
}

.ai-pattern--prompt-recipe--step.prompt-check-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin: 0;
  width: 100%;
  max-width: none;
  flex: 0 0 auto;
  position: relative;
}

.ai-pattern--prompt-recipe--step.prompt-check-grid.ai-pattern--prompt-recipe--single-col {
  grid-template-columns: 1fr;
  gap: 8px;
  max-width: min(100%, 36rem);
  margin-inline: 0;
}

/* —— Prompt copy card —— */
.prompt-slide .prompt-copy-card,
.ai-prompt-slide .prompt-copy-card {
  position: relative;
  width: 100%;
  margin: 0;
  padding: 22px;
  border-radius: 20px;
  border: 1px solid rgba(37, 99, 235, 0.3);
  background: #f8fbff;
  box-sizing: border-box;
  flex: 0 0 auto;
  overflow: visible;
}

.prompt-copy-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 14px;
  flex-wrap: wrap;
}

.prompt-copy-header strong {
  font-size: 15px;
  letter-spacing: 0.02em;
}

.prompt-copy-button {
  flex: 0 0 auto;
  border-radius: 999px;
  padding: 10px 18px;
  font-weight: 700;
}

.prompt-copy-button.is-copied {
  background: #16a34a;
  border-color: #16a34a;
}

/* Prompt copy box — guide text (not code editor); shared typography tokens */
:root {
  --ai-prompt-box-font-size: clamp(16px, 1.15vw, 19px);
  --ai-prompt-box-line-height: 1.6;
  --ai-prompt-box-pad-y: 22px;
  --ai-prompt-box-pad-x: 24px;
  --ai-prompt-box-max-height: min(66vh, 640px);
}

.prompt-scroll-box,
.prompt-scroll-box code,
.prompt-copy-card__text,
.ai-lesson-prompt-box__text,
.prompt-code,
.prompt-text,
.ai-prompt-block pre,
.ai-prompt-block code {
  display: block;
  max-height: var(--ai-prompt-box-max-height);
  overflow-y: auto;
  overflow-x: hidden;
  padding: var(--ai-prompt-box-pad-y) var(--ai-prompt-box-pad-x);
  border-radius: 16px;
  background: #0f172a;
  color: #e5e7eb;
  font-size: var(--ai-prompt-box-font-size);
  line-height: var(--ai-prompt-box-line-height);
  white-space: pre-wrap;
  word-break: break-word;
  overflow-wrap: anywhere;
  margin: 0;
  box-sizing: border-box;
  font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", "Apple SD Gothic Neo", "Malgun Gothic", sans-serif;
}

.prompt-scroll-box code {
  padding: 0;
  border: 0;
  background: transparent;
  font-family: inherit;
  font-size: inherit;
  line-height: inherit;
  color: inherit;
}

.ai-lesson-prompt-box--bad .prompt-scroll-box {
  background: #1c1917;
  border-color: rgba(248, 113, 113, 0.35);
}

.ai-lesson-prompt-box--good .prompt-scroll-box {
  background: #0f1a14;
  border-color: rgba(74, 222, 128, 0.35);
}

.ai-slide-card:fullscreen .prompt-scroll-box,
.ai-slide-card:-webkit-full-screen .prompt-scroll-box,
.ai-slide-card.is-theater-fullscreen.is-fullscreen-active .prompt-scroll-box,
body.ai-lesson-fullscreen-active .prompt-scroll-box,
body.lesson-player-fullscreen .prompt-scroll-box,
.ai-player-shell.is-fullscreen-mode .prompt-scroll-box,
.ai-player.ai-player--fullscreen .prompt-scroll-box {
  max-height: min(58vh, 640px);
  font-size: 18px;
  line-height: 1.75;
}

.ai-slide-card:fullscreen .prompt-slide--compact .prompt-scroll-box,
.ai-slide-card:-webkit-full-screen .prompt-slide--compact .prompt-scroll-box,
.ai-slide-card.is-theater-fullscreen.is-fullscreen-active .prompt-slide--compact .prompt-scroll-box,
body.ai-lesson-fullscreen-active .prompt-slide--compact .prompt-scroll-box,
.ai-player-shell.is-fullscreen-mode .prompt-slide--compact .prompt-scroll-box,
.ai-player.ai-player--fullscreen .prompt-slide--compact .prompt-scroll-box {
  max-height: none;
  flex: 1 1 auto;
}

@media (min-width: 1024px) {
  :root {
    --ai-prompt-box-font-size: clamp(18px, 1.05vw, 19px);
    --ai-prompt-box-pad-y: 24px;
    --ai-prompt-box-pad-x: 26px;
  }

  .prompt-scroll-box,
  .prompt-scroll-box code,
  .prompt-slide--compact .prompt-scroll-box,
  .ai-practice-mission-layout--prompt-focus .prompt-scroll-box,
  .ai-practice-mission-layout--prompt-focus .ai-lesson-prompt-box__text,
  .ai-practice-mission-layout--prompt-focus .prompt-copy-card__text {
    font-size: var(--ai-prompt-box-font-size);
    line-height: var(--ai-prompt-box-line-height);
  }
}

html[data-ai-lesson-edit-mode="on"] .ai-slide-card--prompt-layout .slide-content,
html[data-ai-lesson-edit-mode="on"] .ai-slide-card--prompt-step .slide-content {
  padding-inline: max(var(--lesson-present-slide-pad-inline, 20px), 58px);
}

@media (max-width: 768px) {
  .ai-pattern--prompt-recipe--step.prompt-check-grid {
    grid-template-columns: 1fr;
  }

  html[data-ai-lesson-edit-mode="on"] .ai-slide-card--prompt-layout .slide-content,
  html[data-ai-lesson-edit-mode="on"] .ai-slide-card--prompt-step .slide-content {
    padding-inline: var(--lesson-present-slide-pad-inline, 16px);
  }

  .prompt-copy-header {
    flex-direction: column;
    align-items: stretch;
  }

  .prompt-copy-button {
    width: 100%;
  }

  :root {
    --ai-prompt-box-font-size: 15px;
    --ai-prompt-box-line-height: 1.55;
    --ai-prompt-box-pad-y: 16px;
    --ai-prompt-box-pad-x: 18px;
    --ai-prompt-box-max-height: min(50vh, 420px);
  }

  .prompt-scroll-box,
  .prompt-scroll-box code,
  .prompt-copy-card__text,
  .ai-lesson-prompt-box__text {
    max-height: var(--ai-prompt-box-max-height);
    font-size: var(--ai-prompt-box-font-size);
    line-height: var(--ai-prompt-box-line-height);
    padding: var(--ai-prompt-box-pad-y) var(--ai-prompt-box-pad-x);
  }
}

/* —— Dedicated layouts: image / video / boxes (isolated from generic text slides) —— */
.ai-slide-card--dedicated-layout .slide-content,
.ai-slide-content--dedicated-layout {
  overflow-x: hidden;
  overflow-y: auto;
}

.ai-slide-card--dedicated-layout .slide-content > .ai-lesson-card__meta,
.ai-slide-card--dedicated-layout .slide-content > h2:first-of-type,
.ai-slide-content--dedicated-layout > .ai-lesson-card__meta,
.ai-slide-content--dedicated-layout > h2:first-of-type {
  display: none;
}

.dedicated-slide-layout {
  display: flex;
  flex-direction: column;
  gap: 20px;
  width: 100%;
  min-height: 0;
  flex: 1 1 auto;
  position: relative;
  box-sizing: border-box;
}

.dedicated-slide-layout--single-block,
.boxes-slide-layout--single-block {
  gap: clamp(8px, 1vh, 14px);
  flex: 0 1 auto;
}

.dedicated-slide-layout--single-block > .dedicated-slide__description,
.dedicated-slide-layout--single-block > .slide-description {
  margin-bottom: 0;
}

.dedicated-slide-layout--single-block > .boxes-slide-layout__grid,
.dedicated-slide-layout--single-block > .prompt-check-grid {
  margin-top: 0;
}

/* Image fit wrappers (object-fit via img tag) */
.ai-lesson-image-fit {
  width: 100%;
  height: 100%;
  min-height: 0;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
}

.ai-lesson-image-fit--contain img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
}

.ai-lesson-image-fit--fill img {
  width: 100%;
  height: 100%;
  object-fit: fill;
}

.ai-lesson-image-fit--cover img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

.ai-lesson-image-stage {
  width: 100%;
  height: 100%;
  min-height: 0;
  overflow: hidden;
  box-sizing: border-box;
}

/* Image-based dedicated layouts: fill viewport without page scroll */
.ai-slide-card--image-layout .slide-content,
.ai-slide-card[data-layout="image"] .slide-content,
.ai-slide-card--image-layout .ai-player-stage__viewport,
.ai-slide-card[data-layout="image"] .ai-player-stage__viewport {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-height: 0;
  overflow: hidden;
}

.ai-slide-card--image-layout,
.ai-slide-card[data-layout="image"],
.ai-slide-card[data-layout="emulator_step"],
.ai-slide-card[data-layout="app_preview"],
.ai-slide-card[data-layout="compare_before_after"] {
  --lesson-slide-image-box-min: 0;
  --lesson-slide-image-box-max: none;
  --lesson-slide-image-box-h: 100%;
}

.dedicated-slide-layout.image-slide-layout,
.dedicated-slide-layout.ai-layout-emulator-step-layout,
.dedicated-slide-layout.ai-layout-app-preview-layout,
.dedicated-slide-layout.ai-layout-compare-layout {
  flex: 1 1 auto;
  min-height: 0;
  height: 100%;
  gap: 8px;
}

.dedicated-slide-layout > .dedicated-slide__header,
.dedicated-slide-layout > header.dedicated-slide__header {
  flex: 0 0 auto;
}

.dedicated-slide-layout > .dedicated-slide__description,
.dedicated-slide-layout > .slide-description {
  flex: 0 0 auto;
}

/* Image slide */
.ai-slide-card--image-layout .slide-content {
  overflow: hidden;
}

.image-slide-layout__hero {
  flex: 1 1 auto;
  min-height: 0;
  width: 100%;
  height: auto;
  max-height: none;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: stretch;
  box-sizing: border-box;
  overflow: hidden;
}

.image-slide-layout__hero .ai-slide-image,
.image-slide-layout__hero .lesson-slide-image-wrap,
.image-slide-layout__hero .ai-lesson-image-stage {
  width: 100%;
  height: 100%;
  min-height: 0;
  max-width: none;
  max-height: none;
  margin: 0;
  padding: 0;
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
}

.image-slide-layout__hero .ai-lesson-image-fit {
  flex: 1 1 auto;
  min-height: 0;
}

.image-slide-layout__hero .ai-slide-image__img,
.image-slide-layout__hero img {
  display: block;
}

.image-slide-layout__missing {
  margin: 0;
  padding: 16px;
  border-radius: 12px;
  background: #fef2f2;
  color: #991b1b;
}

/* Media-main slides — full-bleed image/video in stage (Kiki subtitle carries copy) */
.dedicated-slide-layout--media-focus,
.ai-slide-card[data-layout="video"][data-image-focus="true"] .video-slide-layout {
  flex: 1 1 auto;
  min-height: 0;
  height: 100%;
  gap: 0;
}

.dedicated-slide-layout--media-focus > .dedicated-slide__header,
.dedicated-slide-layout--media-focus > header.dedicated-slide__header,
.dedicated-slide-layout--media-focus > .dedicated-slide__description,
.dedicated-slide-layout--media-focus > .prompt-slide__description,
.dedicated-slide-layout--media-focus > .slide-description,
.dedicated-slide-layout--media-focus > .ai-stage-narration,
.dedicated-slide-layout--media-focus .video-slide-layout__feedback,
.dedicated-slide-layout--media-focus .ai-slide-caption {
  display: none !important;
}

.dedicated-slide-layout--media-focus .video-slide-layout__player-wrap,
.ai-slide-card[data-layout="video"][data-image-focus="true"] .video-slide-layout__player-wrap {
  flex: 1 1 auto;
  min-height: 0;
  width: 100%;
  max-width: none;
  margin: 0;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: center;
}

.dedicated-slide-layout--media-focus .video-slide-layout__presentation,
.dedicated-slide-layout--media-focus .video-slide-layout__presentation-stage {
  flex: 1 1 auto;
  min-height: 0;
  width: 100%;
  height: 100%;
  max-height: none;
  display: flex;
  align-items: center;
  justify-content: center;
}

.dedicated-slide-layout--media-focus .ai-media-video,
.dedicated-slide-layout--media-focus .ai-media-video__player-shell,
.dedicated-slide-layout--media-focus .image-slide-layout__hero,
.dedicated-slide-layout--media-focus .image-slide-layout__hero .ai-slide-image,
.dedicated-slide-layout--media-focus .image-slide-layout__hero .ai-lesson-image-stage,
.dedicated-slide-layout--media-focus .image-slide-layout__hero .ai-lesson-image-fit {
  flex: 1 1 auto;
  min-height: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  max-height: none;
  margin: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.dedicated-slide-layout--media-focus .ai-lesson-video-player,
.dedicated-slide-layout--media-focus .image-slide-layout__hero img,
.dedicated-slide-layout--media-focus .image-slide-layout__hero .ai-slide-image__img,
.dedicated-slide-layout--media-focus .ai-lesson-image-fit img {
  display: block;
  width: 100%;
  height: 100%;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  object-position: center center;
}

.ai-player-shell.is-interactive-stage .dedicated-slide-layout--media-focus .video-slide-layout__player-wrap .ai-lesson-video-player {
  max-height: none;
}

/* Video slide */
.video-slide-layout__player-wrap {
  width: 100%;
  max-width: min(100%, 1080px);
  margin: 0 auto;
  flex: 0 0 auto;
}

.video-slide-layout__player-wrap .ai-media-video,
.video-slide-layout__player-wrap .ai-slide-image {
  width: 100%;
  margin: 0;
  max-width: none;
}

.video-slide-layout__player-wrap .ai-lesson-video-player {
  display: block;
  width: 100%;
  height: auto;
  max-height: min(58vh, 640px);
  aspect-ratio: 16 / 9;
  object-fit: contain;
  background: #0f172a;
  border-radius: 14px;
  border: 1px solid rgba(148, 163, 184, 0.35);
}

/* Portrait result-video temporary fallback: keep full frame visible */
.video-slide-layout__player-wrap .ai-media-video.ai-media-video--portrait-result {
  aspect-ratio: auto;
}

.ai-player-shell:not(.is-admin-slide-mode) .ai-slide-card--video-layout .ai-media-video.ai-media-video--portrait-result,
.ai-player-shell:not(.is-admin-slide-mode) .ai-slide-card[data-layout="video"] .ai-media-video.ai-media-video--portrait-result,
.ai-player-shell:not(.is-admin-slide-mode) .dedicated-slide-layout--media-focus .ai-media-video.ai-media-video--portrait-result {
  aspect-ratio: auto !important;
  max-height: none;
  height: auto;
}

.video-slide-layout__player-wrap .ai-media-video.ai-media-video--portrait-result .ai-media-video__player-shell {
  height: auto;
  max-height: none;
}

.video-slide-layout__player-wrap .ai-media-video.ai-media-video--portrait-result .ai-lesson-video-player {
  width: auto;
  max-width: 100%;
  height: auto;
  max-height: min(72vh, 900px);
  aspect-ratio: auto;
  object-fit: contain;
  margin: 0 auto;
}

.ai-player-shell:not(.is-admin-slide-mode) .ai-slide-card--video-layout .ai-media-video.ai-media-video--portrait-result .ai-lesson-video-player,
.ai-player-shell:not(.is-admin-slide-mode) .ai-slide-card[data-layout="video"] .ai-media-video.ai-media-video--portrait-result .ai-lesson-video-player,
.ai-player-shell:not(.is-admin-slide-mode) .dedicated-slide-layout--media-focus .ai-media-video.ai-media-video--portrait-result .ai-lesson-video-player {
  width: auto !important;
  height: auto !important;
  max-width: 100%;
  max-height: min(72vh, 900px);
  object-fit: contain !important;
  margin: 0 auto;
}

.video-slide-layout__feedback {
  flex: 0 0 auto;
}

.video-slide-layout__missing {
  margin: 0;
  padding: 16px;
  border-radius: 12px;
  background: #fef2f2;
  color: #991b1b;
}

.video-slide-layout__presentation {
  position: relative;
  width: 100%;
}

.video-slide-layout__presentation-stage {
  position: relative;
  width: 100%;
  max-width: min(100%, 1080px);
  margin: 0 auto;
  aspect-ratio: 16 / 9;
  max-height: min(58vh, 640px);
  border-radius: 14px;
  overflow: hidden;
  background: #0f172a;
  border: 1px solid rgba(148, 163, 184, 0.35);
}

.video-slide-layout__presentation-layer {
  width: 100%;
}

.video-slide-layout__presentation-layer--video,
.video-slide-layout__presentation-layer--images {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.video-slide-layout__presentation-layer--video {
  z-index: 1;
  opacity: 1;
  transition: opacity 0.4s ease;
}

.video-slide-layout__presentation-layer--video.is-fading-out,
.video-slide-layout__presentation.is-image-phase .video-slide-layout__presentation-layer--video {
  opacity: 0;
  pointer-events: none;
}

.video-slide-layout__presentation-layer--video[hidden] {
  display: none !important;
}

.video-slide-layout__presentation-layer--images {
  z-index: 2;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.4s ease;
}

.video-slide-layout__presentation-layer--images.is-visible,
.video-slide-layout__presentation.is-image-phase .video-slide-layout__presentation-layer--images {
  opacity: 1;
  pointer-events: auto;
}

.video-slide-layout__presentation-layer--video .ai-media-video,
.video-slide-layout__presentation-layer--video .ai-slide-image {
  width: 100%;
  height: 100%;
  margin: 0;
  max-width: none;
  border: 0;
  border-radius: 0;
  background: transparent;
}

.video-slide-layout__presentation-layer--video .ai-lesson-video-player {
  width: 100%;
  height: 100%;
  max-height: none;
  aspect-ratio: auto;
  object-fit: contain;
  border: 0;
  border-radius: 0;
  background: #0f172a;
}

.video-slide-layout__presentation.ai-video-presentation--portrait-result .video-slide-layout__presentation-stage {
  aspect-ratio: auto;
  height: min(72vh, 900px);
}

.video-slide-layout__presentation.ai-video-presentation--portrait-result .video-slide-layout__presentation-layer--video .ai-lesson-video-player {
  width: auto;
  max-width: 100%;
  height: 100%;
  object-fit: contain;
  margin: 0 auto;
}

.video-slide-layout__presentation-image {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  max-height: none;
  aspect-ratio: auto;
  object-fit: contain;
  opacity: 0;
  transform: scale(1.015);
  transition: opacity 0.55s ease, transform 0.65s ease;
  will-change: opacity, transform;
  pointer-events: none;
}

.video-slide-layout__presentation-image--slide {
  transform: scale(1.01);
}

.video-slide-layout__presentation-image.is-visible {
  opacity: 1;
  transform: none;
  pointer-events: auto;
}

.video-slide-layout__player-wrap[data-video-kiki-presentation="true"] video::-webkit-media-controls,
.video-slide-layout__player-wrap[data-video-kiki-presentation="true"] video::-webkit-media-controls-enclosure,
.video-slide-layout__player-wrap[data-video-kiki-presentation="true"] video::-webkit-media-controls-panel {
  display: none !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

.ai-player-shell.is-kiki-presentation-active.is-video-minimal-nav {
  --ai-player-chrome-footer-reserve: 0px;
}

.ai-player-shell.is-sample-promo-lesson .video-slide-layout__presentation-stage {
  max-height: none;
}

.ai-player-shell.is-sample-promo-lesson.is-kiki-presentation-active .video-slide-layout .dedicated-slide__header {
  display: none !important;
}

.video-slide-layout__presentation.is-awaiting-tap {
  cursor: pointer;
}

.video-slide-layout__presentation.is-awaiting-tap .video-slide-layout__presentation-stage::after {
  content: "탭하여 미리보기 시작";
  position: absolute;
  left: 50%;
  bottom: 16px;
  transform: translateX(-50%);
  z-index: 4;
  padding: 8px 14px;
  border-radius: 999px;
  background: rgba(15, 23, 42, 0.72);
  color: #f8fafc;
  font-size: 13px;
  font-weight: 600;
  pointer-events: none;
}

/* Video / image / code — tighter content canvas (footer reserve) */
.ai-player-shell.is-media-content-tight {
  --ai-player-chrome-footer-reserve: 8px;
}

.ai-player-shell.is-video-minimal-nav {
  --ai-player-chrome-footer-reserve: 0px;
}

.ai-player-shell.is-video-minimal-nav .video-slide-layout__player-wrap .ai-lesson-video-player {
  max-height: min(72vh, 780px);
}

/* Interactive-stage PC prompt/result videos — intrinsic landscape aspect, no 16:9 letterbox squeeze */
.ai-player-shell.is-interactive-stage.is-video-minimal-nav:not(.is-admin-slide-mode)
  .video-slide-layout__player-wrap .ai-lesson-video-player {
  width: 100%;
  height: auto;
  max-height: min(85vh, 920px);
  aspect-ratio: auto;
  object-fit: contain;
  object-position: center center;
}

.ai-player-shell.is-interactive-stage.is-video-minimal-nav:not(.is-admin-slide-mode)
  .video-slide-layout__presentation-stage,
.ai-player-shell.is-interactive-stage.is-video-minimal-nav:not(.is-admin-slide-mode)
  .ai-media-video {
  max-width: 100%;
  max-height: min(85vh, 920px);
  aspect-ratio: auto;
  overflow: visible;
}

.ai-player-shell.is-video-minimal-nav .ai-player-stage__viewport.has-subtitle-safe--compact {
  --ai-subtitle-safe-pb: 1.35rem;
}

.ai-player-shell.is-video-minimal-nav .ai-kiki-character.is-lifted {
  transform: translateY(-52px);
}

.ai-media-video__player-shell {
  position: relative;
  width: 100%;
}

.ai-lesson-video-center-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(2, 6, 23, 0.42);
  border-radius: 14px;
  z-index: 3;
}

.ai-lesson-video-center-overlay[hidden] {
  display: none !important;
}

.ai-lesson-video-center-overlay.is-visible {
  display: flex;
}

.ai-lesson-video-center-overlay__btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 52px;
  padding: 12px 22px;
  border: 0;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.96);
  color: #0f172a;
  font-size: 16px;
  font-weight: 700;
  cursor: pointer;
  box-shadow: 0 10px 28px rgba(2, 6, 23, 0.28);
}

.ai-player-shell.is-interactive-stage .video-slide-layout {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.ai-player-shell.is-interactive-stage .video-slide-layout__player-wrap {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.ai-player-shell.is-interactive-stage .video-slide-layout__player-wrap .ai-lesson-video-player {
  max-height: 100%;
}

@media (max-width: 768px) {
  .ai-player-shell.is-interactive-stage .video-slide-layout__player-wrap .ai-lesson-video-player {
    max-height: 100%;
  }

  .ai-lesson-video-center-overlay__btn {
    min-height: 48px;
    padding: 10px 18px;
    font-size: 15px;
  }
}

/* Sample promo lesson — full-bleed content + OTT-style bottom subtitle overlay */
.ai-player-shell.is-sample-promo-lesson {
  --ai-sample-kiki-reserve: clamp(60px, 8.5vw, 84px);
  --ai-sample-subtitle-bottom: clamp(32px, 4.2vh, 48px);
  --ai-sample-subtitle-width: min(68%, 920px);
  --ai-sample-subtitle-font: clamp(24px, 2.1vw, 28px);
  --ai-sample-subtitle-line: 1.45;
  --ai-slide-content-max-w: min(1320px, 100%);
}

.ai-player-shell.is-sample-promo-lesson .lesson-slide-card,
.ai-player-shell.is-sample-promo-lesson .ai-slide-card {
  max-width: none;
}

.ai-player-shell.is-sample-promo-lesson .ai-player-stage__viewport {
  display: flex;
  flex-direction: column;
  --ai-subtitle-safe-pb: 0px;
  --ai-kiki-subtitle-pad-right: var(--ai-sample-kiki-reserve);
}

.ai-player-shell.is-sample-promo-lesson .ai-player-stage__viewport.has-subtitle-safe,
.ai-player-shell.is-sample-promo-lesson .ai-player-stage__viewport.has-subtitle-safe--compact,
.ai-player-shell.is-sample-promo-lesson .ai-player-stage__viewport.has-subtitle-safe--large,
.ai-player-shell.is-sample-promo-lesson .ai-player-stage__viewport.has-subtitle-safe--interactive {
  --ai-subtitle-safe-pb: 0px;
}

.ai-player-shell.is-sample-promo-lesson .slide-content {
  position: relative;
  flex: 1 1 auto;
  min-height: 0;
  overflow: hidden;
  overflow-y: hidden;
  align-items: stretch;
  justify-content: flex-start;
  gap: 0;
  padding: clamp(4px, 0.5vh, 8px) clamp(8px, 1.2vw, 14px);
  padding-bottom: clamp(4px, 0.5vh, 8px);
}

.ai-player-shell.is-sample-promo-lesson .slide-content > .ai-authoring-overlay-wrap:not(:has(.ai-canvas-obj)) {
  display: none;
}

.ai-player-shell.is-sample-promo-lesson .ai-slide-card .slide-content > .dedicated-slide-layout {
  flex: 1 1 auto;
  min-height: 0;
  max-width: none;
  width: 100%;
}

.ai-player-shell.is-sample-promo-lesson .ai-lesson-subtitle-overlay:not(.ai-ott-subtitle) {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  transform: none;
  width: 100%;
  max-width: 100%;
  margin: 0;
  padding:
    0
    calc(var(--ai-sample-kiki-reserve) + clamp(12px, 1.6vw, 20px))
    calc(var(--ai-sample-subtitle-bottom) + env(safe-area-inset-bottom, 0px))
    clamp(12px, 1.6vw, 20px);
  box-sizing: border-box;
  z-index: 12;
  pointer-events: none;
  display: flex;
  justify-content: center;
  align-items: flex-end;
}

.ai-player-shell.is-sample-promo-lesson .ai-lesson-subtitle-overlay:not(.ai-ott-subtitle)::before {
  display: none;
  content: none;
  background: none;
  background-image: none;
}

.ai-player-shell.is-sample-promo-lesson .ai-lesson-subtitle-overlay:not(.ai-ott-subtitle).is-exiting {
  transform: none;
}

.ai-player-shell.is-sample-promo-lesson .ai-player-stage__viewport.is-video-timeline-subtitle .ai-lesson-subtitle-overlay:not(.ai-ott-subtitle) {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  max-width: 100%;
  transform: none;
}

.ai-player-shell.is-sample-promo-lesson .ai-lesson-subtitle-overlay:not(.ai-ott-subtitle) .ai-lesson-subtitle-overlay__inner {
  position: relative;
  z-index: 1;
  pointer-events: none;
  display: block;
  width: 100%;
  max-width: var(--ai-sample-subtitle-width);
  margin: 0 auto;
  padding: 0 clamp(8px, 1.2vw, 16px);
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  backdrop-filter: none;
  overflow: visible;
}

.ai-player-shell.is-sample-promo-lesson .ai-lesson-subtitle-overlay:not(.ai-ott-subtitle).is-speaking .ai-lesson-subtitle-overlay__inner {
  border-color: transparent;
  box-shadow: none;
}

.ai-player-shell.is-sample-promo-lesson .ai-lesson-subtitle-overlay:not(.ai-ott-subtitle) .ai-lesson-subtitle-overlay__head {
  display: none;
}

.ai-player-shell.is-sample-promo-lesson .ai-lesson-subtitle-overlay:not(.ai-ott-subtitle) .ai-lesson-subtitle-overlay__text {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  overflow: hidden;
  margin: 0;
  padding: 0;
  min-height: 0;
  max-height: calc(var(--ai-sample-subtitle-line) * 1em * 3);
  font-size: var(--ai-sample-subtitle-font);
  font-weight: 600;
  line-height: var(--ai-sample-subtitle-line);
  letter-spacing: 0.01em;
  text-align: center;
  text-wrap: balance;
  color: #fff;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.75);
  word-break: keep-all;
  overflow-wrap: anywhere;
  overflow-y: hidden;
}

.ai-player-shell.is-sample-promo-lesson .ai-lesson-subtitle-overlay:not(.ai-ott-subtitle) .ai-lesson-subtitle-overlay__text .ai-subtitle-word {
  display: inline;
  color: #fff;
  padding: 0;
  border-radius: 0;
}

.ai-player-shell.is-sample-promo-lesson .ai-lesson-subtitle-overlay:not(.ai-ott-subtitle) .ai-lesson-subtitle-overlay__text .ai-subtitle-word.is-current {
  color: #ffe873;
  background: transparent;
  text-shadow:
    0 2px 8px rgba(0, 0, 0, 0.55),
    0 0 14px rgba(255, 232, 115, 0.28);
}

.ai-player-shell.is-sample-promo-lesson .video-slide-layout {
  flex: 1 1 auto;
  min-height: 0;
  height: 100%;
  gap: 0;
}

.ai-player-shell.is-sample-promo-lesson .video-slide-layout .dedicated-slide-header,
.ai-player-shell.is-sample-promo-lesson .video-slide-layout__feedback {
  display: none;
}

.ai-player-shell.is-sample-promo-lesson .dedicated-slide-layout,
.ai-player-shell.is-sample-promo-lesson .image-slide-layout {
  gap: 0;
}

/* Body header copy lives in topbar — hide duplicate badge/title/description in slide canvas */
.ai-player-shell.is-sample-promo-lesson .dedicated-slide-layout > .dedicated-slide__header,
.ai-player-shell.is-sample-promo-lesson .dedicated-slide-layout > header.dedicated-slide__header,
.ai-player-shell.is-sample-promo-lesson .dedicated-slide-layout > .dedicated-slide__description,
.ai-player-shell.is-sample-promo-lesson .dedicated-slide-layout > .prompt-slide__description,
.ai-player-shell.is-sample-promo-lesson .dedicated-slide-layout > .slide-description,
.ai-player-shell.is-sample-promo-lesson .slide-content-header,
.ai-player-shell.is-sample-promo-lesson .ai-slide-content-header,
.ai-player-shell.is-sample-promo-lesson .slide-main-title,
.ai-player-shell.is-sample-promo-lesson .ai-stage-narration,
.ai-player-shell.is-sample-promo-lesson .ai-slide-layout__overlay {
  display: none !important;
}

.ai-player-shell.is-sample-promo-lesson .video-slide-layout__player-wrap {
  flex: 1 1 auto;
  min-height: 0;
  width: 100%;
  max-width: none;
  margin: 0;
  display: flex;
  flex-direction: column;
}

.ai-player-shell.is-sample-promo-lesson .video-slide-layout__presentation {
  flex: 1 1 auto;
  min-height: 0;
  height: 100%;
  display: flex;
  flex-direction: column;
}

.ai-player-shell.is-sample-promo-lesson .video-slide-layout__presentation-stage {
  flex: 1 1 auto;
  min-height: 0;
  width: 100%;
  max-width: none;
  height: 100%;
  max-height: none;
  aspect-ratio: auto;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.ai-player-shell.is-sample-promo-lesson .video-slide-layout__presentation-layer--video,
.ai-player-shell.is-sample-promo-lesson .video-slide-layout__presentation-layer--images {
  align-items: center;
  justify-content: center;
}

.ai-player-shell.is-sample-promo-lesson .video-slide-layout__presentation-layer--video .ai-media-video,
.ai-player-shell.is-sample-promo-lesson .video-slide-layout__presentation-layer--video .ai-slide-image {
  width: 100%;
  height: 100%;
  max-width: 100%;
  max-height: 100%;
  min-height: 0;
  margin: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.ai-player-shell.is-sample-promo-lesson .ai-media-video__player-shell {
  width: 100%;
  height: 100%;
  max-width: 100%;
  max-height: 100%;
  min-height: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.ai-player-shell.is-sample-promo-lesson .video-slide-layout__presentation-layer--images {
  position: absolute;
  inset: 0;
  display: block;
  overflow: hidden;
}

.ai-player-shell.is-sample-promo-lesson .video-slide-layout__presentation-image {
  position: absolute;
  inset: 0;
  margin: auto;
  width: auto !important;
  height: auto !important;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  object-position: center center;
  opacity: 0;
  visibility: hidden;
  transform: none !important;
  transition: opacity 0.45s ease;
  pointer-events: none;
}

.ai-player-shell.is-sample-promo-lesson .video-slide-layout__presentation-image.is-visible {
  visibility: visible;
  pointer-events: auto;
}

.video-slide-layout__presentation-layer--images .video-slide-layout__presentation-image:not(.is-visible) {
  opacity: 0 !important;
  visibility: hidden;
  pointer-events: none;
  transform: none !important;
}

.ai-player-shell.is-sample-promo-lesson .video-slide-layout__presentation-image--slide,
.ai-player-shell.is-sample-promo-lesson .video-slide-layout__presentation-image.is-visible {
  opacity: 1;
  transform: none;
}

.ai-player-shell.is-sample-promo-lesson .ai-slide-media,
.ai-player-shell.is-sample-promo-lesson .ai-slide-image-stage,
.ai-player-shell.is-sample-promo-lesson .ai-slide-video-stage,
.ai-player-shell.is-sample-promo-lesson .ai-lesson-image-fit,
.ai-player-shell.is-sample-promo-lesson .image-slide-layout__hero .ai-lesson-image-stage,
.ai-player-shell.is-sample-promo-lesson .image-slide-layout__hero .ai-slide-image {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 0;
  overflow: hidden;
}

.ai-player-shell.is-sample-promo-lesson .video-slide-layout__presentation-layer--video .ai-lesson-video-player,
.ai-player-shell.is-sample-promo-lesson .ai-media-video__player-shell .ai-lesson-video-player,
.ai-player-shell.is-sample-promo-lesson .video-slide-layout__player-wrap .ai-lesson-video-player,
.ai-player-shell.is-sample-promo-lesson .video-slide-layout__presentation-image,
.ai-player-shell.is-sample-promo-lesson .ai-slide-media img,
.ai-player-shell.is-sample-promo-lesson .ai-slide-media video,
.ai-player-shell.is-sample-promo-lesson .ai-slide-image-stage img,
.ai-player-shell.is-sample-promo-lesson .ai-slide-video-stage video,
.ai-player-shell.is-sample-promo-lesson .ai-slide-layout--full .ai-lesson-video-player,
.ai-player-shell.is-sample-promo-lesson .ai-slide-image__img,
.ai-player-shell.is-sample-promo-lesson .image-slide-layout__hero img,
.ai-player-shell.is-sample-promo-lesson .image-slide-layout__hero .ai-slide-image__img,
.ai-player-shell.is-sample-promo-lesson .ai-lesson-image-fit img {
  display: block;
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 100%;
  aspect-ratio: auto;
  object-fit: contain;
  object-position: center center;
  flex: 0 1 auto;
}

.ai-player-shell.is-sample-promo-lesson .ai-slide-image__img[data-fit="cover"],
.ai-player-shell.is-sample-promo-lesson .ai-slide-image[data-fit="cover"] .ai-slide-image__img,
.ai-player-shell.is-sample-promo-lesson .ai-lesson-image-fit--cover img {
  object-fit: contain;
  object-position: center center;
}

.ai-player-shell.is-sample-promo-lesson .ai-kiki-character {
  display: flex;
  right: clamp(10px, 1.4vw, 16px);
  bottom: calc(clamp(20px, 2.8vh, 32px) + env(safe-area-inset-bottom, 0px));
  z-index: 30;
}

.ai-player-shell.is-sample-promo-lesson .ai-kiki-fab__avatar {
  width: clamp(56px, 7.5vw, 68px);
  height: clamp(56px, 7.5vw, 68px);
}

.ai-player-shell.is-sample-promo-lesson .ai-kiki-fab__label {
  font-size: 11px;
}

.ai-player-shell.is-sample-promo-lesson .ai-player-stage__viewport.has-subtitle-safe--compact {
  --ai-subtitle-safe-pb: 0px;
}

.ai-player-shell.is-sample-promo-lesson .ai-slide-layout--full .ai-slide-layout__hero,
.ai-player-shell.is-sample-promo-lesson .ai-slide-layout--full .ai-slide-layout__media {
  flex: 1 1 auto;
  min-height: 0;
  margin-bottom: 0;
}

.ai-player-shell.is-sample-promo-lesson .image-slide-layout__hero {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.ai-player-shell.is-sample-promo-lesson .image-slide-layout__hero .ai-lesson-image-fit {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  min-height: 0;
}

@media (max-width: 480px) {
  .ai-player-shell.is-sample-promo-lesson .ai-kiki-character {
    display: flex;
  }
}

@media (max-width: 768px) {
  .ai-player-shell.is-sample-promo-lesson {
    --ai-sample-kiki-reserve: 56px;
    --ai-sample-subtitle-bottom: clamp(20px, 3vh, 28px);
    --ai-sample-subtitle-width: min(84%, 100%);
    --ai-sample-subtitle-font: clamp(18px, 5.2vw, 22px);
    --ai-sample-subtitle-line: 1.4;
  }

  .ai-player-shell.is-sample-promo-lesson .ai-kiki-character {
    display: flex;
    right: max(10px, env(safe-area-inset-right, 0px));
    bottom: calc(clamp(18px, 2.6vh, 24px) + env(safe-area-inset-bottom, 0px));
  }

  .ai-player-shell.is-sample-promo-lesson .slide-content {
    padding: 4px 8px;
  }

  .ai-player-shell.is-sample-promo-lesson .ai-lesson-subtitle-overlay:not(.ai-ott-subtitle) {
    padding-left: 10px;
    padding-right: calc(var(--ai-sample-kiki-reserve) + 10px);
  }

  .ai-player-shell.is-sample-promo-lesson .ai-lesson-subtitle-overlay:not(.ai-ott-subtitle) .ai-lesson-subtitle-overlay__inner {
    max-width: min(84%, 100%);
    padding-inline: 8px;
  }

  .ai-player-shell.is-sample-promo-lesson .ai-kiki-fab__avatar {
    width: 52px;
    height: 52px;
  }
}

@media (min-width: 769px) {
  .ai-player-shell.is-sample-promo-lesson .ai-player-main-inner {
    max-width: min(1440px, 100%);
  }
}

body.ai-lesson-fullscreen-active .video-slide-layout__player-wrap .ai-lesson-video-player,
.ai-player-shell.is-fullscreen-mode .video-slide-layout__player-wrap .ai-lesson-video-player,
.ai-player.ai-player--fullscreen .video-slide-layout__player-wrap .ai-lesson-video-player {
  max-height: min(62vh, 720px);
}

/* Boxes slide */
.boxes-slide-layout__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  width: 100%;
  margin: 0;
  flex: 1 1 auto;
  min-height: 0;
  grid-auto-rows: 1fr;
  align-items: stretch;
}

.boxes-slide-layout__box {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-height: 0;
  height: 100%;
  padding: 16px 18px;
  border-radius: 14px;
  border: 1px solid #e2e8f0;
  background: #fff;
  box-sizing: border-box;
  overflow: visible;
}

.boxes-slide-layout__box-title {
  margin: 0;
  font-size: var(--lesson-present-heading);
  font-weight: 700;
  line-height: 1.35;
  color: #0f172a;
}

.boxes-slide-layout__box-body {
  margin: 0;
  font-size: var(--lesson-present-body);
  line-height: 1.65;
  color: #334155;
  word-break: break-word;
  overflow-wrap: anywhere;
}

.boxes-slide-layout__box-body p {
  margin: 0 0 8px;
}

.boxes-slide-layout__box-body p:last-child {
  margin-bottom: 0;
}

.boxes-slide-layout__box-list {
  margin: 0;
  padding-left: 1.35rem;
  line-height: 1.65;
  color: #334155;
}

.boxes-slide-layout__box-list li + li {
  margin-top: 6px;
}

/* —— Unified info-group cards (boxes / prompt_recipe / lesson_scope) —— */
.ai-info-group-cards {
  width: 100%;
  margin: 0;
  flex: 0 1 auto;
}

.ai-info-group-cards__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
  width: 100%;
  margin: 0;
  flex: 0 1 auto;
  min-height: 0;
  grid-auto-rows: 1fr;
  align-items: stretch;
}

.ai-info-group-cards__grid--pair {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.ai-info-group-cards__grid--multi {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.ai-info-group-cards__grid--single {
  grid-template-columns: 1fr;
  max-width: min(100%, 40rem);
  margin-inline: 0;
  grid-auto-rows: auto;
}

.ai-info-group-card,
.ai-info-group-cards .boxes-slide-layout__box {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-height: clamp(120px, 18vh, 240px);
  height: 100%;
  padding: 16px 18px;
  border-radius: 14px;
  border: 1px solid #e2e8f0;
  background: #fff;
  box-sizing: border-box;
  overflow: visible;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
}

.ai-info-group-cards__grid--single .ai-info-group-card {
  min-height: auto;
  height: auto;
  max-width: 100%;
}

.ai-info-group-card__title,
.ai-info-group-cards .boxes-slide-layout__box-title {
  margin: 0;
  font-size: var(--lesson-present-heading, clamp(1.05rem, 2vw, 1.25rem));
  font-weight: 800;
  line-height: 1.3;
  color: #0f172a;
}

.ai-info-group-card__list,
.ai-info-group-cards .boxes-slide-layout__box-list {
  margin: 0;
  padding-left: 1.35rem;
  font-size: var(--lesson-present-body, 1rem);
  line-height: 1.65;
  color: #334155;
}

.ai-info-group-card__list li + li,
.ai-info-group-cards .boxes-slide-layout__box-list li + li {
  margin-top: 8px;
}

.ai-info-group-card__body,
.ai-info-group-cards .boxes-slide-layout__box-body {
  margin: 0;
  font-size: var(--lesson-present-body, 1rem);
  line-height: 1.65;
  color: #334155;
}

.ai-info-group-slide.dedicated-slide-layout {
  gap: clamp(12px, 1.5vh, 18px);
}

.ai-info-group-slide > .dedicated-slide__description,
.ai-info-group-slide > .slide-description {
  margin-bottom: clamp(8px, 1vh, 14px);
}

.ai-pattern--prompt-recipe .ai-info-group-cards {
  margin-top: 0;
}

.ai-info-group-cards .ai-pattern-prompt-recipe__col,
.ai-info-group-cards .ai-pattern-lesson-scope__col {
  background: #fff;
  border-color: #e2e8f0;
}

.dedicated-slide-layout.ai-info-group-slide:not(.dedicated-slide-layout--single-block) {
  flex: 0 1 auto;
}

.ai-slide-card--info-group-layout .slide-content,
.ai-slide-card--boxes-layout.ai-slide-card--info-group-layout .slide-content {
  justify-content: flex-start;
  gap: clamp(10px, 1.2vh, 16px);
}

.boxes-slide-layout__grid--single {
  grid-template-columns: 1fr;
  grid-auto-rows: auto;
  align-items: start;
  flex: 0 0 auto;
  max-width: min(100%, 36rem);
  margin-inline: 0;
  gap: 10px;
}

.boxes-slide-layout__box--compact {
  height: auto;
  min-height: 0;
  padding: 10px 12px;
  border-radius: 10px;
  gap: 4px;
  box-shadow: none;
}

.boxes-slide-layout__box--compact .boxes-slide-layout__box-title {
  font-size: var(--lesson-present-body, 1rem);
  font-weight: 700;
}

.boxes-slide-layout__box--compact .boxes-slide-layout__box-body,
.boxes-slide-layout__box--compact .boxes-slide-layout__box-list {
  font-size: clamp(0.88rem, 1.5vw, 0.98rem);
  line-height: 1.5;
}

html[data-ai-lesson-edit-mode="on"] .ai-slide-card--image-layout .slide-content,
html[data-ai-lesson-edit-mode="on"] .ai-slide-card--video-layout .slide-content,
html[data-ai-lesson-edit-mode="on"] .ai-slide-card--boxes-layout .slide-content {
  padding-inline: max(var(--lesson-present-slide-pad-inline, 20px), 58px);
}

@media (max-width: 768px) {
  .boxes-slide-layout__grid {
    grid-template-columns: 1fr;
  }

  html[data-ai-lesson-edit-mode="on"] .ai-slide-card--image-layout .slide-content,
  html[data-ai-lesson-edit-mode="on"] .ai-slide-card--video-layout .slide-content,
  html[data-ai-lesson-edit-mode="on"] .ai-slide-card--boxes-layout .slide-content {
    padding-inline: var(--lesson-present-slide-pad-inline, 16px);
  }

  .video-slide-layout__player-wrap .ai-lesson-video-player {
    max-height: 42vh;
  }
}

.video-slide-layout[data-role="video-slide"] .video-slide-layout__player-wrap[data-video-kiki-timeline="true"] {
  position: relative;
  margin-bottom: 0.5rem;
}

.ai-player-stage__viewport.is-video-timeline-subtitle .ai-lesson-subtitle-overlay:not(.ai-ott-subtitle) {
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  max-width: 100%;
  transform: none;
}

.ai-player-stage__viewport.is-video-timeline-subtitle .ai-lesson-subtitle-overlay:not(.ai-ott-subtitle) .ai-lesson-subtitle-overlay__inner {
  background: transparent;
  padding: 0;
  box-shadow: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

.ai-player-stage__viewport.is-video-timeline-subtitle .ai-lesson-subtitle-overlay:not(.ai-ott-subtitle) .ai-lesson-subtitle-overlay__head {
  display: none;
}

.ai-player-stage__viewport.is-video-timeline-subtitle .ai-lesson-subtitle-overlay:not(.ai-ott-subtitle) .ai-lesson-subtitle-overlay__text {
  text-align: center;
  white-space: normal;
  overflow-wrap: anywhere;
  word-break: keep-all;
  line-height: 1.45;
  min-height: calc(1.45em * 2);
  max-height: calc(1.45em * 3);
  overflow: visible;
}

.ai-player-shell.is-sample-promo-lesson .ai-player-stage__viewport.is-video-timeline-subtitle .ai-lesson-subtitle-overlay:not(.ai-ott-subtitle) {
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  max-width: 100%;
  transform: none;
  padding:
    0
    calc(var(--ai-sample-kiki-reserve) + clamp(12px, 1.6vw, 20px))
    calc(var(--ai-sample-subtitle-bottom) + env(safe-area-inset-bottom, 0px))
    clamp(12px, 1.6vw, 20px);
}

.ai-player-shell.is-sample-promo-lesson .ai-player-stage__viewport.is-video-timeline-subtitle .ai-lesson-subtitle-overlay:not(.ai-ott-subtitle) .ai-lesson-subtitle-overlay__inner {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: var(--ai-sample-subtitle-width);
  margin: 0 auto;
  padding: 0 clamp(8px, 1.2vw, 16px);
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  backdrop-filter: none;
  overflow: visible;
}

.ai-player-shell.is-sample-promo-lesson .ai-player-stage__viewport.is-video-timeline-subtitle .ai-lesson-subtitle-overlay:not(.ai-ott-subtitle) .ai-lesson-subtitle-overlay__text {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  overflow: hidden;
  min-height: 0;
  max-height: calc(var(--ai-sample-subtitle-line) * 1em * 3);
  font-size: var(--ai-sample-subtitle-font);
  font-weight: 600;
  line-height: var(--ai-sample-subtitle-line);
  text-align: center;
  text-wrap: balance;
  color: #fff;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.75);
  overflow-y: hidden;
  overflow-x: hidden;
}

@media (max-width: 768px) {
  .ai-player-stage__viewport.is-video-timeline-subtitle .ai-lesson-subtitle-overlay:not(.ai-ott-subtitle) {
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    max-width: 100%;
  }

  .ai-player-shell.is-sample-promo-lesson .ai-player-stage__viewport.is-video-timeline-subtitle .ai-lesson-subtitle-overlay:not(.ai-ott-subtitle) {
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    max-width: 100%;
    transform: none;
    padding:
      0
      calc(var(--ai-sample-kiki-reserve) + 10px)
      calc(var(--ai-sample-subtitle-bottom) + env(safe-area-inset-bottom, 0px))
      10px;
  }

  .ai-player-shell.is-sample-promo-lesson .ai-player-stage__viewport.is-video-timeline-subtitle .ai-lesson-subtitle-overlay:not(.ai-ott-subtitle) .ai-lesson-subtitle-overlay__inner {
    max-width: min(84%, 100%);
    padding-inline: 8px;
  }
}

.video-slide-layout[data-role="video-slide"] + .ai-kiki-panel,
.ai-player-shell [data-slide-type="video"] ~ .ai-kiki-fab-area {
  z-index: 2;
}

.ai-lesson-code-block {
  margin: 20px 0;
  border: 1px solid #cbd5e1;
  border-radius: 14px;
  overflow: hidden;
  background: #0f172a;
}

.ai-lesson-code-block__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 14px;
  background: #1e293b;
  color: #e2e8f0;
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.ai-lesson-code-block__pre {
  margin: 0;
  padding: 22px 26px;
  overflow-x: auto;
  font-family: "JetBrains Mono", "Fira Code", "SFMono-Regular", Menlo, Monaco, Consolas, monospace;
  font-size: 18px;
  line-height: 1.7;
  color: #e5e7eb;
  background: #0f172a;
}

.ai-lesson-code-block__pre code {
  font-family: inherit;
  font-size: inherit;
  line-height: inherit;
}

.ai-lesson-code-expl {
  margin: 0;
  padding-left: 1.25rem;
}

.ai-lesson-code-expl li {
  margin-bottom: 8px;
}

.ai-lesson-interactive-check {
  margin: 20px 0;
  padding: 18px 20px;
  border: 1px solid #cbd5e1;
  border-radius: 14px;
  background: #f8fafc;
}

.ai-lesson-checklist-card {
  margin: clamp(12px, 2vh, 20px) 0 0;
  padding: clamp(14px, 2vh, 20px) clamp(16px, 2.5vw, 24px);
  border: 1px solid rgba(148, 163, 184, 0.35);
  border-radius: 14px;
  background: #f8fafc;
}

.ai-lesson-checklist-card__list {
  margin: 0;
  padding-left: 1.25em;
  color: #334155;
  font-size: clamp(14px, 1.6vw, 16px);
  line-height: 1.55;
}

.ai-lesson-checklist-card__item + .ai-lesson-checklist-card__item {
  margin-top: 0.55em;
}

.ai-lesson-checklist-card__item.is-checklist-focus-active,
.checklist-item.is-active,
.ai-checklist-item.is-active {
  background: rgba(37, 99, 235, 0.10);
  border-left: 4px solid #2563eb;
  border-radius: 10px;
  box-shadow: none;
  scroll-margin-top: 8px;
  scroll-margin-bottom: calc(var(--ai-subtitle-safe-pb, 0px) + 40px);
}

.ai-lesson-checklist-card__scroll {
  max-height: min(52vh, 420px);
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  scroll-padding-bottom: calc(var(--ai-subtitle-safe-pb, 0px) + 16px);
}

.ai-lesson-checklist-card--compact .ai-lesson-checklist-card__scroll,
.ai-slide-card--checklist-focus .ai-lesson-checklist-card--compact [data-checklist-scroll] {
  flex: 0 0 auto;
  min-height: 0;
  max-height: none;
  overflow-y: visible;
}

.ai-slide-card--checklist-focus .ai-player-stage__viewport {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
}

.ai-slide-card--checklist-focus .slide-content,
.ai-slide-content--checklist-focus {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
}

.ai-slide-card--checklist-focus .ai-lesson-checklist-card {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  margin-bottom: 0;
}

.ai-slide-card--checklist-focus [data-checklist-scroll] {
  flex: 1 1 auto;
  min-height: 12rem;
  max-height: calc(100dvh - var(--ai-player-chrome-stack, 168px) - var(--ai-subtitle-safe-pb, 0px) - 7.5rem);
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  scroll-padding-bottom: calc(var(--ai-subtitle-safe-pb, 0px) + 20px);
}

.ai-slide-card--checklist-focus .ai-lesson-checklist-card__list {
  padding-bottom: calc(var(--ai-subtitle-safe-pb, 0px) + 120px);
}

.ai-lesson-checklist-card--compact .ai-lesson-checklist-card__list,
.ai-slide-card--checklist-focus .ai-lesson-checklist-card--compact .ai-lesson-checklist-card__list {
  padding-bottom: calc(var(--ai-subtitle-safe-pb, 0px) + 16px);
}

.ai-lesson-checklist-card__footer {
  margin: clamp(12px, 1.8vh, 16px) 0 0;
  padding-top: clamp(10px, 1.5vh, 14px);
  border-top: 1px solid rgba(148, 163, 184, 0.28);
  color: #475569;
  font-size: clamp(13px, 1.5vw, 15px);
  line-height: 1.5;
}

.ai-lesson-interactive-check__title {
  margin: 0 0 12px;
}

.ai-lesson-interactive-check__list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.ai-lesson-interactive-check__list li + li {
  margin-top: 10px;
}

.ai-lesson-check-row {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  cursor: pointer;
  font-size: 15px;
  line-height: 1.45;
  color: #0f172a;
}

.ai-lesson-check-row input {
  margin-top: 4px;
  width: 18px;
  height: 18px;
  flex-shrink: 0;
}

.ai-lesson-interactive-check [data-mission-complete] {
  margin-top: 16px;
}

.ai-lesson-btn.is-copied {
  opacity: 0.85;
}

/* Interactive stage player — stage fills main column (red zone) */
.ai-player-shell.is-interactive-stage .ai-player-stage {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-height: 0;
}

.ai-player-shell.is-interactive-stage .ai-player-stage__viewport {
  flex: 1 1 auto;
  min-height: 0;
  transition: opacity 0.45s ease, transform 0.45s ease;
}

.ai-player-stage__viewport.is-fade-out {
  opacity: 0;
  transform: translateY(6px);
}

.ai-player-stage__viewport.is-fade-in {
  opacity: 1;
  transform: translateY(0);
}

.ai-player-stage__viewport.is-slide-out {
  opacity: 0;
  transform: translateX(-18px);
}

.ai-player-stage__viewport.is-slide-in {
  opacity: 1;
  transform: translateX(0);
}

/* —— Lesson presentation: stage fill + readable typography —— */
.ai-player-shell .ai-player-stage.lesson-stage,
.ai-player-shell .ai-player-stage__viewport.lesson-stage {
  flex: 1 1 auto;
  min-height: 0;
}

.ai-player-shell .ai-slide-card .slide-content,
.ai-player-shell .ai-slide-content {
  max-width: none;
  width: 100%;
}

.ai-player-shell .ai-lesson-screen {
  flex: 0 1 auto;
  min-height: 0;
  gap: var(--lesson-present-screen-gap);
}

.ai-player-shell .slide-content > .ai-lesson-screen {
  flex: 1 1 auto;
  min-height: 0;
}

.ai-player-shell .ai-lesson-screen__inner {
  flex: 0 1 auto;
  min-height: 0;
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  gap: var(--lesson-present-screen-gap);
}

.ai-player-shell .slide-content > .ai-lesson-screen .ai-lesson-screen__inner,
.ai-player-shell .slide-content > .ai-slide .ai-lesson-screen__inner {
  justify-content: safe center;
}

.ai-player-shell .ai-lesson-screen__headline {
  font-size: var(--lesson-present-h1);
  line-height: 1.2;
}

.ai-player-shell .ai-lesson-screen__visual {
  flex: 0 1 auto;
  min-height: clamp(200px, min(38vh, calc(var(--ai-slide-content-height, 50vh) * 0.42)), 560px);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: stretch;
  margin: clamp(6px, 0.8vh, 12px) 0;
}

.ai-player-shell .slide-content > .ai-lesson-screen .ai-lesson-screen__visual,
.ai-player-shell .slide-content > .ai-slide .ai-lesson-screen__visual {
  flex: 1 1 auto;
  min-height: clamp(220px, min(40vh, calc(var(--ai-slide-content-height, 50vh) * 0.45)), 560px);
}

.ai-player-shell .ai-lesson-screen--screenshot-hero .ai-lesson-screen__visual,
.ai-player-shell .ai-lesson-screen__visual:has(.ai-pattern--image-placeholder--hero) {
  flex: 1 1 auto;
  min-height: 0;
  overflow: hidden;
  margin: 0;
}

.ai-player-shell .ai-pattern--goal-card,
.ai-player-shell .ai-lesson-compare-table {
  width: 100%;
}

.ai-player-shell .ai-slide-card .slide-content > .ai-lesson-card__meta {
  margin-bottom: clamp(4px, 0.6vh, 8px);
}

.ai-player-shell .ai-slide-card .slide-content > .ai-lesson-card__meta .ai-lesson-card__type,
.ai-player-shell .ai-slide-card .slide-content > .ai-lesson-card__meta .ai-lesson-card__index {
  font-size: var(--lesson-present-small);
}

.ai-slide-card .slide-content h1,
.ai-slide-content h1 {
  font-size: var(--lesson-present-h1);
  line-height: 1.2;
  margin: 0 0 14px;
}

.ai-slide-card .slide-content > h2,
.ai-slide-content > h2 {
  font-size: var(--lesson-present-title);
  line-height: 1.2;
}

.ai-slide-card .slide-content .ai-lesson-screen h2,
.ai-slide-content .ai-lesson-screen h2,
.ai-slide-card .slide-content h2:not(:first-of-type),
.ai-slide-content h2:not(:first-of-type) {
  font-size: var(--lesson-present-heading);
  line-height: 1.25;
}

.ai-slide-card .slide-content h3,
.ai-slide-content h3 {
  font-size: var(--lesson-present-heading);
  line-height: 1.3;
  margin: 0 0 10px;
}

.ai-slide-card .slide-content p,
.ai-slide-card .slide-content li,
.ai-slide-content p,
.ai-slide-content li,
.ai-player-shell .checklist,
.ai-player-shell .slide-bullets,
.ai-canvas-obj--checklist ul {
  font-size: var(--lesson-present-body);
  line-height: 1.6;
}

.ai-slide-card .slide-content table,
.ai-slide-content table,
.ai-canvas-obj--table table {
  width: 100%;
  font-size: var(--lesson-present-table);
  border-collapse: collapse;
}

.ai-slide-card .slide-content th,
.ai-slide-card .slide-content td,
.ai-slide-content th,
.ai-slide-content td,
.ai-canvas-obj--table th,
.ai-canvas-obj--table td {
  padding: var(--lesson-present-cell-pad-y) var(--lesson-present-cell-pad-x);
  line-height: 1.5;
}

.ai-stage-narration {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  border: 0;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}

.ai-stage-narration p {
  display: none;
  margin: 0;
}

.ai-stage-narration__actions {
  display: none;
}

.ai-stage-narration__actions .ai-lesson-btn {
  min-height: 28px;
  padding: 3px 10px;
  font-size: 12px;
}

.ai-stage-narration__hint {
  margin: 0;
  font-size: 13px;
  font-weight: 700;
}

.ai-stage-narration__hint.is-warning {
  color: #9a3412;
}

.ai-stage-narration__hint.is-info {
  color: #1e3a8a;
}

.ai-authoring-overlay-wrap {
  position: absolute;
  inset: 0;
  z-index: 25;
  pointer-events: none;
}

.ai-authoring-overlay-layer {
  position: absolute;
  left: 0;
  top: 0;
  width: 1280px;
  height: 720px;
  transform-origin: top left;
}

.ai-canvas-obj {
  position: absolute;
  box-sizing: border-box;
  overflow: hidden;
}

.ai-canvas-obj__text {
  width: 100%;
  height: 100%;
  overflow: auto;
}

.ai-canvas-obj__prompt,
.ai-canvas-obj__code {
  margin: 0;
  width: 100%;
  height: 100%;
  overflow: auto;
  font-size: clamp(14px, 1.1vw, 18px);
  line-height: 1.5;
  white-space: pre-wrap;
  background: #f1f5f9;
  padding: clamp(10px, 1vh, 14px);
  box-sizing: border-box;
}

.ai-canvas-obj--checklist ul {
  margin: 0;
  padding-left: 1.25rem;
  font-size: var(--lesson-present-body);
  line-height: 1.6;
}

.ai-canvas-obj img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.ai-lesson-tts-center-overlay {
  position: absolute;
  inset: 0;
  z-index: 50;
  margin: 0;
  padding: 0;
  display: block;
  pointer-events: none;
  opacity: 0;
  transition: opacity 180ms ease;
}

.ai-lesson-tts-center-overlay__anchor {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}

.ai-lesson-tts-center-overlay.is-visible {
  opacity: 1;
}

.ai-lesson-tts-center-overlay .ai-lesson-tts-toggle,
.ai-lesson-tts-toggle.tts-center-button {
  pointer-events: auto;
  min-width: 96px;
  height: 96px;
  border: 0;
  border-radius: 999px;
  background: rgba(15, 23, 42, 0.72);
  color: #ffffff;
  box-shadow: 0 18px 48px rgba(15, 23, 42, 0.28);
  backdrop-filter: blur(10px);
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  font-weight: 800;
  cursor: pointer;
  transition: transform 160ms ease, background 160ms ease, opacity 160ms ease;
}

.ai-lesson-tts-toggle:hover {
  transform: scale(1.04);
  background: rgba(15, 23, 42, 0.84);
}

.ai-lesson-tts-toggle [data-tts-toggle-icon] {
  font-size: 34px;
  line-height: 1;
}

.ai-lesson-tts-toggle [data-tts-toggle-label] {
  font-size: 13px;
}

.ai-lesson-tts-start {
  pointer-events: auto;
  min-height: 52px;
  min-width: 168px;
  padding: 0 20px;
  border: 0;
  border-radius: 999px;
  background: linear-gradient(135deg, #2563eb, #1d4ed8);
  color: #fff;
  font-size: 15px;
  font-weight: 900;
  box-shadow: 0 16px 36px rgba(29, 78, 216, 0.38);
  cursor: pointer;
}

.ai-lesson-tts-start[hidden] {
  display: none !important;
}

.ai-lesson-tts-toggle[hidden],
.ai-lesson-tts-toggle.is-autoplay-warmup {
  display: none !important;
}

.ai-lesson-tts-center-overlay[hidden] {
  display: none !important;
}

.ai-lesson-tts-center-overlay__hint {
  position: absolute;
  left: 50%;
  bottom: 24px;
  transform: translateX(-50%);
  padding: 6px 10px;
  border-radius: 999px;
  background: rgba(15, 23, 42, 0.72);
  color: #e2e8f0;
  font-size: 12px;
  font-weight: 700;
}

.ai-lesson-tts-center-overlay__hint.is-warning {
  color: #fdba74;
}

.ai-lesson-tts-center-overlay__hint.is-info {
  color: #bfdbfe;
}

@media (max-width: 640px) {
  .ai-lesson-tts-toggle {
    min-width: 76px;
    height: 76px;
  }

  .ai-lesson-tts-toggle [data-tts-toggle-icon] {
    font-size: 28px;
  }

  .ai-lesson-tts-toggle [data-tts-toggle-label] {
    font-size: 12px;
  }
}

body[data-ai-lesson-edit-mode="on"] .ai-lesson-tts-center-overlay,
[data-ai-lesson-edit-mode="on"] .ai-lesson-tts-center-overlay {
  display: none !important;
}

.ai-lesson-video-stage {
  margin: 14px 0 18px;
}

.ai-lesson-video-fallback {
  margin: 14px 0 0;
  padding: 12px 14px;
  border: 1px dashed #f59e0b;
  border-radius: 10px;
  background: #fffbeb;
  color: #92400e;
  font-size: 14px;
  line-height: 1.5;
}

.ai-lesson-video-player {
  width: 100%;
  display: block;
  border-radius: 12px;
  border: 1px solid #cbd5e1;
  background: #000;
  max-height: 420px;
}

.ai-stage-steps {
  margin: 16px 0 20px;
  padding-left: 1.35rem;
  font-size: 15px;
  line-height: 1.6;
}

.ai-stage-steps li {
  margin-bottom: 10px;
}

.ai-stage-actions {
  margin-top: 20px;
}

.ai-slide-progress__dots {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 10px;
  justify-content: center;
}

.ai-player-topbar .ai-slide-progress__dots {
  margin-top: 0;
}

/* Dot pagination lives in topbar center (PC + mobile) */
@media (max-width: 768px) {
  .ai-slide-progress {
    padding: 0 0 2px;
    margin: 0;
  }
}

/* ═══ Mobile player chrome (≤768px): overflow, topbar, images, Kiki subtitle ═══ */
@media (max-width: 768px) {
  html:has(body.ai-player-mode),
  body.ai-player-mode,
  body.admin-ai-lesson-slide-page {
    overflow-x: hidden;
    max-width: 100vw;
  }

  .ai-player-shell,
  .ai-player-content,
  .ai-player-main,
  .ai-player-main .ai-player-main-inner,
  .ai-slide-card,
  .ai-player-stage__viewport,
  .ai-slide-card .slide-content {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    overflow-x: hidden;
  }

  .ai-player-main-inner {
    max-width: 100%;
  }

  .ai-slide-card .slide-content > *,
  .ai-lesson-screen,
  .ai-lesson-screen__inner,
  .ai-lesson-screen__visual,
  .ai-pattern,
  .ai-mobile-app-preview,
  .image-slide-layout__hero,
  .lesson-slide-image-wrap,
  .ai-slide-image,
  .ai-lesson-image-stage {
    max-width: 100%;
    min-width: 0;
    box-sizing: border-box;
  }

  .ai-slide-card .slide-content img,
  .ai-slide-card .slide-content video,
  .ai-slide-card .slide-content canvas,
  .ai-slide-image__img,
  .image-slide-layout__hero img {
    max-width: 100%;
    height: auto;
  }

  /* Topbar: balanced 3-column center title block */
  .ai-player-topbar {
    grid-template-columns: minmax(0, 1fr) minmax(0, min(100%, 420px)) minmax(0, 1fr);
    grid-template-areas: none;
    align-items: center;
    gap: 6px;
  }

  .ai-player-topbar__left {
    grid-column: 1;
    grid-area: auto;
    flex-wrap: nowrap;
    gap: 6px;
    justify-self: start;
  }

  .ai-player-topbar__center {
    grid-column: 2;
    grid-area: auto;
    justify-self: center;
    text-align: center;
    width: 100%;
    min-width: 0;
    overflow: hidden;
  }

  .ai-player-topbar__title-block {
    align-items: center;
    text-align: center;
  }

  .ai-player-topbar__right {
    grid-column: 3;
    grid-area: auto;
    flex-wrap: nowrap;
    justify-content: flex-end;
    justify-self: end;
    gap: 4px;
    min-width: 0;
    max-width: min(52vw, 220px);
  }

  .ai-player-topbar__course {
    display: block;
    font-size: 11px;
    margin-bottom: 2px;
  }

  .ai-player-topbar__lesson {
    margin: 0 0 6px;
    font-size: clamp(14px, 3.8vw, 16px);
    line-height: 1.2;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .ai-player-status {
    font-size: 10px;
    white-space: nowrap;
    flex-shrink: 0;
  }

  .ai-player-topbar__btn {
    padding: 4px 8px;
    font-size: 10px;
    min-height: 28px;
  }

  .ai-player-topbar__btn--fullscreen {
    padding: 4px 7px;
    font-size: 10px;
  }

  .ai-player-header-actions--inline {
    gap: 4px;
    flex-wrap: nowrap;
  }

  .ai-player-header-actions--inline .ai-lesson-btn,
  .ai-player-header-actions--inline .ai-player-header-actions__btn {
    min-height: 28px;
    padding: 3px 7px;
    font-size: 10px;
  }

  .ai-player-topbar--admin-slide .ai-player-topbar__right--admin-slide {
    max-width: min(56vw, 240px);
  }

  /* Image slides: fit viewport, minimal side padding */
  .ai-slide-card--image-layout .slide-content,
  .ai-slide-card[data-layout="image"] .slide-content,
  .ai-slide-card[data-has-image="true"] .slide-content {
    --ai-slide-canvas-safe-inline: clamp(4px, 1.5vw, 10px);
    padding-left: var(--ai-slide-canvas-safe-inline);
    padding-right: var(--ai-slide-canvas-safe-inline);
  }

  .image-slide-layout__hero,
  .image-slide-layout__hero .ai-lesson-image-stage,
  .image-slide-layout__hero .ai-lesson-image-fit {
    width: 100%;
    max-width: 100%;
    min-width: 0;
  }

  .image-slide-layout__hero .ai-slide-image__img,
  .image-slide-layout__hero .lesson-slide-image-wrap img,
  .ai-slide-card--image-layout .ai-slide-image__img[data-fit="contain"],
  .ai-slide-card--image-layout .ai-slide-image__img {
    width: 100%;
    max-width: 100%;
    height: auto;
    max-height: min(
      68vh,
      calc(100dvh - var(--ai-player-chrome-stack, 180px) - 24px)
    );
    object-fit: contain;
    object-position: center center;
  }

  .ai-slide-card--image-layout .ai-lesson-image-fit[data-fit="fill"] .ai-slide-image__img,
  .ai-slide-card--image-layout .ai-slide-image__img[data-fit="fill"] {
    object-fit: contain;
    width: 100%;
    max-width: 100%;
  }

  /* Kiki TTS subtitle — compact, inset, scrollable (legacy non-OTT only) */
  .ai-lesson-subtitle-overlay:not(.ai-ott-subtitle) {
    left: 12px;
    right: 12px;
    width: auto;
    max-width: calc(100vw - 24px);
    margin: 0;
    bottom: calc(8px + env(safe-area-inset-bottom, 0px));
  }

  .ai-lesson-subtitle-overlay:not(.ai-ott-subtitle) .ai-lesson-subtitle-overlay__inner {
    max-height: min(28vh, 108px);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding: 6px 10px 7px;
  }

  .ai-lesson-subtitle-overlay:not(.ai-ott-subtitle) .ai-lesson-subtitle-overlay__text {
    font-size: 0.78rem;
    line-height: 1.35;
    max-height: none;
  }

  .ai-player-stage__viewport.has-subtitle-safe,
  .ai-player-stage__viewport.has-subtitle-safe--compact,
  .ai-player-stage__viewport.has-subtitle-safe--large,
  .ai-player-stage__viewport.has-subtitle-safe--interactive {
    --ai-subtitle-safe-pb: 2.5rem;
  }

  .ai-kiki-character {
    right: max(8px, env(safe-area-inset-right));
    bottom: calc(6px + env(safe-area-inset-bottom, 0px));
  }

  .ai-kiki-fab__avatar {
    width: 46px;
    height: 46px;
  }

  .ai-kiki-fab__label {
    font-size: 10px;
  }

  /* Admin slide editor: fixed bottom prev/next above Kiki 멘트 panel */
  body.admin-ai-lesson-slide-page .ai-admin-slide-stage-nav {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 200;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 20px;
    pointer-events: none;
    padding: 10px max(12px, env(safe-area-inset-right)) calc(10px + env(safe-area-inset-bottom, 0px)) max(12px, env(safe-area-inset-left));
    background: linear-gradient(180deg, rgba(248, 250, 252, 0) 0%, rgba(248, 250, 252, 0.96) 28%, #f8fafc 100%);
    box-shadow: 0 -4px 20px rgba(15, 23, 42, 0.08);
  }

  body.admin-ai-lesson-slide-page .ai-admin-slide-stage-nav__btn {
    position: static;
    top: auto;
    left: auto;
    right: auto;
    transform: none;
    width: 48px;
    height: 48px;
    min-width: 48px;
    font-size: 1.5rem;
    opacity: 1;
    pointer-events: auto;
    background: rgba(15, 23, 42, 0.78);
    box-shadow: 0 2px 10px rgba(15, 23, 42, 0.22);
  }

  body.admin-ai-lesson-slide-page .ai-player-stage__viewport:has(.ai-admin-slide-stage-nav) .slide-content {
    --ai-slide-stage-nav-safe-bottom: calc(64px + env(safe-area-inset-bottom, 0px));
  }

  body.admin-ai-lesson-slide-page .ai-admin-narration-panel:not([hidden]) {
    bottom: calc(64px + env(safe-area-inset-bottom, 0px));
    z-index: 190;
  }
}

.ai-slide-dot {
  width: 10px;
  height: 10px;
  border-radius: 999px;
  background: #cbd5e1;
  transition: background 0.3s ease, transform 0.3s ease;
}

.ai-slide-dot.is-current {
  background: #2563eb;
  transform: scale(1.2);
}

.ai-slide-dot.is-done {
  background: #22c55e;
}

.ai-lesson-choice.is-correct {
  border-color: #22c55e;
  background: #f0fdf4;
}

.ai-lesson-choice.is-wrong {
  border-color: #f87171;
  background: #fef2f2;
}

.ai-anim-hidden {
  opacity: 0;
  transform: translateY(6px);
}

.ai-anim-reveal {
  opacity: 1;
  transform: translateY(0);
  transition: opacity 0.25s ease, transform 0.25s ease;
}

.ai-anim-highlight {
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.25);
}

.ai-anim-pulse {
  animation: aiPulse 1.2s ease-in-out infinite;
}

.ai-admin-slide-editor {
  position: fixed;
  right: 12px;
  top: 84px;
  z-index: 10080;
  width: min(360px, 92vw);
  max-height: calc(100vh - 96px);
  overflow: auto;
  padding: 12px;
  border-radius: 12px;
  border: 1px solid #cbd5e1;
  background: rgba(248, 250, 252, 0.97);
  box-shadow: 0 14px 34px rgba(15, 23, 42, 0.28);
}

.ai-admin-slide-editor h3 {
  margin: 0 0 8px;
  font-size: 15px;
}

.ai-admin-slide-editor.is-collapsed .ai-admin-slide-editor__body {
  display: none;
}

.ai-admin-slide-editor__body {
  margin-top: 8px;
}

.ai-admin-slide-editor label {
  display: block;
  margin: 8px 0 4px;
  font-size: 12px;
  font-weight: 700;
  color: #334155;
}

.ai-admin-slide-editor input,
.ai-admin-slide-editor select,
.ai-admin-slide-editor textarea {
  width: 100%;
  box-sizing: border-box;
  border: 1px solid #cbd5e1;
  border-radius: 8px;
  padding: 7px 9px;
  font-size: 12px;
  background: #fff;
}

.ai-admin-slide-editor__row {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  margin: 8px 0;
}

.ai-admin-slide-editor__meta {
  margin: 0 0 8px;
  color: #475569;
  font-size: 12px;
}

.ai-admin-slide-editor__status {
  margin: 8px 0 0;
  font-size: 12px;
  font-weight: 700;
  color: #0f766e;
}

.ai-admin-sync-status {
  margin: 0 0 8px;
  padding: 8px 10px;
  border-radius: 8px;
  border: 1px solid #cbd5e1;
  background: #f1f5f9;
  font-size: 12px;
  color: #0f172a;
}

.ai-admin-sync-status__meta {
  margin-top: 4px;
  color: #475569;
  font-size: 11px;
  white-space: pre-wrap;
}

@keyframes aiPulse {
  0% { transform: scale(1); }
  50% { transform: scale(1.04); }
  100% { transform: scale(1); }
}

/* ── Interactive slide layout (image + text) ── */
.ai-player-shell,
.ai-player {
  --ai-slide-gap: clamp(16px, 2.5vw, 28px);
  --ai-slide-image-max-h: min(52vh, 420px);
  /* Lesson slide image box: shared viewport-aware height from player chrome stack */
  --lesson-slide-image-box-min: 360px;
  --lesson-slide-image-box-max: min(1080px, calc(var(--ai-slide-content-height, 60vh) * 0.92));
  --lesson-slide-image-box-h: clamp(
    var(--lesson-slide-image-box-min),
    calc(var(--ai-slide-content-height, calc(100dvh - var(--ai-player-chrome-stack))) - var(--ai-subtitle-safe-pb, 0px)),
    var(--lesson-slide-image-box-max)
  );
  --lesson-slide-image-max-h: var(--lesson-slide-image-box-h);
  --ai-slide-image-focus-max-h: var(--lesson-slide-image-box-h);
}

.ai-player-shell:not(.is-admin-slide-mode):not([data-player-view-mode="admin_preview"]) {
  --lesson-slide-image-box-min: 420px;
}

body.ai-lesson-fullscreen-active,
.ai-player-shell.is-fullscreen-mode,
.ai-player.ai-player--fullscreen {
  --lesson-slide-image-box-h: calc(100dvh - 190px - var(--ai-subtitle-safe-pb, 0px));
  --lesson-slide-image-box-min: 0;
  --lesson-slide-image-box-max: none;
}

@media (max-width: 1024px) {
  .ai-player-shell:not(.is-admin-slide-mode) {
    --lesson-slide-image-box-min: 360px;
  }
}

@media (max-width: 768px) {
  .ai-player-shell:not(.is-admin-slide-mode) {
    --lesson-slide-image-box-min: 0;
    --lesson-slide-image-box-max: 100%;
  }

  .ai-player-shell[data-player-view-mode="admin_preview"] {
    --ai-player-admin-nav-overlay: 40px;
  }

  body.ai-lesson-fullscreen-active,
  .ai-player-shell.is-fullscreen-mode,
  .ai-player.ai-player--fullscreen {
    --lesson-slide-image-box-h: clamp(340px, calc(100dvh - 260px - var(--ai-subtitle-safe-pb, 0px)), 1200px);
    --lesson-slide-image-box-min: 340px;
    --lesson-slide-image-box-max: none;
  }

  .ai-slide-card.ai-slide--image-focus .ai-lesson-screen__headline,
  .ai-slide-card[data-image-focus="true"] .ai-lesson-screen__headline,
  .ai-lesson-screen--screenshot-hero .ai-lesson-screen__headline {
    font-size: clamp(1rem, 2vw, 1.2rem);
    margin-bottom: 4px;
  }

  .ai-slide-card.ai-slide--image-focus .ai-lesson-screen__subheadline,
  .ai-slide-card[data-image-focus="true"] .ai-lesson-screen__subheadline,
  .ai-lesson-screen--screenshot-hero .ai-lesson-screen__subheadline {
    font-size: clamp(0.8rem, 1.5vw, 0.92rem);
    margin-bottom: 6px;
  }
}

@media (max-width: 480px) {
  .admin-slide-preview,
  .admin-slide-preview .ai-player,
  .ai-player.is-admin-slide-mode {
    --lesson-slide-image-box-h: clamp(260px, calc(100dvh - 450px - var(--ai-subtitle-safe-pb, 0px)), 560px);
    --lesson-slide-image-box-min: 260px;
  }

  body.ai-lesson-fullscreen-active,
  .ai-player-shell.is-fullscreen-mode,
  .ai-player.ai-player--fullscreen {
    --lesson-slide-image-box-h: clamp(300px, calc(100dvh - 300px - var(--ai-subtitle-safe-pb, 0px)), 1200px);
    --lesson-slide-image-box-min: 300px;
    --lesson-slide-image-box-max: none;
  }
}

.ai-slide {
  width: 100%;
}

.ai-slide--no-image .ai-slide-content--text-only,
.ai-slide--no-image [data-role="slide-intro"] {
  width: 100%;
  max-width: none;
  margin: 0;
}

.ai-slide-layout {
  display: grid;
  gap: var(--ai-slide-gap);
  align-items: start;
}

.ai-slide-layout--right,
.ai-slide-layout--left {
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
}

.ai-slide-layout--left .ai-slide-layout__text {
  order: 2;
}

.ai-slide-layout--left .ai-slide-layout__media {
  order: 1;
}

.ai-slide-layout--top,
.ai-slide-layout--bottom {
  grid-template-columns: 1fr;
}

.ai-slide-layout--bottom .ai-slide-layout__media {
  order: 2;
}

.ai-slide-layout__text,
.ai-slide-layout__media {
  min-width: 0;
}

.ai-slide-image {
  margin: 0;
  border-radius: 14px;
  overflow: visible;
  background: #0f172a;
  border: 1px solid rgba(148, 163, 184, 0.18);
  box-shadow: 0 10px 28px rgba(2, 6, 23, 0.35);
}

.ai-slide--image-focus .ai-slide-image,
.ai-slide-image--focus {
  overflow: visible;
  background: transparent;
  border: none;
  box-shadow: none;
}

.ai-slide-image--card {
  display: flex;
  flex-direction: column;
}

.ai-slide-image__img {
  display: block;
  width: auto;
  max-width: 100%;
  height: auto;
  max-height: var(--ai-slide-image-max-h);
  object-fit: contain;
  background: #020617;
}

.ai-slide-image[data-image-failed="true"] .ai-slide-image__img {
  display: none;
}

.ai-slide-image__error {
  margin: 0;
  padding: 18px 16px;
  color: #fca5a5;
  font-size: 14px;
  font-weight: 700;
  text-align: center;
  background: rgba(127, 29, 29, 0.25);
}

.ai-media-error {
  margin: 0;
  padding: 10px 12px;
  color: #fca5a5;
  background: rgba(127, 29, 29, 0.22);
  font-size: 13px;
  font-weight: 700;
}

.ai-media-controls {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 10px 10px 8px;
  border-top: 1px solid rgba(148, 163, 184, 0.2);
  background: rgba(15, 23, 42, 0.62);
}

.ai-player-shell:not(.ai-player--debug-playback) .ai-media-controls,
.ai-player-shell:not(.ai-player--debug-playback) .ai-lesson-video-center-overlay {
  display: none !important;
}

.ai-player-shell:not(.ai-player--debug-playback) .ai-lesson-video-player::-webkit-media-controls,
.ai-player-shell:not(.ai-player--debug-playback) .ai-lesson-video-player::-webkit-media-controls-enclosure {
  display: none !important;
}

.ai-media-video video,
.ai-media-frame img {
  width: 100%;
}

.ai-slide-caption {
  margin: 0;
  padding: 10px 14px 12px;
  color: #cbd5e1;
  font-size: 13px;
  line-height: 1.5;
  background: rgba(15, 23, 42, 0.72);
}

.ai-slide-layout--full {
  position: relative;
  min-height: min(62vh, 560px);
}

.ai-slide-layout--full .ai-slide-layout__hero {
  position: relative;
  min-height: inherit;
}

.ai-slide-image--full {
  border: none;
  border-radius: 16px;
  min-height: inherit;
  background: #020617;
}

/* ── Screenshot-hero / image-focus slides (visual_explain + image_placeholder) ── */
.ai-slide-card.ai-slide--image-focus .slide-content,
.ai-slide-card[data-image-focus="true"] .slide-content {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-height: 0;
  overflow: hidden;
}

.ai-slide-card.ai-slide--image-focus:not(:has(.ai-slide-layout)) > .ai-slide,
.ai-slide-card[data-image-focus="true"]:not(:has(.ai-slide-layout)) > .ai-slide {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  height: 100%;
  width: 100%;
}

.ai-slide-card.ai-slide--image-focus:not(:has(.ai-slide-layout)) > .ai-slide > [data-role="slide-intro"],
.ai-slide-card[data-image-focus="true"]:not(:has(.ai-slide-layout)) > .ai-slide > [data-role="slide-intro"] {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  padding: 0;
  padding-bottom: 0;
}

.ai-slide-card.ai-slide--image-focus > .ai-slide,
.ai-slide-card[data-image-focus="true"] > .ai-slide {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  height: 100%;
  width: 100%;
}

.ai-slide-card.ai-slide--image-focus > .ai-slide > [data-role="slide-intro"],
.ai-slide-card[data-image-focus="true"] > .ai-slide > [data-role="slide-intro"] {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  padding-bottom: 0;
}

.ai-slide-card.ai-slide--image-focus .ai-slide.ai-slide--image-focus,
.ai-slide-card[data-image-focus="true"] .ai-slide {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  height: 100%;
}

.ai-lesson-screen--screenshot-hero {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  height: 100%;
}

.ai-lesson-screen--screenshot-hero .ai-lesson-screen__inner {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  height: 100%;
}

.ai-lesson-screen--screenshot-hero .ai-lesson-screen__headline,
.ai-lesson-screen--screenshot-hero .ai-lesson-screen__subheadline {
  flex: 0 0 auto;
}

.ai-lesson-screen--screenshot-hero .ai-lesson-screen__visual {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

/* ── Lesson slide image boxes (wrapper height → img object-fit) ── */
.ai-slide-card .ai-pattern--image-placeholder--hero,
.ai-slide-card figure.lesson-slide-image-wrap.ai-lesson-image-stage,
.ai-slide-card .ai-slide-image--focus,
.ai-slide-card .ai-slide-image.ai-slide-image--card,
.ai-slide-card .ai-slide-image.ai-slide-image--full,
.ai-slide-card .ai-pattern--media--image-focus {
  width: 100%;
  flex: 1 1 auto;
  min-height: 0;
  height: auto;
  max-height: none;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: stretch;
  overflow: hidden;
  box-sizing: border-box;
}

.ai-slide-card .ai-pattern--image-placeholder--hero .ai-pattern-image-placeholder__frame,
.ai-slide-card .ai-pattern--image-placeholder--hero .lesson-slide-image-wrap,
.ai-slide-card figure.lesson-slide-image-wrap.ai-lesson-image-stage .ai-lesson-image-fit {
  width: 100%;
  height: 100%;
  min-height: 0;
  max-height: none;
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.ai-slide-card .slide-media-image img,
.ai-slide-card .image-slide img,
.ai-slide-card .lesson-slide-image-wrap img,
.ai-slide-card .ai-slide-image__img,
.ai-slide-card .ai-pattern-image-placeholder__img,
.ai-slide-card .ai-pattern--media--image-focus .ai-pattern-media__img,
.admin-slide-preview .slide-media-image img,
.admin-slide-preview .image-slide img,
.admin-slide-preview .lesson-slide-image-wrap img {
  display: block;
}

/* Image-focus slides — layout */
.ai-slide--image-focus .ai-slide-layout--bottom,
.ai-slide--image-focus .ai-slide-layout--top {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-height: 0;
  height: 100%;
  gap: clamp(8px, 1.2vh, 14px);
}

.ai-slide--image-focus .ai-slide-layout--bottom .ai-slide-layout__text,
.ai-slide--image-focus .ai-slide-layout--top .ai-slide-layout__text {
  flex: 0 0 auto;
  max-height: min(28vh, 220px);
  overflow: auto;
}

.ai-slide--image-focus .ai-slide-layout--bottom .ai-slide-layout__media,
.ai-slide--image-focus .ai-slide-layout--top .ai-slide-layout__media {
  flex: 1 1 auto;
  min-height: var(--lesson-slide-image-box-min);
  display: flex;
  align-items: stretch;
  justify-content: center;
  width: 100%;
  overflow: visible;
  padding-bottom: 24px;
}

.ai-slide--image-focus .ai-slide-layout__media > .ai-slide-image,
.ai-slide--image-focus .ai-slide-layout__media > figure {
  flex: 1 1 auto;
  height: 100%;
  min-height: var(--lesson-slide-image-box-h);
  max-height: var(--lesson-slide-image-box-max);
}

.ai-slide--image-focus .image-slide,
.ai-slide--image-focus .slide-media-image,
.ai-slide--image-focus .ai-slide-image--focus,
.ai-slide--image-focus .lesson-slide-image-wrap {
  width: 100%;
  max-width: 100%;
  border: none;
  background: transparent;
  box-shadow: none;
}

.ai-slide--image-focus .ai-slide-image--focus,
.ai-slide--image-focus .ai-slide-image {
  overflow: visible;
}

.ai-slide-card.ai-slide--image-focus .slide-media-image img,
.ai-slide-card.ai-slide--image-focus .image-slide img,
.ai-slide-card.ai-slide--image-focus .lesson-slide-image-wrap img,
.ai-slide-card.ai-slide--image-focus .ai-slide-image__img,
.ai-slide-card.ai-slide--image-focus .ai-pattern-image-placeholder__img,
.ai-slide-card[data-image-focus="true"] .slide-media-image img,
.ai-slide-card[data-image-focus="true"] .image-slide img,
.ai-slide-card[data-image-focus="true"] .lesson-slide-image-wrap img,
.ai-slide-card[data-image-focus="true"] .ai-slide-image__img,
.ai-slide-card[data-image-focus="true"] .ai-pattern-image-placeholder__img {
  border-radius: 12px;
}

.ai-slide-card.ai-slide--image-focus .slide-content,
.ai-slide-card[data-image-focus="true"] .slide-content,
.ai-slide-card[data-has-image="true"] .slide-content {
  gap: clamp(6px, 0.8vh, 10px);
  overflow-x: hidden;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding-bottom: calc(var(--lesson-present-slide-pad-block) + 96px + var(--ai-subtitle-safe-pb, 0px));
}

.ai-slide-card.ai-slide--image-focus:has(.ai-lesson-screen--screenshot-hero) .slide-content,
.ai-slide-card[data-image-focus="true"]:has(.ai-lesson-screen--screenshot-hero) .slide-content {
  padding-top: clamp(6px, 0.8vh, 10px);
  overflow: hidden;
  padding-bottom: calc(var(--lesson-present-slide-pad-block) + 12px + var(--ai-subtitle-safe-pb, 0px));
}

.ai-slide--image-focus .ai-slide-layout--full {
  flex: 1 1 auto;
  min-height: 0;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: stretch;
}

.ai-slide--image-focus .ai-slide-layout--full .ai-slide-layout__hero {
  flex: 1 1 auto;
  min-height: 0;
  width: 100%;
  max-width: 100%;
  align-self: stretch;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  padding-bottom: 24px;
}

.ai-slide--image-focus .ai-slide-layout--full .ai-slide-layout__hero > figure,
.ai-slide--image-focus .ai-slide-layout--full .ai-slide-layout__hero > .ai-slide-image {
  width: 100%;
  max-width: 100%;
  align-self: stretch;
  flex: 1 1 auto;
  min-height: 0;
}

.ai-slide--image-focus .ai-slide-layout--full .ai-slide-layout__hero .ai-lesson-image-fit,
.ai-slide--image-focus .ai-slide-layout--full .ai-slide-layout__hero .ai-slide-image--full {
  width: 100%;
  max-width: 100%;
  height: 100%;
  min-height: 0;
}

.ai-slide--image-focus .ai-slide-layout--full .ai-slide-layout__hero .ai-slide-image__img {
  width: 100%;
  max-width: 100%;
  height: 100%;
  max-height: none;
  object-fit: cover;
  object-position: center center;
}

.ai-pattern--media--image-focus .ai-pattern-media__img {
  border-radius: 12px;
}

.ai-slide-layout__overlay {
  position: absolute;
  left: 16px;
  right: 16px;
  bottom: 16px;
  padding: 14px 16px;
  border-radius: 12px;
  background: rgba(2, 6, 23, 0.82);
  border: 1px solid rgba(148, 163, 184, 0.22);
  backdrop-filter: blur(8px);
}

.ai-slide--has-resource-url-action.ai-slide--image-full .ai-slide-layout__overlay,
.ai-slide-layout--has-resource-url-action.ai-slide-layout--full .ai-slide-layout__overlay {
  display: none !important;
}

.ai-slide-layout--has-resource-url-action,
.ai-slide-content--text-only.ai-slide-layout--has-resource-url-action {
  position: relative;
}

.ai-lesson-resource-url-action {
  position: absolute;
  top: clamp(10px, 1.4vh, 14px);
  right: clamp(10px, 1.6vw, 16px);
  z-index: 24;
  display: flex;
  align-items: center;
  gap: 8px;
  max-width: min(52%, 240px);
  pointer-events: auto;
}

.ai-lesson-resource-url-action__source {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.ai-lesson-resource-url-action__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 40px;
  padding: 8px 14px;
  border-radius: 999px;
  border: 1px solid rgba(148, 163, 184, 0.38);
  background: rgba(15, 23, 42, 0.9);
  color: #f8fafc;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.2;
  cursor: pointer;
  box-shadow: 0 4px 14px rgba(2, 6, 23, 0.32);
  transition: background 160ms ease, border-color 160ms ease, transform 160ms ease;
}

.ai-lesson-resource-url-action__btn:hover {
  background: rgba(30, 41, 59, 0.95);
  border-color: rgba(191, 219, 254, 0.45);
}

.ai-lesson-resource-url-action__btn.is-copied {
  background: rgba(22, 101, 52, 0.92);
  border-color: rgba(134, 239, 172, 0.55);
}

.ai-lesson-resource-url-action__label {
  white-space: nowrap;
}

.ai-lesson-resource-url-action__feedback {
  font-size: 12px;
  font-weight: 600;
  color: #86efac;
  white-space: nowrap;
}

.ai-player-shell .ai-player-stage__viewport.has-subtitle-safe.is-ott-subtitle-active .ai-lesson-resource-url-action {
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
}

@media (max-width: 768px) {
  .ai-lesson-resource-url-action {
    top: 8px;
    right: 8px;
    max-width: min(58%, 200px);
  }

  .ai-lesson-resource-url-action__btn {
    min-height: 44px;
    padding: 10px 14px;
    font-size: 12px;
  }
}

.ai-slide-caption--floating {
  position: absolute;
  left: 16px;
  right: 16px;
  bottom: 96px;
  margin: 0;
  padding: 8px 12px;
  border-radius: 8px;
  background: rgba(15, 23, 42, 0.78);
  color: #e2e8f0;
  font-size: 13px;
}

.ai-player-stage__viewport.is-zoom-in .slide-content {
  animation: aiSlideZoomIn 0.45s ease;
}

.ai-player-stage__viewport.is-zoom-out .slide-content {
  animation: aiSlideZoomOut 0.38s ease;
}

@keyframes aiSlideZoomIn {
  from { opacity: 0; transform: scale(0.96); }
  to { opacity: 1; transform: scale(1); }
}

@keyframes aiSlideZoomOut {
  from { opacity: 1; transform: scale(1); }
  to { opacity: 0; transform: scale(1.03); }
}

.ai-tts-toggle {
  min-height: 44px;
  min-width: 88px;
  padding: 10px 16px;
  border-radius: 999px;
  border: 1px solid rgba(148, 163, 184, 0.35);
  background: rgba(15, 23, 42, 0.72);
  color: #e2e8f0;
  font-size: 14px;
  font-weight: 800;
  cursor: pointer;
}

.ai-tts-toggle[aria-pressed="true"] {
  border-color: rgba(96, 165, 250, 0.65);
  background: rgba(30, 64, 175, 0.45);
}

body.ai-lesson-fullscreen-active .ai-stage-narration,
.ai-player-shell.is-fullscreen-mode .ai-stage-narration,
.ai-player.ai-player--fullscreen .ai-stage-narration {
  display: none;
}

body.ai-lesson-fullscreen-active .ai-player-topbar__btn--menu,
body.ai-lesson-fullscreen-active .ai-player-topbar__course,
body.ai-lesson-fullscreen-active .ai-slide-progress,
.ai-player-shell.is-fullscreen-mode .ai-player-topbar__btn--menu,
.ai-player-shell.is-fullscreen-mode .ai-player-topbar__course,
.ai-player-shell.is-fullscreen-mode .ai-slide-progress,
.ai-player.ai-player--fullscreen .ai-player-topbar__btn--menu,
.ai-player.ai-player--fullscreen .ai-player-topbar__course,
.ai-player.ai-player--fullscreen .ai-slide-progress {
  display: none !important;
}

body.ai-lesson-fullscreen-active .ai-slide-card,
.ai-player-shell.is-fullscreen-mode .ai-slide-card,
.ai-player.ai-player--fullscreen .ai-slide-card {
  background: transparent;
  border: none;
  box-shadow: none;
}

body.ai-lesson-fullscreen-active,
.ai-player-shell.is-fullscreen-mode,
.ai-player.ai-player--fullscreen {
  --ai-slide-image-max-h: min(74vh, 820px);
}

body.ai-lesson-fullscreen-active .ai-slide-card.ai-slide--image-focus .slide-content,
body.ai-lesson-fullscreen-active .ai-slide-card[data-image-focus="true"] .slide-content,
.ai-player-shell.is-fullscreen-mode .ai-slide-card.ai-slide--image-focus .slide-content,
.ai-player-shell.is-fullscreen-mode .ai-slide-card[data-image-focus="true"] .slide-content,
.ai-player.ai-player--fullscreen .ai-slide-card.ai-slide--image-focus .slide-content,
.ai-player.ai-player--fullscreen .ai-slide-card[data-image-focus="true"] .slide-content,
.ai-slide-card:fullscreen.ai-slide--image-focus .slide-content,
.ai-slide-card:-webkit-full-screen.ai-slide--image-focus .slide-content,
.ai-slide-card.is-theater-fullscreen.ai-slide--image-focus .slide-content {
  padding-bottom: calc(var(--lesson-fs-pad-block) + var(--ai-subtitle-safe-pb, 0px) + 32px);
}

body.ai-lesson-fullscreen-active .ai-lesson-screen--screenshot-hero .ai-lesson-screen__visual,
.ai-player-shell.is-fullscreen-mode .ai-lesson-screen--screenshot-hero .ai-lesson-screen__visual,
.ai-player.ai-player--fullscreen .ai-lesson-screen--screenshot-hero .ai-lesson-screen__visual,
.ai-slide-card:fullscreen .ai-lesson-screen--screenshot-hero .ai-lesson-screen__visual,
.ai-slide-card:-webkit-full-screen .ai-lesson-screen--screenshot-hero .ai-lesson-screen__visual,
.ai-slide-card.is-theater-fullscreen .ai-lesson-screen--screenshot-hero .ai-lesson-screen__visual {
  justify-content: center;
  align-items: center;
  overflow: visible;
  padding-bottom: 24px;
}

/* slide-content padding in fullscreen: see presentation scaling block above */

@media (max-width: 900px) {
  .ai-slide-layout--right,
  .ai-slide-layout--left {
    grid-template-columns: 1fr;
  }

  .ai-slide-layout--left .ai-slide-layout__text,
  .ai-slide-layout--left .ai-slide-layout__media {
    order: unset;
  }

  .ai-slide-layout__overlay {
    position: static;
    margin-top: 12px;
  }

  .ai-slide-caption--floating {
    position: static;
    margin-top: 8px;
  }

  .ai-tts-toggle {
    min-height: 48px;
    min-width: 96px;
  }
}

.ai-lesson-before-after,
.ai-pattern--before-after {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  width: 100%;
  max-width: none;
  margin: 8px 0 10px;
}

.ai-lesson-before-after__col {
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 10px;
  padding: 12px 14px;
}

.ai-lesson-before-after__title {
  margin: 0 0 clamp(8px, 1vh, 12px);
  font-size: var(--lesson-present-heading);
  font-weight: 700;
}

.ai-lesson-screen__visual .ai-lesson-compare-table,
.ai-pattern .ai-lesson-compare-table,
.ai-lesson-compare-table {
  display: table;
  width: 100%;
  min-width: min(100%, 760px);
  max-width: none;
  border-collapse: collapse;
  margin: clamp(10px, 1.2vh, 16px) 0;
  font-size: var(--lesson-present-table);
  table-layout: auto;
}

.ai-lesson-compare-table th,
.ai-lesson-compare-table td {
  border: 1px solid #e2e8f0;
  padding: var(--lesson-present-cell-pad-y) var(--lesson-present-cell-pad-x);
  text-align: left;
  line-height: 1.5;
}

.ai-lesson-compare-table th {
  background: #f1f5f9;
}

.ai-slide-card:not([data-layout="flow"]) .ai-lesson-flow,
.ai-slide-card:not([data-layout="flow"]) .ai-pattern--flow[data-role="pattern-flow-diagram"] {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  margin: 12px 0 16px;
}

@media (max-width: 520px) {
  .ai-lesson-flow,
  .ai-slide-card:not([data-layout="flow"]) .ai-pattern--flow[data-role="pattern-flow-diagram"] {
    flex-direction: column;
    align-items: stretch;
  }

  .ai-lesson-flow__arrow {
    transform: rotate(90deg);
    text-align: center;
  }
}

.ai-lesson-flow__node {
  background: #eef2ff;
  border: 1px solid #c7d2fe;
  border-radius: 8px;
  padding: 8px 12px;
  font-size: 0.85rem;
  font-weight: 600;
}

.ai-lesson-flow__arrow {
  color: #64748b;
  font-weight: 700;
}

.ai-lesson-code-callout,
.ai-pattern--code-callout {
  width: 100%;
  max-width: none;
  margin: 8px 0 10px;
}

.ai-pattern--run-check-card,
.ai-pattern--state-change {
  width: 100%;
  max-width: none;
}

.ai-lesson-code-callout__pre {
  background: #0f172a;
  color: #e2e8f0;
  border-radius: 10px;
  padding: 12px 14px;
  overflow-x: auto;
  font-size: clamp(0.8rem, 1.8vw, 0.88rem);
  line-height: 1.45;
  max-height: min(52vh, 420px);
}

.ai-lesson-code-callout__tag {
  display: inline-block;
  margin-left: 8px;
  padding: 1px 6px;
  border-radius: 4px;
  background: #fbbf24;
  color: #1e293b;
  font-size: 0.72rem;
  font-weight: 700;
}

@media (max-width: 520px) {
  .ai-lesson-before-after {
    grid-template-columns: 1fr;
  }
}

/* —— Lesson screen + visual patterns —— */
.ai-lesson-screen {
  width: 100%;
  max-width: none;
  margin-bottom: 0;
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
}

.ai-lesson-screen__inner {
  width: 100%;
  max-width: none;
  margin: 0;
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
}

.ai-lesson-screen__headline {
  font-size: var(--lesson-present-heading);
  font-weight: 700;
  margin: 0 0 clamp(6px, 0.8vh, 10px);
  line-height: 1.25;
}

.ai-lesson-screen__subheadline {
  color: #475569;
  margin: 0 0 clamp(8px, 1vh, 12px);
  font-size: var(--lesson-present-body);
  line-height: 1.5;
}

.ai-lesson-screen--compact-flow {
  flex: 0 1 auto;
}

.ai-lesson-screen--compact-flow .ai-lesson-screen__inner {
  flex: 0 1 auto;
}

.ai-lesson-screen--compact-flow .ai-lesson-screen__headline {
  margin-bottom: clamp(4px, 0.5vh, 8px);
}

.ai-lesson-screen--compact-flow .ai-lesson-screen__subheadline {
  margin-bottom: clamp(4px, 0.6vh, 8px);
}

.ai-lesson-screen--compact-flow .ai-lesson-screen__visual {
  flex: 0 0 auto;
  margin: 0;
  min-height: 0;
}

.ai-lesson-screen__visual {
  margin: 4px 0 6px;
  flex: 1 1 auto;
  min-height: 0;
  width: 100%;
  max-width: none;
}

@media (max-width: 900px) {
  .ai-lesson-screen__visual {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
}

.ai-lesson-screen__focus {
  margin: 0 0 clamp(8px, 1vh, 12px);
  padding-left: 1.25rem;
  color: #334155;
  font-size: var(--lesson-present-body);
  line-height: 1.6;
}

.ai-lesson-screen__focus li {
  margin-bottom: clamp(6px, 0.8vh, 10px);
}

.ai-lesson-screen__note {
  font-size: var(--lesson-present-small);
  color: #64748b;
  margin: clamp(10px, 1.2vh, 16px) 0 0;
  line-height: 1.55;
}

.ai-pattern {
  width: 100%;
  max-width: none;
  margin: 0;
}

.ai-pattern-goal-card__row {
  display: grid;
  grid-template-columns: minmax(88px, 34%) 1fr;
  gap: clamp(10px, 1.2vh, 14px) clamp(12px, 1.4vw, 16px);
  padding: var(--lesson-present-cell-pad-y) var(--lesson-present-cell-pad-x);
  border-bottom: 1px solid #e2e8f0;
  background: #fff;
}

.ai-pattern-goal-card__row:first-child {
  border-radius: 10px 10px 0 0;
}

.ai-pattern-goal-card__row:last-child {
  border-bottom: none;
  border-radius: 0 0 10px 10px;
}

.ai-pattern--goal-card {
  width: 100%;
  max-width: none;
  border: 1px solid #e2e8f0;
  border-radius: 10px;
  overflow: hidden;
}

.ai-lesson-screen__visual > .ai-pattern--goal-card {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
}

.ai-lesson-screen__visual > .ai-pattern--goal-card .ai-pattern-goal-card__row {
  flex: 1 1 auto;
  align-content: center;
}

.ai-pattern-goal-card__label {
  font-weight: 700;
  color: #475569;
  font-size: var(--lesson-present-small);
}

.ai-pattern-goal-card__value {
  color: #0f172a;
  font-size: var(--lesson-present-body);
  line-height: 1.55;
}

/* Canvas enrichment — summary card (mentor message uses player Kiki layer) */
.ai-lesson-screen--canvas-enrich .ai-lesson-screen__inner {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  min-height: clamp(260px, 38vh, 480px);
}

.ai-lesson-screen__visual--canvas-enrich {
  flex: 1 1 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: clamp(220px, 34vh, 420px);
}

.ai-slide-canvas-enrich {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(12px, 1.6vh, 20px);
  padding: clamp(8px, 1vh, 16px) 0;
}

.ai-slide-canvas-enrich__main {
  width: 100%;
  max-width: min(840px, 100%);
  flex: 0 0 auto;
}

.ai-pattern--summary-card {
  width: 100%;
  max-width: min(840px, 100%);
  margin: 0 auto;
  border: 1px solid #cbd5e1;
  border-radius: 16px;
  background: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
  padding: clamp(18px, 2.2vh, 28px) clamp(20px, 2.4vw, 32px);
  box-shadow: 0 8px 28px rgba(15, 23, 42, 0.08);
}

.ai-pattern-summary-card__title {
  margin: 0 0 clamp(12px, 1.4vh, 18px);
  font-size: clamp(1.15rem, 2.2vw, 1.5rem);
  font-weight: 800;
  color: #0f172a;
  line-height: 1.3;
  text-align: center;
}

.ai-pattern-summary-card__body {
  margin: 0 0 clamp(14px, 1.6vh, 20px);
  color: #334155;
  font-size: var(--lesson-present-body);
  line-height: 1.65;
  text-align: center;
}

.ai-pattern-summary-card__body p {
  margin: 0 0 0.65em;
}

.ai-pattern-summary-card__body p:last-child {
  margin-bottom: 0;
}

.ai-pattern-summary-card__steps {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: clamp(10px, 1.2vh, 14px);
}

.ai-pattern-summary-card__steps li {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: clamp(10px, 1.2vh, 14px) clamp(12px, 1.4vw, 16px);
  border-radius: 12px;
  background: rgba(241, 245, 249, 0.95);
  border: 1px solid #e2e8f0;
  font-size: var(--lesson-present-body);
  line-height: 1.5;
  color: #1e293b;
}

.ai-pattern-summary-card__step-num {
  flex: 0 0 auto;
  width: 28px;
  height: 28px;
  border-radius: 999px;
  background: #3b82f6;
  color: #fff;
  font-weight: 800;
  font-size: 13px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.ai-slide-canvas-kiki,
.ai-slide-canvas-kiki__bubble,
.ai-slide-canvas-kiki__message,
.ai-slide-canvas-kiki__avatar {
  display: none !important;
}

.ai-slide-kiki-guidance {
  display: none;
  width: 100%;
  max-width: min(840px, 100%);
  box-sizing: border-box;
  padding: clamp(14px, 1.6vh, 18px) clamp(16px, 1.8vw, 20px);
  border-radius: 14px;
  background: rgba(15, 23, 42, 0.94);
  border: 1px solid rgba(148, 163, 184, 0.32);
  color: #e2e8f0;
  box-shadow: 0 10px 24px rgba(2, 6, 23, 0.18);
}

.ai-slide-kiki-guidance__label {
  margin: 0 0 8px;
  font-size: 12px;
  font-weight: 800;
  color: #7dd3fc;
  letter-spacing: 0.02em;
}

.ai-slide-kiki-guidance__message {
  margin: 0;
  font-size: clamp(13px, 1.6vw, 15px);
  line-height: 1.55;
}

.ai-slide-card--canvas-enrich .slide-content {
  justify-content: flex-start;
}

.ai-slide-card--canvas-enrich .ai-lesson-screen--canvas-enrich {
  flex: 1 1 auto;
}

.ai-slide-card--has-kiki-message .ai-kiki-drawer {
  max-width: min(340px, calc(100vw - 108px));
  max-height: min(280px, 40vh);
}

@media (min-width: 901px) {
  .ai-slide-card--canvas-enrich.ai-slide-card--has-kiki-message .ai-kiki-drawer {
    right: calc(100% + 10px);
    left: auto;
    bottom: 0;
    top: auto;
    max-width: min(320px, 34vw);
    max-height: min(240px, 34vh);
  }
}

@media (min-width: 901px) {
  .ai-slide-canvas-enrich {
    justify-content: center;
    min-height: clamp(280px, 42vh, 500px);
    padding-bottom: clamp(56px, 8vh, 80px);
  }

  .ai-slide-kiki-guidance {
    display: none;
  }
}

@media (max-width: 900px) {
  .ai-slide-canvas-enrich {
    align-items: stretch;
    padding-bottom: clamp(8px, 1vh, 12px);
  }

  .ai-slide-kiki-guidance {
    display: block;
    margin-top: clamp(4px, 0.8vh, 8px);
  }
}

.ai-slide-card:fullscreen .ai-pattern--summary-card,
.ai-slide-card:-webkit-full-screen .ai-pattern--summary-card,
.ai-slide-card.is-theater-fullscreen.is-fullscreen-active .ai-pattern--summary-card,
body.ai-lesson-fullscreen-active .ai-pattern--summary-card,
.ai-player-shell.is-fullscreen-mode .ai-pattern--summary-card,
.ai-player.ai-player--fullscreen .ai-pattern--summary-card {
  padding: clamp(22px, 2.6vh, 34px) clamp(24px, 2.8vw, 40px);
}

.ai-slide-card:fullscreen .ai-pattern-summary-card__title,
.ai-slide-card:-webkit-full-screen .ai-pattern-summary-card__title,
.ai-slide-card.is-theater-fullscreen.is-fullscreen-active .ai-pattern-summary-card__title,
body.ai-lesson-fullscreen-active .ai-pattern-summary-card__title,
.ai-player-shell.is-fullscreen-mode .ai-pattern-summary-card__title,
.ai-player.ai-player--fullscreen .ai-pattern-summary-card__title {
  font-size: clamp(1.35rem, 2.4vw, 1.75rem);
}

.ai-lesson-mockup__item--highlight {
  outline: 3px solid #f59e0b;
  outline-offset: 2px;
  box-shadow: 0 0 0 4px rgba(245, 158, 11, 0.25);
}

.ai-pattern--game-mockup {
  margin: 0;
}

.ai-pattern--game-mockup .ai-lesson-mockup--game-screen {
  width: 100%;
  max-width: 100%;
  margin-left: auto;
  margin-right: auto;
}

.ai-slide-card[data-slide-type="target_preview"] .ai-lesson-mockup,
.ai-slide-card[data-slide-type="visual_explain"] .ai-lesson-mockup {
  width: 100%;
  max-width: 100%;
}

.ai-slide-card[data-slide-type="target_preview"] .ai-lesson-mockup__item--board,
.ai-slide-card[data-slide-type="visual_explain"] .ai-lesson-mockup__item--board {
  min-height: clamp(260px, calc(var(--ai-slide-content-height) * 0.5), 520px);
}

.ai-pattern-game-mockup__badges {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 10px;
}

.ai-pattern-badge {
  font-size: 0.75rem;
  padding: 3px 8px;
  border-radius: 999px;
  background: #eef2ff;
  color: #3730a3;
  font-weight: 600;
}

/* Mobile app preview — portrait device frame (target-preview / app result) */
.ai-pattern--mobile-app-preview {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  max-width: 100%;
  margin: 0 auto;
}

.ai-mobile-app-preview {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  width: 100%;
}

.ai-mobile-app-preview__device {
  box-sizing: border-box;
  --mobile-app-device-h: min(72vh, calc(var(--ai-slide-content-height, 640px) * 0.82), 640px);
  height: var(--mobile-app-device-h);
  width: min(300px, calc(var(--mobile-app-device-h) * 9 / 19.5), 92vw, calc(var(--ai-slide-content-max-w, 720px) * 0.42));
  max-width: 100%;
  aspect-ratio: 9 / 19.5;
  padding: 10px;
  border-radius: 28px;
  background: linear-gradient(160deg, #1e293b 0%, #0f172a 100%);
  box-shadow:
    0 0 0 2px rgba(148, 163, 184, 0.35),
    0 18px 48px rgba(15, 23, 42, 0.28);
  display: flex;
  flex-direction: column;
}

.ai-mobile-app-preview__screen {
  box-sizing: border-box;
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: clamp(6px, 1.2vh, 10px);
  padding: clamp(12px, 2.4vh, 18px) clamp(12px, 3vw, 16px) clamp(14px, 2.6vh, 20px);
  border-radius: 20px;
  background: #ffffff;
  overflow: hidden;
}

.ai-mobile-app-preview__title {
  margin: 0;
  text-align: center;
  font-size: clamp(20px, 4.8vw, 26px);
  font-weight: 700;
  line-height: 1.2;
  color: #111827;
  letter-spacing: -0.02em;
}

.ai-mobile-app-preview__score {
  margin: 0;
  text-align: center;
  font-size: clamp(13px, 3.2vw, 15px);
  font-weight: 500;
  color: #4b5563;
  line-height: 1.35;
}

.ai-mobile-app-preview__board {
  flex: 1 1 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 0;
  padding: 2px 0;
}

.ai-mobile-app-preview__grid {
  display: grid;
  grid-template-columns: repeat(var(--mobile-app-board-cols, 10), minmax(0, 1fr));
  grid-template-rows: repeat(var(--mobile-app-board-rows, 10), minmax(0, 1fr));
  width: min(100%, 240px);
  aspect-ratio: 1;
  max-height: min(42vh, 280px);
  border: 1.5px solid #374151;
  background: #ffffff;
  box-sizing: border-box;
}

.ai-mobile-app-preview__cell {
  position: relative;
  border: 0.5px solid #d1d5db;
  min-width: 0;
  min-height: 0;
}

.ai-mobile-app-preview__cell--player {
  background: #f9fafb;
}

.ai-mobile-app-preview__player {
  position: absolute;
  inset: 12%;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #fde047 0%, #facc15 45%, #eab308 100%);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
}

.ai-mobile-app-preview__start {
  flex: 0 0 auto;
  display: block;
  width: min(100%, 200px);
  margin: 0 auto;
  padding: 10px 16px;
  border: 0;
  border-radius: 10px;
  background: #6750a4;
  color: #ffffff;
  font-size: clamp(14px, 3.4vw, 16px);
  font-weight: 600;
  line-height: 1.25;
  text-align: center;
  cursor: default;
  box-shadow: 0 2px 8px rgba(103, 80, 164, 0.35);
}

.ai-mobile-app-preview__directions {
  flex: 0 0 auto;
  text-align: center;
  font-size: clamp(16px, 4vw, 20px);
  font-weight: 600;
  letter-spacing: 0.35em;
  color: #6b7280;
  line-height: 1.2;
}

.ai-mobile-app-preview__part--highlight {
  outline: 3px solid #f59e0b;
  outline-offset: 2px;
  box-shadow: 0 0 0 4px rgba(245, 158, 11, 0.22);
}

.ai-mobile-app-preview__badges {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 6px;
}

.ai-lesson-screen__visual > .ai-pattern--mobile-app-preview {
  flex: 1 1 auto;
  min-height: 0;
  align-self: stretch;
}

.ai-slide-card[data-slide-type="target_preview"] .ai-lesson-screen__visual {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: clamp(280px, 42vh, 520px);
}

.ai-slide-card[data-slide-type="target_preview"] .ai-pattern--mobile-app-preview {
  flex: 1 1 auto;
}

.ai-slide-card[data-slide-type="mission"] .ai-lesson-screen__visual--mobile-app,
.ai-slide-card[data-slide-type="coding_mission"] .ai-lesson-screen__visual--mobile-app {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: clamp(240px, 38vh, 480px);
}

.ai-slide-card[data-slide-type="mission"] .ai-pattern--mobile-app-preview,
.ai-slide-card[data-slide-type="coding_mission"] .ai-pattern--mobile-app-preview {
  flex: 0 1 auto;
}

.ai-completion-result-notes {
  width: 100%;
  max-width: min(420px, 100%);
  margin: clamp(10px, 1.6vh, 16px) auto 0;
  padding: 0 clamp(4px, 2vw, 12px);
  text-align: center;
}

.ai-completion-result-notes__line {
  margin: 0 0 6px;
  font-size: clamp(13px, 3.2vw, 15px);
  line-height: 1.5;
  color: #475569;
  font-weight: 500;
}

.ai-completion-result-notes__line:last-child {
  margin-bottom: 0;
}

/* Mission / completion: keep Kiki subtitle compact so mobile preview stays visible */
.ai-slide-card[data-slide-type="mission"]:has(.ai-pattern--mobile-app-preview) .ai-player-stage__viewport.has-subtitle-safe,
.ai-slide-card[data-slide-type="mission"]:has(.ai-pattern--mobile-app-preview) .ai-player-stage__viewport.has-subtitle-safe--compact,
.ai-slide-card[data-slide-type="mission"]:has(.ai-pattern--mobile-app-preview) .ai-player-stage__viewport.has-subtitle-safe--interactive,
.ai-slide-card[data-slide-type="coding_mission"]:has(.ai-pattern--mobile-app-preview) .ai-player-stage__viewport.has-subtitle-safe,
.ai-slide-card[data-slide-type="coding_mission"]:has(.ai-pattern--mobile-app-preview) .ai-player-stage__viewport.has-subtitle-safe--compact,
.ai-slide-card[data-slide-type="coding_mission"]:has(.ai-pattern--mobile-app-preview) .ai-player-stage__viewport.has-subtitle-safe--interactive {
  --ai-subtitle-safe-pb: 2.65rem;
}

.ai-slide-card[data-slide-type="mission"]:has(.ai-pattern--mobile-app-preview) .ai-lesson-subtitle-overlay,
.ai-slide-card[data-slide-type="coding_mission"]:has(.ai-pattern--mobile-app-preview) .ai-lesson-subtitle-overlay {
  width: min(360px, 88%);
  max-width: calc(100% - 20px);
  bottom: 10px;
}

.ai-slide-card[data-slide-type="mission"]:has(.ai-pattern--mobile-app-preview) .ai-lesson-subtitle-overlay__inner,
.ai-slide-card[data-slide-type="coding_mission"]:has(.ai-pattern--mobile-app-preview) .ai-lesson-subtitle-overlay__inner {
  padding: 6px 10px 7px;
  max-height: 3.1em;
}

.ai-slide-card[data-slide-type="mission"]:has(.ai-pattern--mobile-app-preview) .ai-lesson-subtitle-overlay__text,
.ai-slide-card[data-slide-type="coding_mission"]:has(.ai-pattern--mobile-app-preview) .ai-lesson-subtitle-overlay__text {
  font-size: 0.78rem;
  line-height: 1.35;
  max-height: 2.7em;
}

.ai-slide-card[data-slide-type="mission"]:has(.ai-pattern--mobile-app-preview) .ai-kiki-fab__avatar,
.ai-slide-card[data-slide-type="coding_mission"]:has(.ai-pattern--mobile-app-preview) .ai-kiki-fab__avatar {
  width: 48px;
  height: 48px;
}

.ai-slide-card[data-slide-type="mission"]:has(.ai-pattern--mobile-app-preview) .ai-kiki-fab__label,
.ai-slide-card[data-slide-type="coding_mission"]:has(.ai-pattern--mobile-app-preview) .ai-kiki-fab__label {
  font-size: 11px;
}

@media (max-width: 767px) {
  .ai-mobile-app-preview__device {
    --mobile-app-device-h: min(58vh, 520px);
    height: var(--mobile-app-device-h);
    width: min(280px, calc(var(--mobile-app-device-h) * 9 / 19.5), 88vw);
    padding: 8px;
    border-radius: 24px;
  }

  .ai-mobile-app-preview__screen {
    border-radius: 18px;
    padding: 10px 12px 14px;
  }

  .ai-mobile-app-preview__grid {
    width: min(100%, 210px);
    max-height: min(36vh, 240px);
  }
}

.ai-pattern--practice-step-cards {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  width: 100%;
}

.ai-practice-step-card {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-height: 0;
  padding: 16px 14px;
  border: 1px solid #cfe3ff;
  border-radius: 12px;
  background: #f5f9ff;
  color: #1e3a8a;
  transition: background-color 220ms ease, border-color 220ms ease, box-shadow 220ms ease, transform 220ms ease, color 220ms ease;
}

.ai-practice-step-card__title {
  margin: 0;
  font-size: clamp(15px, 1.6vw, 18px);
  font-weight: 700;
  color: #1e3a8a;
  line-height: 1.35;
  transition: color 220ms ease;
}

.ai-practice-step-card__body {
  margin: 0;
  font-size: clamp(13px, 1.35vw, 15px);
  line-height: 1.55;
  color: #334155;
  white-space: pre-line;
  transition: color 220ms ease;
}

@media (max-width: 900px) {
  .ai-pattern--practice-step-cards {
    grid-template-columns: 1fr;
  }

  .ai-practice-step-card {
    padding: 14px 12px;
  }
}

.ai-pattern--state-recomposition-flow {
  display: flex;
  flex-direction: column;
  gap: 14px;
  width: 100%;
}

.ai-state-flow-chain {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 12px 10px;
  border: 1px solid #dbeafe;
  border-radius: 12px;
  background: #f8fbff;
}

.ai-state-flow-chain__node {
  width: min(100%, 520px);
  padding: 10px 14px;
  border-radius: 10px;
  background: #fff;
  border: 1px solid #bfdbfe;
  font-size: clamp(13px, 1.35vw, 15px);
  font-weight: 600;
  color: #1e3a8a;
  text-align: center;
  line-height: 1.4;
}

.ai-state-flow-chain__arrow {
  font-size: 18px;
  color: #3b82f6;
  line-height: 1;
}

.ai-state-flow-summary {
  padding: 12px 14px;
  border-radius: 10px;
  border: 1px solid #fde68a;
  background: #fffbeb;
  transition: background-color 220ms ease, border-color 220ms ease, box-shadow 220ms ease, transform 220ms ease, color 220ms ease;
}

.ai-state-flow-summary__title {
  margin: 0 0 6px;
  font-size: clamp(14px, 1.45vw, 16px);
  font-weight: 700;
  color: #92400e;
  transition: color 220ms ease;
}

.ai-state-flow-summary__body {
  margin: 0;
  font-size: clamp(13px, 1.35vw, 15px);
  color: #78350f;
  line-height: 1.5;
  transition: color 220ms ease;
}

.ai-state-flow-code {
  padding: 12px 14px;
  border-radius: 10px;
  border: 1px solid #e2e8f0;
  background: #0f172a;
}

.ai-state-flow-code__pre {
  margin: 0;
  overflow-x: auto;
  font-size: 12px;
  line-height: 1.5;
  color: #e2e8f0;
}

.ai-state-flow-code__note {
  margin: 10px 0 0;
  font-size: 13px;
  line-height: 1.45;
  color: #cbd5e1;
}

.ai-pattern--state-recomposition-flow .ai-pattern--practice-step-cards {
  margin-top: 2px;
}

.ai-slide-card--card-focus .ai-lesson-screen__visual--compact {
  max-height: min(58vh, 520px);
  overflow-y: auto;
  overscroll-behavior: contain;
  padding-bottom: max(72px, var(--ai-subtitle-safe-pb, 72px));
}

.ai-slide-card--card-focus .ai-pattern--state-recomposition-flow {
  gap: 12px;
}

.ai-slide-card--card-focus .ai-practice-step-card:not(.is-card-focus-active) {
  opacity: 0.78;
}

.ai-practice-step-card.is-card-focus-active {
  position: relative;
  z-index: 2;
  border-color: #1d4ed8;
  background: #2563eb;
  color: #ffffff;
  box-shadow: 0 10px 24px rgba(37, 99, 235, 0.25);
  transform: scale(1.02);
  opacity: 1;
}

.ai-practice-step-card.is-card-focus-active .ai-practice-step-card__title,
.ai-practice-step-card.is-card-focus-active .ai-practice-step-card__body {
  color: #ffffff;
}

.ai-practice-step-card.is-card-focus-all {
  border-color: #1d4ed8;
  background: #2563eb;
  color: #ffffff;
  opacity: 1;
}

.ai-practice-step-card.is-card-focus-all .ai-practice-step-card__title,
.ai-practice-step-card.is-card-focus-all .ai-practice-step-card__body {
  color: #ffffff;
}

.ai-state-flow-summary.is-card-focus-summary-active {
  position: relative;
  z-index: 2;
  border-color: #1d4ed8;
  background: #2563eb;
  box-shadow: 0 10px 24px rgba(37, 99, 235, 0.25);
  transform: scale(1.01);
}

.ai-state-flow-summary.is-card-focus-summary-active .ai-state-flow-summary__title,
.ai-state-flow-summary.is-card-focus-summary-active .ai-state-flow-summary__body {
  color: #ffffff;
}

/* L1-10 feature journey recap (lesson 1543) — 3x3 grid fits without clipped cards */
.ai-slide-card--card-focus .ai-lesson-screen__visual--compact:has([data-card-key="l1-01"]) {
  max-height: none;
  overflow: visible;
  padding-top: 4px;
  padding-bottom: max(84px, var(--ai-subtitle-safe-pb, 84px));
}

.ai-slide-card--card-focus .ai-pattern--state-recomposition-flow:has([data-card-key="l1-01"]) {
  gap: 10px;
}

.ai-slide-card--card-focus .ai-pattern--practice-step-cards:has([data-card-key="l1-01"]) {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin-top: 16px;
}

.ai-slide-card--card-focus .ai-pattern--practice-step-cards:has([data-card-key="l1-01"]) .ai-practice-step-card {
  min-height: 0;
  padding: 12px 10px;
  overflow: hidden;
}

.ai-slide-card--card-focus .ai-pattern--practice-step-cards:has([data-card-key="l1-01"]) .ai-practice-step-card__title {
  font-size: clamp(12px, 1.15vw, 14px);
  line-height: 1.35;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.ai-slide-card--card-focus .ai-pattern--practice-step-cards:has([data-card-key="l1-01"]) .ai-practice-step-card:not(.is-card-focus-active):not(.is-card-focus-all) {
  opacity: 1;
}

.ai-slide-card--card-focus .ai-pattern--practice-step-cards:has([data-card-key="l1-01"]) .ai-practice-step-card.is-card-focus-active,
.ai-slide-card--card-focus .ai-pattern--practice-step-cards:has([data-card-key="l1-01"]) .ai-practice-step-card.is-card-focus-all {
  transform: none;
  box-shadow: 0 8px 18px rgba(37, 99, 235, 0.25);
}

.ai-slide-card--card-focus .ai-pattern--state-recomposition-flow:has([data-card-key="l1-01"]) .ai-state-flow-summary {
  margin-top: 8px;
  padding: 10px 12px;
}

.ai-slide-card--card-focus .ai-pattern--state-recomposition-flow:has([data-card-key="l1-01"]) .ai-state-flow-summary__title {
  font-size: clamp(13px, 1.3vw, 15px);
  margin-bottom: 4px;
}

.ai-slide-card--card-focus .ai-pattern--state-recomposition-flow:has([data-card-key="l1-01"]) .ai-state-flow-summary__body {
  font-size: clamp(12px, 1.15vw, 14px);
}

.ai-slide-card--card-focus .ai-pattern--state-recomposition-flow:has([data-card-key="l1-01"]) .ai-state-flow-summary.is-card-focus-summary-active {
  transform: none;
}

.ai-slide-card--card-focus:has([data-card-key="l1-01"]) .ai-lesson-screen--compact-flow .ai-lesson-screen__subheadline {
  margin-bottom: 8px;
  font-size: clamp(13px, 1.3vw, 15px);
  line-height: 1.45;
}

@media (max-width: 900px) {
  .ai-slide-card--card-focus .ai-pattern--practice-step-cards:has([data-card-key="l1-01"]) {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.ai-lesson-screen--state-code-flow .ai-lesson-screen__subheadline {
  margin-bottom: 8px;
}

.ai-lesson-screen--state-code-flow .ai-lesson-screen__visual {
  overflow: visible;
}

.ai-lesson-screen--state-code-flow .ai-code-block__pre--scroll {
  max-height: min(34vh, 260px);
}

.ai-pattern--prompt-recipe {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  width: 100%;
  max-width: none;
}

.ai-pattern-prompt-recipe__col {
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 10px;
  padding: var(--lesson-present-cell-pad-y) var(--lesson-present-cell-pad-x);
}

.ai-pattern-prompt-recipe__col h4 {
  margin: 0 0 clamp(8px, 1vh, 12px);
  font-size: var(--lesson-present-heading);
  font-weight: 700;
}

.ai-pattern-prompt-recipe__col ul {
  margin: 0;
  padding-left: 1.25rem;
  font-size: var(--lesson-present-body);
  line-height: 1.6;
}

.ai-pattern-prompt-recipe__col--avoid {
  border-color: #fecaca;
  background: #fff5f5;
}

.ai-pattern-prompt-recipe__col--add {
  border-color: #bbf7d0;
  background: #f0fdf4;
}

.ai-pattern-run-check-card__preview {
  margin-bottom: 12px;
}

.ai-pattern-run-check-card__list {
  margin: 0;
  padding-left: 1.25rem;
  font-size: var(--lesson-present-body);
  line-height: 1.6;
}

.ai-pattern--lesson-scope {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  width: 100%;
  margin: 4px 0 10px;
}

.ai-pattern--lesson-scope--single {
  grid-template-columns: 1fr;
  max-width: min(100%, 520px);
  margin-left: auto;
  margin-right: auto;
}

.slide-content--compact-flow .ai-pattern--lesson-scope--single,
.slide-content--compact-flow .ai-pattern--compact-block,
.ai-pattern--prompt-recipe--single-col {
  max-width: min(100%, 36rem);
  margin-left: 0;
  margin-right: auto;
}

.ai-pattern--prompt-recipe--single-col {
  grid-template-columns: 1fr;
  gap: 8px;
}

.ai-pattern--prompt-recipe--single-col .ai-pattern-prompt-recipe__col {
  padding: 8px 12px;
  border-radius: 10px;
}

.ai-pattern--prompt-recipe--single-col .ai-pattern-prompt-recipe__col h4 {
  margin-bottom: 4px;
  font-size: 0.9rem;
}

.ai-pattern--prompt-recipe--single-col .ai-pattern-prompt-recipe__col ul {
  font-size: clamp(0.88rem, 1.5vw, 0.98rem);
  line-height: 1.45;
  padding-left: 1.1rem;
}

.ai-pattern--compact-block.ai-pattern--lesson-scope--single .ai-pattern-lesson-scope__col {
  padding: 8px 12px;
}

.ai-lesson-screen__focus--compact {
  margin: 0 0 clamp(4px, 0.6vh, 8px);
  padding-left: 1.1rem;
  font-size: clamp(0.88rem, 1.5vw, 0.98rem);
  max-width: min(100%, 36rem);
}

html:not([data-ai-lesson-edit-mode="on"]) .ai-pattern--lesson-scope--single .ai-pattern-lesson-scope__col {
  padding: 10px 12px;
}

html:not([data-ai-lesson-edit-mode="on"]) .ai-pattern--lesson-scope--single .ai-pattern-lesson-scope__col h4 {
  margin-bottom: 6px;
  font-size: 0.9rem;
}

html:not([data-ai-lesson-edit-mode="on"]) .ai-pattern--lesson-scope--single .ai-pattern-lesson-scope__col ul {
  font-size: clamp(0.82rem, 1.6vw, 0.95rem);
  line-height: 1.4;
}

html:not([data-ai-lesson-edit-mode="on"]) .ai-pattern--lesson-scope--single .ai-pattern-lesson-scope__col li + li {
  margin-top: 2px;
}

html:not([data-ai-lesson-edit-mode="on"]) .ai-pattern--lesson-scope:not(.ai-pattern--lesson-scope--single) {
  gap: 10px;
  margin: 2px 0 6px;
}

html:not([data-ai-lesson-edit-mode="on"]) .ai-pattern--lesson-scope:not(.ai-pattern--lesson-scope--single) .ai-pattern-lesson-scope__col {
  padding: 8px 10px;
}

html:not([data-ai-lesson-edit-mode="on"]) .ai-pattern--lesson-scope:not(.ai-pattern--lesson-scope--single) .ai-pattern-lesson-scope__col h4 {
  margin-bottom: 4px;
  font-size: 0.82rem;
}

html:not([data-ai-lesson-edit-mode="on"]) .ai-pattern--lesson-scope:not(.ai-pattern--lesson-scope--single) .ai-pattern-lesson-scope__col ul {
  font-size: clamp(0.75rem, 1.45vw, 0.88rem);
  line-height: 1.35;
  padding-left: 1rem;
}

html:not([data-ai-lesson-edit-mode="on"]) .ai-pattern--lesson-scope:not(.ai-pattern--lesson-scope--single) .ai-pattern-lesson-scope__col li + li {
  margin-top: 1px;
}

.ai-pattern-lesson-scope__col {
  border-radius: 12px;
  border: 1px solid #cbd5e1;
  padding: 14px 16px;
  background: #f8fafc;
}

.ai-pattern-lesson-scope__col--make {
  border-color: #86efac;
  background: #f0fdf4;
}

.ai-pattern-lesson-scope__col--not {
  border-color: #fca5a5;
  background: #fef2f2;
}

.ai-pattern-lesson-scope__col h4 {
  margin: 0 0 10px;
  font-size: 0.95rem;
  font-weight: 700;
}

.ai-pattern-lesson-scope__col ul {
  margin: 0;
  padding-left: 1.15rem;
  font-size: var(--lesson-present-body);
  line-height: 1.55;
}

.ai-pattern--image-placeholder {
  width: 100%;
  margin: 6px 0 10px;
}

.ai-image-slot--aspect-16-9 .ai-pattern-image-placeholder__frame,
.ai-image-slot--aspect-16-9 .ai-pattern-image-placeholder__box,
.ai-slide-image-slot-block.ai-image-slot--aspect-16-9 {
  aspect-ratio: 16 / 9;
}

.ai-image-slot--aspect-4-3 .ai-pattern-image-placeholder__frame,
.ai-image-slot--aspect-4-3 .ai-pattern-image-placeholder__box {
  aspect-ratio: 4 / 3;
}

.ai-image-slot--aspect-1-1 .ai-pattern-image-placeholder__frame,
.ai-image-slot--aspect-1-1 .ai-pattern-image-placeholder__box {
  aspect-ratio: 1 / 1;
}

.ai-image-slot--aspect-mobile .ai-pattern-image-placeholder__frame,
.ai-image-slot--aspect-mobile .ai-pattern-image-placeholder__box,
.ai-image-slot--aspect-9-16 .ai-pattern-image-placeholder__frame,
.ai-image-slot--aspect-9-16 .ai-pattern-image-placeholder__box {
  aspect-ratio: 9 / 16;
  max-width: min(100%, 360px);
  margin-inline: auto;
}

.ai-slide-image-slot-block {
  width: 100%;
  margin: 12px 0 16px;
}

.ai-slide-image-slot-block .ai-pattern-image-placeholder__frame {
  width: 100%;
  min-height: 180px;
}

.ai-pattern-image-placeholder__slot-key {
  font-size: 12px;
  color: #64748b;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
}

.ai-pattern-image-placeholder__box {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: min(42vh, 320px);
  padding: 24px 20px;
  border: 2px dashed #94a3b8;
  border-radius: 14px;
  background: linear-gradient(180deg, #f1f5f9 0%, #e2e8f0 100%);
  text-align: center;
}

.ai-pattern-image-placeholder__placeholder {
  margin: 0;
  font-size: 14px;
  color: #475569;
}

.ai-pattern-image-placeholder__caption {
  margin: 10px 0 0;
  font-size: 13px;
  color: #64748b;
  text-align: center;
}

.ai-pattern-image-placeholder__icon {
  font-size: 2rem;
  opacity: 0.7;
}

.ai-pattern-image-placeholder__label {
  font-size: 1.05rem;
  font-weight: 700;
  color: #334155;
}

.ai-pattern-image-placeholder__desc,
.ai-pattern-image-placeholder__file,
.ai-pattern-image-placeholder__note {
  margin: 0;
  font-size: 0.9rem;
  color: #64748b;
  line-height: 1.5;
}

.ai-pattern-image-placeholder__img {
  display: block;
  margin: 0 auto;
  border-radius: 12px;
  border: 1px solid #cbd5e1;
  object-fit: contain;
}

.ai-pattern--image-placeholder--hero .ai-lesson-image-fit img,
.ai-pattern--image-placeholder--hero .ai-pattern-image-placeholder__img {
  width: 100%;
  height: 100%;
  max-width: none;
  max-height: none;
  margin: 0;
}

html:not([data-ai-lesson-edit-mode="on"]) .ai-pattern--image-placeholder:not(.ai-pattern--image-placeholder--hero) .ai-pattern-image-placeholder__img {
  max-height: min(38vh, 300px);
  width: auto;
  max-width: 100%;
  object-fit: contain;
}

/* Screenshot hero — 실습 스크린샷 (image_placeholder + src) */
.ai-slide-card[data-slide-type="visual_explain"]:has(.ai-lesson-screen--screenshot-hero) .slide-content,
.ai-slide-card.ai-slide--image-focus:has(.ai-lesson-screen--screenshot-hero) .slide-content {
  gap: 6px;
  padding-top: clamp(6px, 0.8vh, 10px);
}

.ai-lesson-screen--screenshot-hero .ai-lesson-screen__headline {
  margin: 0 0 4px;
  font-size: clamp(1.05rem, 2.1vw, 1.32rem);
  line-height: 1.2;
}

.ai-lesson-screen--screenshot-hero .ai-lesson-screen__subheadline {
  margin: 0 0 8px;
  font-size: clamp(0.86rem, 1.55vw, 0.98rem);
  line-height: 1.4;
}

.ai-player-shell .ai-lesson-screen--screenshot-hero .ai-lesson-screen__visual,
.ai-slide-card .ai-lesson-screen--screenshot-hero .ai-lesson-screen__visual {
  flex: 1 1 auto;
  min-height: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  justify-content: stretch;
  align-items: stretch;
  overflow: hidden;
  width: 100%;
  padding-bottom: 0;
}

.ai-lesson-image-stage.ai-slide-layout-target--positioned {
  overflow: hidden;
  box-sizing: border-box;
  flex: none !important;
  margin: 0 !important;
  max-height: none !important;
  min-height: 0;
}

.ai-lesson-image-stage.ai-slide-layout-target--positioned .ai-lesson-image-fit {
  width: 100%;
  height: 100%;
  min-height: 0;
  flex: none !important;
  display: block;
  overflow: hidden;
}

.ai-lesson-image-stage.ai-slide-layout-target--positioned .ai-lesson-image-fit > img,
.ai-lesson-image-stage.ai-slide-layout-target--positioned .ai-pattern-image-placeholder__img {
  width: 100%;
  height: 100%;
  display: block;
  max-height: none !important;
  object-position: center center;
}

.ai-slide-layout-visual-root {
  position: relative;
  box-sizing: border-box;
}

.ai-lesson-screen--screenshot-hero .ai-lesson-screen__visual:has(.ai-lesson-image-stage.ai-slide-layout-target--positioned),
.ai-lesson-screen__visual:has(.ai-lesson-image-stage.ai-slide-layout-target--positioned) {
  position: relative;
  flex: 1 1 auto;
  min-height: min(62vh, 860px);
  width: 100%;
}

.ai-pattern--image-placeholder--hero:has(.ai-lesson-image-stage.ai-slide-layout-target--positioned),
.ai-slide-card .ai-pattern--image-placeholder--hero:has(.ai-lesson-image-stage.ai-slide-layout-target--positioned) {
  position: static;
  flex: 1 1 auto;
  min-height: inherit;
  width: 100%;
  height: 100%;
}

.ai-slide-card .ai-pattern--image-placeholder--hero,
.ai-slide-card .lesson-image-placeholder,
.ai-slide-card .slide-image-placeholder {
  width: 100%;
  max-width: 100%;
  margin: 0;
  flex: 1 1 auto;
  min-height: 0;
}

.ai-slide-card .ai-pattern--image-placeholder--hero .ai-pattern-image-placeholder__img {
  border-radius: 14px;
  box-shadow: 0 14px 44px rgba(15, 23, 42, 0.2);
  border: 1px solid rgba(148, 163, 184, 0.45);
}

.ai-lesson-screen--screenshot-hero .ai-lesson-screen__inner {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-height: 0;
  height: 100%;
}

.ai-lesson-screen--screenshot-hero .ai-lesson-screen__note,
.ai-lesson-screen--screenshot-hero .ai-lesson-screen__focus {
  flex: 0 0 auto;
  max-height: min(18vh, 140px);
  overflow: auto;
  margin: 0;
}

html:not([data-ai-lesson-edit-mode="on"]) .ai-pattern--image-placeholder--compact .ai-pattern-image-placeholder__box {
  min-height: min(20vh, 150px);
  max-height: min(28vh, 200px);
  padding: 12px 14px;
  gap: 4px;
}

html:not([data-ai-lesson-edit-mode="on"]) .ai-pattern--image-placeholder--compact .ai-pattern-image-placeholder__icon {
  font-size: 1.35rem;
}

html:not([data-ai-lesson-edit-mode="on"]) .ai-pattern--image-placeholder--compact .ai-pattern-image-placeholder__label {
  font-size: 0.95rem;
}

html:not([data-ai-lesson-edit-mode="on"]) .ai-pattern--prompt-recipe--compact {
  gap: 8px;
}

html:not([data-ai-lesson-edit-mode="on"]) .ai-pattern--prompt-recipe--compact .ai-pattern-prompt-recipe__col {
  padding: 8px 10px;
}

html:not([data-ai-lesson-edit-mode="on"]) .ai-pattern--prompt-recipe--compact .ai-pattern-prompt-recipe__col h4 {
  margin-bottom: 4px;
  font-size: 0.82rem;
}

html:not([data-ai-lesson-edit-mode="on"]) .ai-pattern--prompt-recipe--compact .ai-pattern-prompt-recipe__col ul {
  font-size: clamp(0.78rem, 1.5vw, 0.88rem);
  line-height: 1.35;
  padding-left: 1rem;
}

.ai-lesson-prompt-box--compact .ai-lesson-prompt-box__hint {
  margin: 0 0 8px;
  font-size: 0.9rem;
  color: #475569;
  line-height: 1.45;
}

.ai-lesson-prompt-box__text--hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

html:not([data-ai-lesson-edit-mode="on"]) .ai-slide-card .slide-content:has([data-role="lesson-screen"]) > h2:first-of-type {
  display: none;
}

html:not([data-ai-lesson-edit-mode="on"]) .ai-slide-card[data-slide-type="target_preview"] .ai-lesson-mockup__item--board {
  min-height: clamp(260px, calc(var(--ai-slide-content-height) * 0.5), 520px);
}

html[data-ai-lesson-edit-mode="on"] .ai-slide-card .slide-content {
  overflow-y: auto;
}

.ai-pattern--next-lesson {
  display: grid;
  gap: 12px;
  width: 100%;
  max-width: 520px;
  margin: 4px auto 8px;
}

.ai-pattern-next-lesson__row {
  display: grid;
  grid-template-columns: 72px 1fr;
  gap: 12px;
  align-items: center;
  padding: 12px 14px;
  border-radius: 12px;
  border: 1px solid #cbd5e1;
  background: #fff;
}

.ai-pattern-next-lesson__label {
  font-size: 0.85rem;
  font-weight: 700;
  color: #64748b;
}

.ai-pattern-next-lesson__value {
  font-size: var(--lesson-present-body);
  font-weight: 600;
  color: #0f172a;
}

.ai-lesson-mockup__player {
  display: inline-block;
  margin-top: 8px;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 0.78rem;
  font-weight: 700;
  background: #fef08a;
  color: #713f12;
}

.ai-pattern--media {
  width: 100%;
  margin: 2px 0 8px;
}

.ai-pattern-media__img,
.ai-pattern-media__video {
  display: block;
  width: 100%;
  max-width: min(100%, 1080px);
  margin: 0 auto;
  border-radius: 12px;
  border: 1px solid #cbd5e1;
  background: #000;
}

@media (max-width: 520px) {
  .ai-pattern--prompt-recipe {
    grid-template-columns: 1fr;
  }

  .ai-pattern-goal-card__row {
    grid-template-columns: 1fr;
  }

  .ai-pattern--lesson-scope {
    grid-template-columns: 1fr;
  }
}

/* Admin: preview · slides · quality nav (player + quality pages) */
.ai-lesson-admin-nav,
.ai-player-admin-mode-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  justify-content: space-between;
  padding: 8px 16px;
  background: #fff;
  border-bottom: 1px solid #e2e8f0;
}

.ai-lesson-admin-nav__tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}

.ai-lesson-admin-nav__tab,
.ai-lesson-admin-nav__list,
.ai-player-admin-mode-bar .ai-lesson-btn {
  display: inline-flex;
  align-items: center;
  padding: 6px 12px;
  border-radius: 8px;
  border: 1px solid #cbd5e1;
  background: #f8fafc;
  color: #0f172a;
  font-size: 13px;
  font-weight: 600;
  text-decoration: none;
  line-height: 1.2;
}

.ai-lesson-admin-nav__tab:hover,
.ai-lesson-admin-nav__list:hover {
  border-color: #94a3b8;
  background: #f1f5f9;
  color: #0f172a;
  text-decoration: none;
}

.ai-lesson-admin-nav__tab.is-active,
.ai-player-admin-mode-bar .is-active {
  font-weight: 700;
  border-color: #2563eb;
  background: rgba(37, 99, 235, 0.08);
  color: #1d4ed8;
}

.ai-lesson-admin-nav__list {
  margin-left: auto;
  font-weight: 600;
}

/* P2: admin preview — keep nav chrome without shrinking slide stage (overlay, not grid row) */
.ai-player-shell[data-player-view-mode="admin_preview"] {
  --ai-player-admin-nav-overlay: 44px;
  --ai-player-admin-nav-stack: 0px;
}

.ai-player-shell[data-player-view-mode="admin_preview"] > .ai-lesson-admin-nav {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 55;
  margin: 0;
  padding: 5px 16px;
  min-height: 0;
  border-bottom: 1px solid #e2e8f0;
  box-shadow: 0 1px 0 rgba(15, 23, 42, 0.06);
}

.ai-player-shell[data-player-view-mode="admin_preview"] .ai-player-top-overlay {
  z-index: 50;
  margin-top: calc(-1 * var(--ai-player-admin-nav-overlay));
  padding-top: calc(18px + env(safe-area-inset-top, 0px) + var(--ai-player-admin-nav-overlay));
}

.ai-player-shell[data-player-view-mode="admin_preview"] .ai-player-main-header:not(.ai-player-top-overlay) {
  position: relative;
  z-index: 50;
  margin-top: calc(-1 * var(--ai-player-admin-nav-overlay));
  padding-top: calc(10px + var(--ai-player-admin-nav-overlay));
}

.ai-player-shell[data-player-view-mode="admin_preview"] .ai-player-topbar__course {
  display: none;
}

.ai-player-shell[data-player-view-mode="admin_preview"] .ai-player-topbar__lesson {
  font-size: clamp(16px, 2vw, 22px);
  line-height: 1.2;
}

.ai-player-shell.is-admin-slide-mode {
  --ai-player-header-stack: 57px;
  --ai-player-footer-stack: 40px;
}

.ai-player-topbar__btn--slide-edit {
  text-decoration: none;
  display: inline-flex;
  align-items: center;
}

.ai-player.is-admin-slide-mode .ai-lesson-tts-center-overlay,
.ai-player.is-admin-slide-mode [data-role="kiki-subtitle"] {
  display: none !important;
}

/* ── Admin slide page: fit player below toolbar + header (non-fullscreen) ── */
body.admin-ai-lesson-slide-page {
  --admin-toolbar-height: 0px;
  --player-header-height: 96px;
  --admin-chrome-stack: calc(var(--admin-toolbar-height) + var(--player-header-height) + 40px);
}

body.admin-ai-lesson-slide-page .ai-player-shell.is-admin-slide-mode {
  --ai-player-footer-stack: 40px;
  --ai-player-admin-nav-stack: 0px;
}

body.admin-ai-lesson-slide-page .ai-admin-slide-workbench--visual {
  height: 100dvh;
  max-height: 100dvh;
  min-height: 0;
  overflow: hidden;
}

body.admin-ai-lesson-slide-page .ai-admin-slide-workbench__player,
body.admin-ai-lesson-slide-page .admin-slide-preview {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

body.admin-ai-lesson-slide-page .admin-slide-preview .ai-player-shell.is-admin-slide-mode,
body.admin-ai-lesson-slide-page .ai-player-shell.is-admin-slide-mode {
  flex: 1 1 auto;
  min-height: 0;
  height: auto;
  max-height: 100%;
  overflow: hidden;
}

body.admin-ai-lesson-slide-page .ai-player-shell.is-admin-slide-mode .ai-player-content {
  flex: 1 1 auto;
  min-height: 0;
  overflow: hidden;
}

body.admin-ai-lesson-slide-page .ai-player-shell.is-admin-slide-mode .ai-player-main {
  flex: 1 1 auto;
  min-height: 0;
  height: auto;
  overflow: hidden;
}

body.admin-ai-lesson-slide-page .ai-player-shell.is-admin-slide-mode .ai-player-main .ai-player-main-inner {
  min-height: 0;
  max-height: 100%;
  overflow: hidden;
}

body.admin-ai-lesson-slide-page .ai-player-shell.is-admin-slide-mode .ai-slide-card {
  min-height: 0;
  max-height: 100%;
}

body.admin-ai-lesson-slide-page .ai-player-shell.is-admin-slide-mode .ai-player-stage__viewport {
  min-height: 0;
  overflow: hidden;
}

body.admin-ai-lesson-slide-page .ai-player-shell.is-admin-slide-mode:not(.is-fullscreen-mode) .ai-slide-card:not([data-layout-mode="compact"]):not(.ai-slide--image-focus):not([data-image-focus="true"]) .slide-content {
  overflow-x: hidden;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding-bottom: calc(var(--lesson-present-slide-pad-block) + 24px + var(--ai-subtitle-safe-pb, 0px));
}

body.admin-ai-lesson-slide-page .ai-player-shell.is-admin-slide-mode:not(.is-fullscreen-mode) .ai-slide-card.ai-slide--image-focus .slide-content,
body.admin-ai-lesson-slide-page .ai-player-shell.is-admin-slide-mode:not(.is-fullscreen-mode) .ai-slide-card[data-image-focus="true"] .slide-content,
body.admin-ai-lesson-slide-page .ai-player-shell.is-admin-slide-mode:not(.is-fullscreen-mode) .ai-slide-card--image-layout .slide-content,
body.admin-ai-lesson-slide-page .ai-player-shell.is-admin-slide-mode:not(.is-fullscreen-mode) .ai-slide-card[data-layout="image"] .slide-content,
body.admin-ai-lesson-slide-page .ai-player-shell.is-admin-slide-mode:not(.is-fullscreen-mode) .ai-slide-card[data-layout="emulator_step"] .slide-content,
body.admin-ai-lesson-slide-page .ai-player-shell.is-admin-slide-mode:not(.is-fullscreen-mode) .ai-slide-card[data-layout="app_preview"] .slide-content {
  overflow: hidden;
  padding-bottom: calc(var(--lesson-present-slide-pad-block) + 12px + var(--ai-subtitle-safe-pb, 0px));
}

body.admin-ai-lesson-slide-page .admin-slide-preview,
body.admin-ai-lesson-slide-page .admin-slide-preview .ai-player,
body.admin-ai-lesson-slide-page .ai-player-shell.is-admin-slide-mode {
  --lesson-slide-image-box-min: 280px;
  --lesson-slide-image-box-max: min(1080px, calc(var(--ai-slide-content-height, 60vh) * 0.88));
  --ai-slide-content-height: calc(100% - var(--ai-player-header-stack) - var(--ai-player-progress-stack) - var(--ai-player-footer-stack));
}

body.admin-ai-lesson-slide-page .ai-player-shell.is-admin-slide-mode:not(.is-fullscreen-mode) .ai-slide-card[data-layout="game"] .ai-lesson-mockup__item--board,
body.admin-ai-lesson-slide-page .ai-player-shell.is-admin-slide-mode:not(.is-fullscreen-mode) .ai-slide-card[data-layout-mode="compact"][data-layout="game"] .ai-lesson-mockup__item--board,
body.admin-ai-lesson-slide-page .ai-player-shell.is-admin-slide-mode:not(.is-fullscreen-mode) .ai-slide-card[data-slide-type="target_preview"] .ai-lesson-mockup__item--board,
body.admin-ai-lesson-slide-page .ai-player-shell.is-admin-slide-mode:not(.is-fullscreen-mode) .ai-slide-card[data-slide-type="visual_explain"] .ai-lesson-mockup__item--board {
  min-height: clamp(240px, 38vh, 480px);
  max-height: min(62vh, 560px);
}

body.admin-ai-lesson-slide-page .ai-player-shell.is-admin-slide-mode:not(.is-fullscreen-mode) .ai-slide-card[data-layout="game"] .ai-pattern--game-mockup .ai-lesson-mockup--game-screen,
body.admin-ai-lesson-slide-page .ai-player-shell.is-admin-slide-mode:not(.is-fullscreen-mode) .ai-pattern--game-mockup .ai-lesson-mockup--game-screen {
  max-height: none;
}

/* Fullscreen: restore viewport-filling player (ignore admin chrome offsets) */
body.admin-ai-lesson-slide-page.ai-lesson-fullscreen-active .ai-player-shell.is-admin-slide-mode,
body.admin-ai-lesson-slide-page .ai-player-shell.is-admin-slide-mode.is-fullscreen-mode {
  flex: none;
  height: 100vh;
  max-height: none;
  min-height: 100vh;
}

body.admin-ai-lesson-slide-page.ai-lesson-fullscreen-active .ai-player-shell.is-admin-slide-mode .ai-player-main,
body.admin-ai-lesson-slide-page .ai-player-shell.is-admin-slide-mode.is-fullscreen-mode .ai-player-main {
  height: 100%;
  overflow: hidden;
}

body.admin-ai-lesson-slide-page.ai-lesson-fullscreen-active .ai-player-shell.is-admin-slide-mode .ai-player-main .ai-player-main-inner,
body.admin-ai-lesson-slide-page .ai-player-shell.is-admin-slide-mode.is-fullscreen-mode .ai-player-main .ai-player-main-inner {
  max-height: none;
  overflow: hidden;
}

body.admin-ai-lesson-slide-page.ai-lesson-fullscreen-active .ai-player-shell.is-admin-slide-mode .ai-slide-card,
body.admin-ai-lesson-slide-page .ai-player-shell.is-admin-slide-mode.is-fullscreen-mode .ai-slide-card {
  max-height: none;
}

body.admin-ai-lesson-slide-page.ai-lesson-fullscreen-active .ai-player-shell.is-admin-slide-mode .ai-slide-card .slide-content,
body.admin-ai-lesson-slide-page .ai-player-shell.is-admin-slide-mode.is-fullscreen-mode .ai-slide-card .slide-content {
  overflow-y: hidden;
}

body.admin-ai-lesson-slide-page.ai-lesson-fullscreen-active .ai-player-shell.is-admin-slide-mode .ai-lesson-mockup__item--board,
body.admin-ai-lesson-slide-page .ai-player-shell.is-admin-slide-mode.is-fullscreen-mode .ai-lesson-mockup__item--board {
  min-height: clamp(260px, 42vh, 520px);
  max-height: none;
}

@media (max-width: 768px) {
  body.admin-ai-lesson-slide-page {
    --admin-toolbar-height: 0px;
    --player-header-height: 132px;
  }

  body.admin-ai-lesson-slide-page .admin-slide-preview,
  body.admin-ai-lesson-slide-page .admin-slide-preview .ai-player,
  body.admin-ai-lesson-slide-page .ai-player-shell.is-admin-slide-mode {
    --lesson-slide-image-box-min: 180px;
    --lesson-slide-image-box-max: 520px;
  }
}

@media (max-width: 480px) {
  body.admin-ai-lesson-slide-page {
    --admin-toolbar-height: 0px;
    --player-header-height: 148px;
  }
}

.ai-admin-slide-workbench {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(280px, 420px);
  gap: 0;
  min-height: calc(100dvh - 56px);
}

.ai-admin-slide-workbench--visual {
  display: flex;
  flex-direction: column;
  grid-template-columns: none;
}

.ai-admin-slide-workbench__player {
  min-width: 0;
}

.ai-admin-slide-workbench__editor {
  border-left: 1px solid #e2e8f0;
  background: #f8fafc;
  padding: 12px 14px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  overflow: auto;
}

.ai-admin-slide-workbench__title {
  margin: 0;
  font-size: 1rem;
}

.ai-admin-slide-workbench__hint {
  margin: 0;
  font-size: 0.8rem;
  color: #64748b;
}

.ai-admin-slide-workbench__nav {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}

.ai-admin-slide-workbench__goto {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 0.85rem;
}

.ai-admin-slide-workbench__goto input {
  width: 4rem;
  padding: 4px 8px;
  border: 1px solid #cbd5e1;
  border-radius: 6px;
}

.ai-admin-slide-workbench__select {
  flex: 1 1 100%;
  min-width: 0;
  padding: 6px 8px;
  border-radius: 6px;
  border: 1px solid #cbd5e1;
  font-size: 0.8rem;
}

.ai-admin-slide-workbench__textarea {
  flex: 1;
  min-height: 240px;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 12px;
  line-height: 1.45;
  padding: 10px;
  border: 1px solid #cbd5e1;
  border-radius: 8px;
  resize: vertical;
}

.ai-admin-slide-workbench__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.ai-admin-slide-workbench__status {
  margin: 0;
  font-size: 0.8rem;
  color: #64748b;
}

.ai-admin-slide-workbench__status.is-error {
  color: #b91c1c;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  border: 0;
}

@media (max-width: 960px) {
  .ai-admin-slide-workbench:not(.ai-admin-slide-workbench--visual) {
    grid-template-columns: 1fr;
  }

  .ai-admin-slide-workbench__editor {
    border-left: none;
    border-top: 1px solid #e2e8f0;
  }
}

/* ═══════════════════════════════════════════════════════════════════════════
   Responsive: unified tokens (admin preview / admin slide / actual player)
   Breakpoints: desktop ≥1024px · tablet ≤1023px · mobile ≤767px
   ═══════════════════════════════════════════════════════════════════════════ */

@media (max-width: 1023px) {
  .ai-player-shell {
    --ai-slide-canvas-safe-inline: clamp(14px, 2vw, 28px);
    --ai-topbar-gap: 12px;
    --ai-topbar-lesson-size: clamp(17px, 2.4vw, 22px);
  }

  .ai-lesson-compare-table {
    min-width: 0;
    width: 100%;
  }
}

@media (max-width: 479px) {
  .ai-player-shell {
    --ai-topbar-lesson-size: 15px;
    --ai-slide-canvas-safe-inline: 10px;
  }

  .ai-player-topbar__right--admin-slide {
    max-width: min(58vw, 220px);
  }

  .ai-admin-slide-stage-nav__btn {
    width: 40px;
    height: 40px;
    min-width: 40px;
    font-size: 1.2rem;
  }
}

/* ── Responsive: lesson player header + admin slide layout (legacy hooks) ── */
@media (max-width: 1024px) {
  .ai-lesson-admin-nav {
    padding: 8px 12px;
    gap: 6px;
  }

  .ai-lesson-admin-nav__tab,
  .ai-lesson-admin-nav__list {
    padding: 5px 10px;
    font-size: 12px;
  }

  .ai-player-topbar__lesson {
    font-size: clamp(16px, 2vw, 22px);
  }
}

@media (max-width: 768px) {
  .ai-lesson-admin-nav {
    padding: 8px 10px;
    gap: 6px;
  }

  .ai-lesson-admin-nav__tabs {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 6px;
    width: 100%;
  }

  .ai-lesson-admin-nav__tab {
    justify-content: center;
    padding: 8px 6px;
    font-size: 12px;
    text-align: center;
  }

  .ai-lesson-admin-nav__list {
    margin-left: 0;
    width: 100%;
    justify-content: center;
    padding: 8px 10px;
    font-size: 12px;
  }

  .ai-player-main-header:not(.ai-player-main-header--learning) {
    padding: 8px 10px 0;
  }

  .ai-player-main-header:not(.ai-player-main-header--learning) .ai-player-main-inner--header {
    padding-bottom: 6px;
  }

  .ai-player-topbar {
    grid-template-columns: minmax(0, 1fr) minmax(0, min(100%, 360px)) minmax(0, 1fr);
    grid-template-areas: none;
    align-items: center;
    gap: 8px;
  }

  .ai-player-topbar__left {
    grid-column: 1;
    grid-area: auto;
    width: auto;
    flex-wrap: nowrap;
    gap: 8px;
    justify-self: start;
  }

  .ai-player-topbar__right {
    grid-column: 3;
    grid-area: auto;
    width: auto;
    margin-left: 0;
    justify-self: end;
    justify-content: flex-end;
    flex-wrap: nowrap;
    gap: 8px;
  }

  .ai-player-topbar__center {
    grid-column: 2;
    grid-area: auto;
    justify-self: center;
    text-align: center;
    width: 100%;
    min-width: 0;
  }

  .ai-player-topbar__title-block {
    align-items: center;
    text-align: center;
  }

  .ai-player-topbar__course {
    font-size: 11px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .ai-player-topbar__lesson {
    margin: 0 0 6px;
    font-size: 18px;
    line-height: 1.25;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .ai-player-status {
    font-size: 12px;
    white-space: nowrap;
  }

  .ai-player-topbar__btn {
    padding: 6px 10px;
    font-size: 12px;
    flex-shrink: 0;
  }

  .ai-player-main .ai-player-main-inner {
    min-height: 0;
  }

  .ai-slide-card {
    border-radius: 18px 18px 0 0;
  }

  .ai-slide-card .slide-content {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    padding: 14px 16px 16px;
  }

  .ai-player.is-admin-slide-mode .ai-kiki-character {
    display: none !important;
  }

  .ai-slide-card.ai-slide--image-focus .slide-content,
  .ai-slide-card[data-image-focus="true"] .slide-content,
  .ai-slide-card[data-has-image="true"] .slide-content {
    padding-bottom: calc(16px + 56px + var(--ai-subtitle-safe-pb, 0px));
  }
}

@media (max-width: 480px) {
  .ai-lesson-admin-nav__tabs {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .ai-lesson-admin-nav__tab {
    font-size: 11px;
    padding: 7px 5px;
  }

  .ai-player-topbar__lesson {
    font-size: 16px;
  }

  .ai-player-topbar__btn--fullscreen {
    padding: 6px 8px;
    font-size: 11px;
  }

  .ai-slide-card .slide-content {
    padding: 12px 14px 14px;
  }
}

/* ── Mobile UX: prompt / boxes / image (Compose lab audit) ── */
.ai-target-preview__lead {
  margin: 0 0 12px;
  line-height: 1.6;
  color: #475569;
  font-size: var(--lesson-present-body, 1rem);
}

.boxes-slide-layout__box-list li,
.boxes-slide-layout__box-body,
.boxes-slide-layout__box-title {
  white-space: normal;
  overflow: visible;
  text-overflow: unset;
  word-break: keep-all;
  overflow-wrap: anywhere;
  line-height: 1.5;
}

.boxes-slide-layout__box {
  min-height: auto;
  height: auto;
  overflow: visible;
}

@media (max-width: 480px) {
  .admin-slide-preview .ai-player.is-admin-slide-mode,
  .ai-player.is-admin-slide-mode {
    --lesson-slide-image-box-h: clamp(200px, calc(100dvh - 320px - var(--ai-subtitle-safe-pb, 0px)), 460px);
    --lesson-slide-image-box-min: 180px;
  }
}

/* Result / run-check slides: image-first, minimal brief text (prompt1_result, intro_result, …) */
.ai-slide-card--result-image-slot,
.ai-slide-card[data-layout="result-image-slot"] {
  --lesson-slide-image-box-min: 0;
  --lesson-slide-image-box-max: none;
  --lesson-slide-image-box-h: clamp(220px, calc(100dvh - 200px - var(--ai-subtitle-safe-pb, 0px)), 920px);
}

.ai-slide-card--result-image-slot .slide-content,
.ai-slide-card[data-layout="result-image-slot"] .slide-content,
.ai-slide-content--result-image-slot {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-height: 0;
  overflow: hidden;
  padding-bottom: calc(8px + var(--ai-subtitle-safe-pb, 0px));
}

.ai-result-image-slot-layout {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-height: 0;
  height: 100%;
  gap: 8px;
}

.ai-result-image-slot-layout__hero {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.ai-result-image-slot-layout__brief {
  flex: 0 0 auto;
  max-width: min(100%, 40rem);
}

.ai-result-image-slot-layout__footer {
  flex: 0 0 auto;
}

.ai-result-image-slot-layout__hero .ai-slide-image-slot-block {
  margin: 0;
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
}

.ai-result-image-slot-layout__hero .ai-pattern--image-placeholder--hero,
.ai-result-image-slot-layout__hero .lesson-slide-image-wrap,
.ai-result-image-slot-layout__hero .ai-lesson-image-stage {
  flex: 1 1 auto;
  min-height: 0;
  height: 100%;
  max-height: none;
  margin: 0;
}

.ai-result-image-slot-layout__hero .ai-pattern-image-placeholder__box {
  min-height: 0;
  flex: 1 1 auto;
  height: 100%;
}

.ai-pattern--result-verify-brief {
  margin: 0;
  padding: 0 2px;
}

.ai-result-verify-brief__line {
  margin: 0 0 4px;
  font-size: clamp(0.88rem, 1.55vw, 1rem);
  line-height: 1.4;
  color: #334155;
}

.ai-result-verify-brief__line:last-child {
  margin-bottom: 0;
}

.ai-result-image-slot-layout .ai-pattern-run-check-card__list {
  display: none;
}

.ai-run-check-compact-wrap {
  flex: 0 0 auto;
  max-height: min(28vh, 140px);
  overflow-y: auto;
  margin-top: 0;
}

.ai-run-check-compact-wrap .ai-lesson-checklist {
  margin: 0;
  font-size: clamp(0.8rem, 1.4vw, 0.9rem);
  line-height: 1.35;
}

.ai-run-check-compact-wrap .ai-lesson-checklist li {
  padding: 2px 0;
}

/* boxes + prompt result: cap description when many info cards (no image slot) */
.ai-slide-card--boxes-layout .dedicated-slide__description,
.ai-slide-card--info-group-layout .dedicated-slide__description {
  max-height: 3.6em;
  overflow: hidden;
}

/* code_review: single code block + checkpoint cards (no duplicate code_callout) */
.ai-slide-content--code-review,
.ai-slide--code-review .slide-content {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-height: 0;
  gap: 10px;
}

.ai-lesson-screen--code-review {
  flex: 0 0 auto;
}

.ai-lesson-screen--code-review .ai-lesson-screen__headline {
  margin-bottom: 4px;
}

.ai-code-review-layout {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-height: 0;
  gap: 12px;
}

.ai-code-review-layout__code {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
}

.ai-code-review-layout__code .ai-code-block {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
}

.ai-code-review-layout__code .ai-code-block__pre--scroll,
.ai-code-review-layout__code .ai-code-block__pre {
  flex: 1 1 auto;
  min-height: min(42vh, 360px);
  max-height: min(58vh, 520px);
  overflow: auto;
}

.ai-code-review-layout__checks {
  flex: 0 0 auto;
}

.ai-code-review-checkpoints {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  margin: 0;
}

.ai-code-review-checkpoint-card {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin: 0;
  padding: 10px 12px;
  border-radius: 10px;
  border: 1px solid #e2e8f0;
  background: #f8fafc;
}

.ai-code-review-checkpoint-card__num {
  flex: 0 0 auto;
  width: 1.4rem;
  height: 1.4rem;
  border-radius: 999px;
  background: #0ea5e9;
  color: #fff;
  font-size: 0.78rem;
  font-weight: 700;
  line-height: 1.4rem;
  text-align: center;
}

.ai-code-review-checkpoint-card__text {
  margin: 0;
  font-size: clamp(0.82rem, 1.45vw, 0.92rem);
  line-height: 1.4;
  color: #334155;
}

/* improve_prompt: viewport-fit bad vs good compare (l2-debug) */
.ai-slide-card--prompt-compare .ai-player-stage__viewport,
.ai-slide-card[data-layout="prompt-compare"] .slide-content {
  overflow: hidden;
  display: flex;
  flex-direction: column;
  min-height: 0;
  flex: 1 1 auto;
}

.ai-slide-content--prompt-compare {
  padding: 6px 12px 4px;
  padding-bottom: calc(6px + var(--ai-subtitle-safe-pb, 0px));
  overflow: hidden;
  gap: 6px;
}

.ai-prompt-compare-layout {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
  overflow: hidden;
}

.ai-prompt-compare-layout__title {
  margin: 0;
  font-size: clamp(1rem, 2vw, 1.15rem);
  line-height: 1.25;
  font-weight: 700;
}

.ai-prompt-compare-layout__subtitle {
  margin: 0;
  font-size: clamp(0.82rem, 1.4vw, 0.92rem);
  line-height: 1.35;
  color: #475569;
}

.ai-prompt-compare-grid {
  flex: 1 1 auto;
  min-height: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  align-items: stretch;
}

.ai-lesson-prompt-box--compare {
  margin: 0;
  padding: 8px 10px;
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.ai-lesson-prompt-box--compare .ai-lesson-prompt-box__head {
  margin-bottom: 6px;
  flex: 0 0 auto;
}

.ai-lesson-prompt-box--compare .ai-lesson-prompt-box__head strong {
  font-size: 0.8rem;
}

.ai-lesson-prompt-box__text--compare {
  margin: 0;
  padding: 8px 9px;
  flex: 1 1 auto;
  min-height: 0;
  overflow: hidden;
  font-family: inherit;
  font-size: clamp(0.78rem, 1.3vw, 0.88rem);
  line-height: 1.38;
  white-space: normal;
  word-break: keep-all;
  overflow-wrap: break-word;
}

.ai-lesson-prompt-box--compare .prompt-scroll-box,
.ai-lesson-prompt-box--compare .ai-code-block {
  display: none;
}

@media (max-width: 720px) {
  .ai-prompt-compare-grid {
    grid-template-columns: 1fr;
    gap: 6px;
  }

  .ai-lesson-prompt-box__text--compare {
    font-size: 0.8rem;
    line-height: 1.35;
  }

  .ai-code-review-checkpoints {
    grid-template-columns: 1fr;
  }

  .ai-code-review-layout__code .ai-code-block__pre--scroll,
  .ai-code-review-layout__code .ai-code-block__pre {
    min-height: min(36vh, 280px);
    max-height: min(50vh, 420px);
  }
}

@media (max-width: 520px) {
  .ai-slide-card--result-image-slot,
  .ai-slide-card[data-layout="result-image-slot"] {
    --lesson-slide-image-box-h: clamp(180px, calc(100dvh - 210px - var(--ai-subtitle-safe-pb, 0px)), 520px);
  }

  .ai-result-verify-brief__line {
    font-size: 0.84rem;
    line-height: 1.35;
  }

  .ai-run-check-compact-wrap {
    max-height: min(22vh, 112px);
  }
}

/* Code slide — narration-synced line focus + scroll */
.ai-slide-card--code-example-focus .ai-lesson-card__lead,
.ai-slide-content--code-example-focus .ai-lesson-card__lead,
.ai-lesson-code-focus-layout + .ai-lesson-card__section,
.ai-slide-content--code-example-focus .ai-lesson-card__section-title {
  display: none !important;
}

.ai-slide-card--code-example-focus .slide-content,
.ai-slide-content--code-example-focus {
  display: flex;
  flex-direction: column;
  gap: clamp(8px, 1vh, 12px);
  min-height: 0;
}

.ai-slide-card--code-example-focus .ai-lesson-code-focus-layout,
.ai-slide-content--code-example-focus .ai-lesson-code-focus-layout {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
}

.ai-slide-card--code-example-focus [data-code-focus-scroll],
.ai-slide-content--code-example-focus [data-code-focus-scroll] {
  flex: 1 1 auto;
  min-height: min(65vh, calc(100dvh - 220px - var(--ai-subtitle-safe-pb, 0px)));
  max-height: min(72vh, calc(100dvh - 180px - var(--ai-subtitle-safe-pb, 0px)));
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

.ai-code-block--focus .ai-code-focus-pre {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  font-size: 0.82rem;
  line-height: 1.55;
  tab-size: 2;
}

.ai-code-focus-line {
  display: block;
  padding: 0 0.5rem 0 0.35rem;
  margin: 0;
  border-left: 3px solid transparent;
  border-radius: 4px;
  transition: background-color 0.28s ease, border-color 0.28s ease, box-shadow 0.28s ease;
}

.ai-code-focus-line__ln {
  display: inline-block;
  min-width: 2rem;
  margin-right: 0.65rem;
  color: rgba(148, 163, 184, 0.85);
  user-select: none;
  text-align: right;
}

.ai-code-focus-line.is-active {
  background: rgba(59, 130, 246, 0.14);
  border-left-color: #3b82f6;
  box-shadow: inset 0 0 0 1px rgba(59, 130, 246, 0.18);
}

.ai-code-focus-line.is-active .ai-code-focus-line__ln {
  color: #2563eb;
  font-weight: 600;
}

.ai-prompt-focus-line {
  display: block;
  padding: 0 0.35rem;
  margin: 0;
  border-left: 3px solid transparent;
  border-radius: 4px;
  transition: background-color 0.28s ease, border-color 0.28s ease, box-shadow 0.28s ease;
}

.ai-prompt-focus-line.is-active {
  background: rgba(59, 130, 246, 0.14);
  border-left-color: #3b82f6;
  box-shadow: inset 0 0 0 1px rgba(59, 130, 246, 0.18);
}

.ai-slide-card--prompt-focus .prompt-scroll-box,
.ai-slide-card--prompt-focus .ai-lesson-prompt-box__text,
.ai-slide-card--prompt-focus .prompt-copy-card__text {
  scroll-padding-bottom: var(--ai-subtitle-safe-pb, 96px);
  scroll-padding-top: 32px;
}

.ai-slide-card--prompt-focus .prompt-copy-card--full-text .prompt-scroll-box,
.ai-slide-card--prompt-focus .prompt-slide--compact .prompt-copy-card--full-text .prompt-scroll-box,
.ai-prompt-focus-scroll-root.prompt-scroll-box {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto !important;
  overflow-x: hidden;
  max-height: none;
  height: auto;
}

.ai-slide-card--prompt-focus .prompt-copy-card--full-text {
  flex: 1 1 auto;
  min-height: 0;
}

.ai-slide-card--prompt-focus .prompt-scroll-box code,
.ai-slide-card--prompt-focus .ai-prompt-focus-scroll-root code {
  display: block;
  padding-bottom: calc(var(--ai-subtitle-safe-pb, 96px) + 28px);
}

.ai-piece-matrix-cards {
  margin: clamp(12px, 1.6vh, 18px) 0 0;
}

.ai-piece-matrix-cards--compare {
  margin: clamp(6px, 0.8vh, 10px) 0 0;
}

.ai-piece-matrix-cards__legend {
  margin: 0 0 clamp(10px, 1.2vh, 14px);
  font-size: clamp(1rem, 1.05vw, 1.125rem);
  line-height: 1.65;
  color: var(--ai-lesson-text-muted, #475569);
}

.ai-piece-matrix-cards__grid {
  display: grid;
  gap: clamp(12px, 1.5vh, 16px);
}

.ai-piece-matrix-cards--compare .ai-piece-matrix-cards__grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(8px, 1vw, 12px);
  align-items: start;
}

.ai-piece-matrix-card {
  border: 1px solid rgba(148, 163, 184, 0.35);
  border-radius: 12px;
  background: rgba(248, 250, 252, 0.92);
  padding: clamp(12px, 1.4vh, 16px);
}

.ai-piece-matrix-card__title {
  margin: 0 0 10px;
  font-size: clamp(1rem, 1.05vw, 1.125rem);
  line-height: 1.5;
}

.ai-piece-matrix-card__columns {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
  gap: clamp(12px, 2vw, 20px);
  align-items: start;
}

.ai-piece-matrix-card__label {
  margin: 0 0 6px;
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--ai-lesson-text-muted, #64748b);
}

.ai-piece-matrix-card__array {
  margin: 0;
  padding: 10px 12px;
  border-radius: 8px;
  background: #0f172a;
  color: #e2e8f0;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  font-size: clamp(0.82rem, 0.95vw, 0.95rem);
  line-height: 1.55;
  white-space: pre-wrap;
  overflow-x: auto;
}

.ai-piece-matrix-grid {
  display: inline-grid;
  gap: 4px;
  padding: 8px;
  border-radius: 10px;
  background: rgba(15, 23, 42, 0.04);
}

.ai-piece-matrix-grid__row {
  display: grid;
  grid-auto-flow: column;
  gap: 4px;
}

.ai-piece-matrix-cell {
  width: clamp(22px, 2.8vw, 28px);
  height: clamp(22px, 2.8vw, 28px);
  border-radius: 4px;
  border: 2px solid rgba(148, 163, 184, 0.55);
  background: transparent;
  box-sizing: border-box;
}

.ai-piece-matrix-cell--filled {
  border-color: #2563eb;
  background: linear-gradient(180deg, #60a5fa 0%, #2563eb 100%);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.18);
}

.ai-piece-matrix-cards--compare .ai-piece-matrix-card {
  padding: clamp(8px, 1vh, 12px);
}

.ai-piece-matrix-cards--compare .ai-piece-matrix-card__title {
  margin: 0 0 6px;
  font-size: clamp(0.88rem, 0.95vw, 1rem);
  line-height: 1.35;
}

.ai-piece-matrix-cards--compare .ai-piece-matrix-card__columns {
  grid-template-columns: minmax(0, 1fr) minmax(0, 0.85fr);
  gap: clamp(6px, 1vw, 10px);
}

.ai-piece-matrix-cards--compare .ai-piece-matrix-card__label {
  margin: 0 0 4px;
  font-size: 0.72rem;
}

.ai-piece-matrix-cards--compare .ai-piece-matrix-card__array {
  padding: 6px 8px;
  font-size: clamp(0.72rem, 0.82vw, 0.82rem);
  line-height: 1.4;
}

.ai-piece-matrix-cards--compare .ai-piece-matrix-grid {
  gap: 3px;
  padding: 4px;
}

.ai-piece-matrix-cards--compare .ai-piece-matrix-grid__row {
  gap: 3px;
}

.ai-piece-matrix-cards--compare .ai-piece-matrix-cell {
  width: clamp(16px, 2vw, 20px);
  height: clamp(16px, 2vw, 20px);
  border-width: 1.5px;
}

.ai-lesson-screen--piece-matrix-compare .ai-lesson-screen__headline {
  margin-bottom: clamp(2px, 0.4vh, 6px);
}

.ai-lesson-screen--piece-matrix-compare .ai-lesson-screen__subheadline {
  margin-bottom: clamp(4px, 0.5vh, 8px);
  font-size: clamp(0.95rem, 1vw, 1.05rem);
  line-height: 1.45;
}

.ai-slide-card--piece-matrix-compare .ai-slide-content--text-only,
.ai-slide-content--piece-matrix-compare {
  padding-bottom: calc(var(--ai-subtitle-safe-pb, 5rem) + 16px);
}

.ai-slide-card--piece-matrix-compare .ai-lesson-screen__visual--compact {
  margin-bottom: 0;
}

@media (max-width: 860px) {
  .ai-piece-matrix-cards--compare .ai-piece-matrix-cards__grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 720px) {
  .ai-piece-matrix-card__columns {
    grid-template-columns: 1fr;
  }
}

/* lock_flow: before → currentPiece → after on one screen (no scroll) */
.ai-piece-matrix-cards--lock-flow {
  margin: clamp(2px, 0.4vh, 6px) 0 0;
}

.ai-piece-matrix-cards--lock-flow .ai-piece-matrix-cards__caption {
  margin: 0 0 clamp(4px, 0.6vh, 8px);
  font-size: clamp(0.82rem, 0.9vw, 0.95rem);
  font-weight: 600;
  line-height: 1.35;
  text-align: center;
  color: var(--ai-lesson-text-muted, #475569);
}

.ai-piece-matrix-cards--lock-flow .ai-piece-matrix-cards__flow {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(2px, 0.5vw, 8px);
  flex-wrap: nowrap;
  width: 100%;
}

.ai-piece-matrix-cards--lock-flow .ai-piece-matrix-card {
  flex: 1 1 0;
  min-width: 0;
  max-width: 32%;
  padding: clamp(4px, 0.6vh, 8px) clamp(4px, 0.5vw, 8px);
  border-radius: 10px;
}

.ai-piece-matrix-cards--lock-flow .ai-piece-matrix-card__title {
  margin: 0 0 clamp(2px, 0.4vh, 4px);
  font-size: clamp(0.75rem, 0.85vw, 0.9rem);
  line-height: 1.25;
  text-align: center;
  font-weight: 700;
}

.ai-piece-matrix-cards--lock-flow .ai-piece-matrix-card__shape-only {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: clamp(2px, 0.3vh, 4px);
}

.ai-piece-matrix-cards--lock-flow .ai-piece-matrix-card__array--lock-flow {
  margin: 0 0 clamp(2px, 0.3vh, 4px);
  padding: 4px 6px;
  border-radius: 8px;
  background: rgba(15, 23, 42, 0.92);
  color: #e2e8f0;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  font-size: clamp(0.58rem, 0.72vw, 0.78rem);
  line-height: 1.05;
  white-space: pre;
  overflow: hidden;
}

.ai-piece-matrix-cards--lock-flow .ai-piece-matrix-cell--new {
  border-color: #16a34a;
  background: linear-gradient(180deg, #86efac 0%, #16a34a 100%);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.16);
}

.ai-piece-matrix-cards--lock-flow .ai-piece-matrix-cell--to-be-filled {
  border-color: #f59e0b;
  background: rgba(245, 158, 11, 0.18);
}

.ai-piece-matrix-cards--lock-flow .ai-piece-matrix-grid {
  gap: 2px;
  padding: 3px;
}

.ai-piece-matrix-cards--lock-flow .ai-piece-matrix-grid__row {
  gap: 2px;
}

.ai-piece-matrix-cards--lock-flow .ai-piece-matrix-cell {
  width: clamp(11px, 1.45vw, 15px);
  height: clamp(11px, 1.45vw, 15px);
  border-width: 1.5px;
  border-radius: 3px;
}

.ai-piece-matrix-flow-arrow {
  flex: 0 0 auto;
  font-size: clamp(0.95rem, 1.2vw, 1.15rem);
  line-height: 1;
  color: #64748b;
  padding: 0 1px;
  user-select: none;
}

.ai-lesson-screen--piece-matrix-lock-flow .ai-lesson-screen__headline {
  margin-bottom: clamp(2px, 0.3vh, 4px);
  font-size: clamp(1rem, 1.1vw, 1.15rem);
  line-height: 1.3;
}

.ai-lesson-screen--piece-matrix-lock-flow .ai-lesson-screen__subheadline {
  margin-bottom: clamp(2px, 0.4vh, 6px);
  font-size: clamp(0.82rem, 0.9vw, 0.92rem);
  line-height: 1.3;
}

.ai-slide-card--piece-matrix-lock-flow .ai-player-stage__viewport,
.ai-slide-card--piece-matrix-lock-flow .ai-slide-content--piece-matrix-lock-flow {
  overflow: hidden;
}

.ai-slide-card--piece-matrix-lock-flow .ai-slide-content--text-only,
.ai-slide-content--piece-matrix-lock-flow {
  padding-bottom: calc(var(--ai-subtitle-safe-pb, 5rem) + 10px);
}

.ai-slide-card--piece-matrix-lock-flow .ai-lesson-screen__visual--compact {
  margin-bottom: 0;
}

@media (max-width: 860px) {
  .ai-piece-matrix-cards--lock-flow .ai-piece-matrix-cell {
    width: clamp(9px, 2.2vw, 13px);
    height: clamp(9px, 2.2vw, 13px);
  }

  .ai-piece-matrix-cards--lock-flow .ai-piece-matrix-card__title {
    font-size: clamp(0.68rem, 2.8vw, 0.82rem);
  }

  .ai-piece-matrix-flow-arrow {
    font-size: clamp(0.82rem, 2.5vw, 1rem);
  }
}

/* stage quiz: upper-center block — question, choices, feedback as one group (quiz_correct) */
.ai-slide-card--stage-quiz .ai-player-stage__viewport,
.ai-slide-card[data-layout="stage-quiz"] .ai-player-stage__viewport {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.ai-slide-content--stage-quiz {
  justify-content: flex-start;
  align-items: stretch;
  overflow: hidden;
  overflow-y: hidden;
  gap: clamp(8px, 1vh, 14px);
  padding-top: clamp(12px, 5vh, 48px);
}

.ai-player-shell .ai-slide-content--stage-quiz {
  justify-content: flex-start;
}

.ai-slide-card .slide-content > .ai-stage-quiz-layout {
  flex: 0 0 auto;
  width: 100%;
  max-width: var(--ai-slide-content-max-w);
  align-self: flex-start;
}

.ai-stage-quiz-layout {
  display: flex;
  flex-direction: column;
  gap: clamp(10px, 1.2vh, 16px);
}

.ai-stage-quiz-layout__header {
  flex: 0 0 auto;
}

.ai-stage-quiz-layout__meta-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: clamp(4px, 0.5vh, 8px);
}

.ai-stage-quiz-layout__title {
  margin: 0 0 clamp(4px, 0.5vh, 8px);
  font-size: var(--lesson-present-title);
  font-weight: 900;
  line-height: 1.2;
}

.ai-stage-quiz-layout__desc {
  margin: 0;
  font-size: var(--lesson-present-body);
  line-height: 1.45;
  color: #475569;
}

.ai-stage-quiz-layout__body {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  gap: clamp(10px, 1.2vh, 14px);
}

.ai-stage-quiz-layout__question {
  margin: 0;
  font-size: clamp(1rem, 1.6vw, 1.12rem);
  font-weight: 800;
  line-height: 1.35;
}

.ai-stage-quiz-layout__choices {
  flex: 0 0 auto;
}

.ai-stage-quiz-layout__choices .ai-lesson-choice {
  font-size: clamp(0.88rem, 1.4vw, 0.98rem);
  line-height: 1.4;
  min-height: 52px;
  padding: 12px 14px;
}

.ai-stage-quiz-layout__feedback {
  flex: 0 0 auto;
  margin: 0;
}

.ai-stage-quiz-layout__feedback:not(.is-visible) {
  display: none;
  min-height: 0;
  padding: 0;
  border-width: 0;
}

@media (max-width: 900px) {
  .ai-slide-content--stage-quiz {
    padding-top: clamp(8px, 3vh, 28px);
  }

  .ai-stage-quiz-layout__choices .ai-lesson-choice {
    min-height: 48px;
    padding: 10px 12px;
  }
}

/* practice mission: goal + copyable prompt + run-check (reusable) */
.ai-slide-card--practice-mission .ai-player-stage__viewport,
.ai-slide-card[data-layout="practice-mission"] .ai-player-stage__viewport {
  flex: 1 1 auto;
  min-height: 0;
  overflow: hidden;
}

.ai-slide-content--practice-mission {
  justify-content: flex-start;
  align-items: stretch;
  overflow: hidden;
  overflow-y: hidden;
  gap: clamp(6px, 0.8vh, 10px);
  padding-top: clamp(8px, 3vh, 28px);
}

.ai-player-shell .ai-slide-content--practice-mission {
  justify-content: flex-start;
}

.ai-slide-card .slide-content > .ai-practice-mission-layout {
  flex: 0 0 auto;
  width: 100%;
  max-width: var(--ai-slide-content-max-w);
  align-self: flex-start;
}

.ai-practice-mission-layout {
  display: flex;
  flex-direction: column;
  gap: clamp(8px, 1vh, 12px);
}

.ai-practice-mission-layout__meta-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 4px;
}

.ai-practice-mission-layout__title {
  margin: 0 0 4px;
  font-size: var(--lesson-present-title);
  font-weight: 900;
  line-height: 1.2;
}

.ai-practice-mission-layout__subtitle {
  margin: 0;
  font-size: var(--lesson-present-body);
  line-height: 1.4;
  color: #475569;
}

.ai-practice-mission-layout__main {
  display: flex;
  flex-direction: column;
  gap: clamp(8px, 1vh, 12px);
}

.ai-practice-mission-layout__section-title {
  margin: 0 0 6px;
  font-size: clamp(0.82rem, 1.3vw, 0.92rem);
  font-weight: 800;
  color: #0f172a;
}

.ai-practice-mission-layout__goal-text {
  margin: 0;
  padding: 8px 10px;
  border-radius: 10px;
  background: #eff6ff;
  border: 1px solid #bfdbfe;
  font-size: clamp(0.88rem, 1.4vw, 0.96rem);
  line-height: 1.45;
  color: #1e3a8a;
}

.ai-practice-mission-layout__prompt .prompt-copy-card {
  margin: 0;
}

.ai-practice-mission-layout__prompt .prompt-copy-card__text,
.ai-practice-mission-layout__prompt .ai-lesson-prompt-box__text {
  max-height: min(28vh, 220px);
  overflow-y: auto;
  font-size: clamp(0.8rem, 1.3vw, 0.9rem);
  line-height: 1.42;
}

.ai-practice-mission-layout__list {
  margin: 0;
  padding-left: 1.2rem;
  font-size: clamp(0.82rem, 1.3vw, 0.9rem);
  line-height: 1.4;
  color: #334155;
}

.ai-practice-mission-layout__list li + li {
  margin-top: 4px;
}

.ai-practice-mission-layout__recipe .ai-pattern--prompt-recipe {
  margin: 0;
}

.ai-practice-mission-layout__recipe .ai-info-group-cards {
  gap: 6px;
}

.ai-practice-mission-layout__recipe .ai-info-group-card {
  padding: 6px 8px;
  min-height: 0;
}

.ai-practice-mission-layout__recipe .ai-info-group-card__title {
  font-size: 0.72rem;
  margin-bottom: 4px;
}

.ai-practice-mission-layout__recipe .ai-info-group-card__items {
  font-size: 0.78rem;
  line-height: 1.35;
}

.ai-practice-mission-layout__run-check .ai-lesson-interactive-check {
  margin: 0;
  padding: 8px 10px;
  border-radius: 10px;
  border: 1px solid #e2e8f0;
  background: #f8fafc;
}

.ai-practice-mission-layout__run-check .ai-lesson-interactive-check__title {
  margin: 0 0 6px;
  font-size: 0.82rem;
}

.ai-practice-mission-layout__run-check .ai-lesson-interactive-check__list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.ai-practice-mission-layout__run-check .ai-lesson-check-row {
  font-size: clamp(0.8rem, 1.25vw, 0.88rem);
  line-height: 1.35;
}

.ai-result-image-slot-layout__intro {
  flex: 0 0 auto;
  margin-bottom: 6px;
}

.ai-result-image-slot-layout__heading {
  margin: 0 0 4px;
  font-size: clamp(1rem, 2vw, 1.15rem);
  font-weight: 800;
  line-height: 1.25;
}

.ai-result-image-slot-layout__lede {
  margin: 0 0 6px;
  font-size: clamp(0.84rem, 1.4vw, 0.94rem);
  line-height: 1.4;
  color: #475569;
}

.ai-slide-content--result-image-slot:has(.ai-result-image-slot-layout__intro) .ai-result-image-slot-layout__brief {
  flex: 0 0 auto;
}

.ai-slide-content--result-image-slot:has(.ai-result-image-slot-layout__intro) .ai-result-image-slot-layout__hero {
  flex: 1 1 auto;
  min-height: clamp(140px, 28vh, 360px);
  max-height: min(42vh, 420px);
}

@media (max-width: 900px) {
  .ai-practice-mission-layout__recipe .ai-info-group-cards {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .ai-practice-mission-layout__prompt .prompt-copy-card__text,
  .ai-practice-mission-layout__prompt .ai-lesson-prompt-box__text {
    max-height: min(24vh, 180px);
  }
}

/* practice mission — prompt-focus (no scroll, prompt-first) */
.ai-slide-content--practice-mission-prompt-focus {
  padding-top: clamp(4px, 1.5vh, 12px);
  padding-bottom: calc(6px + var(--ai-player-chrome-footer-reserve, 0px) + var(--ai-subtitle-safe-pb, 0px));
  gap: 4px;
  overflow: hidden;
  overflow-y: hidden;
}

.ai-slide-card .slide-content > .ai-practice-mission-layout--prompt-focus {
  flex: 1 1 auto;
  min-height: 0;
  max-height: 100%;
  align-self: stretch;
  overflow: hidden;
}

.ai-practice-mission-layout--prompt-focus {
  display: flex;
  flex-direction: column;
  gap: clamp(4px, 0.6vh, 8px);
  min-height: 0;
  max-height: 100%;
  overflow: hidden;
}

.ai-practice-mission-layout--prompt-focus .ai-practice-mission-layout__header--compact {
  flex: 0 0 auto;
}

.ai-practice-mission-layout__title-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
}

.ai-practice-mission-layout--prompt-focus .ai-practice-mission-layout__title {
  margin: 0;
  font-size: clamp(1rem, 2.2vw, 1.2rem);
  line-height: 1.2;
  flex: 1 1 auto;
  min-width: 0;
}

.ai-practice-mission-layout__copy-btn {
  flex: 0 0 auto;
  white-space: nowrap;
}

.ai-practice-mission-layout--prompt-focus .ai-practice-mission-layout__subtitle {
  margin: 0;
  font-size: clamp(0.8rem, 1.35vw, 0.9rem);
  line-height: 1.35;
  color: #64748b;
}

.ai-practice-mission-layout__description {
  margin: 0;
  font-size: clamp(0.82rem, 1.4vw, 0.92rem);
  line-height: 1.4;
  color: #334155;
}

.ai-practice-mission-layout__prompt-focus-body {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.ai-practice-mission-layout--prompt-focus .prompt-copy-card {
  flex: 1 1 auto;
  min-height: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border-width: 2px;
  border-color: #2563eb;
  background: #f8fafc;
}

.ai-practice-mission-layout--prompt-focus .prompt-copy-header {
  flex: 0 0 auto;
  padding: 6px 10px;
  margin: 0;
}

.ai-practice-mission-layout--prompt-focus .prompt-copy-header strong {
  font-size: 0.78rem;
}

.ai-practice-mission-layout--prompt-focus .prompt-copy-card__button {
  display: none;
}

.ai-practice-mission-layout--prompt-focus .prompt-scroll-box,
.ai-practice-mission-layout--prompt-focus .ai-lesson-prompt-box__text,
.ai-practice-mission-layout--prompt-focus .prompt-copy-card__text {
  flex: 1 1 auto;
  min-height: clamp(120px, 40vh, 460px);
  max-height: none;
  margin: 0;
  padding: var(--ai-prompt-box-pad-y, 22px) var(--ai-prompt-box-pad-x, 24px);
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  font-size: var(--ai-prompt-box-font-size, clamp(16px, 1.15vw, 19px));
  line-height: var(--ai-prompt-box-line-height, 1.6);
  white-space: pre-wrap;
  word-break: break-word;
}

.ai-practice-mission-layout__verify-hint {
  flex: 0 0 auto;
  margin: 0;
  padding: 0;
  font-size: clamp(0.78rem, 1.2vw, 0.86rem);
  line-height: 1.35;
  color: #64748b;
  font-weight: 600;
}

@media (max-width: 900px) {
  .ai-practice-mission-layout__title-row {
    flex-wrap: wrap;
  }

  .ai-practice-mission-layout--prompt-focus .prompt-scroll-box,
  .ai-practice-mission-layout--prompt-focus .ai-lesson-prompt-box__text,
  .ai-practice-mission-layout--prompt-focus .prompt-copy-card__text {
    min-height: clamp(96px, 34vh, 360px);
    font-size: var(--ai-prompt-box-font-size, 15px);
    line-height: var(--ai-prompt-box-line-height, 1.55);
  }
}

/* OTT subtitle precedence — video-timeline / sample-promo / fullscreen must not revert to legacy shadow text */
.ai-player-stage__viewport.is-video-timeline-subtitle > .ai-lesson-subtitle-overlay.ai-ott-subtitle .ai-lesson-subtitle-overlay__inner,
.ai-player-shell.is-sample-promo-lesson .ai-lesson-subtitle-overlay.ai-ott-subtitle .ai-lesson-subtitle-overlay__inner {
  padding: 10px 18px;
  border-radius: var(--ai-ott-subtitle-pill-radius);
  background: var(--ai-ott-subtitle-pill-bg);
  box-shadow: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

.ai-player-stage__viewport.is-video-timeline-subtitle > .ai-lesson-subtitle-overlay.ai-ott-subtitle .ai-lesson-subtitle-overlay__text,
.ai-player-shell.is-sample-promo-lesson .ai-lesson-subtitle-overlay.ai-ott-subtitle .ai-lesson-subtitle-overlay__text {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: unset;
  min-height: 0;
  max-height: calc(var(--ai-ott-subtitle-line) * 1em * var(--ai-ott-subtitle-lines));
  font-size: var(--ai-ott-subtitle-font);
  font-weight: 600;
  line-height: var(--ai-ott-subtitle-line);
  letter-spacing: 0;
  text-align: center;
  text-wrap: balance;
  color: #fff;
  text-shadow: none;
  overflow: hidden;
  overflow-y: hidden;
}

.ai-slide-card:fullscreen .ai-player-stage__viewport > .ai-lesson-subtitle-overlay.ai-ott-subtitle,
.ai-slide-card:-webkit-full-screen .ai-player-stage__viewport > .ai-lesson-subtitle-overlay.ai-ott-subtitle,
.ai-slide-card.is-theater-fullscreen.is-fullscreen-active .ai-player-stage__viewport > .ai-lesson-subtitle-overlay.ai-ott-subtitle,
body.ai-lesson-fullscreen-active .ai-player-stage__viewport > .ai-lesson-subtitle-overlay.ai-ott-subtitle,
.ai-player-shell.is-fullscreen-mode .ai-player-stage__viewport > .ai-lesson-subtitle-overlay.ai-ott-subtitle,
.ai-player.ai-player--fullscreen .ai-player-stage__viewport > .ai-lesson-subtitle-overlay.ai-ott-subtitle {
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  max-width: 100%;
  margin: 0;
  transform: none;
}

.ai-slide-card:fullscreen .ai-player-stage__viewport > .ai-lesson-subtitle-overlay.ai-ott-subtitle.is-exiting,
.ai-slide-card:-webkit-full-screen .ai-player-stage__viewport > .ai-lesson-subtitle-overlay.ai-ott-subtitle.is-exiting,
.ai-slide-card.is-theater-fullscreen.is-fullscreen-active .ai-player-stage__viewport > .ai-lesson-subtitle-overlay.ai-ott-subtitle.is-exiting,
body.ai-lesson-fullscreen-active .ai-player-stage__viewport > .ai-lesson-subtitle-overlay.ai-ott-subtitle.is-exiting,
.ai-player-shell.is-fullscreen-mode .ai-player-stage__viewport > .ai-lesson-subtitle-overlay.ai-ott-subtitle.is-exiting,
.ai-player.ai-player--fullscreen .ai-player-stage__viewport > .ai-lesson-subtitle-overlay.ai-ott-subtitle.is-exiting {
  transform: translateY(6px);
}

@media (max-width: 768px) {
  .ai-player-stage__viewport.is-video-timeline-subtitle > .ai-lesson-subtitle-overlay.ai-ott-subtitle .ai-lesson-subtitle-overlay__inner,
  .ai-player-shell.is-sample-promo-lesson .ai-lesson-subtitle-overlay.ai-ott-subtitle .ai-lesson-subtitle-overlay__inner {
    max-width: min(92%, 100%);
    padding: 8px 14px;
  }
}

@media (max-width: 768px) {
  .ai-player-shell.is-sample-promo-lesson:not(.is-admin-slide-mode) .dedicated-slide-layout--media-focus .video-slide-layout__presentation-stage,
  .ai-player-shell.is-sample-promo-lesson .video-slide-layout__presentation-stage {
    max-height: min(72vh, calc((100vw - 24px) * 9 / 16));
  }
}

/* Sample promo ch0 — course-demo video letterbox (match /courses/* .course-preview-video) */
.ai-player-shell.is-sample-promo-lesson:not(.is-admin-slide-mode) .dedicated-slide-layout--media-focus .video-slide-layout__presentation-stage,
.ai-player-shell.is-sample-promo-lesson .video-slide-layout__presentation-stage {
  flex: 0 1 auto;
  width: 100%;
  height: auto;
  max-width: 100%;
  max-height: min(
    72vh,
    calc((100vw - var(--player-sidebar-width, 288px) - 48px) * 9 / 16)
  );
  aspect-ratio: 16 / 9;
}

.ai-player-shell.is-sample-promo-lesson:not(.is-admin-slide-mode) .dedicated-slide-layout--media-focus .video-slide-layout__presentation-layer--video .ai-lesson-video-player,
.ai-player-shell.is-sample-promo-lesson .video-slide-layout__presentation-layer--video .ai-lesson-video-player,
.ai-player-shell.is-sample-promo-lesson .ai-media-video__player-shell .ai-lesson-video-player {
  display: block;
  width: 100%;
  height: 100%;
  max-width: 100%;
  max-height: 100%;
  aspect-ratio: auto;
  object-fit: contain;
  object-position: center center;
}

.ai-player-shell.is-sample-promo-lesson .video-slide-layout__presentation-layer--video .ai-media-video,
.ai-player-shell.is-sample-promo-lesson .video-slide-layout__presentation-layer--video .ai-media-video__player-shell {
  width: 100%;
  height: 100%;
  max-width: 100%;
  max-height: 100%;
}

/* ── Lesson materials download box (inside player main content) ── */
.ai-player-shell .ai-player-main__content > .lesson-materials-box {
  flex: 0 0 auto;
  margin: 0 0 8px;
  padding: 7px 12px;
  border: 1px solid rgba(96, 165, 250, 0.28);
  border-radius: 8px;
  background: linear-gradient(135deg, rgba(15, 23, 42, 0.94) 0%, rgba(30, 41, 59, 0.9) 100%);
  box-shadow: 0 3px 10px rgba(2, 8, 23, 0.2);
  color: #e2e8f0;
  z-index: 5;
}

.ai-player-shell .lesson-materials-box--full_bundle {
  padding: 6px 12px;
}

.ai-player-shell .lesson-materials-box__compact {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 6px 10px;
}

.ai-player-shell .lesson-materials-box__copy {
  flex: 1 1 200px;
  min-width: 0;
}

.ai-player-shell .lesson-materials-box__title {
  margin: 0 0 1px;
  font-size: 0.875rem;
  font-weight: 700;
  color: #f8fafc;
}

.ai-player-shell .lesson-materials-box__desc,
.ai-player-shell .lesson-materials-box__folder,
.ai-player-shell .lesson-materials-box__empty {
  margin: 0;
  font-size: 0.78rem;
  line-height: 1.35;
  color: #cbd5e1;
}

.ai-player-shell .lesson-materials-box__folder {
  margin-top: 6px;
}

.ai-player-shell .lesson-materials-box__folder code {
  display: inline-block;
  padding: 2px 6px;
  border-radius: 6px;
  background: rgba(15, 23, 42, 0.75);
  color: #bfdbfe;
  font-size: 0.78rem;
}

.ai-player-shell .lesson-materials-box--full_bundle .lesson-materials-box__actions {
  flex: 0 0 auto;
  justify-content: flex-end;
  align-items: center;
}

.ai-player-shell .lesson-materials-box__btn--bundle {
  width: 15rem;
  max-width: 15.625rem;
  height: 2.125rem;
  min-height: 0;
  justify-content: center;
  align-items: center;
  padding: 0 0.75rem;
  font-size: 1.125rem;
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.01em;
  border-radius: 8px;
  white-space: nowrap;
}

.ai-player-shell .lesson-materials-box--full_bundle[data-highlight-download="true"]
  .lesson-materials-box__btn--bundle {
  animation: lesson-materials-btn-blink 1.2s ease-in-out infinite;
}

@keyframes lesson-materials-btn-blink {
  0%,
  100% {
    background-color: #2563eb;
    border-color: rgba(96, 165, 250, 0.35);
    box-shadow: 0 0 0 0 rgba(96, 165, 250, 0);
  }
  50% {
    background-color: #3b82f6;
    border-color: rgba(191, 219, 254, 1);
    box-shadow: 0 0 0 2px rgba(191, 219, 254, 0.85);
  }
}

.ai-player-shell .lesson-materials-box__empty {
  margin-top: 8px;
  color: #fcd34d;
}

.ai-player-shell .lesson-materials-box__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  flex: 1 1 220px;
  justify-content: flex-end;
}

.ai-player-shell .lesson-materials-box__btn {
  display: inline-flex;
  align-items: center;
  padding: 0.5rem 0.9rem;
  border-radius: 8px;
  border: 1px solid rgba(148, 163, 184, 0.45);
  background: rgba(15, 23, 42, 0.85);
  color: #f1f5f9 !important;
  font-size: 0.84rem;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
}

.ai-player-shell .lesson-materials-box__btn--primary {
  background: #2563eb;
  border-color: #2563eb;
  color: #fff !important;
}

.ai-player-shell .lesson-materials-box__btn--primary.lesson-materials-box__btn--bundle:hover {
  filter: none;
}

.ai-player-shell .lesson-materials-box__btn--accent {
  background: #0f766e;
  border-color: #0f766e;
  color: #fff !important;
}

.ai-player-shell .lesson-materials-box__btn:hover {
  filter: brightness(1.08);
  text-decoration: none;
}

.ai-player-shell .lesson-materials-box__prompt-wrap {
  margin-top: 10px;
  max-height: 180px;
  overflow: auto;
  border: 1px solid rgba(148, 163, 184, 0.35);
  border-radius: 8px;
  background: rgba(2, 8, 23, 0.55);
  padding: 0.7rem;
}

.ai-player-shell .lesson-materials-box__prompt {
  margin: 0;
  white-space: pre-wrap;
  word-break: break-word;
  font-size: 0.82rem;
  line-height: 1.6;
  color: #e2e8f0;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
}

@media (max-width: 768px) {
  .ai-player-shell .lesson-materials-box__compact {
    flex-direction: column;
    align-items: stretch;
  }

  .ai-player-shell .lesson-materials-box__actions {
    justify-content: center;
  }

  .ai-player-shell .lesson-materials-box__btn--bundle {
    width: min(100%, 15.625rem);
    height: 2.125rem;
  }

  .ai-player-shell .lesson-materials-box--lesson_folder_hint .lesson-materials-box__btn {
    width: 100%;
    justify-content: center;
  }
}