/* posn2.css — สอวน.ชีววิทยา ค่าย1→ค่าย2: อ่าน + ทำข้อสอบ + ถามครูสด (3 คอลัมน์)
   โทนสี/ฟอนต์/tokens ชุดเดียวกับ practice.html และ settings.html — ห้ามประดิษฐ์สีใหม่ */
:root{
  --bg:oklch(15% 0.018 262); --surface:oklch(19% 0.018 262); --surface-2:oklch(22% 0.018 262);
  --text:oklch(93% 0.008 262); --muted:oklch(68% 0.015 262); --hint:oklch(50% 0.014 262);
  --line:oklch(30% 0.018 262); --line2:oklch(37% 0.018 262);
  --nav:oklch(9% 0.016 262); --nav-2:oklch(14% 0.018 262); --nav-text:oklch(58% 0.02 262); --nav-active:oklch(32% 0.08 255);
  --accent:oklch(71% 0.14 255); --accent-2:oklch(60% 0.16 258); --accent-soft:oklch(71% 0.14 255 / .16); --on-accent:oklch(16% 0.02 262);
  --ok:#59b877; --ok-soft:#16301f; --no:#e8756a; --no-soft:#341917;
  --warn:#e5a24a; --warn-soft:#33260f;
  --gold:oklch(76% 0.12 82); --gold-soft:oklch(76% 0.12 82 / .18);
  --r:10px; --r-lg:14px; --shadow:0 1px 2px rgba(0,0,0,.4),0 12px 32px -12px rgba(0,0,0,.65);
}
[data-theme=light]{
  --bg:oklch(97% 0.003 262); --surface:#ffffff; --surface-2:oklch(95% 0.004 262);
  --text:oklch(18% 0.02 262); --muted:oklch(42% 0.02 262); --hint:oklch(60% 0.015 262);
  --line:oklch(88% 0.008 262); --line2:oklch(81% 0.01 262);
  --nav:oklch(11% 0.018 262); --nav-2:oklch(16% 0.02 262); --nav-text:oklch(60% 0.02 262); --nav-active:oklch(30% 0.08 261);
  --accent:oklch(57% 0.22 261); --accent-2:oklch(55% 0.22 263); --accent-soft:oklch(57% 0.22 261 / .12); --on-accent:oklch(16% 0.02 262);
  --ok:#2e8b57; --ok-soft:#e8f5ec; --no:#c0392b; --no-soft:#fbeceb;
  --warn:#e08a1e; --warn-soft:#fdf3e2;
  --gold:oklch(70% 0.12 82); --gold-soft:oklch(92% 0.05 85);
  --shadow:0 1px 2px rgba(16,27,48,.06),0 8px 22px rgba(16,27,48,.08);
}
*{box-sizing:border-box;margin:0;padding:0}
body{background:var(--bg);color:var(--text);font-family:'Noto Sans Thai',system-ui,sans-serif;font-size:14px;line-height:1.6;-webkit-font-smoothing:antialiased;min-height:100vh}
.num{font-family:'IBM Plex Sans Thai',sans-serif;font-variant-numeric:tabular-nums}

/* ---------- top bar (same shape as practice.html) ---------- */
.top{position:sticky;top:0;z-index:20;background:color-mix(in srgb,var(--bg) 86%,transparent);backdrop-filter:blur(8px);border-bottom:1px solid var(--line);display:flex;align-items:center;gap:14px;padding:13px 20px}
.top .back{font-size:12.5px;color:var(--muted);text-decoration:none;display:flex;align-items:center;gap:5px;flex:none}
.top .back:hover{color:var(--accent)}
.top .titlewrap{min-width:0}
.top h1{font-family:'Chakra Petch';font-size:17px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.top .sub{color:var(--muted);font-size:12px}
.tbtn{width:38px;height:38px;border-radius:9px;border:1px solid var(--line2);background:var(--surface);color:var(--muted);cursor:pointer;font-size:16px;display:flex;align-items:center;justify-content:center;flex:none}
.tbtn:hover{border-color:var(--accent);color:var(--accent)}
.top .spacer{margin-left:auto}

/* ---------- layout presets (5 saveable slots — panel order + sizes) ---------- */
.layout-presets{display:flex;gap:4px;flex:none}
.lp-btn{width:26px;height:26px;border-radius:7px;border:1px solid var(--line2);background:var(--surface);color:var(--muted);font-size:11px;font-family:'IBM Plex Sans Thai';cursor:pointer;display:flex;align-items:center;justify-content:center}
.lp-btn:hover{border-color:var(--accent);color:var(--accent)}
.lp-btn.has{border-color:var(--accent-2);color:var(--accent);background:var(--accent-soft)}
.lp-btn.active{outline:2px solid var(--accent);outline-offset:1px}
.lp-btn.empty-flash{animation:lpflash .4s ease}
@keyframes lpflash{0%,100%{background:transparent}50%{background:var(--no-soft)}}

/* ---------- login gate ---------- */
#login-gate{max-width:420px;margin:60px auto;text-align:center;padding:36px 28px;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);box-shadow:var(--shadow)}
#login-gate .lg-t{font-size:15px;font-weight:600;margin-bottom:6px}
#login-gate .lg-s{font-size:12.5px;color:var(--muted);margin-bottom:18px}

/* ---------- mobile tab switcher ---------- */
.mtabs{display:none;position:sticky;top:63px;z-index:19;background:var(--bg);border-bottom:1px solid var(--line);gap:0}
.mtabs button{flex:1;padding:11px 4px;background:none;border:none;color:var(--muted);font:inherit;font-size:12.5px;font-weight:600;cursor:pointer;border-bottom:2.5px solid transparent;display:flex;flex-direction:column;align-items:center;gap:3px}
.mtabs button .ic{font-size:17px}
.mtabs button.on{color:var(--accent);border-bottom-color:var(--accent)}

/* ---------- N-column layout (1-4 ช่องเปิดพร้อมกันได้อิสระ) ---------- */
/* flexbox แทน grid เดิม — panelLayoutManager (posn2.js) เป็นคน append เฉพาะช่อง+ตัวลากที่
   "เปิด" อยู่จริงเข้า .triple ตามลำดับ ช่องที่ปิดไม่ได้ถูก append เลย (ไม่ใช่แค่ซ่อนด้วย CSS)
   เพราะ grid-template-columns แบบเดิมนับจำนวนคอลัมน์ตายตัว ใช้กับจำนวนช่องที่แปรผัน 1-4 ไม่ได้ */
.triple{display:flex;gap:8px;padding:14px;height:calc(100vh - 64px);align-items:stretch}
.panel-toggles{display:flex;gap:4px;align-items:center}
.pt-btn{width:30px;height:30px;border-radius:8px;border:1px solid var(--line2);background:var(--surface);color:var(--hint);font-size:14px;cursor:pointer;display:flex;align-items:center;justify-content:center;opacity:.5}
.pt-btn.on{opacity:1;border-color:var(--accent-2);background:var(--accent-soft);color:var(--text)}
.pt-btn:hover{border-color:var(--accent);opacity:1}
.panel{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);box-shadow:var(--shadow);display:flex;flex-direction:column;min-height:0;min-width:0;overflow:hidden}
.panel-hd{display:flex;align-items:center;gap:8px;padding:11px 14px;border-bottom:1px solid var(--line);flex:none;flex-wrap:wrap}
.panel-title{font-family:'Chakra Petch';font-size:13.5px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;cursor:grab}
.panel-title:active{cursor:grabbing}
.panel-hd .spacer{margin-left:auto}
.panel-bd{flex:1;min-height:0;overflow:auto}

/* panel drag-to-reorder (desktop only — dragging the panel-title swaps panel A ↔ B via CSS
   `order` on the grid items; grid-template-columns tracks / the resize handles never move,
   only which panel occupies each visual slot changes, so the existing resize logic above is
   untouched) */
.panel.dragging-src{opacity:.55}
.panel.drop-target{outline:2px dashed var(--accent);outline-offset:-3px}

/* per-panel font-size control (A−/A+) */
.fs-ctl{display:flex;align-items:center;gap:3px;flex:none}
.fsbtn{width:22px;height:22px;border-radius:6px;border:1px solid var(--line2);background:var(--surface-2);color:var(--text);font-size:10.5px;cursor:pointer;display:flex;align-items:center;justify-content:center;font-family:inherit}
.fsbtn:hover{border-color:var(--accent);color:var(--accent)}
.fs-pct{font-size:10.5px;color:var(--muted);min-width:30px;text-align:center;font-family:'IBM Plex Sans Thai'}

/* find toggle + bar (per panel) */
.findtoggle{width:26px;height:26px;border-radius:7px;border:1px solid var(--line2);background:var(--surface-2);color:var(--muted);cursor:pointer;font-size:12px;display:flex;align-items:center;justify-content:center;flex:none;font-family:inherit}
.findtoggle:hover,.findtoggle.on{border-color:var(--accent);color:var(--accent)}
.find-bar{display:flex;align-items:center;gap:6px;padding:7px 10px;border-bottom:1px solid var(--line);flex:none;background:var(--surface-2)}
.find-in{flex:1;min-width:0;background:var(--surface);border:1px solid var(--line2);border-radius:7px;padding:5px 8px;font:inherit;font-size:12px;color:var(--text)}
.find-count{font-size:11px;color:var(--muted);min-width:38px;text-align:center;font-family:'IBM Plex Sans Thai'}
.find-bar button{width:24px;height:24px;border-radius:6px;border:1px solid var(--line2);background:var(--surface);color:var(--text);cursor:pointer;font-size:11px;display:flex;align-items:center;justify-content:center;flex:none;font-family:inherit}
.find-bar button:hover{border-color:var(--accent);color:var(--accent)}
mark.tcas-hit{background:var(--warn-soft);color:var(--text);border-radius:2px;padding:0 1px}
mark.tcas-hit.cur{background:var(--warn);color:var(--on-accent)}

/* quiz chapter-sync toggle */
.qz-sync{display:flex;align-items:center;gap:4px;font-size:11px;color:var(--muted);cursor:pointer;white-space:nowrap;flex:none}
.qz-sync input{cursor:pointer}

/* ---------- panel resizer (drag handle ระหว่างช่อง, desktop เท่านั้น) ---------- */
.panel-resizer{width:6px;flex:none;cursor:col-resize;position:relative;background:transparent;touch-action:none;border-radius:3px}
.panel-resizer::after{content:'';position:absolute;top:8px;bottom:8px;left:2px;width:2px;border-radius:2px;background:var(--line2);transition:background .12s,left .12s,width .12s}
.panel-resizer:hover::after,.panel-resizer.dragging::after{left:0;width:6px;background:var(--accent)}
.panel-resizer:focus-visible{outline:2px solid var(--accent);outline-offset:-2px}
.panel-resizer.rz-disabled{pointer-events:none;opacity:.3}

/* ปุ่ม X ย่อช่องแบบเดิม (shrink-to-strip) ถูกแทนที่ด้วย panel-toggles บน header ทั้งหมดแล้ว —
   ปิดช่อง = เอาออกจากผังจริง (ไม่ append เข้า .triple เลย) ไม่มี CSS state ค้างให้ดูแลตรงนี้ */

/* ---------- panel 1: reader ---------- */
/* toolbar: prev/next บท · เลือกบท · zoom · เปิดแท็บใหม่ · toggle สารบัญ (แนวคิดจาก Xodo, เขียนเอง) */
.reader-toolbar{display:flex;align-items:center;gap:4px;padding:8px 10px;border-bottom:1px solid var(--line);flex:none;flex-wrap:wrap}
.rtbtn{width:26px;height:26px;border-radius:7px;border:1px solid var(--line2);background:var(--surface-2);color:var(--text);font-size:13px;cursor:pointer;display:flex;align-items:center;justify-content:center;flex:none;font-family:inherit}
.rtbtn:hover:not(:disabled){border-color:var(--accent);color:var(--accent)}
.rtbtn:disabled{opacity:.35;cursor:default}
.rt-sep{width:1px;align-self:stretch;background:var(--line);margin:0 3px;flex:none}
.rt-select{flex:1 1 auto;min-width:0;max-width:240px;background:var(--surface-2);border:1px solid var(--line2);border-radius:7px;padding:5px 6px;font:inherit;font-size:11.5px;color:var(--text)}
.reader-toolbar .pct{font-size:11px;color:var(--muted);min-width:32px;text-align:center;font-family:'IBM Plex Sans Thai'}
.rtbtn:focus-visible,.rt-select:focus-visible{outline:2px solid var(--accent);outline-offset:1px}

/* ปุ่มสลับภาษาหนังสือ TH/EN บน reader-toolbar */
.lang-toggle{display:flex;border:1px solid var(--line2);border-radius:7px;overflow:hidden;flex:none}
.lt-btn{border:none;background:var(--surface-2);color:var(--muted);font:inherit;font-size:11px;font-weight:600;padding:5px 9px;cursor:pointer}
.lt-btn:not(:last-child){border-right:1px solid var(--line2)}
.lt-btn.active{background:var(--accent);color:#fff}
.lt-btn:hover:not(.active){color:var(--accent)}
.lt-btn:focus-visible{outline:2px solid var(--accent);outline-offset:1px}

/* reading progress — % ของบทที่กำลังอ่าน (ต้อง same-origin ถึงจะคำนวณได้) */
.reader-progress{height:3px;background:var(--line);flex:none;overflow:hidden}
.reader-progress-bar{height:100%;width:0%;background:var(--accent);transition:width .15s linear}

.reader-bd{padding:0;background:var(--bg);display:flex;position:relative;overflow:hidden}
/* side-menu สารบัญ (list ด้านข้าง) ตัดออกแล้ว 2026-08-23 ทั้ง book A และ B — สารบัญอยู่ใน
   <select> บน toolbar เดียวกันแทน (ดู .rt-select) */

.reader-frame-wrap{flex:1;min-width:0;position:relative}
.reader-frame-wrap iframe{width:100%;height:100%;border:none;display:block;background:#fff}
.reader-fallback{padding:18px;font-size:13px;color:var(--muted);line-height:1.8}
.reader-fallback a{color:var(--accent);font-weight:600}

/* ---------- panel 2: quiz ---------- */
.qz-counter{font-size:11.5px;color:var(--muted);font-family:'IBM Plex Sans Thai'}
.quiz-bd{padding:16px}
.qz-stars{font-size:11px;color:var(--gold);margin-bottom:8px}
.qz-stars .off{color:var(--line2)}
.qz-stem{font-size:14.5px;line-height:1.75;margin-bottom:14px;white-space:pre-wrap}
.opts{display:flex;flex-direction:column;gap:8px}
.opt{display:flex;align-items:flex-start;gap:10px;text-align:left;width:100%;background:var(--surface-2);border:1px solid var(--line2);border-radius:9px;padding:10px 13px;font:inherit;color:var(--text);cursor:pointer;font-size:13.5px;line-height:1.6;transition:.12s}
.opt:hover:not(:disabled){border-color:var(--accent)}
.opt:disabled{cursor:default}
.opt .k{flex:none;width:20px;height:20px;border-radius:50%;border:1px solid var(--line2);display:flex;align-items:center;justify-content:center;font-size:11px;color:var(--muted);font-family:'IBM Plex Sans Thai';margin-top:1px}
.opt .cx{flex:1;min-width:0}
.opt.dim{opacity:.45}
.opt.ok{border-color:var(--ok);background:var(--ok-soft)}
.opt.ok .k{border-color:var(--ok);color:var(--ok)}
.opt.no{border-color:var(--no);background:var(--no-soft)}
.opt.no .k{border-color:var(--no);color:var(--no)}
.qz-hint{font-size:11.5px;color:var(--hint);margin:10px 0 0;display:flex;align-items:center;gap:6px}
.qz-sol{margin-top:14px;border-top:1px dashed var(--line);padding-top:14px;display:none}
.qz-sol.show{display:block}
.qz-sol-lbl{font-family:'Chakra Petch';font-size:12px;font-weight:600;color:var(--muted);margin-bottom:8px}
.qz-steps{display:flex;flex-direction:column;gap:8px;margin-bottom:10px}
.qz-stepbox{border-radius:9px;padding:10px 13px;font-size:12.5px;line-height:1.75}
.qz-stepbox h5{font-family:'Chakra Petch';font-size:12px;font-weight:600;margin-bottom:5px}
.qz-stepbox.c-blue{background:oklch(45% 0.09 250 / .16);border:1px solid oklch(55% 0.1 250 / .5)}
.qz-stepbox.c-blue h5{color:oklch(74% 0.12 250)}
.qz-stepbox.c-orange{background:oklch(55% 0.1 55 / .16);border:1px solid oklch(60% 0.11 55 / .5)}
.qz-stepbox.c-orange h5{color:oklch(74% 0.12 55)}
.qz-stepbox.c-green{background:oklch(50% 0.09 150 / .16);border:1px solid oklch(55% 0.1 150 / .5)}
.qz-stepbox.c-green h5{color:oklch(72% 0.13 150)}
[data-theme=light] .qz-stepbox.c-blue h5{color:oklch(45% 0.15 250)}
[data-theme=light] .qz-stepbox.c-orange h5{color:oklch(48% 0.13 50)}
[data-theme=light] .qz-stepbox.c-green h5{color:oklch(42% 0.13 150)}
.qz-final{margin-top:8px;font-weight:600}
.qz-why{background:var(--warn-soft);border:1px solid color-mix(in srgb,var(--warn) 34%,transparent);border-radius:9px;padding:11px 14px;font-size:12.5px;color:var(--text);line-height:1.7;margin-bottom:10px}
.qz-ref{font-size:11px;color:var(--hint);margin-top:2px}
.qz-nav{display:flex;align-items:center;gap:8px;padding:10px 14px;border-top:1px solid var(--line);flex:none}
.qz-nav button{border:1px solid var(--line2);background:var(--surface-2);color:var(--text);border-radius:8px;padding:8px 12px;font-size:12.5px;cursor:pointer;font-family:inherit}
.qz-nav button:hover:not(:disabled){border-color:var(--accent);color:var(--accent)}
.qz-nav button:disabled{opacity:.4;cursor:default}
.qz-nav input{width:52px;text-align:center;background:var(--surface-2);border:1px solid var(--line2);border-radius:8px;padding:8px 4px;color:var(--text);font:inherit;font-size:12.5px}
.qz-nav .qz-of{font-size:11.5px;color:var(--muted);white-space:nowrap}
.qz-nav .spacer{margin-left:auto}
.qz-badge{font-size:11px;padding:2px 8px;border-radius:20px;font-weight:600}
.qz-badge.correct{background:var(--ok-soft);color:var(--ok)}
.qz-badge.wrong{background:var(--no-soft);color:var(--no)}
.loading{padding:30px 16px;text-align:center;color:var(--muted);font-size:13px}
.errbox{padding:16px;color:var(--no);font-size:13px;background:var(--no-soft);border-radius:9px;margin:14px}

/* ---------- panel 3: chat ---------- */
.chat-bd{padding:14px;display:flex;flex-direction:column;gap:10px}
.chat-empty{color:var(--hint);font-size:12.5px;text-align:center;padding:20px 8px;line-height:1.8}
.msg{max-width:92%;border-radius:12px;padding:10px 13px;font-size:13px;line-height:1.75;white-space:pre-wrap}
.msg.me{align-self:flex-end;background:var(--accent);color:var(--on-accent);border-bottom-right-radius:3px}
.msg.bot{align-self:flex-start;background:var(--surface-2);border:1px solid var(--line);border-bottom-left-radius:3px;display:flex;flex-direction:column;gap:6px}
.msg.pending{align-self:flex-start;background:var(--surface-2);border:1px dashed var(--line2);color:var(--hint);font-size:12.5px;display:flex;align-items:center;gap:8px}
.msg.msg-dict{background:rgba(34,197,94,0.12);border-color:rgba(34,197,94,0.4);color:#15803d}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]) .msg.msg-dict{color:#4ade80}}
:root[data-theme="dark"] .msg.msg-dict{color:#4ade80}
.qdot{width:6px;height:6px;border-radius:50%;background:var(--accent);display:inline-block;animation:qpulse 1s infinite ease-in-out}
.qdot:nth-child(2){animation-delay:.15s}.qdot:nth-child(3){animation-delay:.3s}
@keyframes qpulse{0%,80%,100%{opacity:.25}40%{opacity:1}}
@media(prefers-reduced-motion:reduce){.qdot{animation:none}}
.chat-chips-row{display:flex;align-items:center;gap:6px;padding:6px 12px 0;overflow-x:auto;white-space:nowrap;scrollbar-width:none;-ms-overflow-style:none;flex:none}
.chat-chips-row::-webkit-scrollbar{display:none}
.chips-lbl{font-size:10.5px;font-weight:600;color:var(--muted);text-transform:uppercase;letter-spacing:0.5px;flex:none}
.chat-chip{flex:none;background:var(--surface-2);border:1px solid var(--line2);color:var(--text);border-radius:8px;padding:4px 9px;font-size:11.5px;font-family:inherit;cursor:pointer;transition:all .15s ease;display:inline-flex;align-items:center;gap:4px;user-select:none}
.chat-chip:hover{border-color:var(--accent);color:var(--accent);background:color-mix(in srgb, var(--accent) 10%, var(--surface-2))}
.chat-chip:active{transform:scale(0.97)}

.chat-inputrow{display:flex;align-items:center;gap:8px;padding:8px 12px 10px;border-top:none;flex:none}
.chat-mode-badge{flex:none;display:inline-flex;align-items:center;gap:5px;height:38px;padding:0 11px;border-radius:9px;border:1px solid var(--line2);background:var(--surface-2);color:var(--text);font-family:inherit;font-size:12.5px;font-weight:600;cursor:pointer;transition:all .15s ease;white-space:nowrap;user-select:none}
.chat-mode-badge:hover{border-color:var(--accent)}
.chat-mode-badge.mode-ask{background:oklch(45% 0.1 250 / .16);border-color:oklch(55% 0.12 250 / .6);color:oklch(76% 0.14 250)}
[data-theme="light"] .chat-mode-badge.mode-ask{background:oklch(94% 0.06 250);border-color:oklch(60% 0.15 250);color:oklch(42% 0.18 250)}
.chat-mode-badge.mode-answer{background:oklch(55% 0.12 55 / .18);border-color:oklch(60% 0.14 55 / .6);color:oklch(76% 0.14 55)}
[data-theme="light"] .chat-mode-badge.mode-answer{background:oklch(93% 0.08 55);border-color:oklch(65% 0.14 55);color:oklch(45% 0.16 50)}
.badge-ic{font-size:13.5px;line-height:1}
.badge-txt{font-size:12px;line-height:1}
.badge-arr{font-size:9px;opacity:0.7;margin-left:1px}
@media (max-width: 480px){
  .badge-txt, .badge-arr{display:none}
  .chat-mode-badge{padding:0 9px;width:38px;justify-content:center}
  .send-txt{display:none}
}
.mic-btn{flex:none;width:38px;height:38px;border-radius:9px;border:1px solid var(--line2);background:var(--surface-2);color:var(--text);font-size:16px;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .15s ease}
.mic-btn:hover{border-color:var(--accent);color:var(--accent)}
.mic-btn.listening{background:var(--no-soft);border-color:var(--no);color:var(--no);animation:qpulse 1s infinite ease-in-out}
.chat-in{flex:1;min-width:0;height:38px;background:var(--surface-2);border:1px solid var(--line2);border-radius:9px;padding:0 12px;font:inherit;font-size:13px;color:var(--text);transition:border-color .15s}
.chat-in:focus{border-color:var(--accent);outline:none}
.chat-send{flex:none;height:38px;display:inline-flex;align-items:center;gap:6px;background:var(--accent);color:var(--on-accent);border:none;border-radius:9px;padding:0 14px;font:inherit;font-size:12.5px;font-weight:600;cursor:pointer;transition:all .15s ease;box-shadow:0 2px 6px rgba(0,0,0,0.15)}
.chat-send:hover:not(:disabled){filter:brightness(1.1)}
.chat-send:active:not(:disabled){transform:scale(0.97)}
.chat-send:disabled{opacity:.5;cursor:default}
.chat-note{font-size:11.5px;color:var(--hint);padding:0 14px 8px}
.calib-link{font-size:11.5px;border:1px solid var(--line2);background:var(--surface-2);color:var(--text);border-radius:8px;padding:6px 10px;cursor:pointer;font-family:inherit;white-space:nowrap}
.calib-link:hover{border-color:var(--accent);color:var(--accent)}

.autospeak-toggle{display:flex;align-items:center;gap:6px;font-size:11.5px;border:1px solid var(--line2);background:var(--surface-2);color:var(--muted);border-radius:8px;padding:6px 10px;cursor:pointer;font-family:inherit;white-space:nowrap}
.autospeak-toggle:hover{border-color:var(--accent)}
.autospeak-dot{width:8px;height:8px;border-radius:50%;background:var(--line2);flex:none}
.autospeak-toggle.on{color:var(--accent);border-color:var(--accent)}
.autospeak-toggle.on .autospeak-dot{background:var(--accent)}

.tts-missing-note{display:flex;align-items:center;gap:10px;flex-wrap:wrap;font-size:11.5px;color:var(--hint);background:var(--surface-2);border-bottom:1px solid var(--line);padding:7px 14px}
.tts-missing-note a{color:var(--accent);text-decoration:none;font-weight:600}
.tts-missing-note a:hover{text-decoration:underline}
.tts-missing-note button{margin-left:auto;flex:none;border:none;background:none;color:var(--muted);cursor:pointer;font-size:13px}
.tts-note-sep{color:var(--muted);flex:none}

/* ---------- calibration modal ---------- */
.modal-overlay{position:fixed;inset:0;background:rgba(0,0,0,.55);display:none;align-items:center;justify-content:center;z-index:60;padding:16px}
.modal-overlay.show{display:flex}
.modal{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);box-shadow:var(--shadow-hover,var(--shadow));max-width:440px;width:100%;max-height:86vh;overflow:auto}
.modal-hd{display:flex;align-items:center;gap:10px;padding:14px 16px;border-bottom:1px solid var(--line)}
.modal-hd h3{font-family:'Chakra Petch';font-size:14.5px;font-weight:600}
.modal-hd button{margin-left:auto;background:none;border:none;color:var(--muted);font-size:18px;cursor:pointer}
.modal-bd{padding:16px}
.calib-phrase{background:var(--surface-2);border-radius:9px;padding:13px;font-size:14px;line-height:1.8;margin-bottom:12px}
.calib-row{display:flex;gap:8px;margin-bottom:10px}
.calib-row button{flex:1;border:1px solid var(--line2);background:var(--surface-2);color:var(--text);border-radius:8px;padding:9px;font-size:12.5px;cursor:pointer;font-family:inherit}
.calib-row button:hover{border-color:var(--accent);color:var(--accent)}
.calib-result{font-size:12.5px;color:var(--muted);background:var(--surface-2);border-radius:9px;padding:11px;margin-bottom:10px;line-height:1.7}
.calib-diff{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px}
.calib-word{font-size:12px;padding:3px 8px;border-radius:6px;background:var(--warn-soft);color:var(--warn);cursor:pointer;border:none;font-family:inherit}
.calib-word:hover{outline:2px solid var(--accent)}
.calib-dict{font-size:11.5px;color:var(--hint);margin-top:10px}
.calib-footer{display:flex;justify-content:space-between;gap:8px}
.calib-footer button{border:1px solid var(--line2);background:var(--surface-2);color:var(--text);border-radius:8px;padding:8px 14px;font-size:12.5px;cursor:pointer;font-family:inherit}
.calib-footer .primary{background:var(--accent);border-color:var(--accent);color:var(--on-accent);font-weight:600}

/* ---------- responsive ---------- */
@media(max-width:1000px){
  .triple{flex-direction:column;height:auto;padding:0;gap:0}
  .panel{border-radius:0;border-left:none;border-right:none;border-top:none;display:none;height:calc(100vh - 108px);min-height:420px;flex:none!important}
  .panel.active{display:flex}
  .mtabs{display:flex}
  .panel-resizer{display:none}
  #panelResetBtn{display:none}
  .panel-toggles{display:none}
  /* 5-slot layout presets ผูกกับลำดับ+ขนาด desktop โดยตรง — มือถือใช้ tab switcher แทนอยู่แล้ว
     ซ่อนแถบนี้ไปเลยกันสับสน (font-size adjuster ยังใช้ได้ปกติ ไม่ถูกซ่อน) */
  .layout-presets{display:none}
  /* ลาก panel-title เพื่อสลับลำดับใช้ได้เฉพาะ desktop (ผูกกับ mqDesktop เดียวกับ resize) —
     มือถือใช้ tab switcher เลือกช่องอยู่แล้ว จึงไม่ต้องมี grab cursor */
  .panel-title{cursor:default}

  /* toolbar ยุบให้กระชับ */
  .reader-toolbar{padding:6px 8px;gap:3px}
  .rt-select{max-width:none;font-size:11px}
  .panel-hd{padding:8px 10px;gap:5px}
  .fs-ctl .fs-pct{min-width:24px}
  .find-bar{padding:6px 8px}
  .find-in{font-size:16px} /* กัน iOS auto-zoom เวลาแตะพิมพ์ */
}
@media(max-width:520px){
  .top{padding:11px 14px}
  .top h1{font-size:15px}
}

/* ============ โหมดเทียบหนังสือ 2 เล่ม (book-slot A/B) ============ */
.book-slot{display:flex;flex-direction:column;height:100%;overflow:hidden}
.book-slot[hidden]{display:none} /* .book-slot{display:flex} ชนะ [hidden] ของ UA stylesheet เพราะ
  specificity เท่ากัน (class vs attribute selector) แต่โหลดทีหลัง — เจอบั๊กจริง 2026-08-23:
  bookSlotA ที่ hidden อยู่ยังโชว์แบ่งครึ่งจอกับ readerBd เพราะทั้งคู่เป็น flex:1 ใน panel เดียวกัน */
.bs-toolbar{display:flex;align-items:center;gap:6px;padding:6px 8px;border-bottom:1px solid var(--line2);background:var(--surface-2);flex-wrap:wrap}
.bs-toolbar .bs-title{font-size:11.5px;color:var(--muted);white-space:nowrap}
.bs-btn{height:26px;padding:0 9px;border-radius:7px;border:1px solid var(--line2);background:var(--surface);color:var(--muted);font-size:11.5px;font-family:'IBM Plex Sans Thai';cursor:pointer}
.bs-btn:hover{border-color:var(--accent);color:var(--accent)}
.bs-btn[disabled]{opacity:.45;cursor:default}
.bs-body{display:flex;flex:1;min-height:0;width:100%}
.bs-toc{width:150px;flex:none;overflow-y:auto;border-right:1px solid var(--line2);background:var(--surface-2)}
.bs-toc-hd{font-size:10.5px;color:var(--hint);padding:8px 10px 4px;text-transform:uppercase;letter-spacing:.03em}
.bs-toc-item{display:block;width:100%;text-align:left;padding:6px 10px;font-size:12px;color:var(--muted);background:none;border:none;cursor:pointer;line-height:1.4}
.bs-toc-item:hover{background:var(--accent-soft);color:var(--accent)}
.bs-toc-item.on{background:var(--accent-soft);color:var(--accent);font-weight:600}
.bs-viewer{flex:1;overflow:auto;display:flex;flex-direction:column;align-items:center;padding:10px;background:var(--surface-2)}
.bs-viewer canvas{max-width:100%;box-shadow:0 2px 10px rgba(0,0,0,.25);margin-bottom:8px}
.bs-empty{margin:auto;text-align:center;color:var(--muted);font-size:12.5px;padding:20px}
.bs-empty input[type=file]{display:none}
.bs-pageinfo{font-size:11px;color:var(--hint);margin-top:2px}

/* ============ ปุ่มออกข้อสอบเขียนตอบ (แทน MCQ ที่ตัดออก 2026-08-23) ============ */
.qz-gen-area{padding:16px;border-bottom:1px solid var(--line);flex:none}
.qz-gen-btn{width:100%;padding:12px;border-radius:10px;border:1px dashed var(--accent-2);background:var(--accent-soft);color:var(--accent);font:inherit;font-size:13.5px;font-weight:600;cursor:pointer}
.qz-gen-btn:hover{background:var(--accent);color:var(--on-accent);border-style:solid}
.qz-gen-btn[disabled]{opacity:.5;cursor:default}

/* ============ เต็มจอ (double-click หน้าหนังสือ / ปุ่ม ⛶) ============ */
.panel.is-fullscreen{width:100vw;height:100vh;border-radius:0;border:none}
.panel:fullscreen{background:var(--bg)}