/* ระบบแชทหน้าเว็บ (ฝั่งลูกค้า) — ใช้ตัวแปรสีจาก style.css (--o, --o2, --ink, --line, --bg) */
.pphc{position:fixed;right:clamp(12px,2vw,24px);bottom:clamp(12px,2vw,24px);z-index:80;font-family:inherit;font-size:15px;color:var(--ink,#1F2430)}
body:has(#ckw) .pphc{display:none}              /* ซ่อนระหว่างที่แบนเนอร์คุกกี้ยังเปิดอยู่ ไม่ให้ทับปุ่มยอมรับ */
.pphc *{box-sizing:border-box}
.pphc [hidden]{display:none!important}

.pphc-l{position:relative;width:58px;height:58px;border:0;border-radius:50%;background:var(--o,#F04B24);color:#fff;cursor:pointer;display:flex;align-items:center;justify-content:center;box-shadow:0 6px 20px rgba(240,75,36,.4);transition:transform .2s,box-shadow .2s}
.pphc-l:hover{transform:translateY(-2px);box-shadow:0 10px 24px rgba(240,75,36,.45)}
.pphc-l:focus-visible,.pphc-x:focus-visible,.pphc-c button:focus-visible,.pphc-f button:focus-visible{outline:3px solid #1F2430;outline-offset:2px}
.pphc-b{position:absolute;top:-4px;right:-4px;min-width:22px;height:22px;padding:0 6px;border-radius:11px;background:#1F2430;color:#fff;font-size:12px;font-weight:400;line-height:22px;text-align:center;border:2px solid #fff}

.pphc-p{position:absolute;right:0;bottom:72px;width:min(380px,calc(100vw - 24px));height:min(580px,calc(100dvh - 110px));display:flex;flex-direction:column;background:#fff;border-radius:16px;box-shadow:0 14px 44px rgba(31,36,48,.28);overflow:hidden;animation:pphc-in .22s ease-out}
@keyframes pphc-in{from{opacity:0;transform:translateY(12px) scale(.98)}to{opacity:1;transform:none}}

.pphc-p header{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:14px 16px;background:var(--o2,#F04B24);color:#fff}
.pphc-hd{display:flex;flex-direction:column;min-width:0}
.pphc-t{font-weight:400;font-size:16px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pphc-s{font-size:12.5px;opacity:.95;min-height:1.2em}
.pphc-x{flex:none;width:34px;height:34px;border:0;border-radius:50%;background:rgba(255,255,255,.18);color:#fff;font-size:16px;cursor:pointer}
.pphc-x:hover{background:rgba(255,255,255,.3)}

.pphc-m{flex:1;overflow-y:auto;overscroll-behavior:contain;padding:14px 14px 6px;background:var(--bg,#F7F7F8);display:flex;flex-direction:column;gap:8px}
.pphc-g{display:flex;flex-direction:column;gap:8px}
.pphc-off{font-size:13px;line-height:1.5;color:#6B4A00;background:#FFF4D6;border:1px solid #F5DFA0;border-radius:10px;padding:8px 11px}

.pphc-r{display:flex;flex-direction:column;max-width:84%}
.pphc-r.v{align-self:flex-end;align-items:flex-end}
.pphc-r.a{align-self:flex-start;align-items:flex-start}
.pphc-bb{padding:9px 13px;border-radius:16px;line-height:1.5;white-space:pre-wrap;overflow-wrap:anywhere;word-break:break-word}
.pphc-bb.v{background:var(--o2,#F04B24);color:#fff;border-bottom-right-radius:5px}
.pphc-bb.a{background:#fff;color:var(--ink,#1F2430);border:1px solid var(--line,#E8EAEE);border-bottom-left-radius:5px}
.pphc-g .pphc-bb.a{max-width:92%;align-self:flex-start}
.pphc-bb a{color:inherit;text-decoration:underline}
.pphc-w{font-size:12px;color:var(--mut,#6B7280);margin:0 4px 2px}
.pphc-tm{font-size:11.5px;color:var(--mut,#6B7280);margin:2px 4px 0}
.pphc-r.pend .pphc-bb{opacity:.65}
.pphc-r.fail{cursor:pointer}
.pphc-r.fail .pphc-bb{background:#fff;color:#B3261E;border:1px solid #B3261E}
.pphc-r.fail .pphc-tm{color:#B3261E}
.pphc-sys{align-self:center;text-align:center;font-size:12.5px;color:var(--mut,#6B7280);background:#fff;border:1px dashed var(--line,#E8EAEE);border-radius:10px;padding:7px 12px;margin-top:4px}

.pphc-c{display:flex;flex-wrap:wrap;gap:6px;padding:8px 14px 0;background:var(--bg,#F7F7F8)}
.pphc-c button{border:1px solid var(--o2,#F04B24);color:var(--o2,#F04B24);background:#fff;border-radius:999px;padding:5px 12px;font:inherit;font-size:13px;cursor:pointer}
.pphc-c button:hover{background:var(--o3,#FEEEE9)}

.pphc-pf{display:flex;gap:6px;padding:8px 14px 0;background:var(--bg,#F7F7F8)}
.pphc-pf input{flex:1;min-width:0;border:1px solid var(--line,#E8EAEE);border-radius:10px;padding:8px 10px;font:inherit;font-size:16px;background:#fff;color:inherit}

.pphc-f{display:flex;align-items:flex-end;gap:8px;padding:10px 12px;background:var(--bg,#F7F7F8)}
.pphc-f textarea{flex:1;min-width:0;resize:none;border:1px solid var(--line,#E8EAEE);border-radius:18px;padding:9px 14px;font:inherit;font-size:16px;line-height:1.4;max-height:110px;background:#fff;color:inherit}
.pphc-f textarea:focus,.pphc-pf input:focus{outline:2px solid var(--o,#F04B24);outline-offset:0;border-color:transparent}
.pphc-f button{flex:none;width:42px;height:42px;border:0;border-radius:50%;background:var(--o2,#F04B24);color:#fff;display:flex;align-items:center;justify-content:center;cursor:pointer}
.pphc-f.busy button{opacity:.55;pointer-events:none}
.pphc-n{margin:0;padding:0 14px 10px;background:var(--bg,#F7F7F8);font-size:11.5px;color:var(--mut,#6B7280);text-align:center}
.pphc-n a{color:inherit;text-decoration:underline}

/* มือถือ : เปิดเต็มจอ */
@media (max-width:520px){
  .pphc-p{position:fixed;inset:0;width:100%;height:100dvh;border-radius:0;bottom:0}
  .pphc-p header{padding-top:max(14px,env(safe-area-inset-top))}
  .pphc-n{padding-bottom:max(10px,env(safe-area-inset-bottom))}
}
@media (prefers-reduced-motion:reduce){.pphc-p{animation:none}.pphc-l{transition:none}}

/* การ์ดสินค้าที่แนบในแชท (มาจากปุ่ม "สอบถามข้อมูล" ในการ์ดสินค้า) */
.pphc-pr{display:flex;align-items:center;gap:10px;margin:8px 12px 0;padding:8px 8px 8px 8px;background:#fff;border:1px solid var(--line,#E8EAEE);border-radius:12px}
.pphc-pr[hidden]{display:none}
.pphc-pr img{flex:none;width:46px;height:46px;object-fit:contain;border-radius:8px;background:#fff}
.pphc-pt{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.pphc-pt b{font-size:13px;font-weight:300;line-height:1.35;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.pphc-pt span{font-size:12.5px;color:var(--o2,#F04B24);font-weight:400}
.pphc-pr button{flex:none;width:28px;height:28px;border:0;border-radius:50%;background:var(--bg,#F7F7F8);color:var(--mut,#6B7280);font-size:18px;line-height:1;cursor:pointer;display:grid;place-items:center;padding:0 0 2px}
.pphc-pr button:hover{background:var(--o3,#FEEEE9);color:var(--o2,#F04B24)}

/* ===== แนบไฟล์ / วางรูปภาพ ===== */
.pphc-f .pphc-a{flex:none;width:38px;height:42px;border-radius:50%;background:none;color:var(--mut,#6B7280);padding:0}
.pphc-f .pphc-a:hover{background:var(--o3,#FEEEE9);color:var(--o2,#F04B24)}
.pphc-ap{display:flex;align-items:center;gap:10px;margin:8px 12px 0;padding:8px;background:#fff;border:1px solid var(--line,#E8EAEE);border-radius:12px}
.pphc-ap[hidden]{display:none}
.pphc-ap img{flex:none;width:46px;height:46px;object-fit:cover;border-radius:8px}
.pphc-ap .pphc-ic{flex:none;width:46px;height:46px;border-radius:8px;background:var(--o3,#FEEEE9);display:grid;place-items:center;font-size:22px}
.pphc-ap .pphc-er{flex:1;color:#D92D20;font-size:13px;line-height:1.4}
.pphc-ap button{flex:none;width:28px;height:28px;border:0;border-radius:50%;background:var(--bg,#F7F7F8);color:var(--mut,#6B7280);font-size:18px;line-height:1;cursor:pointer;display:grid;place-items:center;padding:0 0 2px}
.pphc-ap button:hover{background:var(--o3,#FEEEE9);color:var(--o2,#F04B24)}
.pphc-ap .pphc-pt,.pphc-pr .pphc-pt{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.pphc-p.drop{outline:3px dashed var(--o,#F04B24);outline-offset:-6px}
.pphc-bb .pphc-im{display:block;margin-top:4px}
.pphc-bb .pphc-im:first-child,.pphc-bb .pphc-lp:first-child{margin-top:0}
.pphc-bb .pphc-im img,.pphc-bb .pphc-lp{display:block;max-width:100%;max-height:220px;border-radius:10px;object-fit:contain;background:rgba(0,0,0,.05)}
.pphc-bb .pphc-lp{margin-top:4px;opacity:.7}
.pphc-bb .pphc-pim{margin:0 0 8px}.pphc-bb .pphc-pim img{background:#fff;max-height:180px}
.pphc-bb .pphc-fl{display:flex;align-items:center;gap:8px;margin-top:4px;padding:7px 10px;border-radius:10px;background:rgba(0,0,0,.07);color:inherit;text-decoration:none;word-break:break-all;font-size:14px}
.pphc-bb.v .pphc-fl{background:rgba(255,255,255,.2)}
.pphc-bb .pphc-fl:first-child{margin-top:0}