/* หมวด pawn ของ UI ใหม่: จำนำ / ซ่อม / แชทลูกค้า (คู่กับ r-pawn.js) — ใช้ token สีชุดเดียวกับ demo.css */

/* การ์ดตัวเลขสรุปหัวหน้า */
.pw-sum .pw-stat { margin:0; padding:12px var(--s4); }
.pw-stat .card-head { margin-bottom:4px; }
.pw-stat .card-head .t { font-size:14px; }
.pw-stat .pw-v { font-size:24px; font-weight:700; letter-spacing:-.5px; line-height:1.15; }
.pw-stat.full { grid-column:1 / -1; }
.pw-stat.pw-hot { background:rgba(255,69,58,.12); }

/* การ์ดรายการ (จำนำ / สลิป) */
.pw-card { background:var(--card); border-radius:var(--r-card); overflow:hidden; margin-bottom:var(--s3); }
.pw-card.hot { box-shadow:inset 3px 0 0 var(--red); }
.pw-card.soon { box-shadow:inset 3px 0 0 var(--orange); }
.pw-card .row .val { display:flex; flex-direction:column; align-items:flex-end; gap:4px; }
.pw-foot { display:flex; align-items:center; gap:var(--s2); padding:10px var(--s4) 12px; border-top:1px solid var(--line); }
.pw-foot-l { flex:1; min-width:0; }
.pw-foot-b { display:flex; gap:6px; flex:none; flex-wrap:wrap; justify-content:flex-end; }
.pw-next { font-size:14px; font-weight:600; }
.pw-next.late { color:var(--red); } .pw-next.soon { color:var(--orange); }
.pw-rem { font-size:12px; color:var(--muted); display:flex; align-items:center; gap:4px; }
.pw-rem.yes { color:var(--green); }
.btn.sm { font-size:14px; padding:7px 13px; }
.badge.pw-work { background:rgba(191,90,242,.16); color:var(--purple); }
.pw-badges { display:flex; gap:6px; flex-wrap:wrap; margin:-6px 0 8px; }
.pw-warn { display:flex; gap:10px; align-items:center; background:rgba(255,69,58,.12); border:1px solid rgba(255,69,58,.35); color:var(--red);
  border-radius:var(--r-inner); padding:10px 12px; margin-bottom:var(--s3); font-size:14px; }
.pw-warn > i { font-size:20px; flex:none; }
.pw-err { color:var(--red); font-size:14px; font-weight:600; margin:0 0 var(--s3); padding:0 var(--s1); }
.pw-lbl { font-size:13px; color:var(--muted); margin:4px var(--s1) 6px; }
.pw-bad { color:var(--red) !important; }
.pw-total { font-size:15px; }
.pw-total .sub { color:var(--muted); font-size:13px; margin-top:2px; }
.circ-btn.pw-x { width:30px; height:30px; font-size:14px; background:var(--card-2); }
.sheet .chips .c { background:var(--card); }

/* ตารางรอบดอก */
.pw-plist { background:var(--card); border-radius:var(--r-card); overflow:hidden; margin-bottom:var(--s3); }
.pw-per + .pw-per { border-top:1px solid var(--line); }
.pw-per .row .val { display:flex; flex-direction:column; align-items:flex-end; gap:3px; }
.pw-pacts { display:flex; gap:6px; flex-wrap:wrap; padding:0 var(--s4) 12px 58px; }

/* รูปย่อ */
.pw-thumbs { display:grid; grid-template-columns:repeat(4, 1fr); gap:var(--s2); margin-bottom:var(--s3); }
.pw-th { position:relative; aspect-ratio:1; border-radius:10px; overflow:hidden; background:var(--card-2); }
.pw-th img { width:100%; height:100%; object-fit:cover; display:block; cursor:zoom-in; }
.pw-th-x { position:absolute; top:4px; right:4px; width:24px; height:24px; border-radius:50%; border:0; background:rgba(0,0,0,.6); color:#fff; display:grid; place-items:center; font-size:12px; }

/* กล่องดูรูป */
.sheet-wrap.pw-lb { background:rgba(0,0,0,.92); align-items:stretch; }
.sheet-wrap.pw-lb .sheet { background:transparent; max-height:none; height:100%; border-radius:0; padding:0; display:flex; flex-direction:column; }
.sheet-wrap.pw-lb .grab { display:none; }
.sheet-wrap.pw-lb .sheet-x { z-index:2; top:calc(env(safe-area-inset-top) + 12px); background:rgba(255,255,255,.16); color:#fff; }
.sheet-wrap.pw-lb .dyn-body { flex:1; min-height:0; display:flex; }
.sheet-wrap.pw-lb .sheet > div:last-child { display:none; }
.pw-lb-in { flex:1; overflow:auto; display:flex; align-items:center; justify-content:center; }
.pw-lb-in img { max-width:100%; max-height:100%; object-fit:contain; cursor:zoom-in; }
.pw-lb-in.zoom { display:block; }
/* ปัดซ้าย/ขวาเปลี่ยนรูปเอง — ห้ามเบราว์เซอร์เอาไปเป็นท่าย้อนหน้า (Chrome/Android) · ซูมอยู่ค่อยให้เลื่อนแนวนอนได้ */
.pw-lb-in:not(.zoom) { touch-action:pan-y pinch-zoom; overscroll-behavior:contain; }
.pw-lb-n { position:absolute; top:calc(env(safe-area-inset-top) + 18px); left:50%; transform:translateX(-50%); z-index:2; color:#fff; font-size:15px; font-weight:600; background:rgba(255,255,255,.16); padding:4px 12px; border-radius:999px; }
.pw-lb-nav { position:absolute; top:50%; transform:translateY(-50%); z-index:2; width:44px; height:44px; border-radius:50%; border:none; background:rgba(255,255,255,.16); color:#fff; font-size:26px; line-height:1; }
.pw-lb-nav[data-d="-1"] { left:10px; } .pw-lb-nav[data-d="1"] { right:10px; }
.pw-lb-in.zoom img { max-width:none; max-height:none; width:200%; cursor:zoom-out; }

/* แชท: รายชื่อห้อง */
.pw-thread { align-items:flex-start; }
.pw-thread .ic.pimg { color:#fff; font-size:20px; display:grid; place-items:center; }
.pw-thread .val { display:flex; flex-direction:column; align-items:flex-end; gap:4px; }
.pw-thread .sub.pw-i { font-style:italic; }
.pw-tags { display:flex; flex-wrap:wrap; gap:4px; margin-top:4px; }
.pw-tag { font-size:11px; padding:1px 7px; border-radius:var(--r-pill); background:var(--card-2); color:var(--muted); }
.pw-tag.ok { background:rgba(48,209,88,.16); color:var(--green); }
.pw-tag.bad { background:rgba(255,69,58,.16); color:var(--red); }
.pw-tag.oa { background:rgba(10,132,255,.16); color:var(--tint); }

/* แชท: ห้องเต็มจอ (ความสูงตั้งจาก visualViewport ใน r-pawn.js) — ห้าม sticky ในแผ่น ใช้ flex แทน */
.sheet-wrap.pw-room { inset:auto 0 auto 0; top:0; height:100vh; background:var(--bg); align-items:stretch; }
.sheet-wrap.pw-room .sheet { max-height:none; height:100%; border-radius:0; padding:0; display:flex; flex-direction:column; }
.sheet-wrap.pw-room .grab, .sheet-wrap.pw-room .sheet-x, .sheet-wrap.pw-room .sheet > div:last-child { display:none; }
.sheet-wrap.pw-room .dyn-body { flex:1; min-height:0; display:flex; flex-direction:column; }
.pw-room-head { display:flex; align-items:center; gap:10px; padding:calc(env(safe-area-inset-top) + 10px) var(--s4) 10px; border-bottom:1px solid var(--line); flex:none; }
.pw-av { width:36px; height:36px; border-radius:50%; background:var(--card-2) center/cover no-repeat; flex:none; }
.pw-av.sm { width:28px; height:28px; align-self:flex-start; }
.pw-av.blank { visibility:hidden; }
.pw-rh { min-width:0; }
.pw-rh .n { font-weight:600; font-size:17px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.pw-rh .s { font-size:12px; color:var(--muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.pw-room-ct { flex:none; padding:0 var(--s4); }
.pw-room-ct .chips { margin:8px 0 0; }
.pw-room-ct .chips .c { font-size:13px; padding:5px 11px; }
.pw-room-scr { flex:1; min-height:0; overflow-y:auto; -webkit-overflow-scrolling:touch; overscroll-behavior:contain; padding:8px var(--s4) 12px; display:flex; flex-direction:column; gap:4px; }
.pw-daysep { align-self:center; font-size:12px; color:var(--muted); background:var(--card); border-radius:var(--r-pill); padding:2px 10px; margin:10px 0 4px; }
.pw-msg { display:flex; align-items:flex-end; gap:6px; }
.pw-msg:not(.cont) { margin-top:6px; }
.pw-msg.out { justify-content:flex-end; }
.pw-msg .bubble { max-width:74%; white-space:pre-wrap; word-break:break-word; }
.pw-msg .bubble.img { padding:4px; }
.pw-msg .bubble.plain { background:transparent; padding:0; }
.pw-cimg { max-width:200px; max-height:260px; border-radius:12px; display:block; cursor:zoom-in; }
.pw-stk { width:110px; height:110px; object-fit:contain; display:block; }
.pw-src { font-size:11px; opacity:.72; margin-top:2px; }
.bubble.in .pw-src { color:var(--muted); }
.pw-time { font-size:11px; color:var(--muted); flex:none; }
.pw-room-comp { flex:none; border-top:1px solid var(--line); padding:8px var(--s4) calc(env(safe-area-inset-bottom) + 8px); background:var(--bg); }
.sheet-wrap.pw-room.kb-open .pw-room-comp { padding-bottom:8px; }
.pw-quick { display:flex; gap:6px; overflow-x:auto; scrollbar-width:none; margin-bottom:6px; }
.pw-quick:empty { display:none; }
.pw-quick .c { flex:none; font-size:13px; padding:5px 11px; border-radius:var(--r-pill); background:var(--card); color:var(--ink-2); cursor:pointer; }
.pw-inrow { display:flex; align-items:flex-end; gap:8px; }
.pw-inrow textarea { flex:1; min-width:0; resize:none; border:0; outline:none; background:var(--card); color:var(--ink); font:inherit; font-size:16px; border-radius:18px; padding:8px 14px; max-height:120px; }
.pw-attach, .pw-send { width:38px; height:38px; border-radius:50%; border:0; flex:none; display:grid; place-items:center; font-size:19px; }
.pw-attach { background:var(--card); color:var(--tint); }
.pw-send { background:var(--tint); color:#fff; }
.pw-attach[disabled], .pw-send[disabled] { opacity:.4; }
.pw-note { font-size:11px; color:var(--muted); margin-top:4px; }
.pw-room-comp.typing .pw-note:not(.pw-bad) { display:none; }