:root {
  --bg: #f4f7fb;
  --card: #ffffff;
  --ink: #1d2733;
  --muted: #5b6878;
  --line: #dbe2ea;
  --brand: #2f6fde;
  --brand-ink: #ffffff;
  --me: #dcebff;
  --ok: #1e7d4f;
  --warn: #a15c00;
  --bad: #b3261e;
  --care: #6b3fa0;
  color-scheme: light;
}
* { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font: 17px/1.5 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  -webkit-text-size-adjust: 100%;
}
h1, h2, p { margin: 0; }
[hidden] { display: none !important; }
button, input, select, textarea { font: inherit; color: inherit; }
button {
  background: var(--brand);
  color: var(--brand-ink);
  border: 0;
  border-radius: 10px;
  padding: 10px 18px;
  font-weight: 600;
  cursor: pointer;
  touch-action: manipulation;
}
button:disabled { opacity: 0.5; cursor: default; }
button.ghost { background: transparent; color: var(--brand); border: 1px solid var(--line); }
button.small { padding: 4px 10px; font-size: 14px; }
input, select, textarea {
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 10px 12px;
  background: #fff;
  width: 100%;
}
:focus-visible { outline: 3px solid #9cc0ff; outline-offset: 1px; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.muted { color: var(--muted); font-size: 14px; }
.error { color: var(--bad); }
.row { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.between { justify-content: space-between; }
.mock-banner {
  background: #fff4d6;
  border: 1px solid #f0d48a;
  color: #6b4a00;
  border-radius: 10px;
  padding: 8px 12px;
  font-size: 14px;
}

/* ── Trang của bé: làm cho iPad, chạy toàn màn hình khi thêm vào Màn hình chính ── */
body.kid {
  overflow: hidden; /* chỉ khung tin nhắn cuộn, trang không trôi khi bé vuốt */
  overscroll-behavior: none;
  -webkit-tap-highlight-color: transparent;
}
.loading { height: 100%; display: grid; place-items: center; color: var(--muted); }
.chat {
  max-width: 860px;
  /* --app-h do chat.js đặt theo phần màn hình còn lại khi bàn phím ảo hiện lên */
  height: var(--app-h, 100dvh);
  margin: 0 auto;
  /* chừa chỗ cho tai thỏ, góc bo và thanh Home của iPad */
  padding:
    max(14px, env(safe-area-inset-top))
    max(16px, env(safe-area-inset-right))
    max(12px, env(safe-area-inset-bottom))
    max(16px, env(safe-area-inset-left));
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.chat-head { display: flex; gap: 10px 12px; align-items: center; flex-wrap: wrap; }
.chat-head h1 { font-size: 22px; }
.chat-head p { color: var(--muted); }
.grow { flex: 1; min-width: 0; }
.tools { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
/* Màn hình hẹp (điện thoại): hai nút cuộc trò chuyện xuống một hàng riêng, "Đăng xuất" ở lại hàng tên */
@media (max-width: 699px) {
  .tools { order: 3; flex: 1 1 100%; }
  #logout { order: 2; }
}
button.tool {
  background: var(--card); color: var(--brand); border: 1px solid var(--line);
  border-radius: 999px; padding: 8px 14px; font-size: 15px; min-height: 40px;
}
button.tool[aria-expanded="true"] { background: #e9f1ff; border-color: #c5d9fb; }
.talk { flex: 1; min-height: 0; display: flex; flex-direction: column; gap: 10px; }
.avatar {
  width: 48px; height: 48px; border-radius: 50%; flex: none;
  background: var(--brand); color: #fff;
  display: grid; place-items: center; font-weight: 700;
}
.avatar.big { width: 84px; height: 84px; font-size: 30px; }
.disclosure {
  background: #e9f1ff;
  border: 1px solid #c5d9fb;
  border-radius: 10px;
  padding: 8px 12px;
  font-size: 15px;
}
.messages {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 6px 2px;
}
.msg {
  max-width: 85%;
  padding: 10px 14px;
  border-radius: 16px;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  display: flex;
  flex-direction: column;
  gap: 6px;
  align-items: flex-start;
}
.msg.ai { background: var(--card); border: 1px solid var(--line); align-self: flex-start; border-bottom-left-radius: 4px; }
.msg.me { background: var(--me); align-self: flex-end; border-bottom-right-radius: 4px; }
.msg.typing { color: var(--muted); font-style: italic; }
.msg-note { align-self: center; max-width: 90%; color: var(--muted); font-size: 14px; text-align: center; }
/* Nút "Nghe đọc" chỉ hiện khi máy có giọng đọc đúng ngôn ngữ của câu trả lời đó */
.speak { display: none; background: transparent; color: var(--brand); border: 1px solid var(--line); padding: 4px 12px; font-size: 14px; white-space: nowrap; }
.can-vi .speak[data-lang="vi"], .can-en .speak[data-lang="en"] { display: inline-block; }
.starters { display: flex; flex-wrap: wrap; gap: 8px; }
.starters button { background: var(--card); color: var(--ink); border: 1px solid var(--line); border-radius: 999px; font-weight: 500; padding: 9px 16px; }
.composer { display: flex; gap: 8px; align-items: flex-end; }
.composer textarea { resize: none; min-height: 52px; max-height: 150px; }
.composer button { min-height: 52px; min-width: 76px; }

/* Danh sách cuộc trò chuyện đã lưu */
.history {
  flex: 1; min-height: 0; overflow-y: auto; -webkit-overflow-scrolling: touch; overscroll-behavior: contain;
  display: flex; flex-direction: column; gap: 12px; padding: 2px;
}
.history h2 { font-size: 19px; }
.hist-list { display: grid; gap: 8px; }
.hist-row { display: flex; gap: 8px; align-items: stretch; }
.hist-open {
  flex: 1; min-width: 0; text-align: left; display: grid; gap: 2px;
  background: var(--card); color: var(--ink); border: 1px solid var(--line); border-radius: 14px;
  padding: 10px 14px; font-weight: 500;
}
.hist-open.current { border-color: var(--brand); box-shadow: inset 0 0 0 1px var(--brand); }
.hist-title { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hist-meta { color: var(--muted); font-size: 14px; font-weight: 400; }
.hist-del { flex: none; background: transparent; color: var(--bad); border: 1px solid var(--line); padding: 8px 12px; font-size: 14px; }

.pair {
  min-height: 100%;
  max-width: 460px;
  margin: 0 auto;
  padding: max(24px, env(safe-area-inset-top)) 20px max(24px, env(safe-area-inset-bottom));
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  text-align: center;
}
.pair form { display: grid; gap: 10px; width: 100%; }
.pair label { font-size: 15px; color: var(--muted); text-align: left; }
.pair input { font-size: 20px; padding: 12px; }
.pair label.center { justify-content: center; }
.pair button { min-height: 52px; font-size: 18px; margin-top: 4px; }

/* Phần nhìn thấy còn thấp (iPad nằm ngang khi bàn phím ảo đang hiện): thu gọn phần đầu, nhường chỗ cho tin nhắn.
   Lớp "short" do chat.js gắn theo chiều cao thật còn lại, vì Safari không đổi kích thước trang khi bàn phím hiện. */
.short .chat { gap: 6px; padding-top: max(6px, env(safe-area-inset-top)); }
.short .talk { gap: 6px; }
.short .chat-head p { display: none; }
.short .chat-head h1 { font-size: 18px; }
.short .avatar { width: 36px; height: 36px; font-size: 14px; }
.short .disclosure, .short .mock-banner { padding: 3px 10px; font-size: 13px; }
.short button.tool { min-height: 34px; padding: 4px 12px; font-size: 14px; }
.short .composer textarea, .short .composer button { min-height: 44px; }

/* iPad và màn hình lớn: chữ to hơn, vùng chạm rộng hơn */
@media (min-width: 700px) {
  body.kid { font-size: 19px; }
  .chat, .talk { gap: 12px; }
  .chat-head h1 { font-size: 26px; }
  button.tool { font-size: 16px; padding: 9px 16px; }
  .history h2 { font-size: 21px; }
  .hist-open { padding: 12px 16px; }
  .hist-meta, .msg-note { font-size: 15px; }
  .avatar { width: 56px; height: 56px; font-size: 20px; }
  .msg { max-width: 78%; padding: 12px 18px; border-radius: 18px; }
  .disclosure { font-size: 16px; }
  .speak { font-size: 15px; padding: 6px 14px; }
  .starters button { padding: 11px 18px; }
}

/* ── Trang phụ huynh ── */
.wrap { max-width: 960px; margin: 0 auto; padding: 24px 16px 60px; display: grid; gap: 16px; }
#app { display: grid; gap: 16px; }
.card { background: var(--card); border: 1px solid var(--line); border-radius: 14px; padding: 18px; display: grid; gap: 12px; }
.card h2 { font-size: 18px; }
.grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 12px; }
.grid label { display: grid; gap: 4px; font-size: 14px; color: var(--muted); }
.grid .wide { grid-column: 1 / -1; }
label.inline { display: flex; gap: 6px; align-items: center; font-size: 14px; }
label.inline input { width: auto; }
#login .row input { max-width: 260px; }
.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; }
.stat { background: var(--card); border: 1px solid var(--line); border-radius: 14px; padding: 14px; }
.stat-value { font-size: 26px; font-weight: 700; }
.stat-label { color: var(--muted); font-size: 14px; }
.log { border: 1px solid var(--line); border-left: 5px solid var(--line); border-radius: 10px; padding: 12px; display: grid; gap: 6px; margin-top: 10px; }
.log.flagged { border-left-color: var(--warn); }
.log.block { border-left-color: var(--bad); }
.log.care { border-left-color: var(--care); }
.log .q { font-weight: 600; overflow-wrap: anywhere; }
.log .a { white-space: pre-wrap; overflow-wrap: anywhere; }
.hidden-reply { background: #fdecea; border-radius: 8px; padding: 8px; font-size: 14px; white-space: pre-wrap; overflow-wrap: anywhere; }
.badge { font-size: 13px; font-weight: 600; padding: 2px 8px; border-radius: 999px; background: #e7ecf2; }
.badge.allow { background: #dff3e8; color: var(--ok); }
.badge.redirect { background: #fff0d1; color: var(--warn); }
.badge.block, .badge.error { background: #fdecea; color: var(--bad); }
.badge.care { background: #efe5fa; color: var(--care); }

/* Mục "Thiết bị của bé" và trang quản trị */
.steps { margin: 0; padding-left: 22px; display: grid; gap: 4px; font-size: 15px; }
.urls { display: flex; flex-wrap: wrap; gap: 8px; }
.urls code { background: #eef3fa; border: 1px solid var(--line); border-radius: 8px; padding: 5px 10px; font-size: 15px; overflow-wrap: anywhere; }
.pair-code { font-size: 40px; font-weight: 700; letter-spacing: 0.25em; font-variant-numeric: tabular-nums; }
.device { display: flex; flex-wrap: wrap; gap: 8px 14px; align-items: center; justify-content: space-between; border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px; }
#devices { display: grid; gap: 8px; }
.account { border: 1px solid var(--line); border-radius: 10px; padding: 12px; display: grid; gap: 8px; }
.account.off { background: #f7f8fa; }
.account code, .secret code { background: #eef3fa; border: 1px solid var(--line); border-radius: 6px; padding: 1px 7px; font-size: 14px; }
.account select, .account input { width: auto; padding: 5px 8px; font-size: 14px; }
.account input[type="number"] { width: 84px; }
#accounts { display: grid; gap: 10px; }
.secret { background: #fff8e1; border: 1px solid #f0d48a; border-radius: 10px; padding: 12px; display: grid; gap: 8px; justify-items: start; }
.secret code.pw { font-size: 22px; font-weight: 700; letter-spacing: 0.06em; background: #fff; }
button.danger { background: var(--bad); color: #fff; }