frontend/css/style.css

/* Bảng xanh, phấn trắng, vở ô ly, mực tím — bảng màu lấy từ lớp học Việt Nam. */

:root{
  --bang:#1E3A32; --bang-hi:#27483E; --go:#6E4A2C; --go-dark:#523620;
  --phan:#EFEDE2; --phan-mo:#B9C7BE; --vang:#E8C547;
  --tim:#5B3FA8; --tim-nhat:#EDE7FB; --tim-vien:#C9B8F0;
  --giay:#FBFAF3; --oly:#CBDCEA; --do:#C6362E;
  --muc:#2C2A33; --muc-mo:#6E6A78;
  --r:10px;
  --dock-h:min(34vh, 300px);
}

*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%}

body{
  font-family:"Be Vietnam Pro",system-ui,"Segoe UI",sans-serif;
  background:var(--giay);
  background-image:linear-gradient(var(--oly) 1px,transparent 1px),
                   linear-gradient(90deg,var(--oly) 1px,transparent 1px);
  background-size:26px 26px;
  color:var(--muc);
}

button,select{font-family:inherit;cursor:pointer;border:none;background:none;color:inherit}
:focus-visible{outline:2.5px solid var(--tim);outline-offset:2px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}

/* Bảng ăn hết chỗ còn lại, hỏi đáp neo dưới đáy và tự cuộn bên trong. */
.app{
  height:100dvh;padding:14px;gap:12px;
  display:grid;grid-template-rows:1fr auto;
}

/* ---------------- bảng ---------------- */
.stage{display:flex;flex-direction:column;min-height:0;gap:10px}

.board{
  flex:1;min-height:0;
  background:var(--go);border-radius:16px;padding:11px;
  box-shadow:0 3px 0 var(--go-dark),0 14px 34px rgba(40,26,12,.22);
  display:flex;flex-direction:column;
}
.board__face{
  position:relative;flex:1;min-height:0;
  background:var(--bang);
  background-image:radial-gradient(ellipse at 30% 22%,var(--bang-hi),var(--bang) 72%);
  border-radius:7px;overflow:hidden;display:flex;flex-direction:column;
}
.board__rail{
  height:9px;background:linear-gradient(#8A6038,#5A3B21);
  border-radius:0 0 5px 5px;margin:0 12px;flex:none;
}

.board__head{position:absolute;top:16px;left:24px;right:150px;pointer-events:none}
.board__lesson{
  font-family:"Patrick Hand",cursive;font-size:14px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--phan-mo);opacity:.75;
}
.board__title{
  font-family:"Patrick Hand",cursive;font-size:20px;color:var(--vang);
  border-bottom:2px solid rgba(232,197,71,.38);padding-bottom:4px;
  display:inline-block;margin-top:2px;
}
.board__title:empty{display:none}

/* Nhãn cho biết bài này lấy từ đâu — soạn sẵn thì tức khắc, AI thì phải chờ. */
.badge{
  position:absolute;top:18px;right:20px;font-size:11.5px;font-weight:600;
  letter-spacing:.06em;text-transform:uppercase;padding:5px 11px;border-radius:999px;
  background:rgba(0,0,0,.3);color:var(--phan-mo);
}
.badge--ready{background:rgba(232,197,71,.18);color:var(--vang)}

/* Bảng là hình chữ nhật rộng: hình ghim bên trái, lập luận chồng dòng bên phải. */
.board__slot{
  flex:1;min-height:0;
  display:flex;align-items:stretch;gap:26px;
  padding:78px 34px 16px 196px;color:var(--phan);
}
.pane{min-width:0;display:flex}
/* Hình được ưu tiên chỗ, và luôn ăn hết chiều cao còn lại. */
.pane--figure{flex:1.2 1 0;align-items:center;justify-content:center}
.pane--figure:empty{display:none}
.pane--figure svg{max-width:100%;max-height:100%;width:100%;height:auto;color:var(--phan)}
.pane--work{
  flex:1 1 0;flex-direction:column;justify-content:flex-start;
  gap:10px;overflow-y:auto;scrollbar-width:thin;
  padding-right:4px;
}
/* Không có hình thì lập luận trải giữa bảng, chữ to hẳn lên. */
.no-figure .pane--work{align-items:center;justify-content:safe center;font-size:1.28em}
.is-empty .pane--work{align-items:center;justify-content:safe center}

.board__hint{
  font-family:"Patrick Hand",cursive;font-size:clamp(19px,2.1vw,26px);
  line-height:1.5;text-align:center;color:var(--phan-mo);max-width:22ch;
}

/* Dòng cũ nhỏ và mờ đi, nhưng vẫn đọc được — đó là cả điểm của việc giữ lại. */
.line{
  font-family:"Patrick Hand",cursive;font-size:clamp(15px,1.35vw,19px);line-height:1.45;
  opacity:.5;transform-origin:left center;transition:opacity .35s ease,font-size .35s ease;
  width:100%;
}
.line--now{opacity:1;font-size:clamp(19px,1.85vw,26px)}
.line .katex{font-size:1.55em;color:var(--phan)}
.line--box{
  border:2px solid rgba(232,197,71,.55);border-radius:9px;
  padding:8px 14px;background:rgba(232,197,71,.08);
}
.line--box.line--now{border-color:var(--vang)}

.sect{
  font-family:"Patrick Hand",cursive;font-size:14px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--vang);opacity:.8;
  border-top:1px dashed rgba(232,197,71,.35);padding-top:9px;margin-top:4px;width:100%;
}
.sect:first-child{border-top:none;padding-top:0;margin-top:0}

.ink{animation:write .85s ease-out both}
@keyframes write{from{clip-path:inset(0 100% 0 0)}to{clip-path:inset(0 -2% 0 0)}}

/* ---------------- nhân vật ---------------- */
.teacher{
  position:absolute;left:10px;bottom:0;
  height:min(64%,300px);width:auto;pointer-events:none;
}
.teacher svg{display:block;height:100%;width:auto}

.bob{animation:bob 3.4s ease-in-out infinite;transform-origin:100px 250px}
@keyframes bob{0%,100%{transform:translateY(0) rotate(0)}50%{transform:translateY(-4px) rotate(-1deg)}}

.eyes{animation:blink 5s infinite;transform-origin:center}
@keyframes blink{0%,95.5%,100%{transform:scaleY(1)}97.5%{transform:scaleY(.08)}}

.mouth{transition:rx .07s ease,ry .07s ease,cy .07s ease}
.arm{transform-origin:66px 196px;transition:transform .45s ease}
.teacher.is-writing .arm{transform:rotate(-42deg)}

/* ---------------- phụ đề ---------------- */
.caption{
  flex:none;margin:0 14px 14px 200px;min-height:50px;
  background:rgba(0,0,0,.26);border-left:3px solid var(--vang);
  padding:11px 16px;color:var(--phan);font-size:15px;line-height:1.5;
}
.caption:empty{display:none}

/* ---------------- điều khiển ---------------- */
.ctrl{display:flex;gap:9px;flex-wrap:wrap;align-items:center;flex:none}
.ctrl__step{font-size:13px;color:var(--muc-mo);font-variant-numeric:tabular-nums}

.btn{
  border:1.5px solid var(--tim-vien);background:#fff;color:var(--tim);
  border-radius:999px;padding:9px 17px;font-size:14px;font-weight:500;transition:.15s;
}
.btn:hover:not(:disabled){background:var(--tim-nhat);border-color:var(--tim)}
.btn:disabled{opacity:.4;cursor:not-allowed}
.btn--main{background:var(--tim);color:#fff;border-color:var(--tim);font-weight:600}
.btn--main:hover:not(:disabled){background:#4A3190;color:#fff}

.speed{display:flex;align-items:center;gap:7px;font-size:13px;color:var(--muc-mo)}
.speed input{width:74px;accent-color:var(--tim)}

.note{flex-basis:100%;font-size:12.5px;color:var(--muc-mo);line-height:1.4}
.note--err{color:var(--do)}
.note:empty{display:none}

/* ---------------- hỏi đáp ---------------- */
.dock{
  flex:none;height:var(--dock-h);
  background:#fff;border:1.5px solid var(--tim-vien);border-radius:14px;
  display:grid;grid-template-columns:1.3fr 1fr;overflow:hidden;
}
.dock__topics{padding:14px 16px;min-height:0;display:flex;flex-direction:column;gap:11px}
.dock__ask{
  padding:14px 16px;border-left:1.5px solid #EDE9F7;
  min-height:0;display:flex;flex-direction:column;gap:10px;
}

.tabs{display:flex;gap:6px;flex-wrap:wrap;flex:none}
.tab{
  border-radius:999px;padding:6px 14px;font-size:13px;font-weight:500;
  color:var(--muc-mo);border:1.5px solid transparent;transition:.15s;
}
.tab:hover{background:var(--tim-nhat);color:var(--tim)}
.tab[aria-selected="true"]{background:var(--tim);color:#fff;font-weight:600}

.chips{display:flex;flex-wrap:wrap;gap:7px;align-content:flex-start;overflow-y:auto;min-height:0;flex:1}
.chips .btn{padding:7px 13px;font-size:13px}

.askrow{display:flex;gap:8px;align-items:stretch;flex:none}
.ask{
  flex:1;border:1.5px solid var(--tim-vien);border-radius:var(--r);
  padding:10px 12px;font-family:inherit;font-size:14.5px;color:var(--muc);
  resize:none;background:var(--giay);
}
.ask:focus{outline:none;border-color:var(--tim);background:#fff}
.btn--send{flex:none;align-self:stretch}

.log{flex:1;min-height:0;overflow-y:auto;display:flex;flex-direction:column;gap:8px;font-size:13.5px;line-height:1.5}
.log__i{padding:8px 11px;border-radius:9px;background:var(--tim-nhat);color:#3B2A73}
.log__i--me{background:var(--giay);border:1.5px solid #E4E0D2;color:var(--muc)}
.log__i b{
  display:block;font-size:11.5px;text-transform:uppercase;letter-spacing:.07em;
  opacity:.65;margin-bottom:2px;font-weight:600;
}

/* ---------------- màn hẹp ---------------- */
@media(max-width:820px){
  :root{--dock-h:auto}
  .app{height:auto;min-height:100dvh;grid-template-rows:auto auto}
  .stage{min-height:66vh}
  .board__slot{flex-direction:column;gap:12px;padding:70px 16px 12px}
  .pane--figure{flex:0 0 auto;max-height:42vh}
  .pane--figure svg{max-height:42vh}
  .pane--work{flex:1 1 auto}
  .line--now{font-size:18px}
  .line{font-size:14px}
  .caption{margin:0 12px 12px}
  .teacher{height:150px;left:2px;opacity:.92}
  .dock{grid-template-columns:1fr}
  .dock__ask{border-left:none;border-top:1.5px solid #EDE9F7}
  .chips{max-height:150px}
  .log{max-height:170px}
}

@media(prefers-reduced-motion:reduce){
  .bob,.eyes,.ink{animation:none}
  .mouth,.arm{transition:none}
}