/* UI v4 of the lesson screen (session-screen.js), on top of lesson-v2.css, after the artifact "Cô giáo Cam" v3 (12/10):
   - the head (.topbar): title, the progress dots E11 + the step being worked on, the phase chip (XEM / VIẾT), the timer,
     the grade chip, the stars E10, Kết thúc;
   - the stage (.board-card), left and biggest: the picture E1, Pika's halo E3 + its one-word chip E4 on the picture's
     bottom-left corner, the answer cards E6 under the picture, the mic; the photo zoomed over the picture (E7 Phóng);
   - the notebook column (.cam-card), right: "Pika thấy · vở của cậu" (the photo / the camera / the pad), then the lines
     of Pika and the child E17 (the newest of Pika in bold);
   - the grown-ups' strip E15 at the bottom, quiet;
   - the roadmap and the conversation are drawers. Phase VIẾT (the child writes, Pika reads the page, the photo zoomed):
     the picture steps back, the notebook lights up.
   ≤1000px: lesson-v2.css's phone layout (the stage fills the screen, the rest are sheets) with the halo and the strip.
   Scoped under main.session.lv2.lv4. */

main.session.lv2.lv4 {
  --wW: clamp(300px, 31vw, 440px);
  grid-template-columns: minmax(0, 1fr) var(--wW);
  grid-template-rows: auto minmax(0, 1fr) auto;
  grid-template-areas: "head head" "stage work" "adult adult";
  gap: 12px; padding: 12px;
}
main.session.lv2.lv4.workhidden { --wW: 64px; }
.dbg-open > main.session.lv2.lv4 { --wW: 280px; }
.dbg-open > main.session.lv2.lv4.workhidden { --wW: 64px; }
.lv4 > .topbar { grid-area: head; }
.lv4 > .board-card { grid-area: stage; }
.lv4 > .cam-card { grid-area: work; }
.lv4 > .adult-wrap { grid-area: adult; }

/* ---------- the head: one row ---------- */
.lv4 .topbar.chathead { flex-wrap: nowrap; gap: 10px; padding: 8px 12px; border: 2px solid var(--line); border-radius: 20px; }
.lv4 .brand { flex: 0 1 auto; }
.lv4 .chathead:has(> .dbg-toggle) .brand { flex: 0 1 auto; }
.lv4 .chathead > .dbg-toggle { margin-left: 0; }
.lv4 .brand .t { -webkit-line-clamp: 1; line-clamp: 1; white-space: nowrap; display: block; text-overflow: ellipsis; }
.lv4 .headrow { flex: none; flex-wrap: nowrap; }
.lv4 .dots { flex: 1 1 0; min-width: 0; display: flex; align-items: center; gap: 10px; min-height: 40px; padding: 4px 14px 4px 10px;
  border-radius: 999px; border: 2px solid var(--line); background: var(--surface-bg); color: var(--ink); cursor: pointer; font: inherit; text-align: left; }
.lv4 .dots:hover, .lv4 .dots[aria-expanded="true"] { border-color: var(--main); background: var(--main-soft); }
.lv4 .dotrow { flex: none; display: inline-flex; gap: 5px; }
.lv4 .dotrow:empty { display: none; }
.lv4 .dotrow .d { width: 12px; height: 12px; border-radius: 50%; background: var(--panel); border: 2px solid var(--neutral-300, #cbd5e1); }
.lv4 .dotrow .d.done { background: var(--ok); border-color: var(--ok); }
.lv4 .dotrow .d.on { background: var(--main); border-color: var(--main-d); box-shadow: 0 0 0 3px color-mix(in srgb, var(--main) 30%, transparent); }
.lv4 .dots-t { min-width: 0; font-weight: 800; font-size: 15px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lv4 .dots-t .katex { font-size: 1em; }
.lv4 .pha { flex: none; padding: 6px 12px; border-radius: 999px; font-weight: 800; font-size: 13px; white-space: nowrap;
  background: var(--panel); border: 2px solid var(--line); color: var(--ink2); }
main.lv4.pha-viet .pha { background: var(--ink); border-color: var(--ink); color: var(--white); }
.lv4 .topbar .stars { flex: none; font-size: 18px; padding: 4px 10px; }

/* ---------- the stage: a grid so the halo and the zoomed photo lie on the picture ---------- */
.lv4 .board-card.nowcol { display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr);
  grid-auto-rows: auto; gap: 0; padding: 12px 14px 12px; }
.lv4 .board-card > .nowtop { grid-row: 1; margin-bottom: 10px; }
.lv4 .board-card > .board-stage, .lv4 .board-card > .board { grid-row: 2; grid-column: 1; }
.lv4 .board-card > .halo { grid-row: 2; grid-column: 1; }
.lv4 .board-card > .zoom { grid-row: 2; grid-column: 1; }
.lv4 .board-card > .say { grid-row: 3; margin-top: 10px; }
.lv4 .board-card > .composer { grid-row: 4; margin-top: 10px; }
.lv4 .board-card > .dock { grid-row: 5; margin-top: 8px; }
.lv4 .board-card .board-stage, .lv4 .board-card:not(.full) .board { transition: opacity .3s, filter .3s; }
/* the picture keeps room for the halo on its bottom-left corner */
.lv4 .board-card:not(.full) .board-stage, .lv4 .board-card:not(.full) .board { padding-bottom: 58px; }

/* E3 + E4: Pika's halo, one word, the stop button */
.lv4 .halo { z-index: 4; align-self: end; justify-self: start; display: flex; align-items: center; gap: 8px; margin: 0 0 4px 2px;
  padding: 4px 6px 4px 4px; border-radius: 999px; background: color-mix(in srgb, var(--panel) 88%, transparent);
  border: 2px solid var(--line); pointer-events: auto; }
.lv4 .halo-av { width: 44px; height: 44px; border-radius: 50%; object-fit: contain; background: var(--main-soft); flex: none;
  transition: transform .35s cubic-bezier(.34, 1.56, .64, 1); }
.lv4 .halo .status { min-height: 32px; padding: 0 12px; font-weight: 800; font-size: 15px; white-space: nowrap; }
.lv4 .halo .icon-btn { width: 36px; height: 36px; min-width: 36px; }
.lv4 .halo[data-s="speaking"] .halo-av { animation: lv4-wave 1.6s ease-out infinite; }
.lv4 .halo[data-s="thinking"] .halo-av { transform: rotate(-10deg); }
.lv4 .halo[data-s="listening"] { border-color: var(--main); }
.lv4 .halo[data-s="speaking"] { border-color: var(--main-d); }
@keyframes lv4-wave { 0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--main) 55%, transparent); }
  100% { box-shadow: 0 0 0 14px color-mix(in srgb, var(--main) 0%, transparent); } }

/* E7 zoomed over the stage */
.lv4 .zoom { z-index: 6; position: relative; display: flex; align-items: center; justify-content: center; padding: 14px; border-radius: 20px;
  background: color-mix(in srgb, var(--ink) 72%, transparent); }
.lv4 .zoom.hidden { display: none; }
.lv4 .zoom img { max-width: 100%; max-height: 100%; object-fit: contain; border-radius: 14px; border: 4px solid var(--main);
  background: var(--white); box-shadow: 0 10px 30px rgba(0, 0, 0, .25); }
.lv4 .zoom-tag { position: absolute; left: 18px; top: 18px; padding: 4px 12px; border-radius: 999px; background: var(--ink); color: var(--white);
  font-weight: 800; font-size: 15px; }
.lv4 .zoom-x { position: absolute; right: 14px; top: 14px; background: var(--panel); }

/* phase VIẾT: the picture steps back, the notebook column lights up */
main.lv4.pha-viet .board-card:not(.full) .board-stage, main.lv4.pha-viet .board-card:not(.full) .board { opacity: .45; filter: saturate(.5); }
main.lv4.pha-viet .cam-card.work { border-color: var(--main); box-shadow: 0 0 0 4px color-mix(in srgb, var(--main) 25%, transparent); }

/* Pika's sentence lives in the lines E17 on a large screen; the phone keeps the bubble under the picture */
@media (min-width: 1001px) {
  .lv4 .board-card > .say { display: none; }
  /* the notebook folded hides the lines E17: the words come back on the stage (the second channel when muted) */
  main.lv4.workhidden .board-card > .say { display: flex; }
}

/* E6 + the mic: speaking is the way in, typing is "Gõ thay" in the grown-ups' strip */
.lv4 .compose-row { justify-content: flex-start; }
@media (min-width: 1001px) {
  main.lv4:not(.typing) .compose-row > .input, main.lv4:not(.typing) .compose-row > .icon-btn { display: none; }
}

/* ---------- the notebook column: E7 then E17 ---------- */
.lv4 .worktitle { display: flex; align-items: center; gap: 8px; font-size: 17px; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.lv4 .cam-card.work { container-type: inline-size; }
.lv4 .worktitle .wt-2 { margin-left: -3px; white-space: nowrap; }
@container (max-width: 360px) {
  .lv4 .worktitle .wt-2 { display: none; }
  .lv4 .workhead { gap: 6px; padding-left: 10px; }
  .lv4 .zoombtn { font-size: 0; gap: 0; width: 38px; padding: 0; }
  .lv4 .zoombtn .ic { font-size: initial; }
}
.lv4 .live-dot { flex: none; width: 10px; height: 10px; border-radius: 50%; background: var(--neutral-300, #cbd5e1); }
.lv4 .cam-card.live .live-dot { background: var(--main); box-shadow: 0 0 0 3px color-mix(in srgb, var(--main) 30%, transparent); }
.lv4 .zoombtn { min-height: 34px; padding: 0 10px; }
.lv4 .zoombtn[disabled] { opacity: .45; cursor: default; }
.lv4 .work .tabs .tab { font-size: 15px; padding: 0 6px; }
.lv4 .view { flex: 1 1 52%; min-height: 170px; }
.lv4 .photo-pane { position: absolute; inset: 0; z-index: 2; background: var(--panel); padding: 10px; display: flex; align-items: center;
  justify-content: center; }
.lv4 .photo-pane.hidden { display: none; }
.lv4 .photo-pane img { max-width: 100%; max-height: 100%; object-fit: contain; border-radius: 14px; border: 2px solid var(--line); background: var(--white);
  cursor: zoom-in; }
.lv4 .photo-empty { text-align: center; font-weight: 700; font-size: 15px; line-height: 1.4; color: var(--ink2); padding: 12px; }
/* "Pika đang xem": one row (what Pika does + the send button) */
.lv4 .seen { padding: 8px 10px; gap: 6px 8px; grid-template-columns: minmax(0, 1fr) auto; }
.lv4 .seen h3, .lv4 .seen .note, .lv4 .seen img { display: none; }
.lv4 .seen .read { grid-column: 1; grid-row: 1; font-size: 16px; }
.lv4 .seen .send { grid-column: 2; grid-row: 1; min-height: 40px; font-size: 15px; margin: 0 0 3px; padding: 4px 14px; }
/* E17: the lines of Pika and the child */
.lv4 .lines { flex: 1 1 40%; min-height: 110px; overflow-y: auto; border-top: 2px solid var(--line); padding: 8px 10px 10px;
  display: flex; flex-direction: column; gap: 6px; scrollbar-width: thin; }
.lv4 .lines:empty::before { content: attr(data-nhan); margin: auto; color: var(--ink2); font-weight: 700; font-size: 15px; }
.lv4 .ln { display: flex; align-items: flex-start; gap: 8px; padding: 6px 10px; border-radius: 12px; font-size: 15px; line-height: 1.4;
  font-weight: 700; color: var(--ink2); border: 2px solid transparent; animation: lv4-ln .25s ease-out; }
@keyframes lv4-ln { from { transform: translateY(6px); opacity: 0; } to { transform: none; opacity: 1; } }
/* who speaks: Pika's face or the child's yellow dot (no tiny name tag; the name is the aria-label) */
.lv4 .ln .who { flex: none; width: 22px; height: 22px; margin-top: 0; border-radius: 50%; }
.lv4 .ln.tutor .who { background: var(--main-soft) url(/coach/assets/img/pika-wave.svg) center / 18px no-repeat; }
.lv4 .ln.user .who { width: 12px; height: 12px; margin: 5px 5px 0; background: var(--acc-d); }
.lv4 .ln .lt { min-width: 0; overflow-wrap: anywhere; }
.lv4 .ln.tutor { background: var(--panel); border-color: color-mix(in srgb, var(--main) 35%, transparent); }
.lv4 .ln.tutor.now { color: var(--ink); font-weight: 800; font-size: 16px; border-color: var(--main); background: var(--main-soft); }
.lv4 .ln.user { background: var(--acc-soft); color: var(--ink); }
.lv4 .ln.write .lt, .lv4 .ln.pending .lt { font-style: italic; }
.lv4 .ln.live { background: transparent; border: 2px dashed var(--cyan-200, #a5e8f2); }
.lv4 .ln.sys { justify-content: center; background: var(--found); color: var(--found-ink); }
main.lv4.workhidden .cam-card .zoombtn { display: none; }

/* ---------- the roadmap: a drawer from the left (desktop) ---------- */
@media (min-width: 1001px) {
  .lv4 .journey.drawer { position: absolute; z-index: 30; left: 12px; top: 12px; bottom: 12px; width: min(400px, 40vw);
    box-shadow: 0 18px 48px rgba(15, 23, 42, .18); transform: translateX(calc(-100% - 28px)); transition: transform .25s ease; }
  main.lv4.journey-open .journey.drawer { transform: none; }
  main.lv4.journey-open .scrim { opacity: 1; pointer-events: auto; }
  .lv4 .journey .sheet-x { display: inline-grid; }
  .lv4 .chat-card.drawer { left: 12px; top: 12px; bottom: 12px; }
}

/* ---------- E15: the grown-ups' strip ----------
   pha 2a (22/10): hidden by default; a small "⋯ Người lớn" button at the bottom-right corner opens it as a popover above itself */
.lv4 .adult-wrap { position: relative; display: flex; justify-content: flex-end; align-items: center; min-height: 30px; }
.lv4 .adultbtn { min-height: 30px; font-size: 12px; padding: 0 10px; gap: 6px; color: var(--ink2); border-style: dashed; opacity: .85; }
.lv4 .adultbtn:hover, .lv4 .adultbtn[aria-expanded="true"] { opacity: 1; color: var(--ink); }
.lv4 .adult-dots { font-size: 18px; line-height: 1; font-weight: 800; }
.lv4 .adult { position: absolute; right: 0; bottom: calc(100% + 8px); z-index: 40; display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
  max-width: min(100%, 780px); padding: 8px 10px; border-radius: 16px; border: 2px solid var(--line);
  background: var(--panel); box-shadow: 0 12px 32px rgba(15, 23, 42, .16); }
.lv4 .adult[hidden] { display: none; }
.lv4 .adult::-webkit-scrollbar { display: none; }
.lv4 .adult > * { flex: none; }
.lv4 .adult-t { font-size: 12px; font-weight: 800; letter-spacing: .3px; text-transform: uppercase; color: var(--ink2); margin-right: 4px; }
.lv4 .adult .panelbtn { min-height: 34px; font-size: 13px; padding: 0 10px; color: var(--ink2); }
.lv4 .adult .panelbtn[aria-pressed="true"], .lv4 .adult .panelbtn[aria-expanded="true"] { color: var(--ink); }
.lv4 .adult .chip { min-height: 32px; font-size: 13px; padding: 0 12px; }
.lv4 .adult .switch { font-size: 13px; white-space: nowrap; }
.lv4 .chatbtn { margin: 0; min-height: 34px; }

/* ---------- short screens ---------- */
@media (max-height: 820px) and (min-width: 1001px) {
  .lv4 .topbar.chathead { padding: 6px 10px; }
  .lv4 .brand .mascot { width: 34px; height: 34px; }
  .lv4 .halo-av { width: 38px; height: 38px; }
  .lv4 .board-card:not(.full) .board-stage, .lv4 .board-card:not(.full) .board { padding-bottom: 50px; }
  .lv4 .lines { min-height: 90px; }
}
@media (max-width: 1240px) and (min-width: 1001px) {
  .lv4 .pha { display: none; }
  .lv4 .brand-txt { display: none; }
}

/* ---------- ≤1000px: lesson-v2's phone layout; the head stays small, the strip scrolls ---------- */
@media (max-width: 1000px) {
  main.session.lv2.lv4 { display: flex; flex-direction: column; gap: 8px; padding: 8px; }
  .lv4 .dots, .lv4 .pha, .lv4 .topbar .stars { display: none; }
  .lv4 .headrow { flex: 0 1 auto; }
  .lv4 .board-card.nowcol { flex: 1 1 0; padding: 10px; }
  .lv4 .board-card:not(.full) .board-stage, .lv4 .board-card:not(.full) .board { padding-bottom: 46px; }
  .lv4 .halo { gap: 4px; padding: 2px 4px 2px 2px; }
  .lv4 .halo-av { width: 34px; height: 34px; }
  .lv4 .halo .status { min-height: 28px; padding: 0 10px; font-size: 15px; }
  .lv4 .zoom { display: none; }
  .lv4 .adult-wrap { flex: none; }
  .lv4 .adult { padding: 6px 8px; gap: 6px; }
  .lv4 .adult-t { display: none; }
  .lv4 .adult .panelbtn { min-height: 32px; font-size: 12px; }
  .lv4 .adult .chip, .lv4 .adult .switch { font-size: 12px; }
  /* the phone's dock and progress bar already open the board, the roadmap and the conversation */
  .lv4 .adult :is(.typebtn, .chatbtn, .roadbtn, .debtn) { display: none; }
  .lv4 .cam-card.work .view { flex: 1 1 55%; }
}

@media (prefers-reduced-motion: reduce) {
  .lv4 .ln, .lv4 .halo[data-s="speaking"] .halo-av { animation: none; }
  .lv4 .journey.drawer, .lv4 .board-card .board-stage, .lv4 .board-card .board { transition: none; }
}

/* ---------- 19/10: the roadmap beside the picture (desktop) ----------
   The compact stage showed only the marked problem and the picture; the roadmap with the steps' questions and answers (what the
   child follows while working) was in the overlay of "Xem đề & bảng đầy đủ" or the drawer. With the picture in the stage and a
   roadmap on the board, the board becomes a column to the right of the picture showing ONLY the roadmap ("Lộ trình giải"); the
   problem is the marked card already on the stage. Phone (≤1000px) and the full overlay (.full) are unchanged. */
@media (min-width: 1001px) {
  .lv4 .board-card.nowcol:not(.full)[data-pic="stage"]:has(.board > .blk-plan) {
    grid-template-columns: minmax(0, 1fr) clamp(250px, 32%, 380px); column-gap: 12px;
  }
  .lv4 .board-card.nowcol:not(.full)[data-pic="stage"]:has(.board > .blk-plan) > :is(.nowtop, .say, .composer, .dock) {
    grid-column: 1 / -1;
  }
  .lv4 .board-card.nowcol:not(.full)[data-pic="stage"]:has(.board > .blk-plan) > .board {
    display: flex !important; flex-direction: column; grid-column: 2; grid-row: 2; min-height: 0; overflow: auto; padding: 0 2px 0 0; gap: 8px;
  }
  .lv4 .board-card.nowcol:not(.full)[data-pic="stage"] .board > :not(.blk-plan) { display: none !important; }
  .lv4 .board-card.nowcol:not(.full)[data-pic="stage"] .board > .blk-plan { display: block !important; flex: none; padding: 10px 12px; }
  .lv4 .board-card:not(.full)[data-pic="stage"] .blk-plan .plan-steps { gap: 8px; margin-top: 8px; }
  .lv4 .board-card:not(.full)[data-pic="stage"] .blk-plan .plan-steps > li { padding: 8px 10px; gap: 8px; border-radius: 14px; }
  .lv4 .board-card:not(.full)[data-pic="stage"] .blk-plan .plan-steps .dot { width: 30px; height: 30px; font-size: 16px; }
  .lv4 .board-card:not(.full)[data-pic="stage"] .blk-plan .plan-steps .st { font-size: 15px; line-height: 1.35; }
  .lv4 .board-card:not(.full)[data-pic="stage"] .blk-plan .plan-steps .res { font-size: 14px; line-height: 1.35; }
  .lv4 .board-card:not(.full)[data-pic="stage"] .blk-plan .plan-steps .asks .q,
  .lv4 .board-card:not(.full)[data-pic="stage"] .blk-plan .plan-steps .asks .a { font-size: 13.5px; line-height: 1.4; }
  .lv4 .board-card:not(.full)[data-pic="stage"] .blk-plan .conclude { font-size: 15px; border-radius: 14px; }
}