/* 波波乐园 · AI review, AI practice mode, learner chip. AI content always wears purple + robot + "AI 生成" tag. */
:root{--ai:#8f63e8;--ai-lt:#efe7ff;--ai-dk:#5b3bb5}
.robot{width:1.6em;height:1.6em;flex:none;vertical-align:middle}
.tag-ai{display:inline-flex;align-items:center;gap:4px;background:var(--ai);color:#fff;border:2px solid var(--ink,#2b1d14);border-radius:999px;padding:0 10px;font:800 12px/1.6 "Noto Sans SC",sans-serif;letter-spacing:.06em}

/* learner chip */
.pill.kid{gap:6px}
.pill.kid .kav{font-size:18px;line-height:1}
.kidpanel{position:fixed;z-index:70;top:calc(env(safe-area-inset-top,0px) + 70px);right:max(16px,env(safe-area-inset-right,0px));width:min(320px,calc(100vw - 32px));background:var(--paper,#fffaf0);border:4px solid var(--ink,#2b1d14);border-radius:22px;box-shadow:6px 6px 0 var(--ink,#2b1d14);padding:14px;display:grid;gap:10px;animation:bpop .35s cubic-bezier(.3,1.7,.5,1)}
.kidpanel b{font:400 22px "ZCOOL KuaiLe",sans-serif}
.kidpanel label{font-size:13px;font-weight:700}
.kidlist{display:flex;flex-wrap:wrap;gap:8px}
.kidbtn{display:inline-flex;align-items:center;gap:6px;border:3px solid var(--ink,#2b1d14);border-radius:14px;background:#fff;padding:4px 10px;font-weight:700;cursor:pointer}
.kidbtn.on{background:#ffe27a}
.kidrow{display:flex;gap:8px}.kidrow input{flex:1;min-width:0;border:3px solid var(--ink,#2b1d14);border-radius:12px;padding:4px 10px;font:700 16px "Noto Sans SC",sans-serif}
.kidav{display:flex;gap:6px;flex-wrap:wrap}.kidav button{font-size:24px;width:44px;height:44px;border:3px solid var(--ink,#2b1d14);border-radius:12px;background:#fff;cursor:pointer}.kidav button.on{background:#ffe27a}

/* review card inside the reward modal */
.aireview{margin-top:18px;text-align:left;background:#fff;border:4px solid var(--ink,#2b1d14);border-radius:22px;padding:14px 16px;box-shadow:0 5px 0 var(--ink,#2b1d14);display:grid;gap:10px}
.aireview p{margin:0;font-weight:700;line-height:1.6}
.aireview.ai{background:var(--ai-lt);border-style:dashed}
.arhead{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.arhead b{font:400 24px "ZCOOL KuaiLe",sans-serif}
.arcount{background:#ffe1e1;border:2px solid var(--ink,#2b1d14);border-radius:999px;padding:0 10px;font-weight:800;font-size:13px}
.arlist{margin:0;padding-left:22px;display:grid;gap:6px}
.arlist li{font-weight:700}
.arlist small{display:block;font-weight:500;color:#7a6a58}
.tchip{display:inline-block;font-size:12px;background:#fff3c4;border:2px solid var(--ink,#2b1d14);border-radius:8px;padding:0 6px;margin-right:6px}
.argen{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.arhint,.arnote{font-size:13px;color:#6b5a48;font-weight:500!important}
.btn.ai-btn{display:inline-flex;align-items:center;gap:8px;background:var(--ai);color:#fff;font-size:18px}
.btn.ai-btn .robot{width:30px;height:30px}
.btn.ai-btn.busy .robot{animation:robot .6s ease-in-out infinite alternate}
@keyframes robot{to{transform:translateY(-5px) rotate(8deg)}}
.arout{border-top:3px dashed #d4c39c;padding-top:10px;display:grid;gap:10px;background:var(--ai-lt);border-radius:14px;padding:10px;animation:bpop .4s cubic-bezier(.3,1.6,.5,1)}
.focus{display:flex;flex-wrap:wrap;gap:6px}.focus span{background:#fff;border:2px solid var(--ai);border-radius:999px;padding:0 10px;font-weight:700;font-size:13px;color:var(--ai-dk)}
#reward .mcard{max-height:calc(100vh - 90px)}
#parent .growth{display:block;text-align:center;margin-top:14px;text-decoration:none}

/* AI practice mode: different board, ribbon, and question tag */
.ai-ribbon{display:none}
body.ai-mode .ai-ribbon{display:flex;align-items:center;gap:8px;margin:-6px 0 10px;background:var(--ai);color:#fff;border:3px solid var(--ink,#2b1d14);border-radius:16px;padding:4px 12px 4px 6px;box-shadow:0 4px 0 var(--ink,#2b1d14);width:max-content;max-width:100%;flex-wrap:wrap}
body.ai-mode .ai-ribbon b{font:400 20px "ZCOOL KuaiLe",sans-serif}
body.ai-mode .ai-ribbon small{font-size:12px;font-weight:700;opacity:.92}
body.ai-mode .ai-ribbon .robot{width:34px;height:34px}
body.ai-mode .board{border-style:dashed;background:linear-gradient(rgba(255,250,240,.95),rgba(255,250,240,.95)),repeating-linear-gradient(45deg,var(--ai-lt) 0 14px,#fff 14px 28px);box-shadow:8px 8px 0 var(--ai-dk)}
body.ai-mode .qno{background:var(--ai)}
body.ai-mode .qprog i.done{background:var(--ai)}
.ai-from{display:inline-block;margin-top:4px;font:700 13px "Noto Sans SC",sans-serif;color:var(--ai-dk);background:var(--ai-lt);border:2px solid var(--ai);border-radius:10px;padding:0 8px}
body.ai-mode .sheet{box-shadow:8px 8px 0 var(--ai-dk)}

/* AI practice dock on the map — separate from the official islands */
.aidock{position:absolute;z-index:6;right:max(16px,env(safe-area-inset-right,0px));bottom:calc(max(12px,env(safe-area-inset-bottom,0px)) + 8px);display:flex;align-items:center;gap:8px;background:var(--ai);color:#fff;border:4px solid var(--ink,#2b1d14);border-radius:22px;padding:6px 16px 6px 8px;box-shadow:0 6px 0 var(--ink,#2b1d14);cursor:pointer;animation:dockfloat 3s ease-in-out infinite}
.aidock .robot{width:52px;height:52px}
.aidock span{display:grid;text-align:left}.aidock b{font:400 22px "ZCOOL KuaiLe",sans-serif}.aidock small{font-size:12px;font-weight:700}
.aidock .dk-n{position:absolute;top:-10px;right:-10px;min-width:28px;height:28px;border-radius:14px;background:#ff5a5f;border:3px solid var(--ink,#2b1d14);font:800 14px/22px "Baloo 2",sans-serif;font-style:normal;text-align:center;padding:0 4px}
.aidock .dk-n:empty{display:none}
.aidock.has-new .robot{animation:robot .7s ease-in-out infinite alternate}
@keyframes dockfloat{50%{transform:translateY(-6px)}}
.aipanel{position:absolute;z-index:8;right:max(16px,env(safe-area-inset-right,0px));bottom:calc(max(12px,env(safe-area-inset-bottom,0px)) + 96px);width:min(380px,calc(100vw - 32px));max-height:min(60vh,520px);overflow:auto;background:var(--ai-lt);border:4px dashed var(--ink,#2b1d14);border-radius:24px;box-shadow:6px 6px 0 var(--ai-dk);padding:14px;display:grid;gap:10px;animation:bpop .35s cubic-bezier(.3,1.7,.5,1)}
.aipanel .sx{position:absolute;top:6px;right:10px}
.dklist{display:grid;gap:8px}
.dkitem{display:grid;grid-template-columns:auto 1fr auto;grid-template-rows:auto auto;column-gap:10px;align-items:center;text-align:left;background:#fff;border:3px solid var(--ink,#2b1d14);border-radius:16px;padding:8px 12px;cursor:pointer;box-shadow:0 4px 0 var(--ink,#2b1d14)}
.dkitem .dks{grid-row:span 2;background:var(--ai);color:#fff;border-radius:10px;padding:2px 8px;font-weight:800;font-size:13px}
.dkitem b{font-weight:800}.dkitem small{grid-column:2;color:#7a6a58}
.dkitem em{grid-row:1/span 2;grid-column:3;font-style:normal;font-weight:800;background:#ffe27a;border:2px solid var(--ink,#2b1d14);border-radius:10px;padding:0 8px}
.dkitem.done em{background:#dcf8e8}
@media (max-width:600px){.aidock b{font-size:17px}.aidock .robot{width:40px;height:40px}.pill.kid .kname{display:none}}

/* today's review (official questions, spaced repetition) */
.docks{position:absolute;z-index:6;right:max(16px,env(safe-area-inset-right,0px));bottom:calc(max(12px,env(safe-area-inset-bottom,0px)) + 8px);display:flex;gap:14px;align-items:flex-end}
.docks .aidock{position:relative;right:auto;bottom:auto}
.rvdock{position:relative;display:flex;align-items:center;gap:8px;background:#ffd34a;color:var(--ink,#2b1d14);border:4px solid var(--ink,#2b1d14);border-radius:22px;padding:6px 16px 6px 8px;box-shadow:0 6px 0 var(--ink,#2b1d14);cursor:pointer;animation:rvBob 2.4s ease-in-out infinite}
.rvdock[hidden]{display:none}
.rvdock .robot{width:52px;height:52px}
.rvdock span{display:grid;text-align:left}.rvdock b{font:400 22px "ZCOOL KuaiLe",sans-serif}.rvdock small{font-size:12px;font-weight:700}
.rvdock .dk-n{position:absolute;top:-10px;right:-10px;min-width:28px;height:28px;border-radius:14px;background:#ff5a5f;color:#fff;border:3px solid var(--ink,#2b1d14);font:800 14px/22px "Baloo 2",sans-serif;font-style:normal;text-align:center;padding:0 4px}
.rvdock .dk-n:empty{display:none}
@keyframes rvBob{50%{transform:translateY(-4px)}}
.rv-ribbon{display:none}
body.review-mode .rv-ribbon{display:flex;align-items:center;gap:8px;margin:-6px 0 10px;background:#ffd34a;color:var(--ink,#2b1d14);border:3px solid var(--ink,#2b1d14);border-radius:16px;padding:4px 12px 4px 6px;box-shadow:0 4px 0 var(--ink,#2b1d14);width:max-content;max-width:100%}
body.review-mode .rv-ribbon b{font:400 20px "ZCOOL KuaiLe",sans-serif}
body.review-mode .rv-ribbon small{font-size:12px;font-weight:700}
body.review-mode .rv-ribbon .robot{width:34px;height:34px}
.aireview.rv{background:#fff6d8}
.aipanel.rvpanel{background:#fff6d8}
@media (max-width:600px){.rvdock b{font-size:17px}.rvdock .robot{width:40px;height:40px}.docks{gap:8px}}
.rvpanel .dks{background:#e9a400;color:#2b1d14}

/* ---------- AI limits: what is left today, asking before points ---------- */
.quota{display:block;margin-top:6px;font:800 13px var(--f-body,sans-serif);color:#6b4bc4}
.quota.empty{color:#b05a00}
.askq{background:#fff7dc;border:3px dashed #f2c27a;border-radius:14px;padding:10px 12px;display:grid;gap:8px}
.askq p{margin:0;font-weight:800}.askq small{color:#7a6a58;font-weight:700}
/* ---------- wrong book ---------- */
.wbdock{background:#ffb3a7}
.aipanel.wbpanel{width:min(560px,calc(100vw - 32px))}
.wbsum{margin-left:auto;margin-right:54px;font:800 14px var(--f-num,sans-serif);color:#1d7a4a}
.wblist{display:grid;gap:10px}
.wbg{background:#fff;border:3px solid var(--ink,#2b1d14);border-radius:16px;padding:10px 12px;display:grid;gap:6px}
.wbg header{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.wbg header b{font:800 17px var(--f-body,sans-serif)}
.wbg header small{font:800 13px var(--f-num,sans-serif);color:#7a6a58}
.mbar{flex:1;min-width:60px;max-width:140px;height:10px;border-radius:6px;background:#f1e6d2;overflow:hidden;border:2px solid var(--ink,#2b1d14)}
.mbar i{display:block;height:100%;background:#ffb020}
.wbg ul{margin:0;padding-left:18px;display:grid;gap:3px;font-size:15px}
.wbg li small{display:block;color:#b05a00;font-weight:700}
.wbg li.more{list-style:none;color:#7a6a58;margin-left:-18px}
.wbg .rbtns{display:flex;gap:8px;flex-wrap:wrap}
.wbg .rbtns .robot{width:26px;height:26px}
.wbout:empty{display:none}
/* A review mistake needs a clear, calm warning; success is confirmed separately. */
.review-notice,.wb-repeat{display:block;margin:12px 16px;padding:12px 14px;border:3px solid #a75818;border-radius:14px;background:#fff1cc;color:#69330d;font:700 16px/1.6 var(--f-body)}
.review-notice.resolved{border-color:#238250;background:#e4f7e9;color:#185637}
.wb-repeat{margin:6px 0;font-size:14px}
