/* chat-quote.css — โหมด "ทำใบเสนอราคา" ในแผงขวาของหน้าแชท (mockup/chat-quote-v1.html ที่ Mai เคาะ)
   ต่อจาก style.css + chat.css (ห้ามแก้ 2 ไฟล์นั้น) · ธีม A/B/C ใช้ตัวแปรเดิม (--sec/--sec-ink จาก chat.css) · ทุกกฎ scope ใต้ .cq / .tools.quote-mode
   แถวรายการ = หน้าตาเดียวกับหน้าใบเสนอราคา (ลำดับ · รูป 32px · ชื่อ 1 บรรทัด · บรรทัดเล็ก รหัส · น้ำหนัก g/ชิ้น (BS)) */

/* เปิดโหมด → ซ่อนแท็บ/เนื้อหาเดิมของแผงขวาทั้งหมด (ยังเก็บ DOM ไว้ chat.js วาดต่อได้เงียบ ๆ) */
.tools.quote-mode > .tabs, .tools.quote-mode > .body, .tools.quote-mode > .rail-tabs, .tools.quote-mode > .topbtns { display: none !important; }
.tools.quote-mode > .cq { display: flex; flex-direction: column; flex: 1; min-height: 0; }

/* ---- หัวแผง (สีเข้มตามธีม) ---- */
.cq-head { display: flex; align-items: center; gap: 10px; padding: 9px 12px; background: var(--sec); color: var(--sec-ink); flex: none; }
.cq-head .t { font-weight: 800; font-size: var(--fs-md); line-height: 1.2; min-width: 0; }
.cq-head .t small { display: block; font-weight: 500; font-size: var(--fs-xs); opacity: .85; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cq-head .sp { flex: 1; }
.cq-st { display: inline-flex; align-items: center; font-size: var(--fs-xs); font-weight: 700; padding: 1px 8px; border-radius: 999px; background: rgba(255,255,255,.15); color: inherit; white-space: nowrap; }
.cq-head .x { background: rgba(255,255,255,.15); color: inherit; border: 0; border-radius: 8px; height: 28px; padding: 0 10px; font: inherit; font-weight: 700; cursor: pointer; white-space: nowrap; }
.cq-head .x:hover { background: rgba(255,255,255,.25); }

.cq-body { flex: 1; overflow: auto; padding: 8px 12px; display: flex; flex-direction: column; gap: 8px; }   /* flex ไม่ใช่ grid — grid track ของ Chrome วัดตารางรายการที่มีแถวซ้อน grid ผิด (สั้นกว่าจริง โดนตัด) */
.cq-body > * { min-width: 0; flex: none; }
.cq .mono { font-variant-numeric: tabular-nums; }
.cq .muted { color: var(--text-3); }
.cq .ok { color: var(--ok-ink); font-weight: 600; }
.cq .lnk { border: 0; background: transparent; color: var(--accent-strong); font: inherit; font-size: var(--fs-xs); font-weight: 700; text-decoration: underline; text-underline-offset: 2px; cursor: pointer; padding: 0 2px; }
.cq .lnk.shopee { color: #9a3412; background: #fff1e6; border: 1px solid #fdba74; border-radius: 999px; padding: 0 7px; text-decoration: none; }
.cq mark { background: transparent; color: var(--accent-strong); font-weight: 800; }
.cq-empty { padding: 14px 10px; text-align: center; color: var(--text-3); font-size: var(--fs-xs); line-height: 1.5; }
.cq .spin { width: 13px; height: 13px; vertical-align: -2px; }

/* ---- แถบลูกค้า = ชิปสรุป · "แก้" กางฟอร์มสั้น ๆ ในที่ ---- */
.cq-who { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; padding: 8px 10px; border: 1px solid var(--border); border-radius: 10px; background: var(--surface-2); }
.cq-who .nm { font-weight: 800; }
.cq-who .k { font-size: var(--fs-xs); color: var(--text-3); }
.cq-who .chip { display: inline-flex; align-items: center; gap: 5px; font-size: var(--fs-xs); height: auto; padding: 2px 9px; border-radius: 999px; background: var(--surface); border: 1px solid var(--border); color: var(--text); max-width: 100%; }
.cq-who .chip b { font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 320px; }
.cq-who .chip small { color: var(--text-3); font-size: var(--fs-xs); }
.cq-who .edit { margin-left: auto; }
.cq-edit { flex-basis: 100%; display: grid; grid-template-columns: 1fr 1fr; gap: 6px 10px; padding-top: 6px; border-top: 1px dashed var(--border); margin-top: 2px; }
.cq-edit label { display: flex; flex-direction: column; gap: 2px; font-size: var(--fs-xs); color: var(--text-3); min-width: 0; }
.cq-edit label.wide, .cq-edit .acts { grid-column: 1 / -1; }
.cq-edit input, .cq-edit select, .cq-edit textarea { height: 30px; border: 1px solid var(--input-border); border-radius: 8px; padding: 0 8px; font: inherit; font-size: var(--fs-xs); background: var(--input-bg); color: var(--text); min-width: 0; }
.cq-edit textarea { height: auto; min-height: 48px; padding: 5px 8px; resize: vertical; }
.cq-edit input:focus, .cq-edit select:focus, .cq-edit textarea:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--ring); }
.cq-edit .acts { display: flex; align-items: center; gap: 10px; }
.cq .small { font-size: var(--fs-xs); }

/* ---- รายการเสนอ (ใต้แถวปุ่ม / ใต้ช่องค้นในแถว) ---- */
.cq-sugg { border: 1px solid var(--border); border-radius: 10px; background: var(--surface); box-shadow: var(--shadow); overflow: hidden; max-height: 340px; overflow-y: auto; }
.cq-sugg .cap { font-size: var(--fs-xs); color: var(--text-3); padding: 5px 10px; background: var(--surface-2); border-bottom: 1px solid var(--border); }
.cq-sugg .s { display: grid; grid-template-columns: 34px minmax(0, 1fr) auto; gap: 10px; align-items: center; width: 100%; padding: 6px 10px; border: 0; border-bottom: 1px solid var(--border); background: transparent; color: var(--text); text-align: left; font: inherit; cursor: pointer; }
.cq-sugg .s:hover, .cq-sugg .s:focus-visible { background: var(--surface-2); outline: none; }
.cq-sugg .s:last-child { border-bottom: 0; }
.cq-sugg .s .thumb { width: 34px; height: 34px; border-radius: 7px; }
.cq-sugg .s .pic { width: 34px; height: 34px; border-radius: 7px; background: var(--surface-2); border: 1px solid var(--border); display: grid; place-items: center; font-size: var(--fs-lg); }
.cq-sugg .s .tx { min-width: 0; display: flex; flex-direction: column; }
.cq-sugg .s .t { font-weight: 600; font-size: var(--fs-xs); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cq-sugg .s .c { font-size: var(--fs-xs); color: var(--text-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cq-sugg .s .pv { display: flex; flex-direction: column; align-items: flex-end; white-space: nowrap; }
.cq-sugg .s .pr { font-weight: 800; font-variant-numeric: tabular-nums; }
.cq-sugg .s .hint { font-size: var(--fs-xs); color: var(--text-2); }

/* ---- ตารางรายการ (แถวเดียวกับหน้าใบเสนอราคา) ---- */
.cq-lines { border: 1px solid var(--border); border-radius: 12px; overflow: hidden; }
.cq-lines .lh, .cq-lines .ln { display: grid; grid-template-columns: 26px 32px minmax(0, 1fr) 92px 96px 84px 24px; gap: 8px; align-items: center; padding: 4px 10px; border-bottom: 1px solid var(--border); min-width: 0; }
.cq-lines .lh { font-size: var(--fs-xs); color: var(--text-3); font-weight: 700; background: var(--surface-2); padding: 6px 10px; }
.cq-lines .ln { min-height: 44px; background: var(--surface); }
.cq-lines .ln:last-child { border-bottom: 0; }
.cq-lines .ln.over { background: color-mix(in srgb, #dc2626 5%, var(--surface)); box-shadow: inset 3px 0 0 #dc2626; }
.cq-lines .ln.dragging { opacity: .45; }
.cq-lines .ln.dropat { box-shadow: inset 0 3px 0 var(--accent); }
.cq-lines .no { font-size: var(--fs-xs); color: var(--text-3); text-align: right; position: relative; display: flex; align-items: center; justify-content: flex-end; gap: 2px; }
.cq-lines .no .h { font-style: normal; font-size: var(--fs-md); cursor: grab; color: var(--text-3); opacity: .55; line-height: 1; }
.cq-lines .no .h:hover { opacity: 1; }
.cq-lines .no .h:active { cursor: grabbing; }
.cq-lines .thumb { width: 32px; height: 32px; border-radius: 7px; flex: none; }
.cq-lines .thumb .ph { font-size: var(--fs-md); }
.cq-lines .pic { width: 32px; height: 32px; border-radius: 7px; background: var(--surface-2); border: 1px solid var(--border); display: grid; place-items: center; font-size: var(--fs-md); color: var(--text-3); }
.cq-lines .tx { min-width: 0; display: flex; flex-direction: column; }
.cq-lines .t { font-weight: 700; font-size: var(--fs-xs); line-height: 1.25; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cq-lines .c { font-size: var(--fs-xs); color: var(--text-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-variant-numeric: tabular-nums; }
.cq-lines .c b { color: var(--text-2); font-weight: 600; }
.cq-lines .was b { color: var(--ok-ink); }
.cq-lines .was b.over { color: #dc2626; }
.cq-lines .ship .t { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; white-space: normal; }
.cq-lines .ship .t .tag { font-size: var(--fs-xs); padding: 0 6px; }
.cq-lines .ship .shipsel { display: inline-flex; align-items: center; gap: 6px; flex-wrap: wrap; min-width: 0; }
.cq-lines .ship select { height: 28px; max-width: 100%; border: 1px solid var(--input-border); border-radius: 8px; font: inherit; font-size: var(--fs-xs); background: var(--input-bg); color: var(--text); padding: 0 6px; }
.cq-lines .ship .shipsub { white-space: normal; line-height: 1.35; }
.cq-lines .ship.off { opacity: .7; }
.cq-lines .ln.ship { background: var(--surface-2); }
.cq-lines .num { display: flex; align-items: center; border: 1px solid var(--input-border); border-radius: 8px; overflow: hidden; background: var(--input-bg); }
.cq-lines .num button { border: 0; background: transparent; width: 26px; height: 30px; font: inherit; font-size: var(--fs-md); cursor: pointer; color: var(--text-2); }
.cq-lines .num button:hover:not(:disabled) { background: var(--surface-2); }
.cq-lines .num input { width: 40px; border: 0; text-align: center; font: inherit; font-weight: 700; background: transparent; color: var(--text); height: 30px; min-width: 0; outline: none; }
.cq-lines .num.dim { opacity: .5; }
.cq-lines .price input { width: 100%; height: 30px; border: 1px solid var(--input-border); border-radius: 8px; text-align: right; font: inherit; font-weight: 700; padding: 0 8px; background: var(--input-bg); color: var(--text); font-variant-numeric: tabular-nums; min-width: 0; }
.cq-lines .price input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--ring); }
.cq-lines .price.over input { border-color: #dc2626; color: #dc2626; }
.cq-lines .price.empty input { border-color: var(--warn); background: color-mix(in srgb, var(--warn) 7%, var(--input-bg)); }
.cq-lines .tot { text-align: right; font-weight: 800; font-size: var(--fs-sm); white-space: nowrap; }
.cq-lines .del { border: 0; background: transparent; color: var(--text-3); cursor: pointer; font-size: var(--fs-md); width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; }
.cq-lines .del:hover:not(:disabled) { background: var(--danger-soft); color: #dc2626; }
.cq-lines .del:disabled { opacity: .3; cursor: default; }
.cq-lines .cq-empty { border-bottom: 1px solid var(--border); }

/* ---- แถบเตือน / กล่องไม่รู้ผล / คำใบ้ ---- */
.cq-note { font-size: var(--fs-xs); border-radius: 8px; padding: 6px 10px; background: var(--info-soft); color: var(--info-ink); line-height: 1.45; }
.cq-note.warn { background: var(--danger-soft); color: var(--danger-ink); border: 1px solid color-mix(in srgb, #dc2626 35%, transparent); }
.cq-note.warn .lnk { color: inherit; }
.cq-block { font-size: var(--fs-xs); border-radius: 10px; padding: 10px 12px; line-height: 1.5; }
.cq-block.err { background: var(--danger-soft); color: var(--danger-ink); border: 1px solid color-mix(in srgb, #dc2626 35%, transparent); }
.cq-block .acts { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 8px; }
.cq-tip { font-size: var(--fs-xs); color: var(--warn-ink); background: var(--warn-soft); border-radius: 8px; padding: 5px 10px; }

/* ---- สรุปยอด (กระชับ 2 บรรทัด — Mai 2026-09-19 · สูงรวม ≤ ~64px · แคบกว่า 600px ค่อยตกบรรทัด) ---- */
.cq-sum { display: flex; flex-wrap: wrap; align-items: stretch; gap: 6px 12px; padding: 6px 10px 6px 6px; border: 1px solid var(--border); border-radius: 10px; background: var(--surface-2); font-size: var(--fs-xs); color: var(--text-2); }
.cq-sum-l { flex: 1 1 230px; max-width: 320px; min-width: 0; display: flex; flex-direction: column; justify-content: center; gap: 6px; padding: 8px 10px; border-radius: 8px; background: var(--accent-soft); border: 2px solid var(--accent-strong); box-shadow: 0 1px 0 rgba(0,0,0,.04); }   /* Mai 2026-09-20: กรอบส่วนลด/ค่าขนส่งให้เด่น */
.cq-sum-r { flex: 1 1 170px; margin-left: auto; display: flex; flex-direction: column; justify-content: center; gap: 2px; padding: 2px 4px; min-width: 200px; }   /* Mai 2026-09-20: ตารางยอดขวา ตรงแนวทุกบรรทัด */
.cq-sum-r .row { display: grid; grid-template-columns: 1fr 112px; column-gap: 12px; align-items: center; line-height: 1.35; }
.cq-sum-r .row > span { text-align: right; font-size: var(--fs-sm); color: var(--text-2); }
.cq-sum-r .row > b { text-align: right; font-size: var(--fs-md); font-weight: 700; color: var(--text); font-variant-numeric: tabular-nums; }
.cq-sum-r .row.tot { margin-top: 4px; padding-top: 5px; border-top: 1px solid var(--border-strong); }
.cq-sum-r .row.tot > span { font-size: var(--fs-md); font-weight: 800; color: var(--text); }
.cq-sum-r .row.tot > b { font-size: var(--fs-xl); font-weight: 800; color: var(--accent-strong); line-height: 1.1; }
.cq-sum .l1 { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.cq-sum .l1 > span { display: inline-flex; align-items: center; gap: 4px; white-space: nowrap; }
.cq-sum .l1 b { color: var(--text); font-weight: 700; }
.cq-sum .dot { color: var(--text-3); }
.cq-sum input:not([type="checkbox"]) { width: 56px; height: 24px; border: 1px solid var(--input-border); border-radius: 6px; text-align: right; font: inherit; font-size: var(--fs-xs); padding: 0 5px; background: var(--input-bg); color: var(--text); }
.cq-sum select { height: 24px; border: 1px solid var(--input-border); border-radius: 6px; font: inherit; font-size: var(--fs-xs); background: var(--input-bg); color: var(--text); padding: 0 4px; }
.cq-sum .l2 { display: inline-flex; align-items: baseline; text-align: right; font-weight: 800; font-size: var(--fs-sm); color: var(--text); white-space: nowrap; }
.cq-sum .g { font-size: var(--fs-xl); font-weight: 800; color: var(--accent-strong); margin-left: 6px; }
/* ส่วนลดค่าสินค้า: ช่อง % เป็นหลัก · ช่องบาทซ่อนไว้ (กด %↔฿ หรือใช้โหมดบาทอยู่ถึงโผล่) */
.cq-disc { display: flex; align-items: center; gap: 5px; flex-wrap: wrap; min-height: 26px; }
.cq-disc .dlb {   /* ห้ามใช้ .lb — ใน chat.css คือ lightbox เต็มจอ */  font-size: var(--fs-xs); line-height: 1.1; font-weight: 700; color: var(--text-3); white-space: nowrap; }
.cq-disc .u { font-weight: 700; color: var(--text-2); }
.cq-disc .eq { font-weight: 700; color: var(--text); margin-left: 2px; } .cq-disc .eq b { color: var(--accent-strong); }
.cq-disc .amt { display: none; align-items: center; gap: 4px; }
.cq-disc.amt .amt { display: inline-flex; }
.cq-disc .lnk.sw { font-size: var(--fs-xs); font-weight: 600; color: var(--text-3); text-decoration: none; border: 1px dashed var(--border-strong); border-radius: 999px; padding: 0 6px; height: 18px; line-height: 16px; }
.cq-disc .lnk.sw:hover { color: var(--accent-strong); border-color: currentColor; }
.cq-disc.amt .lnk.sw { color: var(--accent-strong); border-style: solid; }
/* ค่าขนส่ง: [ร้านจ่าย][ลูกค้าจ่าย] ☐ จ่ายปลายทาง — ย้ายมาจากกล่องขนส่ง · ปุ่มที่เลือกเหลืองเข้ม (role เดิม) */
.cq-shippay { display: flex; align-items: center; gap: 6px 8px; flex-wrap: wrap; }
.cq-shippay .lbl { font-size: var(--fs-xs); font-weight: 700; color: var(--text-3); white-space: nowrap; }
.cq-shippay .seat { display: contents; }   /* ปุ่ม/ช่องติ๊กเป็นลูกของแถวโดยตรง — แผงแคบให้ "จ่ายปลายทาง" ตกบรรทัดคนเดียว ไม่ลากปุ่มไปด้วย */
.cq-shippay .cq-cod { font-size: var(--fs-xs); }
.cq-shippay .seg.sm button { padding: 3px 10px; font-size: var(--fs-xs); }
.cq-sum .seg button[aria-pressed="true"] { background: #d97706; color: #fff; box-shadow: none; }
/* ⓘ ท้ายยอดรวม: ยอดก่อนลด / ยอดลด (ชี้เมาส์หรือโฟกัส) · ใช้ชื่อ .cqtip — ห้ามใช้ .pop (คลาสกลางใน style.css) */
.cq-toti { position: relative; display: inline-grid; place-items: center; width: 16px; height: 16px; margin-left: 6px; border-radius: 50%; font-size: var(--fs-xs); font-weight: 500; color: var(--text-3); cursor: help; align-self: center; }
.cq-toti:hover, .cq-toti:focus { color: var(--accent-strong); outline: none; }
.cq-toti .cqtip { display: none; position: absolute; right: 0; bottom: calc(100% + 6px); z-index: 70; min-width: 220px; background: var(--surface); border: 1px solid var(--border-strong); border-radius: 10px; box-shadow: var(--shadow-lg, var(--shadow)); padding: 8px 10px; font-size: var(--fs-xs); font-weight: 500; color: var(--text-2); text-align: left; white-space: nowrap; }
.cq-toti:hover .cqtip, .cq-toti:focus .cqtip, .cq-toti:focus-within .cqtip { display: grid; gap: 3px; }
.cq-toti .cqtip .r { display: flex; justify-content: space-between; gap: 14px; } .cq-toti .cqtip .r b { color: var(--text); font-weight: 700; }
.cq .sw2 { display: none; }
.cq-opts { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; font-size: var(--fs-xs); color: var(--text-2); }
.cq-opts input:not([type="checkbox"]) { height: 28px; border: 1px solid var(--input-border); border-radius: 8px; font: inherit; background: var(--input-bg); color: var(--text); padding: 0 8px; }
.cq-opts label { display: inline-flex; align-items: center; gap: 5px; white-space: nowrap; }

/* ---- ท้ายแผง ---- */
.cq-foot { display: flex; gap: 8px; align-items: center; padding: 9px 12px; border-top: 1px solid var(--border); background: var(--surface); flex: none; flex-wrap: wrap; }
.cq-foot .sp { flex: 1; }
.cq-foot .st { font-size: var(--fs-xs); color: var(--text-3); }
.tools .cq-foot .btn { height: 34px; padding: 0 14px; font-size: var(--fs-sm); border-radius: 9px; width: auto; }   /* chat.css ตั้ง .tools .btn.accent เต็มแถว (specificity 0,3,0) — ในท้ายแผงต้องไม่เต็ม */
.tools .cq .btn.sm { height: 28px; padding: 0 10px; font-size: var(--fs-xs); width: auto; }
.cq-foot .btn.ghost { background: var(--surface); border: 1px solid var(--border); color: var(--text-2); }
.cq-foot .btn:disabled { opacity: .55; cursor: not-allowed; }

/* แผงแคบ (<560px = chat.js ไม่ใส่ .wide) — ซ่อนคอลัมน์รวม ให้ชื่อสินค้ามีที่ */
.tools:not(.wide) .cq-lines .lh, .tools:not(.wide) .cq-lines .ln { grid-template-columns: 26px 32px minmax(0, 1fr) 84px 88px 24px; }
.tools:not(.wide) .cq-lines .lh span:nth-child(6), .tools:not(.wide) .cq-lines .tot { display: none; }
@media (max-width: 1000px) { .cq-edit { grid-template-columns: 1fr; } }

/* ---- แถว "+ เพิ่มรายการ" (ใต้ SKU สุดท้าย เหนือแถวค่าขนส่ง) ---- */
.cq-lines .ln.addrow { min-height: 30px; padding-block: 2px; background: var(--surface); }
.cq-lines .ln.addrow .lnk.add { font-size: var(--fs-xs); text-decoration: none; padding: 3px 8px; border-radius: 7px; border: 1px dashed var(--border-strong); }
.cq-lines .ln.addrow .lnk.add:hover { background: var(--accent-soft); }
.cq-lines .ship .t .tag { font-size: var(--fs-xs); padding: 0 6px; }

/* ---- การ์ด "กล่องจัดการขนส่ง" (ท้ายแผง) ---- */
.cq-ship { border: 1px solid var(--border); border-radius: 12px; background: var(--surface); box-shadow: var(--shadow); display: flex; flex-direction: column; gap: 6px; padding: 0 0 8px; overflow: hidden; }
.cq-sechead { display: flex; align-items: center; gap: 8px; padding: 8px 12px; background: var(--surface-2); border-bottom: 1px solid var(--border); font-size: var(--fs-sm); }
.cq-sechead .ic { font-size: var(--fs-md); }
.cq-sechead b { font-weight: 800; }
.cq-shiphead, .cq-params, .cq-plan, .cq-crlinks, .cq-shipsum, .cq-manual, .cq-ship .couriers, .cq-ship .cq-note, .cq-ship .cq-empty { margin-inline: 12px; }
.cq-shiphead { display: flex; align-items: center; gap: 6px 10px; flex-wrap: wrap; }
.cq-shiphead .cq-plantitle { font-size: var(--fs-xl); font-weight: 800; color: var(--text); white-space: nowrap; line-height: 1.2; }   /* หัวใหญ่ขวา "1 กล่องรวมทุกรายการ · 21.30 กก." (แบบ Mai Temp/92) */
.cq-shiphead .cq-plantitle:empty { display: none; }
.cq-shiphead .cq-plantitle .spin { width: 12px; height: 12px; }
.cq-shiphead .lbl, .cq-params label, .cq-plan .lbl { font-size: var(--fs-xs); color: var(--text-3); white-space: nowrap; }
.cq-ship .seg.sm button { padding: 4px 10px; font-size: var(--fs-xs); }
.cq-params { display: flex; align-items: center; gap: 3px 6px; flex-wrap: wrap; font-size: var(--fs-sm); color: var(--text-2); }
.cq-params label { display: inline-flex; align-items: center; gap: 5px; font-size: var(--fs-sm); color: var(--text-2); }
.cq-params > b { color: var(--text); font-weight: 700; }
.cq-params .plus, .cq-params .dot { color: var(--text-3); }
.cq-params input { width: 60px; height: 26px; border: 1px solid var(--input-border); border-radius: 7px; text-align: right; font: inherit; font-size: var(--fs-xs); padding: 0 6px; background: var(--input-bg); color: var(--text); }
.cq-params .dst { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: var(--fs-xs); color: var(--text-3); text-align: right; margin-left: auto; }   /* ปลายทางอยู่บรรทัดเดียวกับ สินค้า+วัสดุ ชิดขวา (Mai 2026-09-21) — แคบมากค่อยตกบรรทัด */
.cq-params .dst b { font-weight: 600; color: var(--text-2); }
/* ⓘ เพดาน กก./กล่อง — ตัวเลือกเล็กใต้ทูลทิป (ชี้เมาส์/โฟกัสค้างตอนพิมพ์) */
.cq-ipop { position: relative; display: inline-flex; }
.cq-ipop .cq-i { display: inline-grid; place-items: center; width: 18px; height: 18px; border: 0; border-radius: 50%; background: transparent; font: inherit; font-size: var(--fs-xs); color: var(--text-3); cursor: help; padding: 0; }
.cq-ipop:hover .cq-i, .cq-ipop:focus-within .cq-i { color: var(--accent-strong); }
.cq-ipop .cqtip { display: none; position: absolute; right: 0; top: calc(100% + 6px); z-index: 70; min-width: 250px; max-width: 320px; background: var(--surface); border: 1px solid var(--border-strong); border-radius: 10px; box-shadow: var(--shadow-lg, var(--shadow)); padding: 8px 10px; font-size: var(--fs-xs); gap: 5px; }
.cq-ipop:hover .cqtip, .cq-ipop:focus-within .cqtip { display: grid; }
.cq-ipop .cqtip .small { white-space: normal; line-height: 1.35; }
.cq-plan { display: flex; align-items: center; justify-content: flex-end; gap: 6px 8px; flex-wrap: wrap; font-size: var(--fs-sm); }   /* แถว 3: ปุ่ม [+ เพิ่มพัสดุ][✨ ซอยอัตโนมัติ] ชิดขวา */
.cq-plan .kopts { display: inline-flex; gap: 4px; flex-wrap: wrap; }
.cq-plan .kbtn { border: 1px solid var(--border); background: var(--surface); border-radius: 999px; height: 24px; padding: 0 9px; font: inherit; font-size: var(--fs-xs); color: var(--text-2); cursor: pointer; }
.cq-plan .kbtn[aria-pressed="true"] { background: var(--chip-on-bg); color: var(--chip-on-ink); border-color: transparent; }
.cq-ship .cr { grid-template-columns: 26px minmax(0, 1fr) auto auto; gap: 8px; padding: 4px 9px; }
.cq-ship .cr .mono, .cq-ship .cr .logo { width: 26px; height: 26px; border-radius: 7px; font-size: var(--fs-xs); }
.cq-ship .cr .nm { font-size: var(--fs-xs); gap: 5px; }
.cq-ship .cr .pr { font-size: var(--fs-md); } .cq-ship .cr .pr small { font-size: var(--fs-xs); }
.cq-ship .cr .days { font-size: var(--fs-xs); min-width: 44px; }
.cq-ship .cr .sel { height: 21px; font-size: var(--fs-xs); } .cq-ship .cr .cheap, .cq-ship .cr .rec { font-size: var(--fs-xs); height: 19px; } .cq-ship .cr .retfee { font-size: var(--fs-xs); height: 19px; padding: 0 7px; } .cq-ship .cr .badge { font-size: var(--fs-xs); height: 19px; display: inline-flex; align-items: center; }
.cq-crlinks { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; font-size: var(--fs-xs); }
.cq-shipsum { display: flex; align-items: center; gap: 6px 10px; flex-wrap: wrap; font-size: var(--fs-xs); padding: 7px 10px; border-radius: 9px; background: var(--surface-2); }
.cq-shipsum .sp { flex: 1; }
.cq-manual { display: flex; gap: 8px 12px; flex-wrap: wrap; align-items: flex-end; }
.cq-manual label { display: flex; flex-direction: column; gap: 2px; font-size: var(--fs-xs); color: var(--text-3); min-width: 0; }
.cq-manual label.grow { flex: 1; min-width: 200px; }
.cq-manual input { height: 30px; border: 1px solid var(--input-border); border-radius: 8px; padding: 0 8px; font: inherit; font-size: var(--fs-xs); background: var(--input-bg); color: var(--text); min-width: 0; width: 100%; }
.cq-manual label:not(.grow) input { width: 120px; text-align: right; }
.cq-manual input:focus, .cq-params input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--ring); }

/* ---- แถวค้นในตาราง (กด "+ เพิ่มรายการ") · แถวปุ่ม ⭐/📋 ชิดขวา · รายการเสนอในตาราง ---- */
.cq-lines .ln.empty .tx.rel { position: relative; }
.cq-lines .ln.empty .rq { width: 100%; height: 30px; border: 1px solid var(--accent); border-radius: 8px; padding: 0 10px; font: inherit; font-size: var(--fs-xs); background: var(--input-bg); color: var(--text); outline: none; box-shadow: 0 0 0 3px var(--ring); }
.cq-lines .ln.empty .pic { font-size: var(--fs-md); }
/* รายการแนะนำของช่องค้น SKU: fixed วางตามพิกัดช่อง (JS placeRowDd) — absolute เดิมโดน .cq-lines overflow:hidden ตัด เห็นแค่แถวแรก (Mai 2026-09-20) */
.cq-sugg.dd { position: fixed; left: 0; top: 0; width: 380px; z-index: 75; max-height: 340px; box-shadow: var(--shadow-lg, var(--shadow)); }
.cq-lines .ln.addrow .acts { display: flex; align-items: center; gap: 6px; grid-column: 3 / -1; }
.cq-lines .ln.addrow .acts .sp { flex: 1; }
.cq-lines .ln.addrow .ibtn { height: 26px; font-size: var(--fs-xs); }
.cq-sugg.inrows { border-radius: 0; border-left: 0; border-right: 0; box-shadow: none; border-top: 0; }
.cq-shiphead .sp { flex: 1; }
.cq-cod { display: inline-flex; align-items: center; gap: 4px; font-size: var(--fs-xs); color: var(--text-2); white-space: nowrap; }

/* ปุ่ม ⭐ซื้อประจำ / 📋จากใบเดิม ที่หัวตาราง (Mai 2026-09-19) */
.cq-lines .lh .hsku { display: flex; align-items: center; gap: 6px; min-width: 0; }
.cq-lines .lh .hsku .sp { flex: 1; }
.cq-lines .lh .hacts { display: flex; gap: 4px; }
.cq-lines .lh .hacts .ibtn { height: 22px; font-size: var(--fs-xs); font-weight: 600; padding: 0 7px; }
/* กล่องจัดการขนส่ง — โทนต่างจากชุดบิล ให้เห็นว่าเป็นคนละส่วน (Mai 2026-09-19 "ดูกลืน") */
.cq-ship { background: var(--info-soft); border: 1.5px solid color-mix(in srgb, var(--info-ink) 35%, var(--border)); box-shadow: none; }
.cq-ship .cq-sechead { background: color-mix(in srgb, var(--info-ink) 14%, var(--surface)); border-bottom: 1px solid color-mix(in srgb, var(--info-ink) 25%, var(--border)); }
.cq-ship .cq-sechead b { color: var(--info-ink); }
.cq-ship .couriers .cr { background: var(--surface); }
.cq-plan .sp { flex: 1; }

/* แท็กน้ำหนักกดแก้ได้ */
.cq .lnk.wchip { text-decoration: none; border-bottom: 1px dashed currentColor; padding: 0; }
.cq .lnk.wchip.warnchip { border: 1px solid var(--warn); background: var(--warn-soft); border-radius: 999px; padding: 0 7px; color: var(--warn-ink, #92400e); }
.cq a.lnk.shopee:hover { text-decoration: underline; }

/* กล่องขนส่ง: ปุ่มที่เลือกเป็นเหลืองเข้ม (Mai 2026-09-19) · ช่องจ่ายปลายทางคงที่ไม่ให้ปุ่มกระเด้ง */
.cq-ship .seg button[aria-pressed="true"] { background: #d97706; color: #fff; box-shadow: none; }
.cq-cod.ghost { visibility: hidden; }

/* ส่วนลดท้ายบิลที่เคยได้ — ตัวแดงข้างช่องส่วนลด · ชี้เมาส์เห็นรายใบ (Mai 2026-09-19) */
.dhist { position: relative; display: inline-flex; margin-left: 4px; }
.dhist .dbtn { font: inherit; font-size: var(--fs-xs); font-weight: 700; color: var(--danger); background: none; border: 0; border-bottom: 1px dashed currentColor; padding: 0; cursor: pointer; }
.dhist.on .dbtn { color: #b45309; }
.dhist .dbtn:disabled { cursor: default; opacity: .7; }
.dhist .dpop { display: none; position: absolute; left: 0; top: calc(100% + 6px); z-index: 70; min-width: 260px; background: var(--surface); border: 1px solid var(--border-strong); border-radius: 10px; box-shadow: var(--shadow); padding: 8px 10px; font-size: var(--fs-xs); }
.dhist:hover .dpop, .dhist:focus-within .dpop { display: block; }
.dhist .dpop .cap { color: var(--text-3); font-size: var(--fs-xs); margin-bottom: 4px; }
.dhist .dpop .dr { display: grid; grid-template-columns: 1fr auto 44px; gap: 8px; padding: 2px 0; border-bottom: 1px solid var(--border); }
.dhist .dpop .dr:last-child { border-bottom: 0; } .dhist .dpop .dr b { text-align: right; }

/* ซอยพัสดุตามหน่วยสินค้า (Mai 2026-09-20 — กติกาเดียวกับแผงทำออเดอร์): ปุ่ม ✨ ซอยอัตโนมัติ เหลืองเข้ม · + เพิ่มพัสดุ outline · การ์ดต่อกล่อง 2 บรรทัด */
.cq .btn.amber { background: #d97706; color: #fff; border: 0; font-weight: 800; }
.cq .btn.amber:hover:not(:disabled) { background: #b45309; }
.cq .btn.outline { background: transparent; color: var(--text-2); border: 1px solid var(--border-strong); font-weight: 700; }
.cq .btn.outline:hover:not(:disabled) { background: var(--surface-2); color: var(--text); }
.cq-plan .btn.sm { height: 26px; padding: 0 10px; font-size: var(--fs-xs); }
.cq-plan .ibtn { height: 26px; }
/* การ์ดต่อกล่อง + กล่องเสนอแผน + แถบยังไม่ลงกล่อง — หน้าตาเดียวกับแผงทำออเดอร์ (chat-order.css .co-parcel/.ptbl/.co-auto — ที่นั่นผูกกับ .co เลยทำชุด cq- แยก · Mai 2026-09-21) */
.cq-parcels { display: flex; flex-direction: column; gap: 10px; margin: 0 12px; }
.cq-parcel { border: 1px solid color-mix(in srgb, var(--accent) 35%, var(--border)); border-left: 4px solid var(--accent-strong); border-radius: 12px; background: var(--surface); overflow: hidden; }
.cq-parcel.empty { border-style: dashed; border-left-style: solid; }
.cq-parcel .phead { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; padding: 7px 12px; background: var(--accent-soft); color: var(--accent-strong); font-weight: 800; font-size: var(--fs-sm); }
.cq-parcel .phead small { font-weight: 600; font-size: var(--fs-xs); opacity: .8; margin-left: 1px; }
.cq-parcel .phead .dot { opacity: .5; }
.cq-parcel .phead .pw2, .cq-parcel .phead .psh { font-variant-numeric: tabular-nums; }
.cq-parcel .pf { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 7px 12px 9px; font-size: var(--fs-xs); color: var(--text-2); border-bottom: 1px solid var(--border); margin-bottom: 4px; }
.cq-parcel .pf .sum b { color: var(--text); font-variant-numeric: tabular-nums; }
.cq-parcel .pf .sp { flex: 1; }
.cq-parcel .pf .bwin { width: 52px; height: 24px; border: 1px solid var(--input-border); border-radius: 6px; text-align: right; font: inherit; font-size: var(--fs-xs); padding: 0 4px; background: var(--input-bg); color: var(--text); }
.cq-parcel .pf .bwin:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--ring); }
.cq-parcel .pf .del { border: 1px solid color-mix(in srgb, var(--danger) 40%, transparent); background: var(--surface); color: var(--danger-ink); border-radius: 7px; height: 26px; padding: 0 8px; font: inherit; font-size: var(--fs-xs); font-weight: 700; cursor: pointer; white-space: nowrap; display: inline-flex; align-items: center; }
.cq-parcel .pf .del:hover { background: var(--danger-soft); }
.cq-parcel .pf .del.off { opacity: .35; cursor: not-allowed; }
.cq-parcel .ptbl { margin: 4px 10px 10px; border: 1px solid var(--border); border-radius: 9px; overflow: hidden; background: var(--surface); }
.cq-parcel .ptbl .ph, .cq-parcel .ptbl .pr { display: grid; grid-template-columns: minmax(0, 1fr) 176px 80px 28px; gap: 8px; align-items: center; padding: 4px 8px; border-bottom: 1px solid var(--border); min-width: 0; }
.cq-parcel .ptbl .ph { font-size: var(--fs-xs); color: var(--text-3); font-weight: 700; background: var(--surface-2); }
.cq-parcel .ptbl .ph span:nth-child(n+2), .cq-parcel .ptbl .pw { text-align: right; }
.cq-parcel .ptbl .pr { min-height: 46px; font-size: var(--fs-xs); }
.cq-parcel .ptbl .pr:last-child { border-bottom: 0; }
.cq-parcel .ptbl .pr.z { grid-template-columns: 1fr; color: var(--text-3); font-size: var(--fs-xs); min-height: 36px; }
.cq-parcel .ptbl .pi { display: flex; align-items: center; gap: 8px; min-width: 0; }
.cq-parcel .ptbl .pi .thumb.sm { width: 36px; height: 36px; flex: none; border-radius: 8px; }
.cq-parcel .ptbl .pi .thumb.sm .ph { font-size: var(--fs-md); }
.cq-parcel .ptbl .pi .tx { min-width: 0; display: flex; flex-direction: column; }
.cq-parcel .ptbl .pi .t { font-weight: 700; font-size: var(--fs-xs); line-height: 1.25; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cq-parcel .ptbl .pi .c { font-size: var(--fs-xs); color: var(--text-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cq-parcel .ptbl .pi .c .warnchip { border: 1px solid var(--warn); background: var(--warn-soft); border-radius: 999px; padding: 0 6px; color: var(--warn-ink); font-size: var(--fs-xs); }
.cq-parcel .ptbl .pq { display: flex; align-items: center; justify-content: flex-end; gap: 6px; flex-wrap: wrap; }
.cq-parcel .ptbl .pq .step { height: 28px; border: 1px solid var(--input-border); border-radius: 999px; background: var(--input-bg); display: inline-flex; align-items: center; overflow: hidden; }
.cq-parcel .ptbl .pq .step:focus-within { border-color: var(--accent); box-shadow: 0 0 0 2px var(--ring); }
.cq-parcel .ptbl .pq .step button { height: 28px; width: 26px; font: inherit; font-size: var(--fs-md); font-weight: 700; border: 0; background: transparent; color: var(--text-2); cursor: pointer; }
.cq-parcel .ptbl .pq .step button:hover:not(:disabled) { background: var(--surface-2); }
.cq-parcel .ptbl .pq .step button:disabled { opacity: .3; cursor: default; }
.cq-parcel .ptbl .pq .step input { height: 28px; width: 52px; border: 0; background: transparent; text-align: center; font: inherit; font-size: var(--fs-xs); font-weight: 700; color: var(--text); outline: none; }
.cq-parcel .ptbl .pw { font-variant-numeric: tabular-nums; white-space: nowrap; font-size: var(--fs-xs); }
.cq-parcel .ptbl .prm { border: 0; background: none; color: var(--text-3); font-size: var(--fs-md); cursor: pointer; padding: 4px; border-radius: 6px; justify-self: end; }
.cq-parcel .ptbl .prm:hover:not(:disabled) { background: rgba(220,38,38,.12); color: #b91c1c; }
.cq-parcel .ptbl .prm:disabled { opacity: .3; cursor: default; }
.tools:not(.wide) .cq-parcel .ptbl .ph, .tools:not(.wide) .cq-parcel .ptbl .pr { grid-template-columns: minmax(0, 1fr) 150px 28px; }
.tools:not(.wide) .cq-parcel .ptbl .ph span:nth-child(3), .tools:not(.wide) .cq-parcel .ptbl .pw { display: none; }
.tools:not(.wide) .cq-parcels { margin: 0 8px; }
.cq-addrow { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin: 0 12px; }
.cq-addrow.end { justify-content: flex-end; margin: 8px 12px 4px; }
.cq-shiphd { font-size: var(--fs-sm); font-weight: 700; margin: 10px 12px 4px; display: flex; align-items: baseline; gap: 8px; }
.cq-shiphd .small { font-weight: 500; }
.cq-psum { font-size: var(--fs-xs); color: var(--text-2); padding: 6px 10px; background: var(--surface-2); border-radius: 8px; }
.cq-psum b { color: var(--text); }
.cq-addrow .btn.sm { height: 26px; padding: 0 10px; font-size: var(--fs-xs); white-space: nowrap; }
.cq-addrow .btn:disabled { opacity: .45; cursor: not-allowed; background: var(--surface-2); color: var(--text-3); border: 1px solid var(--border); }
/* แถบเหลืองเข้ม "ยังไม่ได้จัดลงกล่อง" (แบบ .co-note.warn.strong) */
.cq-note.warn.strong { background: #fde68a; color: #78350f; border: 1px solid #f59e0b; font-weight: 700; margin-inline: 12px; }
/* กล่องเสนอแผนซอยอัตโนมัติ (แบบ .co-auto) */
.cq-auto { border: 1px dashed var(--border-strong); border-radius: 10px; padding: 8px 10px; background: var(--surface-2); display: grid; gap: 6px; font-size: var(--fs-xs); margin: 0 12px; }
.cq-auto.on { border-style: solid; border-color: color-mix(in srgb, var(--accent) 45%, var(--border)); background: var(--accent-soft); }
.cq-auto .ah { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.cq-auto .abs { display: grid; gap: 3px; }
.cq-auto .ab { font-size: var(--fs-xs); padding: 3px 8px; border-radius: 7px; background: var(--surface); }
.cq-auto .ar { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.cq-auto .ar .sp { flex: 1; }
.cq-auto .cap { display: inline-flex; align-items: center; gap: 4px; font-size: var(--fs-xs); color: var(--text-3); }
.cq-auto .cap input { width: 64px; height: 24px; border: 1px solid var(--input-border); border-radius: 6px; text-align: right; font: inherit; font-size: var(--fs-xs); padding: 0 5px; background: var(--input-bg); color: var(--text); }
.cq-auto .ibtn { height: 26px; }
.cq-auto .btn.sm { height: 26px; padding: 0 10px; font-size: var(--fs-xs); }
.cq .bad { color: var(--danger-ink); font-weight: 700; }
.cq-plan .warnchip { font-size: var(--fs-xs); }

/* ป๊อปอัปประวัติราคา (แทรกใต้บรรทัดสินค้า) */
.cq .lnk.hist { text-decoration: none; border-bottom: 1px dashed currentColor; padding: 0; color: var(--text-2); }
.cq .lnk.hist b { color: var(--text); }
.cq-histpop { margin: 0 10px 6px 68px; padding: 8px 10px; border: 1px solid #d97706; border-radius: 10px; background: var(--warn-soft); font-size: var(--fs-xs); display: grid; gap: 6px; }
.cq-histpop .hd { display: flex; align-items: center; gap: 6px; }
.cq-histpop .hd .sp { flex: 1; }
.cq-histpop table.ht { width: 100%; border-collapse: collapse; background: var(--surface); border-radius: 8px; overflow: hidden; }
.cq-histpop table.ht th, .cq-histpop table.ht td { padding: 4px 8px; border-bottom: 1px solid var(--border); text-align: left; font-size: var(--fs-xs); }
.cq-histpop table.ht th { font-size: var(--fs-xs); color: var(--text-3); background: var(--surface-2); }
.cq-histpop table.ht .r { text-align: right; } .cq-histpop table.ht .nw { white-space: nowrap; }
.cq-histpop table.ht tr:last-child td { border-bottom: 0; }

/* ชิปเลือกที่อยู่ส่ง (ลูกค้ามีหลายที่อยู่) */
.cq-who .chip.addrpick { cursor: pointer; padding-right: 6px; }
.cq-who .chip.addrpick select { max-width: 340px; font: inherit; font-size: var(--fs-xs); font-weight: 700; border: 0; background: transparent; color: var(--text); padding: 0; cursor: pointer; text-overflow: ellipsis; }
.cq-sugg .cap { display: flex; align-items: center; gap: 8px; } .cq-sugg .cap .ibtn.r { margin-left: auto; height: 22px; font-size: var(--fs-xs); }

/* หัวใบ 2 บล็อก ออกบิล / จัดส่ง (Mai 2026-09-19) */
.cq-who { display: grid; gap: 5px; }
.cq-who .cq-hdrow { display: flex; align-items: center; gap: 6px 8px; flex-wrap: wrap; min-width: 0; }
.cq-who .cq-hdrow .hdlb {   /* ห้ามใช้ .lb — ใน chat.css คือ lightbox เต็มจอ (จอดำ 2026-09-19) */ font-size: var(--fs-xs); font-weight: 800; color: var(--text-3); white-space: nowrap; min-width: 62px; }
.cq-who .cq-billto .k { flex: 1 1 100%; padding-left: 70px; line-height: 1.35; }
.cq-who .cq-shipto select { flex: 1 1 320px; min-width: 0; font: inherit; font-size: var(--fs-xs); font-weight: 600; height: 28px; border: 1px solid var(--border); border-radius: 8px; padding: 0 8px; background: var(--surface); color: var(--text); text-overflow: ellipsis; }
.cq-who .cq-terms .sp { flex: 1; }
.tools:not(.wide) .cq-who .cq-billto .k { padding-left: 0; }

.cq-note.ok { background: var(--accent-soft); color: var(--accent-strong); }

.cq-head .x.cancel { background: rgba(220,38,38,.12); color: #b91c1c; margin-right: 6px; }

/* ---- ส่งเข้าแชท 2 ทาง (Mai 2026-09-20): ปุ่มเดียว + เมนูเล็กเด้งขึ้นเหนือปุ่ม (ลิงก์ / รูปยอดรวม) ---- */
.cq-sendwrap { position: relative; display: inline-flex; }
.cq-sendpop { position: absolute; right: 0; bottom: calc(100% + 6px); min-width: 190px; background: var(--dd-bg, var(--surface)); border: 1px solid var(--border); border-radius: 10px; box-shadow: var(--shadow-lg, 0 10px 30px rgba(0,0,0,.18)); padding: 4px; display: flex; flex-direction: column; z-index: 30; }
.cq-sendpop button { border: 0; background: transparent; color: var(--text); font: inherit; font-weight: 700; font-size: var(--fs-sm); text-align: left; padding: 9px 12px; border-radius: 8px; cursor: pointer; white-space: nowrap; }
.cq-sendpop button:hover { background: var(--surface-2); }
.cq-imgprev { display: block; width: 100%; max-height: min(440px, 55vh); object-fit: contain; border: 1px solid var(--border); border-radius: 10px; background: #f3f4f6; margin-top: 4px; }   /* รูปตัวอย่างในกล่องยืนยันก่อนส่ง — รูปจาก PDF จริงสูงกว่าแบบย่อ ให้ที่มากขึ้น */

/* ---- แก้ใบที่สร้างใน FA แล้ว: ปุ่ม ✏️ แก้ไข ในหัวแผง (role action = ส้ม เริ่มกระบวนการ ยังไม่เขียนของจริง) ---- */
.cq-head .x.edit { background: rgba(217,119,6,.16); color: #b45309; margin-right: 6px; }

/* กล่องยืนยันส่งใบเสนอ (ปุ่มเดียว): ข้อความแก้ได้ + พรีวิวรูป */
.cq-sendmsg { width: 100%; box-sizing: border-box; font: inherit; font-size: var(--fs-sm); padding: 8px 10px; border: 1px solid var(--input-border); border-radius: 8px; background: var(--input-bg); color: var(--text); resize: vertical; min-height: 44px; }
.cq-sendnote { font-size: var(--fs-xs); color: var(--text-3); margin: 4px 0 8px; }

.cq-head .cq-tag-edit { display: inline-block; font-size: var(--fs-xs); font-weight: 700; padding: 1px 8px; border-radius: 999px; background: #fef3c7; color: #92400e; border: 1px solid #fcd34d; vertical-align: middle; margin-left: 4px; }   /* แท็ก 'แก้ไข' หัวแผงใบที่สร้าง FA แล้ว (Mai 2026-09-20) */
/* โหมดดูอย่างเดียว (ใบที่มีออเดอร์แล้ว / ถูกยกเลิกใน FA — Mai 2026-09-21): แท็กเทา · ช่องทุกช่องจาง กดไม่ได้ · ซ่อนตัวลาก/ปุ่มลบ/ปุ่มเพิ่มแถว */
.cq-head .cq-tag-edit.ro { background: var(--surface-2); color: var(--text-2); border-color: var(--border-strong); }
.cq.viewonly .cq-body input:disabled, .cq.viewonly .cq-body select:disabled, .cq.viewonly .cq-body textarea:disabled { opacity: .7; cursor: not-allowed; background: transparent; }
.cq.viewonly .cq-body .ln .h, .cq.viewonly .cq-body .ln .del, .cq.viewonly .cq-body .ln.addrow, .cq.viewonly .cq-body .num button, .cq.viewonly .cq-body .cq-hdrow .ibtn.edit, .cq.viewonly [data-cq="hacts"] { display: none !important; }

/* ---- โหมดเงินสด (Mai 2026-09-21): ลูกค้าใหม่ยังไม่รู้ชื่อ/ที่อยู่ → ออกบิลเป็นผู้ติดต่อ "เงินสด" ก่อน แล้วอัปเดตเป็นลูกค้าจริงบนใบเลขเดิม ----
   ป้ายหัวแผง = เขียว (สถานะ ไม่ใช่คำเตือน) · ปุ่มสลับทางออกบิล = role เดิม (ที่เลือกเหลืองเข้ม) · ปุ่มอัปเดตเป็นลูกค้าจริง = commit (เขียนของจริงใน FA) */
.cq-head .cq-tag-cash { display: inline-block; font-size: var(--fs-xs); font-weight: 800; padding: 1px 8px; border-radius: 999px; background: #dcfce7; color: #166534; border: 1px solid #86efac; margin-left: 6px; white-space: nowrap; vertical-align: middle; }
.cq-who .cq-billto .seg.sm { padding: 2px; gap: 2px; }
.cq-who .cq-billto .seg.sm button { padding: 2px 9px; font-size: var(--fs-xs); }
.cq-who .cq-billto .cq-cashseg button[aria-pressed="true"] { background: #d97706; color: #fff; box-shadow: none; }
.cq-who .cq-billto.cash .k.cashk { display: flex; align-items: center; gap: 6px 10px; flex-wrap: wrap; font-size: var(--fs-xs); }
.cq-who .cq-billto .cashk .lb2 { font-weight: 700; color: var(--text-3); white-space: nowrap; }
.cq-who .cq-billto .cashk .cashname { flex: 1 1 180px; min-width: 140px; max-width: 320px; height: 26px; border: 1px solid var(--input-border); border-radius: 8px; padding: 0 8px; font: inherit; font-size: var(--fs-xs); font-weight: 700; background: var(--input-bg); color: var(--text); }
.cq-who .cq-billto .cashk .cashname:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--ring); }
.cq-who .cq-billto .cashk .cashname:disabled { opacity: .7; background: transparent; }
.cq-who .cq-billto .cashk .cashnm { font-weight: 700; color: var(--text); }
.cq-who .cq-billto .cq-invseg button[aria-pressed="true"]:disabled { background: var(--surface); color: var(--text); opacity: 1; box-shadow: 0 1px 3px rgba(0,0,0,.12); cursor: default; }   /* "อย่างย่อ" = เลือกไว้ตายตัว ไม่จาง */
.cq-who .cq-billto .cq-invseg button.na { opacity: .45; cursor: not-allowed; }
.tools .cq-who .cq-billto .btn.cq-cashup { height: 26px; padding: 0 10px; font-size: var(--fs-xs); width: auto; margin-left: auto; white-space: nowrap; box-shadow: none; }
.tools .cq-who .cq-billto .btn.cq-cashup:disabled { opacity: .5; cursor: not-allowed; }
.cq-who .cq-cashedit .req { color: #b91c1c; font-weight: 800; }
.tools .cq-who .cq-cashedit .acts .btn.sm { height: 30px; padding: 0 12px; font-size: var(--fs-xs); width: auto; box-shadow: none; }
.cq.viewonly .cq-cashedit input, .cq.viewonly .cq-cashedit textarea { opacity: 1; background: var(--input-bg); cursor: text; }   /* ฟอร์มลูกค้าจริงยังกรอกได้แม้ใบดูอย่างเดียว (ออเดอร์ยังไม่ออกบิล) */

.cq-params .dst .tag.xs { font-size: var(--fs-xs); padding: 0 6px; vertical-align: middle; }
.cq-params .dst .tag.warn { background: var(--warn-soft); color: var(--warn-ink); border-color: transparent; }