/* UI v2.1 of the lesson screen (session-screen.js): three columns.
   - "Hành trình" (left): the head (.topbar) and the roadmap as a list; "Xem lại hội thoại" opens the conversation drawer.
   - "Bây giờ" (middle, .board-card): the picture, Pika's sentence, the question and its answers, the input row. The other
     board blocks stay in .board, hidden here, and show as an overlay with "Xem đề & bảng đầy đủ".
   - "Vở của cậu" (right, .cam-card): camera / drawing pad + "Pika đang xem"; folds into a strip.
   ≤1000px: "Bây giờ" fills the screen, the journey, the conversation and the notebook open as sheets.
   Everything is scoped under main.session.lv2 so the history page (.chat-card, .board) keeps its old look.
   Pika DS tokens (tokens.css); the design's palette is the same cyan / yellow on a slate background. */

.lv2 {
  --main: var(--cyan-400); --main-d: var(--cyan-600); --main-soft: #e3f6f9; --acc: var(--yellow-400); --acc-d: var(--yellow-500);
  --acc-soft: var(--yellow-100); --line: var(--neutral-200); --ink: var(--neutral-900); --ink2: #475569; --panel: var(--white);
  --ok: var(--green-500); --ok-soft: #e3f7ec; --found: #f3eaff; --found-ink: var(--purple-600);
  --display: "Baloo 2", "Nunito", ui-rounded, system-ui, sans-serif;
  --pane-radius: 26px;
}

/* ---------- the frame: three columns ---------- */
main.session.lv2 {
  --jW: 300px; --wW: 320px;
  position: relative; display: grid; grid-template-columns: var(--jW) minmax(0, 1fr) var(--wW); grid-template-rows: minmax(0, 1fr);
  gap: 14px; height: 100dvh; max-width: none; width: 100%; margin: 0; padding: 14px; min-height: 0; flex: none; overflow: clip;
  background: var(--surface-bg);
}
main.session.lv2.workhidden { --wW: 64px; }
@media (max-width: 1240px) and (min-width: 1001px) { main.session.lv2 { --jW: 264px; --wW: 296px; gap: 12px; padding: 12px; } }
/* the tester's debug drawer takes the right of the screen: narrower side columns */
.dbg-open > main.session.lv2 { --jW: 240px; --wW: 260px; }
.dbg-open > main.session.lv2.workhidden { --wW: 64px; }
.lv2 .card { box-shadow: none; }
.lv2 .journey, .lv2 .board-card, .lv2 .cam-card, .lv2 .chat-card {
  min-height: 0; min-width: 0; background: var(--panel); border: 2px solid var(--line); border-radius: var(--pane-radius); padding: 0; }

.lv2 .panelbtn { min-height: 36px; border-radius: 12px; border: 2px solid var(--line); background: var(--panel); color: var(--ink);
  font-weight: 800; font-size: 13px; padding: 0 12px; cursor: pointer; white-space: nowrap; display: inline-flex; align-items: center;
  justify-content: center; gap: 6px; }
.lv2 .panelbtn:hover { border-color: var(--main); }
.lv2 .panelbtn[aria-pressed="true"], .lv2 .panelbtn[aria-expanded="true"] { background: var(--main-soft); border-color: var(--main); }
.lv2 button:focus-visible { outline: 4px solid var(--main-d); outline-offset: 3px; }
.lv2 .sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.lv2 .jtitle { margin: 0; font-family: var(--display); font-weight: 800; font-size: 20px; line-height: 1.2; color: var(--ink); }

/* ---------- Hành trình: the head (.topbar: plugins add the debug toggle here) ---------- */
.lv2 .journey { display: flex; flex-direction: column; overflow: hidden; }
.lv2 .topbar.chathead { flex: none; position: static; z-index: auto; min-height: 0; background: var(--panel); backdrop-filter: none;
  -webkit-backdrop-filter: none; border-bottom: 2px solid var(--line); padding: 10px 12px; display: flex; flex-wrap: wrap;
  align-items: center; gap: 8px; }
.lv2 .chathead > .icon-btn { width: 36px; height: 36px; min-width: 36px; }
.lv2 .brand { display: flex; align-items: center; gap: 8px; min-width: 0; flex: 1 1 0; }
.lv2 .brand .mascot { width: 40px; height: 40px; flex: none; object-fit: contain;
  transition: transform .35s cubic-bezier(.34, 1.56, .64, 1); }
.lv2 .brand .mascot.think { transform: rotate(-12deg); }
.lv2 .brand .mascot.happy { transform: translateY(-3px) scale(1.08); }
.lv2 .brand-txt { min-width: 0; }
.lv2 .brand .t { font-family: var(--display); font-weight: 800; font-size: 17px; line-height: 1.15; color: var(--ink);
  white-space: normal; overflow-wrap: anywhere; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden; }
.lv2 .brand .micro { font-size: 12px; margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lv2 .chathead .timer { font-size: 14px; color: var(--ink2); white-space: nowrap; }
.lv2 .chathead .btn.sm { min-height: 36px; padding: 0 12px; }
/* the tester's debug toggle joins the head: the title keeps the first row to itself */
.lv2 .chathead:has(> .dbg-toggle) .brand { flex: 1 0 100%; }
.lv2 .chathead > .dbg-toggle { margin-left: auto; }
.lv2 .headrow { flex: 1 0 100%; display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; min-width: 0; }
.lv2 .headrow .spacer { flex: 1; }
.lv2 .headrow .icon-btn { width: 36px; height: 36px; min-width: 36px; }
.lv2 .chip-slot { display: inline-flex; min-width: 0; }
.lv2 .chip-slot:empty { display: none; }
.lv2 .topbar .chip-lop { margin-right: 0; }

/* the roadmap: one row per step — done (tick + what was found), the current one stands out, the next ones faded */
.lv2 .jbody { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.lv2 .jhead { flex: none; display: flex; align-items: center; gap: 8px; padding: 12px 14px 6px; }
.lv2 .jhead .jtitle { margin-right: auto; }
.lv2 .sheet-x { display: none; }
.lv2 .stars { display: inline-flex; align-items: center; gap: 4px; font-family: var(--display); font-weight: 800; font-size: 20px;
  line-height: 1; padding: 4px 12px; border-radius: 999px; background: var(--acc-soft); color: var(--ink); white-space: nowrap; }
.lv2 .stars svg { width: 22px; height: 22px; }
.lv2 .jempty { flex: 1; min-height: 0; padding: 8px 16px; display: flex; flex-direction: column; gap: 8px; overflow: auto; }
.lv2 .jempty-t { font-family: var(--display); font-weight: 800; font-size: 18px; color: var(--ink2); }
.lv2 .jempty-de { font-size: 15px; line-height: 1.45; font-weight: 700; color: var(--ink); display: -webkit-box; -webkit-box-orient: vertical;
  -webkit-line-clamp: 6; line-clamp: 6; overflow: hidden; }
.lv2 .parts.jsteps { flex: 1; min-height: 0; list-style: none; margin: 0; padding: 4px 10px 10px; display: flex; flex-direction: column; gap: 6px;
  overflow-y: auto; scrollbar-width: thin; }
.lv2 .part { display: flex; align-items: flex-start; gap: 10px; padding: 10px 10px; border-radius: 16px; border: 2px solid transparent;
  color: var(--ink); font-size: 15px; font-weight: 700; line-height: 1.35; }
.lv2 .part .pn { flex: none; width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; background: var(--surface-bg);
  border: 2px solid var(--line); font-family: var(--display); font-weight: 800; font-size: 15px; line-height: 1; color: var(--ink2); }
.lv2 .part .pb { min-width: 0; flex: 1; display: flex; flex-direction: column; gap: 3px; padding-top: 3px; }
.lv2 .part .pl { overflow-wrap: anywhere; }
.lv2 .part .katex { font-size: 1em; }
.lv2 .part.done .pn { background: var(--ok-soft); border-color: var(--ok); }
.lv2 .part.done .pn .ic { color: var(--ok); width: 20px; height: 20px; }
.lv2 .part.done .pl { color: var(--ink2); }
.lv2 .part .detail { font-family: var(--display); font-weight: 800; font-size: 16px; line-height: 1.3; color: var(--green-600, #15803d); overflow-wrap: anywhere; }
.lv2 .part.on { background: var(--main-soft); border-color: var(--main); }
.lv2 .part.on .pn { background: var(--main); border-color: var(--main-d); color: var(--ink); }
.lv2 .part.on .pl { font-size: 17px; font-weight: 800; }
.lv2 .part .pnow { align-self: flex-start; font-size: 12px; font-weight: 800; letter-spacing: .3px; color: var(--main-d); text-transform: uppercase; }
.lv2 .part.on .detail { color: var(--main-d); font-size: 15px; }
.lv2 .part.todo { opacity: .5; }
.lv2 .chatbtn { flex: none; margin: 8px 12px 12px; min-height: 44px; font-size: 14px; }

/* ---------- Bây giờ: the problem line, the picture, Pika's sentence, the question, the input row ---------- */
.lv2 .board-card.nowcol { position: relative; display: flex; flex-direction: column; gap: 10px; padding: 12px 14px 14px; overflow: clip;
  container-type: inline-size; }
/* a narrow frame (the debug drawer open, small tablets): the input row keeps its words */
@container (max-width: 560px) {
  .lv2 .compose-row .input::placeholder { font-size: 14px; }
  .lv2 .mic-dock .level { width: 16px; }
  .lv2 .mic-dock { gap: 6px; }
  .lv2 .mic-btn { width: 48px; min-width: 48px; }
  .lv2 .compose-row { gap: 6px; }
  .lv2 .compose-row .input { padding-left: 12px; padding-right: 8px; }
  .lv2 .compose-row .icon-btn { width: 40px; height: 40px; min-width: 40px; }
}
.lv2 .nowtop { flex: none; display: flex; align-items: center; gap: 8px; min-width: 0; }
.lv2 .progbar { display: none; }
.lv2 .now-de { flex: 1 1 0; min-width: 0; display: flex; align-items: center; gap: 8px; min-height: 38px; padding: 4px 12px; text-align: left;
  border-radius: 12px; border: 2px solid var(--line); background: var(--surface-bg); color: var(--ink); cursor: pointer; font: inherit;
  font-size: 15px; font-weight: 700; }
.lv2 .now-de b { flex: none; padding: 2px 8px; border-radius: 999px; background: var(--acc-soft); font-family: var(--display); font-size: 13px; }
.lv2 .now-de .de-t { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lv2 .now-de:hover { border-color: var(--main); }
.lv2 .now-de.hidden + .fullbtn { margin-left: auto; }

/* the picture: the stage (visual op) or ONE picture block of the board; the rest of .board hidden (display:none) */
.lv2 .board-card .board-stage { flex: 1 1 0; min-height: 0; max-height: none; margin: 0; overflow: auto; display: flex; flex-direction: column; }
.lv2 .board-card .board-stage > * { margin-block: auto; }
.lv2 .board-card:not(.full) .board-stage { padding: 8px 12px; }
.lv2 .board-card:not(.full) .board-stage .blk-visual > .overline,
.lv2 .board-card:not(.full) .board > .now-pic > .overline { display: none; }
.lv2 .board-card:not([data-pic="stage"]) .board-stage { display: none; }
.lv2 .board-card:not(.full) .board { flex: 1 1 0; min-height: 0; overflow: auto; padding: 4px; gap: 12px; }
.lv2 .board-card:not(.full)[data-pic="stage"] .board { display: none; }
.lv2 .board-card:not(.full) .board > :not(.now-pic, .board-empty) { display: none; }
.lv2 .board-card:not(.full) .board > .now-pic { margin-block: auto; }
.lv2 .board-card:not(.full)[data-pic="none"] .board::before { content: attr(data-nhan); margin: auto; font-family: var(--display);
  font-weight: 800; font-size: 20px; color: var(--ink2); }
.lv2 .board-card .board-empty .muted { font-size: 16px; }
/* the full board: .board itself as an overlay over the frame, its head above it */
.lv2 .board-card .board-head { display: none; }
.lv2 .board-card.full .board-head { display: flex; position: absolute; z-index: 6; left: 0; right: 0; top: 0; height: 60px; gap: 8px;
  padding: 8px 12px 8px 18px; background: var(--panel); border-bottom: 2px solid var(--line); }
.lv2 .board-card.full .board-head .title2 { font-family: var(--display); font-size: 19px; line-height: 1.2; margin-right: auto; }
.lv2 .board-card.full .board { position: absolute; z-index: 5; left: 0; right: 0; top: 60px; bottom: 0; overflow: auto; padding: 16px 18px;
  background: var(--panel); }

/* what Pika is saying now: the big bubble; the child's last words (or the live caption) below it */
.lv2 .say { flex: none; display: flex; align-items: flex-start; gap: 12px; padding: 12px 16px; border-radius: 22px; background: var(--main-soft);
  border: 2px solid var(--main); }
.lv2 .say.speaking { border-color: var(--main-d); box-shadow: 0 0 0 4px color-mix(in srgb, var(--main) 28%, transparent); }
.lv2 .say.new { animation: lv2-say .4s cubic-bezier(.34, 1.56, .64, 1); }
@keyframes lv2-say { from { transform: scale(.98); } to { transform: none; } }
.lv2 .say-av { flex: none; width: 52px; height: 52px; object-fit: contain; }
.lv2 .say-body { min-width: 0; flex: 1; display: flex; flex-direction: column; gap: 4px; }
.lv2 .say-t { font-family: var(--display); font-weight: 800; font-size: 24px; line-height: 1.3; color: var(--ink); max-height: calc(3 * 1.3em);
  overflow-y: auto; overflow-wrap: anywhere; }
.lv2 .say-t:empty::before { content: attr(data-nhan); color: var(--ink2); }
.lv2 .heard { font-size: 15px; font-weight: 700; color: var(--ink2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lv2 .heard.live, .lv2 .heard.pending { font-style: italic; color: var(--main-d); }
.lv2 .now-note { align-self: flex-start; font-size: 14px; font-weight: 700; line-height: 1.35; padding: 2px 10px; border-radius: 999px;
  background: var(--found); color: var(--found-ink); }

/* the question and the big answer buttons (H1), then text + mic in one row */
.lv2 .composer.compose { flex: none; border: 0; padding: 0; display: flex; flex-direction: column; align-items: stretch; gap: 10px; background: none; }
.lv2 .quizbox { display: flex; flex-direction: column; gap: 8px; }
.lv2 .quiz-q { font-family: var(--display); font-weight: 800; font-size: 19px; line-height: 1.25; color: var(--ink); }
.lv2 .quiz-q:empty { display: none; }
.lv2 .opts { display: flex; flex-wrap: wrap; gap: 10px; }
.lv2 .opts:empty { display: none; }
/* the word options of a closed question (asr_chip_bat): a tap is the same words typed */
.lv2 .opts.chips { padding-top: 6px; }
.lv2 .opts.chips .chip { min-width: 110px; font-size: 18px; }
.lv2 .opt { flex: 1 1 90px; min-height: 72px; border-radius: 20px; border: 3px solid var(--line); background: var(--panel);
  box-shadow: 0 5px 0 var(--line); color: var(--ink); font-family: var(--display); font-weight: 800; font-size: 38px; line-height: 1.05;
  cursor: pointer; display: flex; align-items: center; justify-content: center; padding: 8px; margin-bottom: 5px;
  transition: transform .08s, box-shadow .08s, background .2s, border-color .2s; }
.lv2 .opts.words .opt { font-size: 22px; flex-basis: 140px; }
.lv2 .opt:hover:not([disabled]) { border-color: var(--main); }
.lv2 .opt:active:not([disabled]) { transform: translateY(3px); box-shadow: 0 2px 0 var(--line); }
.lv2 .opt[disabled] { cursor: default; }
.lv2 .opt[disabled]:not(.picked) { opacity: .55; }
.lv2 .opt.picked { background: var(--main-soft); border-color: var(--main-d); box-shadow: 0 5px 0 var(--main-d); }
.lv2 .compose-row { display: flex; align-items: center; gap: 8px; }
.lv2 .compose-row .input { height: 48px; flex: 1; min-width: 0; font-size: 16px; border-radius: 14px; }
.lv2 .mic-dock { flex: none; display: flex; align-items: center; gap: 8px; padding: 0; border: 0; }
.lv2 .mic-btn { width: 56px; min-width: 56px; min-height: 48px; border-radius: 999px; }
.lv2 .mic-dock .level { flex: none; width: 44px; }
.lv2 .dock { display: none; }

/* ---------- Vở của cậu (right): stacked for a narrow column; folds into a strip ---------- */
.lv2 .cam-card.work { display: flex; flex-direction: column; overflow: hidden; }
.lv2 .workhead { flex: none; display: flex; align-items: center; gap: 8px; padding: 8px 10px 8px 14px; border-bottom: 2px solid var(--line); }
.lv2 .worktitle { font-family: var(--display); font-weight: 800; font-size: 19px; margin-right: auto; white-space: nowrap; }
.lv2 .workbody { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.lv2 .work .tabs { flex: none; display: flex; background: var(--surface-bg); border-radius: 14px; padding: 3px; gap: 3px; margin: 10px 10px 0; }
.lv2 .work .tabs .tab { flex: 1; min-height: 36px; border: 0; border-radius: 11px; padding: 0 8px; background: none;
  font-weight: 800; font-size: 14px; color: var(--ink2); cursor: pointer; white-space: nowrap; }
.lv2 .work .tabs .tab[aria-selected="true"] { background: var(--panel); color: var(--ink); box-shadow: 0 1px 3px rgba(0, 0, 0, .12); }
.lv2 .view { position: relative; flex: 1 1 0; min-height: 150px; min-width: 0; overflow: hidden; }
.lv2 .cam-pane { position: absolute; inset: 0; display: flex; flex-direction: column; gap: 8px; padding: 10px; }
.lv2 .cam-wrap { flex: 1 1 0; min-height: 80px; max-height: none; aspect-ratio: auto; border-radius: 16px; }
.lv2 .cam-wrap video { object-fit: contain; background: #1e293b; }
.lv2 .cam-off { font-size: 14px; padding: 8px; }
.lv2 .cam-actions { margin-top: 0; gap: 6px; flex: none; display: flex; }
.lv2 .cam-actions .btn { min-height: 40px; flex: 1 1 0; min-width: 0; padding: 0 8px; font-size: 12px; white-space: nowrap; }
.lv2 .cam-opts { display: flex; align-items: center; gap: 8px 10px; flex-wrap: wrap; flex: none; }
.lv2 .cam-opts > * { flex: none; }
.lv2 .cam-opts .chip { min-height: 32px; font-size: 13px; padding: 0 12px; }
.lv2 .cam-opts .switch { font-size: 13px; }
/* the pad lies over the camera pane, which keeps rendering under it */
.lv2 .pad-pane { position: absolute; inset: 0; z-index: 2; background: var(--panel); }
.lv2 .pad-off { height: 100%; display: grid; place-items: center; padding: 18px; text-align: center; font-weight: 700; color: var(--ink2); }
.lv2 .cam-pane.under { pointer-events: none; }
.lv2 .seen { flex: none; border-top: 2px solid var(--line); padding: 10px 12px 12px; display: grid; grid-template-columns: minmax(0, 1fr) auto;
  align-items: center; gap: 4px 10px; }
.lv2 .seen h3 { margin: 0; font-size: 13px; color: var(--ink2); font-weight: 800; grid-column: 1; }
.lv2 .seen .read { grid-column: 1; font-family: var(--display); font-weight: 800; font-size: 20px; line-height: 1.15; color: var(--ink); }
.lv2 .seen .read.busy { color: var(--main-d); }
.lv2 .seen .note { grid-column: 1 / -1; font-size: 13px; line-height: 1.35; font-weight: 700; color: var(--ink2); }
.lv2 .seen img { grid-column: 2; grid-row: 1 / span 2; width: 72px; height: 54px; object-fit: contain; border-radius: 10px; border: 2px solid var(--line); background: #fff; }
.lv2 .seen .send { grid-column: 1 / -1; min-height: 48px; border-radius: 16px; border: 0; background: var(--acc); color: var(--ink);
  font-family: var(--display); font-weight: 800; font-size: 17px; line-height: 1.1; box-shadow: 0 4px 0 var(--acc-d); cursor: pointer;
  padding: 6px 12px; margin: 4px 0 4px; }
.lv2 .seen .send:active { transform: translateY(3px); box-shadow: 0 1px 0 var(--acc-d); }
/* the strip: the notebook folded; collapsed, not display:none, so the video keeps presenting frames (camera health check) */
main.lv2.workhidden .cam-card .workhead { flex: 1; flex-direction: column; justify-content: flex-start; border: 0; padding: 10px 6px; }
main.lv2.workhidden .cam-card .worktitle { display: none; }
main.lv2.workhidden .cam-card .workbtn { writing-mode: vertical-rl; min-height: 120px; min-width: 40px; padding: 12px 0; font-size: 14px; }
main.lv2.workhidden .cam-card .workbody { flex: 0 0 2px; height: 2px; min-height: 0; opacity: .01; pointer-events: none; overflow: hidden; }

/* ---------- the conversation: a drawer over the left side (desktop) ---------- */
.lv2 .chat-card.drawer { position: absolute; z-index: 30; left: 14px; top: 14px; bottom: 14px; width: min(440px, 46vw); display: flex;
  flex-direction: column; overflow: hidden; box-shadow: 0 18px 48px rgba(15, 23, 42, .18); transform: translateX(calc(-100% - 28px));
  transition: transform .25s ease; }
main.lv2.chat-open .chat-card.drawer { transform: none; }
.lv2 .drawer-head { flex: none; display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 10px 10px 10px 16px;
  border-bottom: 2px solid var(--line); }
.lv2 .scrim { position: absolute; inset: 0; z-index: 25; background: rgba(15, 23, 42, .28); opacity: 0; pointer-events: none; transition: opacity .2s; }
main.lv2.chat-open .scrim { opacity: 1; pointer-events: auto; }

.lv2 .chat { flex: 1; min-height: 0; overflow-y: auto; padding: 14px; display: flex; flex-direction: column; gap: 12px; }
.lv2 .msg { max-width: calc(100% - 46px); border: 2px solid var(--line); background: var(--surface-bg); color: var(--ink);
  border-radius: 18px 18px 18px 6px; padding: 10px 14px; font-size: 17px; line-height: 1.4; font-weight: 700; box-shadow: none; }
.lv2 .msg.tutor { position: relative; margin-left: 46px; align-self: flex-start; }
.lv2 .msg.tutor::before { content: ""; position: absolute; left: -48px; bottom: -2px; width: 40px; height: 40px;
  background: url(/coach/assets/img/pika-wave.svg) center / contain no-repeat; }
.lv2 .msg.tutor.latest { background: var(--main-soft); border-color: var(--main); }
.lv2 .msg.speaking { border-color: var(--main-d); }
.lv2 .msg.user { align-self: flex-end; background: var(--acc-soft); border-color: var(--acc); color: var(--ink);
  border-radius: 18px 18px 6px 18px; font-family: var(--display); font-size: 19px; font-weight: 800; }
.lv2 .msg.user:has(img) { background: var(--panel); padding: 6px; }
.lv2 .msg img { border-radius: 12px; max-height: 160px; }
.lv2 .msg.pending { border-style: dashed; color: var(--ink2); }
.lv2 .msg.caption-live { align-self: flex-end; background: transparent; border: 2px dashed var(--cyan-200); color: var(--ink2);
  border-radius: 18px 18px 6px 18px; font-size: 17px; }
.lv2 .msg.sys { align-self: center; max-width: 92%; text-align: center; background: var(--found); color: var(--found-ink);
  border-color: transparent; font-size: 14px; line-height: 1.35; border-radius: 999px; padding: 4px 14px; }
.lv2 .msg.bc.sys { background: transparent; color: var(--ink2); border: 0; padding: 0 8px; font-size: 14px; }

/* ---------- short screens ---------- */
@media (max-height: 820px) and (min-width: 1001px) {
  .lv2 .say { padding: 8px 14px; }
  .lv2 .say-av { width: 44px; height: 44px; }
  .lv2 .say-t { font-size: 21px; }
  .lv2 .opt { min-height: 60px; font-size: 32px; }
  .lv2 .seen .note { display: none; }
  .lv2 .cam-opts { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; padding-right: 20px;
    -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 24px), transparent); mask-image: linear-gradient(to right, #000 calc(100% - 24px), transparent); }
  .lv2 .cam-opts::-webkit-scrollbar { display: none; }
}

/* ---------- ≤1000px: "Bây giờ" fills the screen; the journey, the conversation, the notebook are sheets ---------- */
@media (max-width: 1000px) {
  main.session.lv2 { display: flex; flex-direction: column; gap: 8px; padding: 8px; }
  .lv2 .journey { display: contents; }
  .lv2 .topbar.chathead { border: 2px solid var(--line); border-radius: 20px; padding: 6px 10px; flex-wrap: nowrap; }
  .lv2 .headrow { flex: 0 1 auto; }
  .lv2 .chathead:has(> .dbg-toggle) .brand { flex: 1 1 0; }
  .lv2 .chathead > .dbg-toggle { margin-left: 0; }
  .lv2 .headrow .spacer { display: none; }
  .lv2 .brand .t { font-size: 16px; }
  .lv2 .board-card.nowcol { flex: 1 1 0; padding: 10px; gap: 8px; border-radius: 22px; }
  .lv2 .nowtop { flex-wrap: wrap; gap: 6px; }
  .lv2 .progbar { display: flex; flex: 1 0 100%; align-items: center; gap: 8px; min-height: 40px; padding: 4px 6px 4px 4px; border-radius: 999px;
    border: 2px solid var(--main); background: var(--main-soft); color: var(--ink); cursor: pointer; font: inherit; text-align: left; }
  .lv2 .progbar > b { flex: none; padding: 4px 10px; border-radius: 999px; background: var(--acc); font-family: var(--display); font-size: 16px; line-height: 1.1; }
  .lv2 .progbar .prog-t { flex: 1; min-width: 0; font-weight: 800; font-size: 15px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .lv2 .progbar .prog-more { flex: none; font-size: 13px; font-weight: 800; color: var(--main-d); padding: 0 6px; }
  .lv2 .progbar .prog-more::after { content: " ›"; }
  .lv2 .progbar .katex { font-size: 1em; }
  .lv2 .fullbtn { display: none; }
  .lv2 .now-de { min-height: 34px; font-size: 14px; }
  .lv2 .dock { display: flex; flex: none; gap: 6px; }
  .lv2 .dockbtn { flex: 1 1 0; min-width: 0; min-height: 44px; display: inline-flex; align-items: center; justify-content: center; gap: 6px;
    border-radius: 14px; border: 2px solid var(--line); background: var(--surface-bg); color: var(--ink); font-weight: 800; font-size: 13px;
    cursor: pointer; white-space: nowrap; padding: 0 6px; }
  .lv2 .dockbtn[aria-expanded="true"], .lv2 .dockbtn[aria-pressed="true"] { background: var(--main-soft); border-color: var(--main); }

  /* the sheets: fixed at the bottom; the journey and the conversation slide away (off screen), the notebook folds to
     2 px instead (its video keeps presenting frames) */
  .lv2 .jbody, .lv2 .chat-card.drawer, .lv2 .cam-card.work {
    position: fixed; z-index: 40; left: 0; right: 0; bottom: 0; top: auto; width: auto; max-width: 720px; margin: 0 auto;
    border-radius: 24px 24px 0 0; border: 2px solid var(--line); border-bottom: 0; background: var(--panel); box-shadow: 0 -12px 40px rgba(15, 23, 42, .2); }
  .lv2 .jbody { height: min(72dvh, 620px); transform: translateY(105%); transition: transform .25s ease; }
  main.lv2.journey-open .jbody { transform: none; }
  .lv2 .sheet-x { display: inline-grid; }
  .lv2 .chat-card.drawer { height: min(80dvh, 720px); transform: translateY(105%); }
  main.lv2.chat-open .chat-card.drawer { transform: none; }
  .lv2 .cam-card.work { height: min(84dvh, 760px); transition: opacity .2s; }
  main.lv2.workhidden .cam-card.work { height: 2px; opacity: .01; pointer-events: none; border: 0; box-shadow: none; }
  main.lv2.workhidden .cam-card .workhead { flex: none; flex-direction: row; padding: 8px 10px 8px 14px; }
  main.lv2.workhidden .cam-card .workbody { flex: 1; height: auto; opacity: 1; }
  main.lv2.workhidden .cam-card .workbtn { writing-mode: horizontal-tb; min-height: 36px; min-width: 0; padding: 0 12px; }
  .lv2 .scrim { position: fixed; z-index: 35; }
  main.lv2.sheet-open .scrim { opacity: 1; pointer-events: auto; }
  main.lv2.chat-open:not(.sheet-open) .scrim { opacity: 0; pointer-events: none; }

  .lv2 .say { padding: 8px 12px; gap: 10px; border-radius: 18px; }
  .lv2 .say-av { width: 40px; height: 40px; }
  .lv2 .say-t { font-size: 20px; }
  .lv2 .opt { min-height: 56px; font-size: 30px; }
  .lv2 .quiz-q { font-size: 17px; }
}
@media (max-width: 600px) {
  .lv2 .chathead > .icon-btn { width: 34px; height: 34px; min-width: 34px; }
  .lv2 .brand .mascot { width: 32px; height: 32px; }
  .lv2 .brand .t { font-size: 15px; }
  .lv2 .brand .micro { display: none; }
  .lv2 .chathead .timer { display: none; }
  /* a crowded head (grade chip, stop button, debug toggle): the mascot stays, the title goes (the progress bar says where we are) */
  .lv2 .chathead:is(:has(> .dbg-toggle), :has(.chip-slot:not(:empty)), :has(.headrow > .icon-btn:not(.hidden))) .brand-txt { display: none; }
  .lv2 .chathead .status > span:last-child { display: none; }
  .lv2 .chathead .status { padding: 0 10px; }
  .lv2 .chathead .btn.sm { padding: 0 10px; min-height: 34px; }
  .lv2 .board-card.nowcol { padding: 8px; }
  .lv2 .say-t { font-size: 18px; }
  .lv2 .heard { font-size: 14px; }
  .lv2 .quiz-q { font-size: 16px; }
  .lv2 .opt { min-height: 50px; font-size: 26px; border-radius: 16px; padding: 4px; }
  .lv2 .opts.words .opt { font-size: 18px; }
  .lv2 .mic-btn { width: 48px; min-width: 48px; min-height: 42px; }
  .lv2 .mic-dock { gap: 6px; }
  .lv2 .mic-dock .level { width: 20px; }
  .lv2 .compose-row { gap: 6px; }
  .lv2 .compose-row .input { height: 42px; padding-left: 12px; padding-right: 10px; }
  .lv2 .compose-row .input::placeholder { font-size: 14px; }
  .lv2 .compose-row .icon-btn { width: 40px; height: 40px; min-width: 40px; }
  .lv2 .msg { font-size: 16px; padding: 7px 11px; }
  .lv2 .msg.user { font-size: 18px; }
  .lv2 .msg.tutor { margin-left: 36px; }
  .lv2 .msg.tutor::before { left: -38px; width: 32px; height: 32px; }
  .lv2 .dockbtn .ic { display: none; }
}

/* the tester's OCR corner (debug.js) floats bottom-left: keep it off the input row */
.dbg-ocr:not(.in-drawer):has(~ main.session.lv2), main.session.lv2 ~ .dbg-ocr:not(.in-drawer) { left: auto; right: 12px; }
@media (min-width: 1280px) { .dbg-open > main.session.lv2 ~ .dbg-ocr:not(.in-drawer) { right: 412px; } }

@media (prefers-reduced-motion: reduce) {
  .lv2 .brand .mascot, .lv2 .opt, .lv2 .chat-card.drawer, .lv2 .jbody, .lv2 .scrim { transition: none; }
  .lv2 .msg, .lv2 .say.new { animation: none; }
}

/* Hành trình gọn: only the step just done and the step being worked on; earlier / later steps fold into one line */
.lv2 .part.fold { display: none; }
.lv2 .jtoggle { list-style: none; }
.lv2 .jtoggle-b { width: 100%; min-height: 40px; text-align: left; padding: 8px 12px; border-radius: 14px; border: 2px dashed var(--line);
  background: transparent; color: var(--ink2); font: 800 14px var(--f-text, inherit); cursor: pointer; }
.lv2 .jtoggle-b:hover { border-color: var(--main); color: var(--ink); }
.lv2 .jtoggle-b:focus-visible { outline: 3px solid var(--main-d); outline-offset: 2px; }
.lv2 .part .pl { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; }
.lv2 .part.on .pl { -webkit-line-clamp: 3; }
.lv2 .part.done:not(.on) .pl { -webkit-line-clamp: 1; }

/* A page of exercises: the tiles stay on the main screen too, as a one-row strip above the picture (the full board has the big tiles). */
.lv2 .board-card:not(.full) .board > .blk-bai-trang { display: block; order: -1; flex: none; padding: 6px 10px; border-radius: 16px; margin-bottom: 6px; }
.lv2 .board-card:not(.full) .board > .blk-bai-trang .overline { font-size: 12px; margin: 0 0 4px; }
.lv2 .board-card:not(.full) .bt-luoi { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 0; }
.lv2 .board-card:not(.full) .bt-o { flex-direction: row; align-items: center; gap: 6px; padding: 4px 8px 4px 6px; border-radius: 999px; }
.lv2 .board-card:not(.full) .bt-tom, .lv2 .board-card:not(.full) .bt-nhan { display: none; }
.lv2 .board-card:not(.full) .bt-dau { gap: 4px; }
.lv2 .board-card:not(.full) .bt-so { font-size: 15px; line-height: 20px; min-width: 14px; text-align: center; }
.lv2 .board-card:not(.full) .bt-cuoi { margin: 0; }
.lv2 .board-card:not(.full) .bt-pill { font-size: 12px; line-height: 18px; padding: 0 8px; }
.lv2 .board-card:not(.full) .bt-tich { width: 18px; height: 18px; font-size: 12px; }
.lv2 .board-card:not(.full) .bt-dang { transform: none; }

@media (max-width: 480px) {
  .lv2 .board-card:not(.full) .board > .blk-bai-trang { padding: 4px 8px; }
  .lv2 .board-card:not(.full) .bt-luoi { gap: 4px; }
  .lv2 .board-card:not(.full) .bt-o { gap: 4px; padding: 3px 6px 3px 5px; }
  .lv2 .board-card:not(.full) .bt-so { font-size: 14px; line-height: 18px; min-width: 10px; }
  .lv2 .board-card:not(.full) .bt-pill { font-size: 11px; line-height: 16px; padding: 0 6px; }
  .lv2 .board-card:not(.full) .bt-tich { width: 16px; height: 16px; font-size: 11px; }
}