/* p3mate.css — ตัวละครประจำชั้น ป.3 "น้องเข็มทิศ"
   ลอยมุมล่างขวา ทักตอนเปิดหน้า และพูดตอนเด็กกดดูเฉลย
   ออกแบบให้ "เพิ่มเข้าไปเฉย ๆ" ไม่แตะโครงหน้าเดิม ถ้าภาพโหลดไม่ได้จะซ่อนตัวเองทั้งก้อน */

#p3mate{
  position:fixed; right:14px; bottom:14px; z-index:40;
  display:flex; align-items:flex-end; gap:8px;
  pointer-events:none;                 /* ไม่บังปุ่มอะไรของเดิม */
  opacity:0; transform:translateY(10px);
  transition:opacity .35s ease, transform .35s ease;
}
#p3mate.on{ opacity:1; transform:none }
#p3mate.hide{ display:none !important }

#p3mate img{
  width:96px; height:auto; display:block;
  filter:drop-shadow(0 6px 10px rgba(0,0,0,.22));
  pointer-events:auto; cursor:pointer;  /* กดตัวละครให้พูดอีกได้ */
  transition:transform .2s ease;
}
#p3mate img:hover{ transform:translateY(-3px) }
#p3mate img:active{ transform:translateY(0) scale(.97) }

#p3bub{
  order:-1;                             /* บอลลูนอยู่ซ้ายของตัวละคร */
  max-width:min(46vw,230px);
  background:#fff; color:#1F2937;
  font-family:'Kanit','Sarabun',system-ui,sans-serif;
  font-size:.83rem; line-height:1.45;
  padding:9px 12px; border-radius:14px 14px 4px 14px;
  border:1px solid #E5E7EB;
  box-shadow:0 6px 16px rgba(0,0,0,.14);
  opacity:0; transform:translateY(6px) scale(.96);
  transition:opacity .25s ease, transform .25s ease;
  pointer-events:none;
}
#p3bub.on{ opacity:1; transform:none }

@media (prefers-color-scheme:dark){
  #p3bub{ background:#1F2937; color:#F3F4F6; border-color:#374151 }
}

/* จอเล็ก: บอลลูนวางไว้ "เหนือ" ตัวละคร ไม่ใช่ข้าง ๆ
   ถ้าวางข้าง ๆ บนจอ 375px มันจะพาดขวางบรรทัดในบทเรียน อ่านยาก */
@media (max-width:520px){
  #p3mate{
    right:8px; bottom:8px; gap:6px;
    flex-direction:column; align-items:flex-end;
  }
  #p3mate img{ width:68px }
  #p3bub{
    font-size:.78rem; padding:7px 10px;
    max-width:min(70vw,240px);
    border-radius:14px 14px 14px 4px;   /* หางบอลลูนชี้ลงหาตัวละคร */
  }
}

/* เด็กบางคนไวต่อการเคลื่อนไหว */
@media (prefers-reduced-motion:reduce){
  #p3mate,#p3mate img,#p3bub{ transition:none !important }
}

/* เวลาพิมพ์หน้าออกกระดาษ ไม่ต้องมีตัวละคร */
@media print{ #p3mate{ display:none !important } }