/* ─────────────────────────────────────────────────────────────
   หน้าเว็บจริง — ใช้ภาษาหน้าตาเดียวกับม็อกอัพ
   มือถือมาก่อน · จอใหญ่ค่อยขยายเป็นหลายคอลัมน์ (ผู้จัดการดูบนคอม)
   ───────────────────────────────────────────────────────────── */
/* ── ปาเลตต์ "กระดาษอุ่น" ────────────────────────────────────
   เจ้าของเคาะ 21 ส.ค. 2569: ใช้ชุดอุ่นเป็นตัวจริงทั้งระบบ

   ⚠️ ก่อนหน้านี้ม็อกอัพแตกเป็นสองชุดปนกัน (อุ่น 11 ไฟล์ · เย็นแบบ tailwind 11 ไฟล์)
      แล้ว app.css ทำตามชุดเย็น ส่วน login.html ทำตามชุดอุ่น
      ⇒ ล็อกอินเสร็จปุ๊บสีเปลี่ยนทั้งจอ เหมือนกระโดดไปคนละแอป
      ตอนนี้ยึดชุดอุ่นตามม็อกอัพชุดใหญ่ล่าสุด (รวม-17หน้าใหม่ · 20 ส.ค.) และตรงกับหน้าล็อกอินแล้ว

   แก้สีทั้งระบบให้แก้ที่นี่ที่เดียว ห้ามใส่ค่าสีดิบๆ ลงไปในหน้าไหน
   ────────────────────────────────────────────────────────── */
:root{
  --ink:#1c1b1a; --line:#e4e0d8; --muted:#8a8478; --bg:#faf8f5;
  --green:#2f7a4f; --green-bg:#e9f3ec; --green-br:#bfe0cb;
  --amber:#a5690f; --amber-bg:#faf1de; --amber-br:#eed7a6;
  --red:#b3402f; --red-bg:#fbeae6; --red-br:#f0b8b1;
  --blue:#2b5a8c; --blue-bg:#e9f1f8; --blue-br:#c9dbec;
  --brand:#1c1b1a;
  /* พื้นหลังอ่อนของแถบ/ชิป — ต้องอมเหลืองให้เข้ากับกระดาษ ไม่ใช่เทาอมฟ้าแบบเดิม */
  --tint:#f1efe9; --tint-2:#e6e2d9;
  /* ⚠️ 'Noto Sans Thai' ต้องมาก่อน 'Segoe UI' — Segoe UI ไม่มีสระ/พยัญชนะไทย
     วางไว้หลังแล้ว Windows จะตกไปใช้ Leelawadee UI สำหรับไทยแต่ใช้ Segoe UI กับตัวเลข
     ⇒ หน้าจอมีสองฟอนต์ปนกัน ความสูงตัวอักษรไม่เท่ากันทั้งหน้า */
  --sans:-apple-system,BlinkMacSystemFont,'Noto Sans Thai','Segoe UI',sans-serif;
  --mono:'SFMono-Regular',Consolas,monospace;
  --tab:64px;
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;padding:0;height:100%}
body{background:var(--bg);color:var(--ink);font-family:var(--sans);line-height:1.5;font-size:15px;
     overscroll-behavior-y:none}
a{color:inherit}

/* หัวจอ — ค้างไว้ตลอด ปุ่มย้อนกลับอยู่ที่เดิมเสมอ */
.top{position:sticky;top:0;z-index:20;background:#fff;border-bottom:1px solid var(--line);
     padding:calc(env(safe-area-inset-top) + 10px) 14px 10px;display:flex;align-items:center;gap:10px}
.top .back{font-size:24px;line-height:1;color:var(--muted);padding:0 4px;cursor:pointer}
.top .t{flex:1;min-width:0}
.top .t b{display:block;font-size:17px;font-weight:800;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.top .t span{display:block;font-size:11.5px;color:var(--muted)}
.top .act{font-size:13px;font-weight:700;color:var(--blue);cursor:pointer;white-space:nowrap}

main{padding:12px 14px calc(var(--tab) + env(safe-area-inset-bottom) + 20px);max-width:900px;margin:0 auto}
/* ในห้องแชทรายคนไม่มีแถบล่าง — ถ้ายังเว้นที่ไว้ ช่องพิมพ์จะลอยสูงจากขอบจอ */
main.notabs{padding-bottom:calc(env(safe-area-inset-bottom) + 12px)}

/* แถบล่าง — นิ้วโป้งถึงทุกปุ่ม */
.tabs{position:fixed;left:0;right:0;bottom:0;z-index:30;background:#fff;border-top:1px solid var(--line);
      display:flex;padding-bottom:env(safe-area-inset-bottom)}
.tabs a{flex:1;text-align:center;padding:8px 2px 9px;font-size:10.5px;color:var(--muted);
        text-decoration:none;font-weight:700}
.tabs a i{display:block;font-size:19px;font-style:normal;line-height:1.25}
.tabs a.on{color:var(--ink)}
.tabs a.on i{transform:translateY(-1px)}

/* การ์ด / แถว */
.card{background:#fff;border:1px solid var(--line);border-radius:13px;padding:12px 13px;margin-bottom:9px}
.card.hot{border-color:var(--red-br);background:var(--red-bg)}
.card.warn{border-color:var(--amber-br);background:var(--amber-bg)}
.card .hd{display:flex;justify-content:space-between;align-items:baseline;gap:8px}
.card .nm{font-size:15px;font-weight:800}
.card .sub{font-size:12px;color:var(--muted);margin-top:2px}
.sect{font-size:11.5px;font-weight:800;color:var(--muted);margin:14px 2px 7px}
/* ป้ายสถานะ — ม็อกอัพใช้ **สีทึบตัวหนังสือขาว** ไม่ใช่พื้นจาง
   เหตุผล: ในคิวแพ็กกับหน้าออเดอร์มีป้ายเรียงกันหลายสิบอัน
   พื้นจางกวาดตาแล้วแยกสีไม่ออก ต้องเพ่งอ่านทีละอัน ซึ่งช้าเกินไปสำหรับคนที่ยืนแพ็กของอยู่ */
.pill{font-size:10.5px;font-weight:800;padding:2px 9px;border-radius:20px;
      background:var(--tint-2);color:var(--muted);white-space:nowrap}
.pill.g{background:var(--green);color:#fff}
.pill.y{background:var(--amber);color:#fff}
.pill.r{background:var(--red);color:#fff}
.pill.b{background:var(--blue);color:#fff}

.kpis{display:flex;gap:8px;margin-bottom:10px}
.kpi{flex:1;background:#fff;border:1px solid var(--line);border-radius:13px;padding:11px 8px;text-align:center}
.kpi b{display:block;font-size:19px;font-weight:800}
.kpi span{display:block;font-size:10.5px;color:var(--muted);margin-top:2px}
.kpi.red b{color:var(--red)}

/* ปุ่ม — สูงพอให้กดด้วยนิ้วโป้งขณะยืนอยู่หน้ากองพัสดุ */
.btn{display:block;width:100%;border:0;border-radius:13px;background:var(--brand);color:#fff;
     font-family:inherit;font-size:16px;font-weight:800;padding:15px;cursor:pointer;margin-top:10px}
.btn.g{background:var(--green)} .btn.r{background:var(--red)}
/* ต้องอยู่ **หลัง** .btn.g/.btn.r ไม่งั้นสีเขียว/แดงชนะแล้วปุ่มที่กดไม่ได้ยังดูเหมือนกดได้
   ปุ่มที่ดูกดได้แต่กดไม่ติด คือสิ่งที่ทำให้คนกดซ้ำแล้วหงุดหงิด */
.btn:disabled,.btn.g:disabled,.btn.r:disabled,.btn.ghost:disabled{
  background:var(--tint-2);color:var(--muted);border-color:var(--tint-2);cursor:not-allowed}
.btn.ghost{background:#fff;border:1.5px solid var(--line);color:var(--ink)}
.btn2{display:flex;gap:8px;margin-top:10px}
.btn2 .btn{margin-top:0}

label{display:block;font-size:11.5px;font-weight:800;color:var(--muted);margin:10px 2px 5px}
input,select,textarea{width:100%;font-family:inherit;font-size:16px;padding:12px;border-radius:11px;
  border:1.5px solid var(--line);background:#fff;color:var(--ink)}
input:focus,select:focus,textarea:focus{outline:0;border-color:var(--brand)}
/* ── แถบสลับ 2 แบบ · ใช้ผิดแบบแล้วอ่านไม่ออกทันที ───────────
   ม็อกอัพมีสองคอมโพเนนต์คนละตัว อย่าเอามาปนกัน:

   ① .seg — ตัวเลือกน้อย (2–4 อัน) ที่ต้องเห็นครบพร้อมกัน
      เช่น "เก็บเงินปลายทาง / โอนมาก่อน" · "ของฉัน / ทุกคน"
      แบ่งพื้นที่เท่ากันเต็มความกว้าง เพราะเป็นการเลือกทางที่มีผลกับทั้งใบ

   ② .seg.scroll — ตัวกรองที่มีเยอะและเพิ่มได้เรื่อยๆ
      เช่น ประวัติสต็อกมี 14 ประเภท · แชทมีสถานะ+เพจ
      ⚠️ ใช้ ① กับพวกนี้ = flex:1 บีบทุกปุ่มเท่ากันจนตัวหนังสือหายไปเลย
         (เจอจริงที่หน้าประวัติสต็อก) ⇒ ให้กว้างตามเนื้อหาแล้วเลื่อนแนวนอนเอา

   ⚠️ ห้ามใช้ class="tabs" กับแถบพวกนี้ — .tabs คือเมนูล่างที่ position:fixed */
.seg{display:flex;gap:6px;margin:4px 0}
.seg button{flex:1;font-family:inherit;font-size:13px;font-weight:700;padding:11px 4px;border-radius:11px;
  border:1.5px solid var(--line);background:#fff;color:var(--muted);cursor:pointer}
.seg button.on{background:var(--brand);border-color:var(--brand);color:#fff}

.seg.scroll{overflow-x:auto;-webkit-overflow-scrolling:touch;padding-bottom:3px;scrollbar-width:none}
.seg.scroll::-webkit-scrollbar{display:none}
.seg.scroll button{flex:0 0 auto;padding:9px 15px;border-radius:20px;
  background:var(--tint);white-space:nowrap}
.seg.scroll button.on{background:var(--brand);border-color:var(--brand);color:#fff}

/* ตารางราคาขายส่ง — คอลัมน์สินค้าค้างไว้ตอนเลื่อนขวา */
.mxwrap{border:1px solid var(--line);border-radius:13px;overflow:auto;background:#fff;max-height:70vh}
table.mx{border-collapse:separate;border-spacing:0;font-size:13px;width:max-content;min-width:100%}
table.mx th,table.mx td{border-right:1px solid var(--line);border-bottom:1px solid var(--line);
  padding:9px 10px;white-space:nowrap}
table.mx thead th{position:sticky;top:0;z-index:2;background:var(--tint);font-size:11px;color:var(--muted)}
table.mx .pin{position:sticky;left:0;z-index:1;background:#fff;text-align:left;min-width:120px;
  box-shadow:2px 0 0 rgba(0,0,0,.06)}
table.mx thead .pin{z-index:3;background:var(--tint-2)}
table.mx .pin b{font-size:13.5px} table.mx .pin small{display:block;font-size:10px;color:var(--muted);font-family:var(--mono)}
table.mx td.p{text-align:right;font-variant-numeric:tabular-nums;font-weight:800;background:#fffdf7;cursor:pointer}
table.mx td.p.empty{background:#fff;color:#cfcbc4;font-weight:600}
table.mx td.p.low{background:var(--red-bg);color:var(--red)}
table.mx td.mid{text-align:right;background:var(--tint);color:var(--muted);font-weight:700}
table.mx td.p input{padding:5px 6px;font-size:14px;text-align:right;border-radius:7px}
/* ตารางตัวอักษรรหัส — ช่องว่างที่นี่ "บล็อก" ไม่ใช่ "ตั้งใจเว้น" จึงเป็นสีแดง ไม่ใช่สีจาง
   (ต่างจากตารางราคาขายส่ง ที่ช่องว่าง = ตั้งใจไม่ขายให้เจ้านั้น) */
table.mx td.pf{text-align:center;font-family:var(--mono);font-weight:800;font-size:14px;
  background:#fffdf7;cursor:pointer;letter-spacing:.5px;min-width:64px}
table.mx td.pf.empty{background:var(--red-bg);color:var(--red);font-weight:700}
table.mx td.pf input{padding:5px 6px;font-size:14px;text-align:center;border-radius:7px;
  text-transform:uppercase;font-family:var(--mono)}

/* สถานะกลางของทุกหน้า — โหลด / ว่าง / พัง (ทำครั้งเดียวใช้ทุกหน้า) */
.state{text-align:center;padding:38px 18px;color:var(--muted)}
.state .ic{font-size:34px;line-height:1}
.state b{display:block;font-size:15px;color:var(--ink);margin:10px 0 4px}
.state p{margin:0 0 12px;font-size:13px}
.skel{background:#fff;border:1px solid var(--line);border-radius:13px;padding:13px;margin-bottom:9px}
.skel div{height:12px;border-radius:6px;background:linear-gradient(90deg,#eee,#f7f7f7,#eee);
  background-size:200% 100%;animation:sh 1.1s linear infinite;margin-bottom:8px}
.skel div:last-child{width:55%;margin-bottom:0}
@keyframes sh{0%{background-position:200% 0}100%{background-position:-200% 0}}

/* เน็ตหลุด — บอกตรงๆ ว่าตอนนี้เห็นของเก่าอยู่ */
.offline{position:fixed;left:0;right:0;top:0;z-index:60;background:var(--red);color:#fff;
  text-align:center;font-size:12.5px;font-weight:700;padding:7px 12px}
.toast{position:fixed;left:50%;bottom:calc(var(--tab) + 18px);transform:translateX(-50%);z-index:70;
  background:var(--brand);color:#fff;font-size:13.5px;font-weight:700;padding:11px 17px;border-radius:12px;
  max-width:90vw;box-shadow:0 10px 26px -10px rgba(0,0,0,.5)}
.toast.err{background:var(--red)}

.muted{color:var(--muted)} .right{text-align:right} .mono{font-family:var(--mono)}
.row2{display:flex;gap:9px} .row2>*{flex:1}
.note{border-radius:11px;padding:10px 12px;font-size:12.5px;margin:10px 0}
.note.b{background:var(--blue-bg);border:1px solid var(--blue-br);color:#1e3a8a}
.note.y{background:var(--amber-bg);border:1px solid var(--amber-br);color:#78350f}
.note.r{background:var(--red-bg);border:1px solid var(--red-br);color:#7f1d1d}
.note.g{background:var(--green-bg);border:1px solid var(--green-br);color:#14532d}

/* จอใหญ่ — ผู้จัดการ/เจ้าของเปิดบนคอม ไม่ควรเห็นคอลัมน์ผอมกลางจอ */
@media (min-width:820px){
  body{font-size:15.5px}
  main{max-width:1100px;padding-bottom:28px}
  .tabs{position:sticky;top:0;bottom:auto;border-top:0;border-bottom:1px solid var(--line);
        max-width:1100px;margin:0 auto;border-radius:0 0 14px 14px}
  .tabs a{padding:12px 4px;font-size:13px}
  .tabs a i{display:inline;font-size:15px;margin-right:6px}
  .grid2{display:grid;grid-template-columns:1fr 1fr;gap:12px}
  .grid2 .card{margin-bottom:0}
}

/* ── ตั้งต้นสต็อกเปิดร้าน ─────────────────────────────────
   สองช่องเรียงกันบนจอมือถือ — จำนวนกับราคาต้องเห็นพร้อมกัน
   ไม่งั้นคนกรอกจะเลื่อนขึ้นลงหาว่าใส่ราคาตัวนี้ไปหรือยัง */
.two{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.two label{display:block;font-size:12px;color:var(--muted);margin:0 0 4px}
.two input{width:100%;box-sizing:border-box}
.card.op .diff{margin-top:6px;min-height:16px}
/* ปุ่มบันทึกลอยอยู่เหนือแถบล่างเสมอ — รายการยาวมาก ต้องกดได้โดยไม่ต้องเลื่อนสุด
   ต้องเผื่อความสูงแถบล่าง (fixed อยู่ z-index 30) ไม่งั้นปุ่มไปหลบอยู่ใต้แถบ */
.stick{position:sticky;z-index:10;padding:10px 0 4px;background:#fff;
       bottom:calc(var(--tab) + env(safe-area-inset-bottom) + 4px);
       box-shadow:0 -10px 14px -8px rgba(0,0,0,.12)}
.stick .btn{margin-top:0}

/* ── ปุ่มเพิ่ม/ลดจำนวน ────────────────────────────────────
   ปุ่มต้องใหญ่พอกดด้วยนิ้วโป้งขณะถือโทรศัพท์มือเดียวคุยกับลูกค้าไปด้วย
   ช่องพิมพ์ตัวเลขบนมือถือเรียกคีย์บอร์ดขึ้นมาบังจอ กดบวกลบเร็วกว่ามาก */
.step{display:flex;align-items:center;gap:10px}
.step button{width:38px;height:38px;border-radius:11px;border:1.5px solid var(--line);
  background:#fff;color:var(--ink);font-size:20px;font-weight:800;line-height:1;cursor:pointer}
.step button:disabled{opacity:.35;cursor:not-allowed}
.step b{min-width:22px;text-align:center;font-size:17px;font-weight:800}
.itemrow{padding:9px 0;border-bottom:1px solid var(--line)}
.itemrow:last-child{border-bottom:0}
.card.hot .nm{color:var(--red)}
.itemrow{display:flex;justify-content:space-between;align-items:center;gap:10px}
.itemrow .who{display:flex;flex-direction:column;min-width:0}
.itemrow .who .sub{font-size:12px;color:var(--muted)}
.itemrow.over{background:var(--red-bg);border-radius:9px;padding-left:8px;padding-right:8px}
/* ช่องติ๊กพร้อมคำอธิบายยาว — ต้องให้ข้อความอยู่เป็นก้อนเดียว ไม่แตกเป็นคอลัมน์ */
.chk{display:flex;align-items:flex-start;gap:10px;font-size:13px;font-weight:400;
     color:var(--ink);margin:12px 2px}
.chk input{width:20px;height:20px;flex:0 0 auto;margin-top:1px}
.chk span{flex:1;line-height:1.45}

/* ── แถวในคิวแพ็ก ─────────────────────────────────────────
   คนใช้ยืนอยู่หน้ากองพัสดุ ถือมือถือมือเดียว — ช่องติ๊กต้องใหญ่พอกดด้วยนิ้วโป้ง */
.prow{border-top:1px solid var(--line);padding:10px 0}
.prow:first-child{border-top:0}
.prow.paused{opacity:.6}
.prow .chk input{width:26px;height:26px}
.prow .pill{margin-left:6px}
.rows{margin-top:6px}
.card.off{opacity:.55;background:#fafafa}
.card.g-on{border-color:var(--green-br);background:var(--green-bg)}
b.bad{color:var(--red)}
.lnk{background:none;border:0;color:var(--red);font-family:inherit;font-size:12px;
     font-weight:700;cursor:pointer;padding:2px 4px}

/* บันทึกตรวจสอบ — ค่าเดิมขีดฆ่า → ค่าใหม่ตัวหนา
   โชว์ JSON ทั้งก้อนแล้วไม่มีใครอ่าน ต้องชี้ให้ตรงว่าช่องไหนเปลี่ยน */
.diff{background:#fafafa;border:1px solid var(--line);border-radius:9px;padding:8px 10px;
  margin-top:8px;font-size:12.5px;font-family:var(--mono);line-height:1.7;overflow-x:auto}
.diff b{font-family:var(--sans);color:var(--muted);font-size:11.5px;margin-right:6px}
.diff s{color:var(--red);opacity:.75}
.diff ins{color:var(--green);font-weight:800;text-decoration:none}

/* กราฟแท่งทำเอง — ไม่ดึงไลบรารีกราฟเข้ามา เพราะเปิดบนมือถือ 4G ที่ร้านต้องขึ้นทันที */
.bars{display:flex;align-items:flex-end;gap:6px;height:110px;padding-top:6px}
.bars .bar{flex:1;display:flex;flex-direction:column;justify-content:flex-end;align-items:center;height:100%}
.bars .bar i{display:block;width:100%;background:var(--brand);border-radius:5px 5px 0 0;min-height:3px}
.bars .bar span{font-size:10px;color:var(--muted);margin-top:5px;white-space:nowrap}

/* ── แผ่นเลื่อนขึ้นมาจากล่างจอ (bottom sheet) ───────────────
   ใช้แทนการเปลี่ยนหน้า เพราะบนมือถือ กดย้อนกลับแล้วเสียตำแหน่งที่ไถอยู่

   ⚠️ z-index ต้องสูงกว่า .tabs (=30) ให้ชัดเจน
      ไม่งั้นแถบเมนูล่างจะทับปุ่ม "บันทึก" แล้วกดไม่ติด — กดแล้วไม่มีอะไรเกิดขึ้น
      คนจะนึกว่าระบบค้าง ไม่ได้นึกว่าโดนบัง (เจอมาแล้วตอนทดสอบด้วยเบราว์เซอร์จริง)
   ⚠️ ท้ายแผ่นต้องเผื่อความสูงแถบเมนู + ขอบล่างของ iPhone
      ไม่งั้นปุ่มสุดท้ายจมอยู่ใต้แถบเมนูตลอดไป ไถลงยังไงก็ไม่โผล่ */
.sheetbg{position:fixed;inset:0;z-index:90;background:rgba(17,17,17,.45);
  display:flex;align-items:flex-end;justify-content:center;
  animation:sheetfade .16s ease-out}
.sheet{width:100%;max-width:560px;max-height:88vh;background:#fff;
  border-radius:18px 18px 0 0;display:flex;flex-direction:column;overflow:hidden;
  box-shadow:0 -8px 32px rgba(0,0,0,.18);animation:sheetup .2s cubic-bezier(.2,.8,.3,1)}
.sheethd{display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:14px 16px 12px;border-bottom:1px solid var(--line);flex:0 0 auto}
.sheethd b{font-size:15.5px;font-weight:800;line-height:1.3}
.sheethd .act{flex:0 0 auto}
.sheetbody{overflow-y:auto;-webkit-overflow-scrolling:touch;padding:14px 16px
  calc(var(--tab,56px) + 24px + env(safe-area-inset-bottom,0px))}
.sheetbody>.btn:last-child{margin-bottom:0}
@keyframes sheetfade{from{opacity:0}to{opacity:1}}
@keyframes sheetup{from{transform:translateY(14px)}to{transform:translateY(0)}}

/* จอใหญ่ — แถบเมนูย้ายไปอยู่ด้านบน แผ่นจึงไม่ต้องเผื่อที่ด้านล่างอีก
   และวางกลางจอสวยกว่าติดขอบล่าง */
@media (min-width:700px){
  .sheetbg{align-items:center}
  .sheet{border-radius:18px;max-height:82vh}
  .sheetbody{padding-bottom:18px}
}

/* ── กล่องข้อความ (แชท) ─────────────────────────────────────
   ⚠️ กล่องต้องเลื่อนในตัวเอง ไม่ใช่ให้ทั้งหน้าเลื่อน
      ไม่งั้นช่องพิมพ์ตอบจะถูกดันหลุดจอทุกครั้งที่ข้อความเยอะ
      แล้วแอดมินต้องไถขึ้นไถลงระหว่างอ่านกับพิมพ์ทั้งวัน */
.chatbox{max-height:52vh;overflow-y:auto;-webkit-overflow-scrolling:touch;
  background:#fafafa;border:1px solid var(--line);border-radius:12px;padding:10px}
.bub{max-width:82%;width:fit-content;margin:6px 0;padding:8px 11px;border-radius:14px;
  font-size:13.5px;line-height:1.5;word-break:break-word}
/* ⚠️ pre-wrap ต้องอยู่ที่ตัวข้อความ ไม่ใช่ที่ฟอง
   ใส่ที่ฟองแล้วช่องว่างกับขึ้นบรรทัดของ HTML ที่เขียนไว้สวยๆ จะถูกวาดออกมาด้วย
   กลายเป็นฟองสูงเว่อร์มีที่ว่างเต็มไปหมด (เจอตอนถ่ายรูปหน้าจอจริง) */
.bub .txt{white-space:pre-wrap}
/* ลูกค้าอยู่ซ้าย เราอยู่ขวา — เหมือนแอปแชททุกตัว ไม่ต้องเรียนรู้ใหม่ */
.bub.them{background:#fff;border:1px solid var(--line);border-bottom-left-radius:4px;
  margin-right:auto}
.bub.me{background:var(--blue-bg);border:1px solid var(--blue-br);
  border-bottom-right-radius:4px;margin-left:auto}
.bub img{display:block;max-width:100%;border-radius:9px;margin-top:6px}
.bub .meta{font-size:10.5px;color:var(--muted);margin-top:4px;white-space:normal}

/* ── ชิปข้อความด่วนในหน้าแชท ─────────────────────────────
   ⚠️ ต้องเลื่อนแนวนอนได้ ห้ามตัดบรรทัด — ชิป 5-10 อันขึ้น 3 บรรทัด
      จะดันช่องพิมพ์หลุดจอบนมือถือ */
.chips{display:flex;gap:6px;overflow-x:auto;padding:2px 0 8px;-webkit-overflow-scrolling:touch}
.chips::-webkit-scrollbar{display:none}
.chip{flex:0 0 auto;background:var(--tint);border:1px solid var(--line);border-radius:999px;
  padding:7px 13px;font-size:13px;color:var(--ink);white-space:nowrap;cursor:pointer}
.chip:active{background:var(--tint-2)}

/* แถบสัดส่วนในการ์ด (ไม่ใช่กราฟแท่งใน .bars) — ใช้ในรายงานตีกลับรายคน */
.card > .bar{height:6px;background:var(--tint-2);border-radius:999px;overflow:hidden;margin:6px 0 4px}
.card > .bar > i{display:block;height:100%;background:var(--red)}

/* ชิปที่กดเลือกอยู่ (ใช้ในหน้าราคาขายส่งแบบการ์ด) */
.chip.on{background:var(--ink);color:#fff;border-color:var(--ink)}

/* กล่องติ๊กเลือกหลายรายการ (ขอบเขตโปรโมชั่น) — สูงจำกัดแล้วเลื่อนในกล่อง
   ร้านมี 11 เพจและสินค้าหลายสิบตัว ปล่อยยาวทั้งหมดจะดันปุ่มบันทึกหายลงไปข้างล่าง */
.pickbox{max-height:190px;overflow-y:auto;border:1px solid var(--line);
  border-radius:10px;padding:8px 10px;background:#fff;margin-bottom:10px}
.pickbox .chk{padding:5px 0;border-bottom:1px solid var(--line)}
.pickbox .chk:last-child{border-bottom:0}

/* กล่องตัวอย่างข้อความที่ลูกค้าจะได้รับ — ต้องดูต่างจากช่องพิมพ์ชัดๆ
   ดูเหมือนกัน = คนจะพิมพ์ลงในกล่องตัวอย่างแล้วงงว่าทำไมไม่บันทึก */
.prevbox{background:var(--blue-bg);border:1px solid var(--blue-br);border-radius:10px;
  padding:10px 12px;margin-top:8px}

/* ชื่อคนพูดในแชทกลุ่ม (ไลน์) — ต้องเด่นพอให้กวาดตาเห็นว่าเปลี่ยนคนแล้ว
   จางเกินไป = อ่านรวดเดียวแล้วนึกว่าคนเดียวพูดทั้งหมด */
.bub .who{font-size:11px;font-weight:700;color:var(--brand);margin-bottom:3px}
.bub.them .who{color:var(--blue)}