/* Giao dien demo AI Sensei — nen sang.
 *
 * Mot quy tac bo cuc chi phoi ca file nay: CHI `.chat` duoc cuon.
 * Ban truoc dat `overflow-y: auto` len ca cot lan khung chat -> hai tang cuon
 * long nhau, va o mode B (cot rong ra) o nhap bi day troi xuong duoi tam nhin,
 * trong nhu mat han. Cot phai `min-height: 0` va KHONG cuon; `.dock` giu
 * `flex: none` de luon dinh day.
 */

*, *::before, *::after { box-sizing: border-box; }

:root {
  --bg:        #f4f6fa;
  --surface:   #ffffff;
  --line:      #e4e8f0;
  --line-soft: #eef1f6;
  --text:      #16191f;
  --muted:     #6b7280;
  --faint:     #9aa1ae;
  --accent:    #2f6fed;
  --accent-sf: #eaf1ff;
  --ok:        #12a370;
  --ok-sf:     #e6f7f1;
  --err:       #dc2f45;
  --err-sf:    #fdecee;
  --warn:      #b8720a;
  --warn-sf:   #fdf3e2;
  --r:         14px;
  --shadow:    0 1px 2px rgba(16,24,40,.05), 0 1px 3px rgba(16,24,40,.06);
  --shadow-lg: 0 4px 16px rgba(16,24,40,.08);
  --jp: "Noto Sans JP", "Yu Gothic UI", sans-serif;
}

html, body { height: 100%; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font: 15px/1.6 Inter, "Segoe UI", system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
  display: flex; flex-direction: column;
}

/* ===================== thanh tren ===================== */

/* Nhom nut mode can giua PHAN TRONG, khong phai can giua trang.
 *
 * Ban dau la `1fr auto 1fr`: hai cot ben bang nhau nen nhom mode roi dung
 * chinh giua trang. Nhung "bang nhau" cung co nghia la cot trai khong nhuong
 * duoc phan du cho cot phai — logo chi can 177px ma grid van cap cho no 571px.
 *
 * Them o ngon ngu thi cot phai can 747px trong khi chi duoc 571px. Cac o deu
 * `white-space: nowrap` nen khong o nao co lai duoc, con `justify-content:
 * flex-end` thi ghim met phai, nen 176px thua tran NGUOC sang trai. Do duoc o
 * man 1440: o `user` bat dau tai x=704 trong khi cot cua no bat dau tai x=849,
 * de len nut "Hoi tu do" (ket thuc tai x=833) dung 129px.
 *
 * Ba con so trong cong thuc nay deu co viec rieng:
 *   auto                    cot logo lay dung phan no can, khong om cho thua.
 *   minmax(max-content,1fr) cot giua an het phan du (-> mode can giua khoang
 *                           trong), nhung KHONG duoc co duoi be rong that cua
 *                           nhom nut. Bo san `max-content` nay thi o man 1180
 *                           cot giua tut xuong 184px con nhom nut van 225px,
 *                           va `justify-self: center` day no loi ra hai ben —
 *                           do duoc 5px de len lai.
 *   auto                    cot phai lay du cho khi con cho; het cho thi co
 *                           lai toi min-content va `.ctl` xuong hang.
 *
 * Do lai sau khi sua, 768 -> 1920px: khong con diem nao chong lan, khong sinh
 * thanh cuon ngang. Duoi ~1200px thanh bar cao them mot hang. */
.bar {
  flex: none;
  display: grid; grid-template-columns: auto minmax(max-content, 1fr) auto;
  align-items: center;
  gap: 16px; padding: 10px 20px;
  background: var(--surface); border-bottom: 1px solid var(--line);
}

.bar > * { min-width: 0; }
.brand {
  display: flex; align-items: center; gap: 10px;
  font-weight: 650; font-size: 16px; white-space: nowrap;
}
.brand em {
  font-style: normal; font-weight: 500; font-size: 11px; color: var(--muted);
  background: var(--bg); border: 1px solid var(--line);
  padding: 1px 7px; border-radius: 999px; margin-left: 8px;
}
.logo {
  width: 30px; height: 30px; border-radius: 9px;
  display: grid; place-items: center;
  background: linear-gradient(135deg, #2f6fed, #6b4df6);
  color: #fff; font-family: var(--jp); font-size: 16px; font-weight: 700;
}

.modes {
  justify-self: center;
  display: flex; gap: 3px; padding: 3px;
  background: var(--bg); border: 1px solid var(--line); border-radius: 11px;
}
.mode {
  padding: 6px 18px; border: none; border-radius: 8px; cursor: pointer;
  background: transparent; color: var(--muted); white-space: nowrap;
  font: 500 13.5px/1 Inter, system-ui, sans-serif;
  transition: .15s;
}
.mode:hover { color: var(--text); }
.mode.on { background: var(--surface); color: var(--accent); box-shadow: var(--shadow); }

/* `flex-wrap` la luoi do phong khi man hep hon nua: het cho thi cac o xuong
 * hang, thanh bar cao them mot chut. Xau, nhung xau thi con nhin ra duoc —
 * con tran ra ngoai cot thi de len thu khac va khong ai bam trung duoc. */
.ctl {
  display: flex; align-items: center; gap: 10px;
  justify-content: flex-end; flex-wrap: wrap; row-gap: 6px;
}
.field {
  display: flex; align-items: center; gap: 6px;
  background: var(--bg); border: 1px solid var(--line);
  border-radius: 9px; padding: 4px 6px 4px 10px;
}
.field span { font-size: 11.5px; color: var(--faint); font-weight: 500; }
.field select {
  border: none; background: transparent; color: var(--text); cursor: pointer;
  font: 600 13px Inter, system-ui, sans-serif; outline: none;
  padding-right: 2px;
}
/* Rong co dinh: o token la `type="password"` nen noi dung luon la mot day cham,
   khong co gi de o nay phai co gian theo. De rong `auto` thi ca thanh header
   nhay mot cai ngay luc dan token vao. */
.field input {
  border: none; background: transparent; color: var(--text);
  font: 600 13px Inter, system-ui, sans-serif; outline: none;
  width: 150px; padding-right: 2px;
}
.field input::placeholder { font-weight: 500; color: var(--faint); }

.pill {
  padding: 4px 11px; border-radius: 999px; font-size: 12px; font-weight: 500;
  background: var(--bg); border: 1px solid var(--line); color: var(--muted);
  white-space: nowrap;
}
.pill.ok  { background: var(--ok-sf);  border-color: #bfe8d8; color: var(--ok); }
.pill.bad { background: var(--err-sf); border-color: #f6c9cf; color: var(--err); }
.pill.dot::before {
  content: ""; display: inline-block; width: 6px; height: 6px;
  border-radius: 50%; background: currentColor; margin-right: 6px;
  vertical-align: 1px;
}

.icon {
  width: 32px; height: 32px; border-radius: 9px; cursor: pointer;
  background: var(--bg); border: 1px solid var(--line);
  color: var(--muted); font-size: 15px; line-height: 1; transition: .15s;
}
.icon:hover { background: var(--accent-sf); border-color: #c9dcff; color: var(--accent); }

/* ===================== bo cuc ===================== */

main {
  flex: 1; min-height: 0;
  display: grid; grid-template-columns: 400px minmax(0, 1fr);
  gap: 18px; padding: 18px 20px;
  max-width: 1400px; width: 100%; margin: 0 auto;
}
/* Mode B khong co cot cau hoi -> mot cot, thu hep lai cho de doc. */
body.modeB main { grid-template-columns: minmax(0, 860px); justify-content: center; }
body.modeB #qcol { display: none; }

#qcol, #chatcol {
  min-height: 0;                    /* bat buoc: cho phep con cuon co lai */
  display: flex; flex-direction: column;
  background: var(--surface); border: 1px solid var(--line);
  border-radius: 18px; box-shadow: var(--shadow);
  overflow: hidden;                 /* bo goc tron an nguyen */
}

.panel-head { flex: none; padding: 14px 18px 12px; border-bottom: 1px solid var(--line-soft); }
.panel-head h2 {
  margin: 0 0 10px; font-size: 11px; font-weight: 650;
  letter-spacing: .09em; text-transform: uppercase; color: var(--faint);
}
.panel-body { flex: 1; min-height: 0; overflow-y: auto; padding: 16px 18px 24px; }

/* ===================== cau hoi ===================== */

.qtabs { display: flex; gap: 5px; flex-wrap: wrap; }
.qtab {
  padding: 5px 11px; border-radius: 8px; cursor: pointer;
  background: var(--bg); border: 1px solid var(--line); color: var(--muted);
  font: 500 12px Inter, system-ui, sans-serif; transition: .15s;
}
.qtab:hover { border-color: #c9dcff; color: var(--accent); }
.qtab.on { background: var(--accent); border-color: var(--accent); color: #fff; }

.qmeta { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 14px; }
.tagpill {
  font-size: 11px; font-weight: 500; padding: 2.5px 9px; border-radius: 999px;
  background: var(--bg); border: 1px solid var(--line); color: var(--muted);
}
.tagpill.lv { background: var(--accent-sf); border-color: #cfe0ff; color: var(--accent); }

.qtitle {
  font-family: var(--jp); font-size: 12.5px; line-height: 1.85; color: var(--muted);
  background: var(--bg); border: 1px solid var(--line-soft);
  border-radius: 11px; padding: 11px 13px; margin-bottom: 18px;
}

.qstem {
  font-family: var(--jp); font-size: 19px; line-height: 2.1;
  margin-bottom: 18px; font-weight: 500;
}
.qstem u {
  text-decoration: none;
  background: linear-gradient(transparent 62%, #ffe08a 62%);
  padding: 0 2px; border-radius: 2px;
}

.ans { display: flex; flex-direction: column; gap: 8px; }
.ans button {
  display: flex; align-items: center; gap: 11px;
  text-align: left; padding: 11px 14px; border-radius: 12px; cursor: pointer;
  background: var(--surface); border: 1.5px solid var(--line); color: var(--text);
  font-family: var(--jp); font-size: 16px; transition: .15s;
}
.ans button:hover { border-color: #b9cffb; background: #fafbff; }
.ans .n {
  flex: none; width: 24px; height: 24px; border-radius: 7px;
  display: grid; place-items: center;
  background: var(--bg); color: var(--muted);
  font: 600 12px Inter, system-ui, sans-serif;
}
.ans .mark { margin-left: auto; font-size: 15px; font-weight: 700; }

.ans button.picked  { border-color: var(--accent); background: var(--accent-sf); }
.ans button.correct { border-color: var(--ok);  background: var(--ok-sf); }
.ans button.correct .n { background: var(--ok); color: #fff; }
.ans button.correct .mark { color: var(--ok); }
.ans button.wrong   { border-color: var(--err); background: var(--err-sf); }
.ans button.wrong .n { background: var(--err); color: #fff; }
.ans button.wrong .mark { color: var(--err); }

.explain {
  margin-top: 18px; padding: 13px 15px; border-radius: 12px;
  background: var(--bg); border: 1px solid var(--line-soft);
  font-size: 13.5px; line-height: 1.75; color: #3c424d;
}
.explain .lbl {
  display: block; font-size: 10.5px; font-weight: 650; letter-spacing: .08em;
  text-transform: uppercase; color: var(--faint); margin-bottom: 7px;
}

/* ===================== hoi thoai ===================== */

/* Vung cuon DUY NHAT cua cot phai. */
.chat {
  flex: 1; min-height: 0; overflow-y: auto;
  padding: 22px 24px;
  display: flex; flex-direction: column; gap: 16px;
  scroll-behavior: smooth;
}

/* Dong ghi chu dau phien. CO Y khong lam thanh bong bong: no la ghi chu cua
 * DEMO (dang gan cau nao), khong phai loi chatbot noi. De chung kieu bong bong
 * thi nguoi xem tuong day cung la mot tin nhan cua Sensei. */
.sysline {
  align-self: center; text-align: center; font-size: 11.5px;
  color: var(--faint); letter-spacing: .01em;
}
.sysline b { color: var(--muted); font-weight: 600; }

/* Doan phan tich lich su hoc dai hon mot cau tra loi thuong va co gach dau
 * dong, nen cho rong hon de cac dong "• ten dang — 10%: ..." khong gay doi. */
.msg.intro { max-width: 92%; }
.msg.intro .body strong { font-weight: 650; color: var(--text); }

.welcome { margin: auto; text-align: center; max-width: 440px; color: var(--muted); }
.welcome .big {
  width: 54px; height: 54px; margin: 0 auto 14px; border-radius: 16px;
  display: grid; place-items: center; font-family: var(--jp); font-size: 26px;
  background: linear-gradient(135deg, #2f6fed, #6b4df6); color: #fff;
  box-shadow: var(--shadow-lg);
}
.welcome h3 { margin: 0 0 6px; font-size: 18px; color: var(--text); font-weight: 650; }
.welcome p { margin: 0 0 16px; font-size: 13.5px; }
.starters { display: flex; flex-wrap: wrap; gap: 7px; justify-content: center; }

.msg { display: flex; flex-direction: column; max-width: 78%; }
.msg.user { align-self: flex-end; align-items: flex-end; }
.msg.bot, .msg.err { align-self: flex-start; }

.msg .body {
  padding: 11px 15px; border-radius: 16px; white-space: pre-wrap;
  word-break: break-word; font-size: 14.5px; line-height: 1.7;
}
.msg.user .body {
  background: var(--accent); color: #fff; border-bottom-right-radius: 5px;
}
.msg.bot .body {
  background: var(--surface); border: 1px solid var(--line);
  border-bottom-left-radius: 5px; box-shadow: var(--shadow);
}
.msg.err .body {
  background: var(--err-sf); border: 1px solid #f6c9cf; color: #8e1c2c;
  font-family: ui-monospace, Consolas, monospace; font-size: 12.5px;
  border-bottom-left-radius: 5px;
}

/* Con tro nhap nhay: bang chung thi giac la chu dang chay THAT, khong phai
   mot cuc van ban hien ra sau khi da xong. */
.body.live::after {
  content: ""; display: inline-block; width: 2px; height: 1em;
  background: var(--accent); margin-left: 2px; vertical-align: -2px;
  animation: blink 1.1s steps(2) infinite;
}
@keyframes blink { 50% { opacity: 0; } }

.meta {
  display: flex; align-items: center; gap: 7px; flex-wrap: wrap;
  margin-top: 7px; padding: 0 4px; font-size: 11px; color: var(--faint);
}
.meta b { font-weight: 600; color: var(--muted); }
.meta .sep { color: #d5dae3; }

/* Ba cham "dang suy nghi" — lap day khoang truoc token dau tien (~3s). Khong
   co no thi nguoi dung tuong request chet. */
.dots { display: flex; gap: 4px; padding: 15px 17px; }
.dots i {
  width: 7px; height: 7px; border-radius: 50%; background: #c3cad6;
  animation: bounce 1.3s ease-in-out infinite;
}
.dots i:nth-child(2) { animation-delay: .18s; }
.dots i:nth-child(3) { animation-delay: .36s; }
@keyframes bounce { 0%,60%,100% { transform: translateY(0); opacity: .45; }
                    30% { transform: translateY(-5px); opacity: 1; } }

/* ===================== o nhap ===================== */

.dock {
  flex: none;                       /* khong bao gio bi day khoi man hinh */
  padding: 12px 20px 14px;
  border-top: 1px solid var(--line-soft); background: var(--surface);
}

.chips { display: flex; flex-wrap: wrap; gap: 7px; }
.chips:not(:empty) { margin-bottom: 11px; }
.chips button, .starters button {
  padding: 7px 14px; border-radius: 999px; cursor: pointer;
  background: var(--surface); border: 1px solid var(--line); color: #3c424d;
  font: 400 12.5px Inter, system-ui, sans-serif; transition: .15s;
}
.chips button:hover, .starters button:hover {
  border-color: var(--accent); background: var(--accent-sf); color: var(--accent);
}

.composer {
  display: flex; align-items: flex-end; gap: 9px;
  background: var(--bg); border: 1.5px solid var(--line);
  border-radius: 15px; padding: 6px 6px 6px 15px; transition: .15s;
}
.composer:focus-within { border-color: var(--accent); background: var(--surface); }
.composer textarea {
  flex: 1; resize: none; border: none; outline: none; background: transparent;
  padding: 9px 0; max-height: 150px;
  font: 14.5px/1.55 Inter, "Segoe UI", system-ui, sans-serif; color: var(--text);
}
.composer textarea::placeholder { color: var(--faint); }
.composer button {
  flex: none; width: 36px; height: 36px; border-radius: 11px; border: none;
  cursor: pointer; display: grid; place-items: center;
  background: var(--accent); color: #fff; transition: .15s;
}
.composer button:hover:not(:disabled) { background: #1f5ad4; }
.composer button:disabled { background: #c6cedb; cursor: not-allowed; }

.hint { min-height: 17px; margin-top: 7px; padding: 0 4px; font-size: 11.5px; color: var(--faint); }
.hint.warn { color: var(--warn); }

/* ===================== cuon ===================== */

::-webkit-scrollbar { width: 9px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: #d7dce5; border-radius: 9px; border: 2.5px solid var(--surface); }
::-webkit-scrollbar-thumb:hover { background: #c0c7d3; }

/* ===================== man hinh hep =====================
 *
 * Thanh tren la `grid 1fr auto 1fr`: hep lai thi hai cot bien bi ep va chu
 * xuong dong, vo het bo cuc. Nen thay vi cho chu co lai (`nowrap` o tren), bo
 * bot phan tu theo do quan trong giam dan: nhan "demo" -> trang thai ket noi
 * -> chu "AI Sensei" (chi con logo).
 */

@media (max-width: 1080px) {
  main { grid-template-columns: minmax(0, 1fr); padding: 14px; }
  #qcol { display: none; }
}
@media (max-width: 880px) {
  .bar { padding: 10px 14px; gap: 10px; }
  .brand em, #health { display: none; }
  .mode { padding: 6px 13px; }
}
@media (max-width: 680px) {
  .brand .txt { display: none; }
  main { padding: 10px; gap: 10px; }
  #chatcol { border-radius: 14px; }
  .chat { padding: 16px; }
  .msg { max-width: 90%; }
}