/* หน้าจอมือถือจำลอง LINE — ใช้ทั้งหน้า Landing, ระบบร้าน และหน้าผู้ดูแล */
.lphone { width: 300px; max-width: 100%; flex: none; margin: 0 auto; background: #0b0f14; border-radius: 40px; padding: 10px;
  box-shadow: 0 30px 60px -20px #0b1f2a66, inset 0 0 0 2px #2a313b; font-family: 'IBM Plex Sans Thai', system-ui, sans-serif; }
.lphone .scr { position: relative; height: 580px; border-radius: 31px; overflow: hidden; display: flex; flex-direction: column; background: #8fa9cf; }
.lphone.short .scr { height: 520px; }
.lstatus { display: flex; justify-content: space-between; align-items: center; padding: 10px 22px 4px; font-size: 12px; font-weight: 600; color: #111; background: #fff; }
.lstatus .isl { width: 84px; height: 22px; background: #0b0f14; border-radius: 99px; }
.lhead { display: flex; align-items: center; gap: 8px; padding: 6px 12px 10px; background: #fff; border-bottom: 1px solid #e5e7eb; font-size: 15px; font-weight: 700; color: #111; }
.lhead .back { font-size: 24px; line-height: 1; color: #111; font-weight: 400; }
.lhead .shield { display: inline-grid; place-items: center; width: 16px; height: 16px; border-radius: 50%; background: #06c755; color: #fff; font-size: 10px; }
.lhead .ic { margin-left: auto; color: #6b7280; font-size: 15px; letter-spacing: 8px; }
.lchat { flex: 1; overflow-y: auto; padding: 10px 10px 14px; display: flex; flex-direction: column; gap: 10px; scrollbar-width: none; }
.lchat::-webkit-scrollbar { display: none; }
.lday { align-self: center; background: #0000002e; color: #fff; font-size: 11px; padding: 2px 10px; border-radius: 99px; }
.lmsg { display: flex; gap: 6px; align-items: flex-start; }
.lmsg .av { flex: none; width: 32px; height: 32px; border-radius: 50%; background: #0f766e; color: #fff; font-weight: 700; font-size: 13px; display: grid; place-items: center; }
.lmsg .who { font-size: 11px; color: #f8fafc; margin: 0 0 3px 2px; }
.lmsg .row { display: flex; align-items: flex-end; gap: 4px; }
.lbub { max-width: 210px; background: #fff; color: #111; border-radius: 4px 18px 18px 18px; padding: 8px 11px; font-size: 12.5px; line-height: 1.5;
  white-space: pre-wrap; word-break: break-word; box-shadow: 0 1px 1px #0000000f; }
.lmeta { font-size: 9.5px; color: #eef2f7; white-space: nowrap; line-height: 1.25; }
.lmsg.me { flex-direction: row-reverse; }
.lmsg.me .row { flex-direction: row-reverse; }
.lmsg.me .lbub { background: #8de055; border-radius: 18px 4px 18px 18px; }
.lmsg.me .lmeta { text-align: right; }
.linput { display: flex; align-items: center; gap: 10px; padding: 8px 12px 18px; background: #fff; color: #9ca3af; font-size: 18px; }
.linput .box { flex: 1; background: #f1f5f9; border-radius: 99px; padding: 6px 12px; font-size: 12.5px; color: #9ca3af; }
/* แจ้งเตือนเด้งบนหน้าจอ */
.lpush { position: absolute; z-index: 5; left: 8px; right: 8px; top: 34px; display: flex; gap: 10px; align-items: flex-start;
  background: #f8fafcf2; backdrop-filter: blur(14px); border-radius: 18px; padding: 10px 12px; box-shadow: 0 10px 30px #0b1f2a40; }
.lpush .app { flex: none; width: 34px; height: 34px; border-radius: 9px; background: #06c755; color: #fff; font-weight: 800; font-size: 10px; display: grid; place-items: center; }
.lpush b { font-size: 13px; color: #111; display: flex; justify-content: space-between; gap: 8px; }
.lpush b small { font-weight: 400; color: #6b7280; font-size: 11px; }
.lpush p { margin: 1px 0 0; font-size: 12px; line-height: 1.4; color: #1f2937; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }

/* หน้าจอตัวอย่างแบบนิ่ง: แจ้งเตือนเด้งค้างไว้แป๊บเดียวแล้วเลื่อนขึ้นไป ให้เห็นแชตด้านล่าง */
.lpush.peek { animation: lpushIn .5s .2s cubic-bezier(.2, .9, .3, 1.2) both, lpushOut .45s 3s ease-in forwards; }

/* แอนิเมชัน (หน้า Landing): เพิ่ม class "play" เพื่อเล่น */
.lphone.anim .lpush { opacity: 0; transform: translateY(-120%); }
.lphone.anim .lmsg, .lphone.anim .lday { opacity: 0; transform: translateY(10px); }
.lphone.anim.play .lpush { animation: lpushIn .55s .4s cubic-bezier(.2, .9, .3, 1.2) forwards, lpushOut .45s 3.6s ease-in forwards; }
.lphone.anim.play .lmsg, .lphone.anim.play .lday { animation: lmsgIn .45s ease-out forwards; animation-delay: var(--d, 0s); }
@keyframes lpushIn { to { opacity: 1; transform: none; } }
@keyframes lpushOut { to { opacity: 0; transform: translateY(-120%); } }
@keyframes lmsgIn { to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) {
  .lphone.anim .lmsg, .lphone.anim .lday { opacity: 1; transform: none; animation: none !important; }
  .lphone.anim .lpush { display: none; }
}