/* ===== มาสคอต AI Chat — แขนทแยง 4 ข้าง ปลายเป็นโหนดกลม · แกนกลางสีอำพัน · เลนส์ขาวมีจุดดำ =====
   ใช้ในทุกหน้า (chat · index · usage · changelog · login) ลิงก์ต่อจาก app.css
   มี 2 แบบ: MARK (ตาราง 36 · ใช้ที่ 36/48/72/96px) · MARK_SM (ตาราง 24 ลงพิกเซลพอดี · ใช้ที่ ≤24px = แถบบน)
   สี: โหนด = currentColor (น้ำตาลเข้มบนพื้นสว่าง · ครีมบนแถบเข้ม) · แกน/แขน/เลนส์/จุด/สถานะ = ตัวแปร --mk-* ข้างล่าง
   สถานะ: นิ่ง (ค่าเริ่มต้น — ไม่ขยับเลย) · กำลังคิด = โหนดติดไฟส้มทีละดวงวนตามเข็ม + จุดในเลนส์มองตามดวงที่ติด
          ตอบเสร็จ = ป้ายเขียว ✓ ที่โหนดขวาบน (เฉพาะคำตอบล่าสุด) · ส่งไม่สำเร็จ = ป้ายแดง ! ที่โหนดขวาบน (สัญลักษณ์ต่างกัน → คนตาบอดสีก็แยกได้)
   ใช้ได้ 2 ทาง: ใส่ class ที่ตัว svg (.mk.is-busy / .is-done / .is-fail) หรือให้แถวคำตอบเป็นตัวกำหนด (.airow.busy / .airow.errrow)
   svg มี width/height + สีสำรองในตัว (ป้ายสถานะซ่อนด้วย display="none") = หน้าตาถูกต้องแม้ไฟล์นี้โหลดไม่ขึ้น · กฎข้างล่างทับค่าเหล่านี้
   ขยับเฉพาะ fill / stroke / stroke-width / stroke-dashoffset (ไม่มี transform/opacity) → เบราว์เซอร์ไม่แยกเลเยอร์ ภาพคมที่จอ 100/125/150%
     และกำลังคิดหลายแถวพร้อมกันก็ไม่เพิ่มภาระการวาด
   ไม่มี id ใน svg → ใส่ซ้ำกี่ชุดในหน้าเดียวก็ได้ */
.mk{display:block;flex:none;overflow:visible;
  --mk-core:#e8a33c;   /* แกนกลาง (อำพัน) */
  --mk-arm:#d4912a;    /* แขน — อำพันเข้มกว่าแกนเล็กน้อยบนพื้นสว่าง ให้เส้นบางไม่จาง · บนพื้นเข้มใช้สีเดียวกับแกน */
  --mk-lens:#fff;      /* เลนส์ */
  --mk-dot:#3e2f20;    /* จุดในเลนส์ — เข้มเสมอ (เลนส์ขาวทั้งบนพื้นสว่างและเข้ม) */
  --mk-hot:#e65100;    /* โหนดที่ติดไฟตอนกำลังคิด (3.6:1 บน #fafafa) */
  --mk-ok:#2e7d32;--mk-bad:#c62828;
  --mk-bg:#fafafa}     /* สีขอบเว้นรอบป้ายสถานะ = สีพื้นที่มาสคอตวางอยู่ */
.mk-a{stroke:var(--mk-arm)}
.mk-c{fill:var(--mk-core)}
.mk-lens{fill:var(--mk-lens)}
.mk-dot{stroke:var(--mk-dot)}          /* จุดในเลนส์ = เส้นยาว 0 หัวมน (ขยับด้วย stroke-dashoffset ไม่ต้องใช้ transform) */
.mk-dot0{fill:var(--mk-dot)}           /* จุดของ MARK_SM (ไม่ขยับ) */
.mk-n{stroke:currentColor;stroke-width:0}
.mk-b>circle:first-child{stroke:var(--mk-bg)}
.mk-ok>circle:first-child{fill:var(--mk-ok)}
.mk-bad>circle:first-child{fill:var(--mk-bad)}

/* ---- ขนาดช่อง (สี่เหลี่ยมจัตุรัส · ≤24px ใช้ MARK_SM · ตั้งแต่ 36px ใช้ MARK) ---- */
.brand .mk,#navMascot .mk{width:24px;height:24px}                 /* แถบบนสีเข้ม ข้างคำว่า AI CHAT (chat · index · usage · changelog) — MARK_SM */
#navMascot{display:flex;width:24px;height:24px;flex:none}
.mascot{width:36px;height:36px;flex:none;margin-bottom:4px;color:var(--mk-brand,#5d452e)}   /* ข้างการ์ดคำตอบ (.airow) — MARK */
.mascot .mk{width:100%;height:100%}
#helloMascot{display:flex;justify-content:center;min-height:72px;margin-bottom:12px;color:var(--mk-brand,#5d452e)}   /* จองที่ไว้ก่อนสคริปต์ใส่ — หน้าไม่กระตุก */
#helloMascot .mk{width:72px;height:72px}
.stage .m .mk{width:96px;height:96px;color:var(--mk-brand,#5d452e)}   /* index.html เวทีใหญ่ · ใส่ class mk-hover ที่ .m = ชี้แล้วโหนดติดไฟ */
.code .mk{width:36px;height:36px}                                     /* login.html ชิปพื้นเข้ม 50×50 — MARK */

/* ---- บนพื้นเข้ม (แถบบน · ชิปหน้า login · .mk.on-dark): โหนดครีม · แขนสีเดียวกับแกน · สีสถานะสว่างขึ้น ---- */
.nav .mk,.topbar .mk,.code .mk,.mk.on-dark{color:#f6efe2;--mk-arm:var(--mk-core);--mk-hot:#ffa726;--mk-ok:#43a047;--mk-bad:#e53935;--mk-bg:#2a2118}

/* ---- กำลังคิด: โหนดติดไฟส้ม+พองขึ้นทีละดวง ซ้ายบน→ขวาบน→ขวาล่าง→ซ้ายล่าง (รอบละ 1.6 วิ) · จุดในเลนส์มองไปทางดวงที่ติด ---- */
.mk.is-busy .mk-n,.airow.busy .mk-n{animation:mk-node 1.6s ease-in-out infinite}
.mk.is-busy .mk-n2,.airow.busy .mk-n2{animation-delay:.4s}
.mk.is-busy .mk-n3,.airow.busy .mk-n3{animation-delay:.8s}
.mk.is-busy .mk-n4,.airow.busy .mk-n4{animation-delay:1.2s}
.mk.is-busy .mk-dot,.airow.busy .mk-dot{animation:mk-scan 1.6s ease-in-out infinite}
@media (hover:hover){   /* ชี้เมาส์ที่ .mk-hover = เล่นท่ากำลังคิด · เฉพาะอุปกรณ์ที่มีเมาส์ (จอสัมผัสแตะแล้วจะค้าง) */
  .mk-hover:hover .mk-n{animation:mk-node 1.6s ease-in-out infinite}
  .mk-hover:hover .mk-n2{animation-delay:.4s}
  .mk-hover:hover .mk-n3{animation-delay:.8s}
  .mk-hover:hover .mk-n4{animation-delay:1.2s}
  .mk-hover:hover .mk-dot{animation:mk-scan 1.6s ease-in-out infinite}
}
/* โหนด: สี currentColor→ส้ม + ขอบหนาขึ้น (= พองขึ้น 28% โดยไม่ใช้ scale) · ขอบเปลี่ยนสีไปพร้อมไส้ ไม่งั้นช่วงเปลี่ยนสีเห็นไส้สีสนิมในวงส้ม */
@keyframes mk-node{0%,46%,100%{fill:currentColor;stroke:currentColor;stroke-width:0}12%,24%{fill:var(--mk-hot);stroke:var(--mk-hot);stroke-width:2.5}}
/* จุดในเลนส์: dashoffset -4.5 = กลาง · -2 = ซ้าย · -7 = ขวา (หน่วยของตาราง 36)
   ดวงที่ติดเต็มที่: ซ้ายบน 12–24% · ขวาบน 37–49% · ขวาล่าง 62–74% · ซ้ายล่าง 87–99% → จุดอยู่ซ้าย 0–25% และ 86–100% · อยู่ขวา 37–74% (เลื่อนไปพร้อมดวงถัดไปที่กำลังติด) */
@keyframes mk-scan{0%,25%,86%,100%{stroke-dashoffset:-2}37%,74%{stroke-dashoffset:-7}}

/* ---- ตอบเสร็จ = ป้ายเขียว ✓ · ส่งไม่สำเร็จ = ป้ายแดง ! (ทับโหนดขวาบน · มีเฉพาะใน MARK) ---- */
.mk.is-done .mk-ok,.airow:not(.busy):not(.errrow) .mk-ok{display:inline}
.mk.is-fail .mk-bad,.airow.errrow .mk-bad{display:inline}
/* ป้าย ✓ แสดงเฉพาะคำตอบล่าสุด: คำตอบที่มีแถวคำตอบอื่นตามหลัง (รวมแถวที่กำลังคิด/ส่งไม่สำเร็จ) ไม่มีป้าย
   ป้ายแดง ! แสดงทุกแถวที่ส่งไม่สำเร็จ (กดส่งซ้ำได้ทุกแถว)
   เบราว์เซอร์ที่ไม่รองรับ :has() ข้ามกฎนี้ → ✓ ขึ้นทุกคำตอบที่จบแล้ว หน้าตายังถูกต้อง */
.airow:not(.busy):not(.errrow):has(~ .airow) .mk-ok{display:none}

/* ---- ลดการเคลื่อนไหว: ไม่ขยับ — กำลังคิด = โหนดทั้ง 4 สีส้มนิ่ง ๆ ---- */
@media (prefers-reduced-motion:reduce){
  .mk *{animation:none!important}
  .mk.is-busy .mk-n,.airow.busy .mk-n{fill:var(--mk-hot)}
}
@media (prefers-reduced-motion:reduce) and (hover:hover){   /* จอสัมผัสไม่มี hover จริง — แตะแล้ว :hover ค้าง โหนดจะส้มค้างจนแตะที่อื่น */
  .mk-hover:hover .mk-n{fill:var(--mk-hot)}
}