/* chat.css — หน้า "แชท LINE ทัพบัญชาการ" (รอบ 5) — CSS เฉพาะหน้านี้ ต่อจาก style.css (ห้ามแก้ style.css)
   โครง/สำเนา/ธีมตาม xorder/mockup/chat-v3.html ที่ Mai เคาะ · ตัวแปรธีม A/B/C ใช้ของ style.css + เพิ่มสีฟองแชทตรงนี้ */

:root { --me: #d9f3e6; --them: #ffffff; --chatbg: #eef1ec; --sec: #1e4f8f; --sec-ink: #fff; }

body.cp { font-size: var(--fs-sm); line-height: 1.45; height: 100dvh; display: flex; flex-direction: column; overflow: hidden; }
.cp .wrap { max-width: none; margin-inline: 0; width: 100%; }   /* margin auto ใน flex column จะกันไม่ให้ stretch */
.cp main.wrap { flex: 1; min-height: 0; padding-block: 8px 8px; padding-inline: 16px; gap: 8px; }   /* ห่างขอบจอฝั่งละ 16px (Mai 2026-09-19) */
.cp .hdr .sub { display: inline-flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.cp .hdr .sub .pill { font-size: var(--fs-xs); }
.cp .hdr .me.sync { background: var(--accent-soft); color: var(--accent-strong); border-color: transparent; font-weight: 700; }
.cp .hdr .me.sync:disabled { opacity: .8; cursor: wait; }
.cp .hdr .me { font-size: var(--fs-xs); color: var(--text-2); background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--radius-pill); padding: 3px 9px; cursor: pointer; white-space: nowrap; }
.cp .hdr .me:hover { border-color: var(--border-strong); }

/* ---- โครง 3 คอลัมน์ ---- */
/* จอกว้าง (Mai 2026-09-19 จอ 1890px): เต็มจอ · รายชื่อ 300px · แชท flex ≥420px · แผงขวา = คอลัมน์กว้างสุด (~45% ของที่เหลือ · ลากปรับได้ · จำใน localStorage 'chat-tools-w') */
/* สัดส่วนที่ Mai วาด: รายชื่อ ~18% (≥260px) · แชท ~30% (≥380px) · แผงขวา ~52% (ใหญ่สุด — ทำใบเสนอราคา/ออกบิล/เลขพัสดุจากตรงนั้น) */
.app { --tools-w: 52%; display: grid; grid-template-columns: minmax(260px, 18fr) minmax(380px, 30fr) minmax(360px, min(var(--tools-w), calc(100% - 660px))); gap: 10px; flex: 1; min-height: 0; }   /* min(): ค่าที่จำไว้เกินจอ (ลากบนจอใหญ่กว่า) ต้องไม่ดันแผงขวาหลุดขอบ */
.app.rail { grid-template-columns: minmax(260px, 18fr) minmax(380px, 30fr) 52px; }
.gutter { position: absolute; left: -7px; top: 0; bottom: 0; width: 12px; cursor: col-resize; z-index: 3; }
.gutter::after { content: ""; position: absolute; left: 5px; top: 0; bottom: 0; width: 2px; border-radius: 2px; background: transparent; transition: background .15s; }
.gutter:hover::after, .app.dragging .gutter::after { background: var(--accent); }
.app.dragging { user-select: none; cursor: col-resize; }
.app.rail .gutter { display: none; }
.card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow); display: flex; flex-direction: column; min-height: 0; overflow: hidden; position: relative; }
.ibtn { border: 1px solid var(--border); background: var(--surface); border-radius: 8px; height: 28px; padding: 0 9px; font-size: var(--fs-xs); font-weight: 600; color: var(--text-2); white-space: nowrap; display: inline-flex; align-items: center; gap: 4px; }
.ibtn:hover:not(:disabled) { background: var(--surface-2); }
.ibtn.on { background: var(--chip-on-bg); color: var(--chip-on-ink); border-color: transparent; }
.ibtn.ro { background: var(--surface-2); color: var(--text-3, var(--text-2)); opacity: .65; border-style: dashed; }   /* ทึบเทา แต่ยังกดเปิดดูได้ (ใบที่มีออเดอร์แล้ว — Mai 2026-09-21) */
.ibtn.ro:hover:not(:disabled) { opacity: .85; }
.bar.ok { background: var(--ok-soft); color: var(--ok-ink); border: 1px solid color-mix(in srgb, var(--ok) 30%, transparent); }   /* แถบเขียว "ยกเลิกครบทุกระบบ" */
.tag { display: inline-flex; align-items: center; gap: 4px; font-size: var(--fs-xs); font-weight: 700; padding: 1px 7px; border-radius: 999px; background: var(--surface-2); color: var(--text-2); border: 1px solid var(--border); white-space: nowrap; }
.tag.ok { background: var(--ok-soft); color: var(--ok-ink); border-color: transparent }
.tag.warn { background: var(--warn-soft); color: var(--warn-ink); border-color: transparent }
.tag.info { background: var(--info-soft); color: var(--info-ink); border-color: transparent }
.tag.danger { background: var(--danger-soft); color: var(--danger-ink); border-color: transparent }
.tag.muted { background: var(--surface-2); color: var(--text-3); border-color: transparent; text-decoration: line-through }   /* กล่อง/ใบที่ยกเลิกแล้ว */
.tag.acc { background: var(--accent-soft); color: var(--accent-strong); border-color: transparent }
.tag .x { margin-left: 2px; opacity: .6; cursor: pointer; } .tag .x:hover { opacity: 1; }
.av { width: 38px; height: 38px; border-radius: 50%; background: var(--surface-2); border: 1px solid var(--border); display: grid; place-items: center; font-weight: 800; color: var(--text-2); font-size: var(--fs-md); flex: none; overflow: hidden; }
.av img { width: 100%; height: 100%; object-fit: cover; display: block; }
.empty { padding: 22px 12px; text-align: center; color: var(--text-3); font-size: var(--fs-xs); line-height: 1.5; }
.cp .skel { margin: 8px 12px; }

/* ---- ซ้าย: ห้อง ---- */
.rooms .head { padding: 10px 10px 8px; border-bottom: 1px solid var(--border); display: grid; gap: 8px; }
.search { display: flex; align-items: center; gap: 8px; background: var(--surface-2); border: 1px solid var(--border); border-radius: 999px; padding: 5px 12px; color: var(--text-3); }
.search input { border: 0; background: transparent; flex: 1; color: var(--text); outline: none; min-width: 0; font-size: var(--fs-sm); }
.filters { display: flex; gap: 5px; flex-wrap: wrap; }
.filters .chip { height: 24px; padding: 0 9px; font-size: var(--fs-xs); font-weight: 700; background: var(--surface); border: 1px solid var(--border); color: var(--text-2); }
.filters .chip[aria-pressed="true"] { background: var(--text); color: var(--bg); border-color: var(--text); }
.filters .chip .n { background: var(--danger); color: #fff; border-radius: 999px; padding: 0 5px; font-size: var(--fs-xs); margin-left: 3px; min-width: 16px; text-align: center; }
.filters .chip .n:empty { display: none; }
.list { overflow: auto; flex: 1; }
.room { display: grid; grid-template-columns: 38px 1fr auto; gap: 8px; padding: 8px 10px; border-bottom: 1px solid var(--border); cursor: pointer; align-items: center; width: 100%; text-align: left; }
.room:hover { background: var(--surface-2); } .room[aria-current="true"] { background: var(--accent-soft); }
.room .mid { min-width: 0; }
.room .nm { font-weight: 700; font-size: var(--fs-sm); display: flex; align-items: center; gap: 5px; min-width: 0; }
.room .nm .t { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.room .pv { color: var(--text-2); font-size: var(--fs-xs); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.room.hot .pv { color: var(--text); font-weight: 600; }
.room .meta { display: flex; flex-direction: column; align-items: flex-end; gap: 3px; font-size: var(--fs-xs); color: var(--text-3); }
.unread { background: var(--accent-strong); color: var(--accent-ink); font-weight: 800; border-radius: 999px; min-width: 19px; height: 19px; padding: 0 5px; display: grid; place-items: center; font-size: var(--fs-xs); }
.dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; flex: none; } .dot.link { background: var(--ok); } .dot.no { background: var(--text-3); opacity: .6; }
.more { margin: 8px auto; }

/* ---- กลาง: แชท ---- */
.chat .head { display: flex; align-items: center; gap: 10px; padding: 8px 12px; border-bottom: 1px solid var(--border); min-height: 56px; }
.chat .who { font-weight: 800; font-size: var(--fs-md); min-width: 0; flex: 1; }
.chat .who small { display: block; font-weight: 500; color: var(--text-2); font-size: var(--fs-xs); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.chat .acts { margin-left: auto; display: flex; gap: 5px; flex: none; }
.chat .back { display: none; }
.msgs { flex: 1; overflow: auto; padding: 12px; display: flex; flex-direction: column; gap: 8px; background: var(--chatbg); }
.msgs .top { align-self: center; }
.day { align-self: center; font-size: var(--fs-xs); color: var(--text-3); background: var(--surface); border: 1px solid var(--border); border-radius: 999px; padding: 1px 10px; }
.sys { align-self: center; font-size: var(--fs-xs); color: var(--text-2); background: var(--surface-2); border-radius: 999px; padding: 2px 12px; max-width: 90%; text-align: center; }
.m { display: flex; gap: 7px; max-width: 85%; } .m.them { align-self: flex-start; } .m.me { align-self: flex-end; flex-direction: row-reverse; }
.m .av { width: 28px; height: 28px; font-size: var(--fs-xs); align-self: flex-end; }
.bub { background: var(--them); border: 1px solid var(--border); border-radius: 14px; padding: 7px 11px; box-shadow: var(--shadow); overflow-wrap: anywhere; white-space: pre-wrap; min-width: 0; }
.m.me .bub { background: var(--me); border-color: transparent; }
.m.them .bub { border-bottom-left-radius: 4px; } .m.me .bub { border-bottom-right-radius: 4px; }
.m.failed .bub { border: 1px solid var(--danger); background: var(--danger-soft); }
.m.pending .bub { opacity: .65; }
.m.unsure .bub { border: 1px solid var(--warn); background: var(--warn-soft); }
/* ลิงก์ในฟองแชท (chat-linkify.js · 16 ต.ค. 69): น้ำเงินเข้ม อ่านออกทั้งฟองเขียว/ขาว/ส้ม/แดง · ขีดเส้นใต้ · ลิงก์ยาวตัดบรรทัดได้ไม่ดันฟองล้น */
.bub a.lnk, .cx-b a.lnk, .pcard a.lnk { color: var(--info-ink, #1e4b8f); text-decoration: underline; text-underline-offset: 2px; cursor: pointer; overflow-wrap: anywhere; word-break: break-word; }
.bub a.lnk:hover, .cx-b a.lnk:hover, .pcard a.lnk:hover { text-decoration-thickness: 2px; }
.stamp .st.unsure { color: var(--warn); font-weight: 700; display: block; }
.bub .fail-note.warn { color: var(--warn-ink); }
.stamp { font-size: var(--fs-xs); color: var(--text-3); align-self: flex-end; white-space: nowrap; } .stamp b { display: block; color: var(--text-2); font-weight: 600; }
.stamp .st.failed { color: var(--danger); font-weight: 700; display: block; }
.act-row { display: flex; gap: 5px; margin-top: 6px; flex-wrap: wrap; }
.qcard { border: 1px solid var(--border); background: var(--surface); border-radius: 10px; padding: 8px 10px; display: grid; gap: 3px; min-width: 200px; }
.qcard .t { font-weight: 800; font-size: var(--fs-sm); } .qcard .a { font-size: var(--fs-xs); color: var(--text-2); }
.bub .fail-note { font-size: var(--fs-xs); color: var(--danger-ink); margin-top: 4px; }
/* รูปในแชท: อยู่ใน flow ปกติ กว้าง ≤260 สูง ≤320 (Mai 2026-09-19 รูปสลิปยาวเคยลอยทับฟองอื่น) · กด = lightbox ไม่ใช่ hover-zoom */
.msgs .pic { display: block; max-width: 260px; max-height: 320px; min-width: 120px; min-height: 80px; border-radius: 10px; overflow: hidden; background: var(--surface-2); border: 1px solid var(--border); padding: 0; cursor: zoom-in; text-align: center; }
.msgs .pic img { display: block; max-width: 260px; max-height: 320px; width: auto; height: auto; object-fit: contain; }
.msgs .pic .ph { display: block; font-size: var(--fs-xs); color: var(--text-2); padding: 12px 10px; line-height: 1.4; }
.msgs .pic.bad, .msgs .pic.loading, .msgs .pic.busy { cursor: default; width: 200px; }
.msgs .bub:has(> .pic:only-child) { padding: 4px; }
/* การ์ดกล่องพัสดุ (ข้อความชนิด flex · attach_json.card.type = pack_box · mockup Temp/94 แบบ ก): การ์ดขาวมุมโค้ง 14px แทนบอลลูน · สีคงที่เหมือนที่ลูกค้าเห็นใน LINE ไม่ตามธีม
   รูปย่อ grid 2 คอลัมน์ (1 รูป = เต็มความกว้าง) · ใช้ .pic เดิมให้ loadThumbs โหลดรูปให้ · กด = lightbox */
.msgs .bub:has(> .pcard:only-child) { padding: 0; background: transparent; border: none; box-shadow: none; }
.pcard { width: 260px; max-width: 100%; background: #fff; color: #111; border-radius: 14px; overflow: hidden; box-shadow: 0 2px 6px rgba(0,0,0,.15); white-space: normal; text-align: left; }
.pcard .hd { padding: 10px 12px 6px; border-bottom: 1px solid #e5e7eb; }
.pcard .hd b { display: block; font-size: var(--fs-md); font-weight: 800; }
.pcard .hd .tr { font-family: ui-monospace, Consolas, monospace; font-size: var(--fs-md); letter-spacing: .03em; margin-top: 3px; font-weight: 600; }
.pcard .hd small { display: block; color: #666; font-size: var(--fs-xs); margin-top: 2px; line-height: 1.35; }
.pcard .imgs { display: grid; grid-template-columns: 1fr 1fr; gap: 2px; background: #eee; }
.msgs .pcard .imgs .pic { width: 100%; height: 120px; min-width: 0; min-height: 0; max-width: none; max-height: none; border-radius: 0; border: none; background: #e5e7eb; display: grid; place-items: center; }
.msgs .pcard .imgs .pic.one { grid-column: 1 / -1; height: 170px; }
.msgs .pcard .imgs .pic img { width: 100%; height: 100%; max-width: none; max-height: none; object-fit: cover; }
.msgs .pcard .imgs .pic .ph { font-size: var(--fs-xs); padding: 6px; color: #666; }
.pcard .ft { padding: 8px 10px 10px; }
.pcard .tbtn { display: block; text-align: center; background: #06c755; color: #fff; border-radius: 8px; padding: 9px; font-weight: 600; font-size: var(--fs-sm); text-decoration: none; }
.pcard .tbtn:hover { filter: brightness(.94); color: #fff; }
.pcard .note { font-size: var(--fs-xs); color: #666; margin-top: 6px; text-align: center; }
/* การ์ดรวม (chat-pack-card.js · 16 ต.ค. 69): หัวทักทายบนการ์ดแรก (#EAF7EF/#1E7E34 เหมือน Flex header ที่ลูกค้าเห็น) · ขอบคุณท้ายการ์ดสุดท้าย */
.pcard .hm { background: #eaf7ef; color: #1e7e34; font-weight: 700; font-size: var(--fs-sm); padding: 10px 12px; line-height: 1.45; white-space: pre-line; word-break: break-word; }
.pcard .tm { font-size: var(--fs-sm); color: #555; text-align: center; margin-top: 8px; line-height: 1.45; white-space: pre-line; word-break: break-word; }
.pcard .hd small.mn { color: #111; font-size: var(--fs-sm); }
/* รูปสินค้าในแผงขวา (ซื้อประจำ) ยังใช้ hover-zoom มาตรฐาน — แบบ fixed เพราะแผงเลื่อนแยก */
.tools .thumb .zoom { position: fixed; left: auto; top: auto; z-index: 70; }
.tools .thumb.flip .zoom { right: auto; }
/* lightbox + ซูม */
.lb { position: fixed; inset: 0; z-index: 90; background: rgba(0,0,0,.88); display: grid; grid-template-columns: 60px 1fr 60px; align-items: stretch; touch-action: none; }
.lb[hidden] { display: none; }
.lb .stage { position: relative; overflow: hidden; margin: 56px 0 40px; cursor: zoom-in; }
.lb .stage.pan { cursor: grab; } .lb .stage.pan:active { cursor: grabbing; }
.lb .stage img { position: absolute; left: 0; top: 0; transform-origin: 0 0; max-width: none; max-height: none; user-select: none; -webkit-user-drag: none; image-rendering: auto; will-change: transform; }
.lb .stage video { position: absolute; inset: 0; margin: auto; max-width: 100%; max-height: 100%; background: #000; }
.lb .lbcap { position: fixed; left: 0; right: 0; bottom: 10px; text-align: center; color: #ddd; font-size: var(--fs-xs); pointer-events: none; }
.lb .lbnav { align-self: center; justify-self: center; width: 44px; height: 44px; border-radius: 50%; background: rgba(255,255,255,.14); color: #fff; font-size: var(--fs-2xl); line-height: 1; }
.lb .lbnav:hover:not(:disabled) { background: rgba(255,255,255,.28); } .lb .lbnav:disabled { opacity: .25; }
.lb .lbbar { position: fixed; top: 10px; right: 12px; display: flex; gap: 8px; align-items: center; color: #ddd; font-size: var(--fs-xs); flex-wrap: wrap; justify-content: flex-end; }
.lb .lbbar .btn { background: rgba(255,255,255,.14); color: #fff; }
.lb .zoomctl { display: inline-flex; align-items: center; gap: 4px; background: rgba(255,255,255,.08); border-radius: 999px; padding: 2px; }
.lb .zoomctl[hidden] { display: none; }
.lb .zoomctl #lbPct { min-width: 46px; text-align: center; font-variant-numeric: tabular-nums; color: #fff; font-weight: 700; }
@media (max-width: 760px) { .lb { grid-template-columns: 40px 1fr 40px; } .lb .lbnav { width: 36px; height: 36px; font-size: var(--fs-2xl); } .lb .lbbar { left: 8px; right: 8px; top: 6px; } }
body.lb-open { overflow: hidden; }
/* แท็กสี (จาก hash ชื่อแท็ก) */
.tag.tc0 { background: var(--info-soft); color: var(--info-ink); border-color: transparent; }
.tag.tc1 { background: var(--ok-soft); color: var(--ok-ink); border-color: transparent; }
.tag.tc2 { background: var(--warn-soft); color: var(--warn-ink); border-color: transparent; }
.tag.tc3 { background: var(--accent-soft); color: var(--accent-strong); border-color: transparent; }
.cpop.tagf { display: grid; gap: 3px; min-width: 240px; bottom: auto; top: calc(100% + 4px); left: 10px; }
.rooms .head { position: relative; }
.tagopt { display: flex; align-items: center; gap: 7px; padding: 4px 6px; border-radius: 7px; cursor: pointer; font-size: var(--fs-xs); } .tagopt:hover { background: var(--surface-2); } .tagopt .muted { margin-left: auto; }
.sticker { display: block; width: 120px; height: 120px; object-fit: contain; }
.lemoji { width: 1.6em; height: 1.6em; vertical-align: -0.45em; object-fit: contain; }   /* อีโมจิ LINE ในข้อความ (line-emoji.js) */
.sticker-fallback { color: var(--text-2); font-style: italic; }
.file a, .loc a { color: var(--link); font-weight: 600; }
.compose { border-top: 1px solid var(--border); padding: 7px 10px 9px; display: grid; gap: 7px; position: relative; }
.quick { display: flex; gap: 5px; flex-wrap: wrap; } .quick .chip { height: 26px; padding: 0 9px; font-size: var(--fs-xs); background: var(--surface-2); }
.cbox { display: flex; gap: 7px; align-items: flex-end; }
.cbox textarea { flex: 1; resize: none; border: 1px solid var(--input-border); border-radius: 11px; padding: 8px 11px; background: var(--input-bg); color: var(--text); min-height: 40px; max-height: 160px; outline: none; font-size: var(--fs-sm); line-height: 1.4; }
.cbox textarea:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--ring); }
.cbox .ibtn { width: 34px; height: 34px; padding: 0; font-size: var(--fs-md); justify-content: center; }
.cbox .btn { height: 36px; }
.cpop { position: absolute; bottom: calc(100% - 4px); left: 10px; z-index: 30; background: var(--dd-bg); border: 1px solid var(--border-strong); border-radius: 12px; box-shadow: var(--shadow-lg); padding: 8px; max-width: min(420px, calc(100vw - 40px)); max-height: 320px; overflow: auto; }
.cpop[hidden] { display: none; }
.cpop .ph { font-size: var(--fs-xs); color: var(--text-3); padding: 2px 4px 6px; }
.cpop.tpl { display: grid; gap: 4px; min-width: 280px; }
.cpop.tpl button { text-align: left; padding: 6px 8px; border-radius: 8px; display: grid; gap: 1px; }
.cpop.tpl button:hover { background: var(--surface-2); }
.cpop.tpl b { font-size: var(--fs-xs); } .cpop.tpl span { font-size: var(--fs-xs); color: var(--text-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cpop.stk { display: flex; flex-direction: column; gap: 6px; width: min(560px, calc(100vw - 40px)); max-height: 420px; padding: 6px; }
.stk-tabs { display: flex; gap: 3px; overflow-x: auto; flex: none; padding-bottom: 4px; border-bottom: 1px solid var(--border); scrollbar-width: thin; }
.stk-tab { flex: none; width: 40px; height: 40px; border-radius: 9px; display: grid; place-items: center; font-size: var(--fs-xl); border: 2px solid transparent; }
.stk-tab img { width: 32px; height: 32px; object-fit: contain; }
.stk-tab:hover { background: var(--surface-2); } .stk-tab.on { border-color: var(--accent); background: var(--accent-soft); }
.stk-title { font-size: var(--fs-xs); color: var(--text-2); padding: 0 4px; flex: none; }
.stk-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(64px, 1fr)); gap: 3px; overflow-y: auto; flex: 1; min-height: 0; padding-right: 2px; }
.stk-grid button { border-radius: 10px; padding: 3px; display: grid; place-items: center; aspect-ratio: 1; }
.stk-grid button:hover { background: var(--surface-2); }
.stk-grid img { width: 100%; height: 100%; max-width: 64px; max-height: 64px; object-fit: contain; }
@media (max-width: 760px) { .cpop.stk { max-height: 60vh; } }

/* ตัวอย่างรูปที่จะส่ง (เหนือช่องพิมพ์) + สถานะลากวาง */
.attach { display: flex; align-items: center; gap: 10px; padding: 6px 8px; border: 1px solid var(--border); border-radius: 10px; background: var(--surface-2); }
.attach img { width: 72px; height: 72px; object-fit: cover; border-radius: 8px; border: 1px solid var(--border); background: #fff; }
.attach .grow { flex: 1; min-width: 0; display: grid; gap: 2px; } .attach b { font-size: var(--fs-xs); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .attach span { font-size: var(--fs-xs); color: var(--text-2); }
.app.dropping .msgs { outline: 3px dashed var(--accent); outline-offset: -6px; }
.app.dropping .compose { background: var(--accent-soft); }

/* ---- ขวา: ทัพบัญชาการ ---- */
.tools .tabs { display: flex; border-bottom: 1px solid var(--border); padding: 4px 40px 0 4px; gap: 0; }
.tools .tab { flex: 1; font-size: var(--fs-xs); font-weight: 700; color: var(--text-2); padding: 7px 2px 6px; border-bottom: 2px solid transparent; display: flex; flex-direction: column; align-items: center; gap: 1px; white-space: nowrap; position: relative; }
.tools .tab[aria-selected="true"] { color: var(--accent-strong); border-bottom-color: var(--accent-strong); }
.tools .tab .ic { font-size: var(--fs-md); } .tools .tab .n { position: absolute; top: 2px; right: 4px; background: var(--danger); color: #fff; border-radius: 999px; font-size: var(--fs-xs); padding: 0 4px; } .tools .tab .n:empty { display: none; }
.tools .body { flex: 1; overflow: auto; padding: 10px; display: grid; gap: 9px; align-content: start; }
.tools .topbtns { position: absolute; top: 6px; right: 6px; display: flex; gap: 4px; z-index: 2; }
.rail-tabs { display: none; flex-direction: column; gap: 4px; padding: 44px 6px 6px; }
.app.rail .tools .tabs, .app.rail .tools .body { display: none; } .app.rail .tools .rail-tabs { display: flex; }
.rail-tabs .tab { font-size: var(--fs-lg); height: 38px; border-radius: 8px; color: var(--text-2); } .rail-tabs .tab:hover { background: var(--surface-2); }
.sec { display: grid; gap: 5px; } .sec h4 { margin: 0; font-size: var(--fs-xs); color: var(--text-3); text-transform: uppercase; letter-spacing: .05em; font-weight: 800; display: flex; align-items: center; gap: 6px; }
.sec h4 .r { margin-left: auto; text-transform: none; letter-spacing: 0; font-weight: 600; }
.crow { display: flex; align-items: center; gap: 8px; padding: 6px 9px; border: 1px solid var(--border); border-radius: 9px; background: var(--surface); }
.crow .t { font-weight: 700; font-size: var(--fs-xs); line-height: 1.3; } .crow .s { font-size: var(--fs-xs); color: var(--text-2); } .crow .grow { flex: 1; min-width: 0; }
.crow .pr { font-weight: 800; font-size: var(--fs-sm); white-space: nowrap; }
.ckv { display: grid; grid-template-columns: auto 1fr; gap: 3px 10px; font-size: var(--fs-xs); } .ckv .k { color: var(--text-2); }
.stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.stat { background: var(--surface-2); border-radius: 9px; padding: 7px 9px; } .stat b { display: block; font-size: var(--fs-md); font-weight: 800; } .stat span { font-size: var(--fs-xs); color: var(--text-2); }
.field { display: grid; gap: 3px; } .field label { font-size: var(--fs-xs); color: var(--text-2); }
.field input, .field select, .field textarea { border: 1px solid var(--input-border); border-radius: 8px; min-height: 32px; padding: 5px 9px; background: var(--input-bg); color: var(--text); width: 100%; }
.field textarea { resize: vertical; min-height: 64px; }
.stage { display: inline-flex; gap: 4px; align-items: center; font-size: var(--fs-xs); color: var(--text-3); } .stage i { width: 8px; height: 8px; border-radius: 50%; background: var(--ok); display: inline-block; } .stage i.off { background: var(--border-strong); } .stage i.bad { background: var(--danger); } .stage i.wait { background: var(--warn); }
.hint { font-size: var(--fs-xs); color: var(--text-2); background: var(--info-soft); border-radius: 8px; padding: 6px 9px; }
.hint.warn { background: var(--warn-soft); color: var(--warn-ink); }
.tools .btn.accent { width: 100%; height: 34px; }
.tagrow { display: flex; gap: 5px; flex-wrap: wrap; align-items: center; }
.tagrow .chip { height: 26px; font-size: var(--fs-xs); }
.pick { display: grid; gap: 4px; max-height: 260px; overflow: auto; margin-top: 6px; }
.pick button { text-align: left; padding: 7px 9px; border-radius: 8px; border: 1px solid var(--border); display: grid; gap: 1px; }
.pick button:hover { background: var(--surface-2); } .pick button[aria-pressed="true"] { border-color: var(--accent); background: var(--accent-soft); }
.pick .t { font-weight: 700; font-size: var(--fs-sm); } .pick .s { font-size: var(--fs-xs); color: var(--text-2); }
.pick .none { padding: 8px; color: var(--text-3); font-size: var(--fs-xs); text-align: center; }
details.tech { font-size: var(--fs-xs); color: var(--text-3); } details.tech summary { cursor: pointer; } details.tech code { display: block; white-space: pre-wrap; margin-top: 4px; }

/* แผงขวาเมื่อกว้าง (≥560px · JS ใส่ class wide): 2 คอลัมน์ · ตารางแทนแถว */
.tools.wide .body { grid-template-columns: 1fr 1fr; gap: 9px 12px; }
.tools.wide .body > .span2, .tools.wide .body > .btn, .tools.wide .body > .hint, .tools.wide .body > .sec.span2, .tools.wide .body > .tbl-wrap, .tools.wide .body > .empty, .tools.wide .body > .skel { grid-column: 1 / -1; }
.tools .tbl-wrap { border: 1px solid var(--border); border-radius: 9px; overflow: auto; max-width: 100%; }
.tools .tbl { width: 100%; border-collapse: collapse; font-size: var(--fs-xs); }
.tools .tbl th { position: sticky; top: 0; padding: 3px 8px; font-size: var(--fs-xs); }
.tools .tbl td { padding: 3px 8px; height: 32px; }
.tools .tbl .tag { font-size: var(--fs-xs); padding: 0 6px; }
.tools .tbl .ibtn { height: 24px; padding: 0 7px; font-size: var(--fs-xs); }
.tools .tbl .tag .x { font-size: var(--fs-xs); }
.tools .tbl td:not(.nw) { white-space: normal; }   /* คอลัมน์ 'ออกต่อเป็น' ตัดบรรทัดได้ ไม่ดันตารางล้น */
.tools .tbl td.nw.num b { font-size: var(--fs-xs); }
.tools .body > * { min-width: 0; max-width: 100%; }
.tools .sec { min-width: 0; }
.tools .crow { min-width: 0; max-width: 100%; } .tools .crow .grow { overflow: hidden; }
.tools .tbl .stage { display: inline-flex; }
.sec h4 .src { margin-left: 6px; text-transform: none; letter-spacing: 0; font-weight: 600; color: var(--info-ink); background: var(--info-soft); padding: 0 7px; border-radius: 999px; }

/* ---- จอ 1000-1400px: แผงขวา 40% ---- */
@media (max-width: 1400px) { .app { --tools-w: 40%; } }
/* แผงรายละเอียดบิลใต้ตาราง */
.tools .crow.link, .tools tr.link { cursor: pointer; }
.tools .crow.link:hover { background: var(--surface-2); }
.tools .crow.sel { border-color: var(--accent); background: var(--accent-soft); }
.tools tr.sel td { background: var(--accent-soft); }
.tools a.docno { color: var(--link); font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }
.docdetail:empty { display: none; }
.docdetail { border: 1px solid var(--accent); border-radius: 12px; padding: 8px 10px; background: var(--surface); display: grid; gap: 6px; margin-top: 4px; box-shadow: var(--shadow); max-width: 100%; min-width: 0; overflow: hidden; }
.docdetail { container-type: inline-size; }
/* หัวแผง: grid แถว 1 [ชิป QT][→][ชิป INV+🖨][ปุ่ม] · แถว 2 [วันที่·สถานะ][ ][วันที่·สถานะ][ ] ใต้ชิปของตัวเอง */
.docdetail .dd-head { display: grid; grid-template-columns: auto auto auto minmax(0, 1fr); grid-template-areas: "c1 arr c2 acts" "s1 . s2 ."; column-gap: 8px; row-gap: 3px; align-items: center; padding-bottom: 6px; border-bottom: 1px solid var(--border); min-width: 0; }
.docdetail .dd-head:not(.has-ref) { grid-template-columns: auto minmax(0, 1fr); grid-template-areas: "c1 acts" "s1 ."; }
.docdetail .dd-head .c1 { grid-area: c1; } .docdetail .dd-head .arr { grid-area: arr; color: var(--text-3); font-size: var(--fs-md); } .docdetail .dd-head .c2 { grid-area: c2; }
.docdetail .dd-head .s1 { grid-area: s1; } .docdetail .dd-head .s2 { grid-area: s2; }
.docdetail .dd-acts { grid-area: acts; display: flex; gap: 4px; align-items: center; justify-self: end; flex: none; } .docdetail .dd-acts .btn.sm { height: 26px; padding: 0 9px; font-size: var(--fs-xs); } .docdetail .dd-acts .ibtn { height: 26px; }
.docdetail .dchip { display: inline-flex; align-items: center; gap: 6px; padding: 3px 9px; border: 1px solid var(--border); border-radius: 9px; background: var(--surface-2); white-space: nowrap; max-width: 100%; }
.docdetail .dchip > b, .docdetail .dchip a.docno { font-size: var(--fs-md); font-weight: 800; }
.docdetail .dchip .ibtn { height: 22px; padding: 0 5px; }
.docdetail .dsub { display: inline-flex; align-items: center; gap: 6px; font-size: var(--fs-xs); color: var(--text-2); white-space: nowrap; padding-left: 2px; }
.docdetail .dsub .tag { font-size: var(--fs-xs); padding: 0 6px; }
@container (max-width: 520px) {
  .docdetail .dd-head, .docdetail .dd-head:not(.has-ref) { grid-template-columns: auto auto minmax(0, 1fr); grid-template-areas: "c1 arr c2" "s1 . s2" "acts acts acts"; }
  .docdetail .dd-acts { justify-self: end; }
}
.docdetail .dd-load { color: var(--text-2); font-size: var(--fs-xs); display: flex; gap: 8px; align-items: center; }
/* ตารางรายการ — ค่าเดียวกับ style.css `.qp .qth/.qtr` ของหน้าใบเสนอราคา (scope .qp ใช้ข้ามหน้าไม่ได้ จึงคัดค่ามาให้เหมือน) · อ่านอย่างเดียว ไม่มี ≡ ✕ รายละเอียด */
.docdetail .qtbl { border: 1px solid var(--border); border-radius: var(--radius-sm); min-width: 0; max-width: 100%; overflow: hidden; }
.docdetail .qth, .docdetail .qtr { display: grid; grid-template-columns: 20px minmax(0, 1fr) 64px 92px 92px; gap: 6px; align-items: center; padding: 3px 8px; border-bottom: 1px solid var(--border); min-width: 0; }
.docdetail .qth { font-size: var(--fs-xs); color: var(--text-3); font-weight: 600; background: var(--surface-2); border-radius: var(--radius-sm) var(--radius-sm) 0 0; padding: 4px 8px; }
.docdetail .qth span:nth-child(n+3) { text-align: right; } .docdetail .qth span:first-child { text-align: center; }
.docdetail .qtr { min-height: 40px; } .docdetail .qtr:last-child { border-bottom: 0; }
.docdetail .qtr.ship { background: var(--surface-2); }
.docdetail .qtr .n { font-size: var(--fs-xs); color: var(--text-3); font-variant-numeric: tabular-nums; text-align: center; }
.docdetail .qtr .prod { display: flex; gap: 6px; align-items: center; min-width: 0; position: relative; }
.docdetail .qtr .prod .tx { min-width: 0; display: flex; flex-direction: column; }
.docdetail .qtr .prod .nm { font-weight: 600; font-size: var(--fs-xs); line-height: 1.2; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.docdetail .qtr .prod .sk { font-size: var(--fs-xs); color: var(--text-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-variant-numeric: tabular-nums; }
.docdetail .qtr .prod .sk b { color: var(--text-2); font-weight: 600; }
.docdetail .qtr .thumb { width: 30px; height: 30px; border-radius: 7px; flex: none; background: var(--thumb-bg); }   /* ขนาดคงที่ก่อนรูปมา กัน layout shift */
.docdetail .qtr .thumb img { background: var(--thumb-bg); }
.docdetail .skel { margin: 3px 0; height: 11px; display: inline-block; vertical-align: middle; }
.docdetail .qtr .tx .skel { display: block; }
.docdetail.fade { animation: ddfade .12s ease-out; }
@keyframes ddfade { from { opacity: .35; } to { opacity: 1; } }
.docdetail .dd-acts .btn:disabled, .docdetail .dd-acts .ibtn:disabled { opacity: .45; } .docdetail .qtr .thumb img { border-radius: 6px; } .docdetail .qtr .thumb .ph { font-size: var(--fs-md); }
.docdetail .qtr .thumb.svc { cursor: default; font-size: var(--fs-md); }
.docdetail .qtr .qty, .docdetail .qtr .pin, .docdetail .qtr .tot { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; font-size: var(--fs-xs); }
.docdetail .qtr .qty small { font-size: var(--fs-xs); color: var(--text-3); }
.docdetail .qtr .pin { font-weight: 700; }
.docdetail .qtr .tot { font-weight: 700; font-size: var(--fs-sm); }
@media (max-width: 760px) { .docdetail .qth, .docdetail .qtr { grid-template-columns: 18px minmax(0, 1fr) 52px 76px; } .docdetail .qth span:nth-child(4), .docdetail .qtr .pin { display: none; } }
.docdetail .dd-sum { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px 14px; font-size: var(--fs-xs); justify-self: end; min-width: min(240px, 100%); max-width: 100%; padding-top: 5px; border-top: 1px solid var(--border); }
.docdetail .dd-sum .num { white-space: nowrap; }
.docdetail .dd-sum .tot { font-weight: 800; font-size: var(--fs-lg); color: var(--accent-strong); }

/* แท็บลูกค้า: ชิปสรุป + 2 กล่อง (ออกบิล · จัดส่ง) */
.syschips { display: flex; gap: 5px; flex-wrap: wrap; }
.cbx2 { display: grid; gap: 9px; min-width: 0; align-items: start; }
.tools.wide .cbx2 { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.cbx { border: 1px solid var(--border); border-radius: 10px; padding: 8px 10px; background: var(--surface); min-width: 0; align-content: start; align-self: start; }   /* กล่องสั้นกว่าอีกฝั่ง: ห้ามยืดแถวข้างใน (สวิตช์เคยบวมเป็นวงกลม) */
.cbx .ckv { font-size: var(--fs-xs); } .cbx .ckv span:not(.k) { overflow-wrap: anywhere; }
.cbx .g2 { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.cbx .field input, .cbx .field textarea { height: 30px; font-size: var(--fs-xs); } .cbx .field textarea { height: auto; min-height: 48px; }
.cbx select.in { height: 30px; font-size: var(--fs-xs); margin-bottom: 4px; }
.seg2 { display: inline-flex; align-items: center; height: 32px; width: max-content; max-width: 100%; border: 1px solid var(--border); border-radius: 999px; padding: 2px; background: var(--surface-2); margin-bottom: 6px; justify-self: start; }
.seg2 button { height: 26px; line-height: 26px; border-radius: 999px; padding: 0 14px; font-size: var(--fs-xs); font-weight: 700; color: var(--text-2); white-space: nowrap; flex: none; }
.seg2 button.on { background: var(--chip-on-bg); color: var(--chip-on-ink); }
.tools .crow .ibtn { flex: none; }
/* ⓘ tooltip กลาง: ชี้/โฟกัส/แตะ แล้วโผล่ */
.ihint { display: inline-grid; place-items: center; width: 16px; height: 16px; border-radius: 50%; font-size: var(--fs-xs); color: var(--text-3); cursor: help; position: relative; vertical-align: middle; margin-left: 3px; flex: none; }
.ihint:hover, .ihint:focus { color: var(--accent-strong); outline: none; }
.ihint::after { content: attr(data-tip); position: absolute; left: 50%; bottom: calc(100% + 6px); transform: translateX(-50%); background: var(--text); color: var(--bg); padding: 6px 9px; border-radius: 8px; font-size: var(--fs-xs); line-height: 1.4; width: max-content; max-width: min(280px, 80vw); white-space: normal; text-align: left; opacity: 0; visibility: hidden; transition: opacity .12s; z-index: 80; pointer-events: none; box-shadow: var(--shadow-lg); }
.ihint:hover::after, .ihint:focus::after, .ihint.open::after { opacity: 1; visibility: visible; }
.tagrow .ihint, label .ihint, .crow .ihint { align-self: center; }
/* กล่องวางแล้วแยก + ตรวจเบอร์ */
.pastebox { border: 1px dashed var(--border-strong); border-radius: 9px; padding: 6px 8px; background: var(--surface-2); display: grid; gap: 5px; margin-bottom: 4px; }
.pastebox .pb-h { display: flex; align-items: center; gap: 6px; font-size: var(--fs-xs); color: var(--text-2); flex-wrap: wrap; } .pastebox .pb-h span { flex: 1; min-width: 0; }
.pastebox textarea.in { width: 100%; min-height: 120px; font-size: var(--fs-xs); resize: vertical; } .pastebox textarea.in::placeholder { color: var(--text-3); opacity: .6; }
.pastebox .pb-f { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; } .pastebox .pb-note { display: inline-flex; align-items: center; gap: 4px; }
.pastebox.pb-drop { border-color: var(--accent); outline: 2px dashed var(--accent); outline-offset: -2px; background: var(--accent-soft); }   /* ลากรูป/ไฟล์มาอยู่เหนือกล่อง → ปล่อยได้ (paste-ocr.js) */
.cbx .in.need, .newcust .in.need { background: var(--warn-soft); border-color: var(--warn); }
.cbx .in.bad, .newcust .in.bad { border-color: var(--danger); box-shadow: 0 0 0 3px color-mix(in srgb, var(--danger) 22%, transparent); }
.cbx .fh.bad, .newcust .fh.bad { font-size: var(--fs-xs); color: var(--danger); font-weight: 600; margin-top: 2px; }
.cbx .field.smart, .newcust .field.smart { position: relative; }
.cbx .g2.area, .newcust .g2.area { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); }
.cbx .in.warn, .newcust .in.warn { border-color: var(--warn); background: var(--warn-soft); }
.cbx .req, .newcust .req { color: var(--danger); }
.cbx .dd, .newcust .dd { font-size: var(--fs-xs); z-index: 60; } .cbx .dd .path, .newcust .dd .path { color: var(--text-3); font-size: var(--fs-xs); }
.matchf input.in { height: 34px; font-size: var(--fs-sm); border-color: var(--accent); }
.matchf .dd b { font-size: var(--fs-sm); }
.tools .fh { font-size: var(--fs-xs); color: var(--text-3); margin-top: 3px; }
.tools .tagrow .btn.accent { width: auto; }
/* ฟอร์มลูกค้าใหม่ใน dialog จับคู่ (เลิกใช้ dialog แล้ว — เหลือ style เผื่อ) */
.newcust { display: grid; gap: 6px; max-height: min(62vh, 560px); overflow: auto; padding-right: 2px; }
.newcust .g2 { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.newcust .field input, .newcust .field textarea { height: 30px; font-size: var(--fs-xs); } .newcust .field textarea { height: auto; min-height: 46px; }
.newcust .field label { display: flex; gap: 6px; align-items: center; }
.newcust .sec-h { margin: 6px 0 0; font-size: var(--fs-xs); color: var(--text-3); text-transform: uppercase; letter-spacing: .05em; }
.newcust .pick:empty { display: none; }
.newcust .seg2 { margin: 0; }
#mres .none .link { font-size: var(--fs-xs); }
dialog.dlg.wide2 { width: min(520px, calc(100vw - 32px)); }

/* ---- จอกลาง: ซ่อนแผงขวาเป็นแผ่นเลื่อน ---- */
@media (max-width: 1000px) {
  .app, .app.rail { grid-template-columns: 240px minmax(0, 1fr); }
  .gutter { display: none; }
  .tools { position: fixed; inset: auto 0 0 0; max-height: 80dvh; z-index: 45; border-radius: 16px 16px 0 0; transform: translateY(105%); transition: transform .22s; }
  .app.sheet .tools { transform: none; }
  .app.rail .tools .tabs, .app.rail .tools .body { display: flex; } .app.rail .tools .body { display: grid; } .rail-tabs, .app.rail .tools .rail-tabs { display: none; }
  .chat .info { display: inline-flex; }
}
@media (min-width: 1001px) { .chat .info { display: none; } }
/* ---- จอแคบ: คอลัมน์เดียว รายชื่อ → แชท ---- */
@media (max-width: 760px) {
  .cp main.wrap { padding-inline: 8px; }
  .cp .hdr .ttl { overflow: hidden; }
  .cp .hdr .sub .pill { max-width: 44vw; overflow: hidden; text-overflow: ellipsis; display: inline-block; line-height: 1.6; }
  .chat .acts .ibtn .lbl { display: none; }
  .chat .acts .ibtn { padding: 0 7px; }
  .app, .app.rail { grid-template-columns: 1fr; }
  .rooms { display: flex; } .chat { display: none; }
  .app.m-chat .rooms { display: none; } .app.m-chat .chat { display: flex; }
  .chat .back { display: inline-flex; }
  .chat .who { font-size: var(--fs-sm); }
  .m { max-width: 92%; }
  .cpop.stk { grid-template-columns: repeat(3, 76px); }
  .stats { grid-template-columns: repeat(3, 1fr); }
}
@media (prefers-reduced-motion: reduce) { .app, .tools { transition: none; } }

/* ชิป FA กดได้ + กล่องค้นผูกผู้ติดต่อ */
.syschips .tagbtn { cursor: pointer; font: inherit; font-size: inherit; }
.syschips .tagbtn.warn { border: 1px dashed var(--warn); background: var(--warn-soft); color: var(--warn-ink); }
.syschips .tagbtn:hover { filter: brightness(.96); }
.falink { display: grid; gap: 6px; }

/* สวิตช์ประเภทบิลล็อกในโหมดดู (Mai 2026-09-19) */
.seg2.locked { opacity: .55; background: var(--surface-2); cursor: not-allowed; }
.seg2.locked button { cursor: not-allowed; }
.seg2.locked button.on { background: var(--text-3); color: var(--bg); }
/* หัวกล่องออกบิล/จัดส่ง ใหญ่+สีชัด (Mai 2026-09-19) */
.cbx > h4 { font-size: var(--fs-md); letter-spacing: 0; text-transform: none; color: var(--accent-strong, #4338ca); padding-bottom: 6px; border-bottom: 2px solid var(--accent-soft, #e0e7ff); margin-bottom: 4px; }
.cbx > h4::before { content: ''; width: 5px; height: 16px; border-radius: 3px; background: var(--accent, #4f46e5); flex: none; }

/* ผลค้นผู้ติดต่อ FA: จำนวนครั้งที่ใช้ + แนะนำ */
.falink .dd button.best { background: var(--accent-soft); }
.falink .dd .use { display: block; font-size: var(--fs-xs); color: var(--text-2); }
.falink .dd .tag { font-size: var(--fs-xs); padding: 0 6px; height: 18px; line-height: 18px; margin-left: 4px; vertical-align: middle; }

/* ป๊อปอัปรายใบตอนชี้เมาส์ที่ผลค้นผู้ติดต่อ FA */
.falink .dd button { position: relative; }
.falink .dd .upop .uk b { display: block; margin-bottom: 2px; color: var(--accent-strong); }
.falink .dd .upop .ud { display: grid; grid-template-columns: 1fr auto 70px; gap: 8px; padding: 1px 0; }
.falink .dd .upop .ud .r { text-align: right; font-variant-numeric: tabular-nums; }

.falink .dd .ddfoot { display: flex; align-items: center; gap: 8px; padding: 6px 8px; border-top: 1px solid var(--border); background: var(--surface-2); position: sticky; bottom: 0; }
.falink .dd { max-height: 60vh; overflow: auto; }

/* ผลค้นผูก FA: แสดงข้อความเต็ม ไม่ตัด ไม่ถูกบัง (Mai 2026-09-19) */
.falink .dd button { display: grid; grid-template-columns: 1fr; gap: 2px; white-space: normal; align-items: start; }
.falink .dd button > b { font-size: var(--fs-sm); }
.falink .dd button .path { white-space: normal; overflow: visible; text-overflow: clip; line-height: 1.35; }
.falink .dd button .tag { white-space: nowrap; }

/* ผลค้นผูก FA แบ่งซ้าย (รายการ) / ขวา (ใบของรายการที่ชี้) — Mai 2026-09-19 */
.falink .dd .ddcols { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); }
.falink .dd .ddl { border-right: 1px solid var(--border); min-width: 0; }
.falink .dd .ddr { padding: 8px 10px; font-size: var(--fs-xs); min-width: 0; overflow: auto; max-height: 56vh; background: var(--surface-2); }
.falink .dd .ddr .cap { font-weight: 700; margin-bottom: 6px; }
.falink .dd .ddr .upop { display: grid; gap: 8px; }
.falink .dd .ddr .uk b { display: block; margin-bottom: 2px; color: var(--accent-strong); }
.falink .dd .ddr .ud { display: grid; grid-template-columns: 1fr auto 70px; gap: 8px; padding: 1px 0; }
.falink .dd .ddr .ud .r { text-align: right; font-variant-numeric: tabular-nums; }
.falink .dd button .nm { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.falink .dd button.cur { background: var(--accent-soft); box-shadow: inset 3px 0 0 var(--accent); }
.tools:not(.wide) .falink .dd .ddcols { grid-template-columns: 1fr; } .tools:not(.wide) .falink .dd .ddr { border-top: 1px solid var(--border); }

/* ซื้อประจำ: การ์ดเรียง 2 คอลัมน์เมื่อแผงกว้าง · ปริมาณสะสมเน้น */
#pFav .sec > .crow { min-width: 0; }
.tools.wide #pFav .sec { display: grid; grid-template-columns: repeat(auto-fill, minmax(360px, 1fr)); gap: 6px; }
.tools.wide #pFav .sec > h4 { grid-column: 1 / -1; }
#pFav .crow .s .acc { color: var(--accent-strong); }

/* ชิปผู้ใช้ (เข้าด้วย LINE) มีรูปโปรไฟล์ */
#loginChip { display: inline-flex; align-items: center; gap: 6px; }
#loginChip .ava { width: 22px; height: 22px; border-radius: 50%; object-fit: cover; }

/* รายการค้นจับคู่ 2 กลุ่ม */
.matchf .dd .grp { font-size: var(--fs-xs); font-weight: 800; color: var(--text-3); padding: 6px 10px 3px; background: var(--surface-2); border-top: 1px solid var(--border); display: flex; gap: 6px; align-items: center; text-transform: none; }
.matchf .dd .grp:first-child { border-top: 0; }
.matchf .dd button[data-fcnew] b::before { content: 'FA '; font-size: var(--fs-xs); color: var(--info-ink); background: var(--info-soft); border-radius: 4px; padding: 0 4px; margin-right: 4px; }

/* แถวแผนที่ในฟอร์มจัดส่ง */
.georow { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; font-size: var(--fs-xs); padding: 6px 8px; border: 1px dashed var(--border-strong); border-radius: 8px; background: var(--surface-2); margin-bottom: 4px; }
.georow .sp { flex: 1; }
.georow .in.geourl { flex: 1 1 220px; min-width: 0; height: 26px; font-size: var(--fs-xs); font-family: ui-monospace, monospace; }
.georow .ibtn { height: 26px; }

/* กล่องเทียบที่อยู่ (Mai 2026-09-19) */
.cmpbox { border: 1px solid var(--warn); border-radius: 10px; padding: 8px 10px; background: var(--warn-soft); }
.cmpbox h4 { font-size: var(--fs-sm); text-transform: none; letter-spacing: 0; color: var(--warn-ink); }
.cmpt { width: 100%; border-collapse: collapse; background: var(--surface); border-radius: 8px; overflow: hidden; font-size: var(--fs-xs); }
.cmpt th, .cmpt td { padding: 4px 8px; border-bottom: 1px solid var(--border); text-align: left; vertical-align: top; }
.cmpt th { font-size: var(--fs-xs); color: var(--text-3); background: var(--surface-2); }
.cmpt td.k { color: var(--text-3); white-space: nowrap; width: 90px; }
.cmpt tr.diff td:last-child { background: #fff3c4; font-weight: 600; }
.cmpt tr.miss td:last-child { color: var(--text-3); }
.cmpbox .tagrow { margin-top: 6px; display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }

/* กล่องข้อความที่อ่านได้จากรูป (OCR) */
.ocrbox { margin-top: 6px; border: 1px dashed var(--border-strong, var(--border)); border-radius: 8px; padding: 6px 8px; background: var(--surface-2); max-width: 420px; }
.ocrbox .ocrh { display: flex; align-items: center; font-size: var(--fs-xs); font-weight: 800; color: var(--text-3); margin-bottom: 4px; }
.ocrbox .ocrh .r { margin-left: auto; }
.ocrbox .ocrt { width: 100%; font-size: var(--fs-xs); line-height: 1.4; resize: vertical; }
.ocrbox .act-row { margin-top: 6px; }

.ocrbox .ocrbody { display: none; }
.ocrbox.open .ocrbody { display: block; }
.ocrbox .ocrtg { background: none; border: 0; padding: 0; font: inherit; font-size: var(--fs-xs); font-weight: 800; color: var(--text-3); cursor: pointer; display: inline-flex; gap: 4px; align-items: center; }
.ocrbox .ocrtg:hover { color: var(--text); }
.ocrbox .ocrtg .arr { display: inline-block; width: 10px; }
.ocrbox .ocrh .r { display: inline-flex; gap: 4px; }

/* กล่องออกบิล/จัดส่ง พับได้ (Mai 2026-09-20) */
.cbx h4.cbx-h { cursor: pointer; user-select: none; }
.cbx .cbx-tg { background: none; border: 0; padding: 0 2px 0 0; font: inherit; font-size: var(--fs-xs); color: var(--text-3); cursor: pointer; line-height: 1; }
.cbx .cbx-sum { display: none; font-weight: 600; text-transform: none; letter-spacing: 0; color: var(--text-2); font-size: var(--fs-xs); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex: 1; gap: 6px; align-items: center; }
.cbx .cbx-sum .txt { overflow: hidden; text-overflow: ellipsis; }
.cbx.folded { padding-bottom: 8px; }
.cbx.folded > :not(h4) { display: none !important; }
.cbx.folded .cbx-sum { display: inline-flex; }

/* รายการใบเสนอ/เอกสารจาก FlowAccount: โชว์ ~6 แถวแล้วเลื่อน (Mai 2026-09-20) — หัวตารางติดบน */
#pQuote .sec .tbl-wrap, #pOrder .sec .tbl-wrap { max-height: 236px; overflow-y: auto; }
#pQuote .sec .tbl-wrap thead th, #pOrder .sec .tbl-wrap thead th { position: sticky; top: 0; background: var(--surface-2); z-index: 1; }
#pQuote .sec > .crow-list, #pOrder .sec > .crow-list { max-height: 300px; overflow-y: auto; }

/* ตัวดู/พิมพ์ PDF ในหน้า (gw.js PdfViewer · Mai 2026-09-20 "กดพิมพ์แล้วดาวน์โหลด ต้องไปตามเปิดอีก") — เกือบเต็มจอ · อยู่ใต้ <dialog> (top layer) แต่เหนือแผงทุกอย่าง */
.pdfv { position: fixed; inset: 0; z-index: 92; background: rgba(10,14,12,.62); display: flex; align-items: center; justify-content: center; padding: 14px; }
.pdfv[hidden] { display: none; }
.pdfv-box { width: min(1240px, 100%); height: calc(100dvh - 28px); background: var(--surface); border-radius: 14px; box-shadow: var(--shadow-lg); display: flex; flex-direction: column; overflow: hidden; }
.pdfv-head { display: flex; align-items: center; gap: 6px; padding: 7px 10px; border-bottom: 1px solid var(--border); background: var(--surface-2); flex: none; }
.pdfv-head .ic { font-size: var(--fs-lg); }
.pdfv-head .nm { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: var(--fs-sm); font-weight: 800; }
.pdfv-head .cnt { font-size: var(--fs-xs); flex: none; }
.pdfv-head .btn { height: 30px; padding: 0 10px; font-size: var(--fs-xs); flex: none; }
.pdfv-body { flex: 1; display: flex; min-height: 0; }
.pdfv-list { width: 230px; flex: none; border-right: 1px solid var(--border); overflow: auto; padding: 6px; display: flex; flex-direction: column; gap: 4px; background: var(--surface); }
.pdfv-list[hidden] { display: none; }
.pdfv-it { display: flex; gap: 8px; align-items: center; width: 100%; text-align: left; border: 1px solid var(--border); border-radius: 9px; background: var(--surface); color: var(--text); padding: 6px 8px; font: inherit; font-size: var(--fs-xs); cursor: pointer; }
.pdfv-it .n { flex: none; width: 20px; height: 20px; border-radius: 50%; background: var(--surface-2); font-size: var(--fs-xs); font-weight: 800; display: grid; place-items: center; }
.pdfv-it .t { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pdfv-it:hover { background: var(--surface-2); }
.pdfv-it.on { border-color: var(--accent); background: var(--accent-soft); font-weight: 700; }
.pdfv-it.on .n { background: var(--accent); color: #fff; }
.pdfv-it.err { color: var(--danger-ink); }
.pdfv-main { flex: 1; position: relative; min-width: 0; background: #525659; }
.pdfv-main iframe { width: 100%; height: 100%; border: 0; display: block; }
.pdfv-msg { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; padding: 24px; background: var(--surface); }
.pdfv-msg[hidden] { display: none; }
.pdfv-msg .card { max-width: 560px; border: 1px solid var(--border); border-radius: 12px; padding: 16px 18px; background: var(--surface-2); font-size: var(--fs-sm); line-height: 1.6; color: var(--text-2); }
.pdfv-msg .card p { margin: 0 0 12px; overflow-wrap: anywhere; }
.pdfv-msg .card .acts { display: flex; gap: 6px; flex-wrap: wrap; }
body.pdfv-open { overflow: hidden; }
@media (max-width: 760px) {
  .pdfv { padding: 0; }
  .pdfv-box { height: 100dvh; border-radius: 0; }
  .pdfv-list { width: 150px; }
  .pdfv-head { flex-wrap: wrap; }
  .pdfv-head .nm { flex-basis: 100%; }
}

/* ===== Overview "งานที่กำลังเดิน" ในแท็บลูกค้า (Mai 2026-09-20): 1 ใบเสนอ = 1 การ์ด · แถบ 7 จุด ใบเสนอ→ถึงมือ โทนเดียวกับ .co-steps ของหน้าสถานะออเดอร์ =====
   จุด: done เขียว ✓ · cur ขั้นปัจจุบัน (กะพริบเบา ๆ) · bad แดง ! · warn เหลือง (COD) · soft เทา-เขียว (เข้าคิวแพค รอเฟสรูป / ส่งเองไม่ติดตาม) · off เทา */
.ov { gap: 7px; }
.ov.loading { opacity: .7; }
.ovcard { border: 1px solid var(--border); border-radius: 10px; background: var(--surface); padding: 8px 10px 7px; display: grid; gap: 6px; cursor: pointer; min-width: 0; }
.ovcard:hover { border-color: var(--border-strong); background: var(--surface-2); }
.ovcard:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.ovcard.bad { border-color: var(--danger); }
.ovcard.fin { opacity: .75; }
.ovh { display: flex; align-items: center; gap: 6px; min-width: 0; }
.ovh .t { font-weight: 700; font-size: var(--fs-xs); display: flex; align-items: center; gap: 5px; flex-wrap: wrap; min-width: 0; }
.ovh .r { margin-left: auto; white-space: nowrap; }
.ovsteps { display: flex; align-items: flex-start; flex-wrap: wrap; row-gap: 8px; padding-top: 6px; overflow: hidden; }   /* overflow: ตัดเส้นเชื่อมที่ล้นขอบเมื่อขึ้นแถวใหม่ · padding-top เผื่อวงกะพริบ */
.ovs { flex: 1 1 0; min-width: 62px; display: grid; justify-items: center; text-align: center; gap: 2px; position: relative; font-size: var(--fs-xs); color: var(--text-3); }
.ovs b { font-weight: 700; font-size: var(--fs-xs); line-height: 1.2; white-space: nowrap; }
.ovs small { font-size: var(--fs-xs); line-height: 1.25; color: var(--text-3); overflow-wrap: anywhere; max-width: 100%; }
.ovs .d { width: 18px; height: 18px; border-radius: 50%; background: var(--surface-2); border: 1.5px solid var(--border-strong); display: grid; place-items: center; font-style: normal; font-weight: 800; font-size: var(--fs-xs); color: #fff; box-sizing: border-box; position: relative; z-index: 1; }
.ovs::before { content: ""; position: absolute; top: 8px; left: 50%; right: -50%; height: 2px; background: var(--border); }   /* เส้นเชื่อมไปจุดถัดไป */
.ovs:last-child::before { display: none; }
.ovs.done, .ovs.done small { color: var(--ok-ink); } .ovs.done .d { background: var(--ok); border-color: var(--ok); }
.ovs.done::before { background: var(--ok); }
.ovs.soft, .ovs.soft small { color: var(--ok-ink); opacity: .85; } .ovs.soft .d { background: var(--ok-soft); border-color: var(--ok); }
.ovs.soft::before { background: var(--ok-soft); }
.ovs.warn, .ovs.warn small { color: var(--warn-ink); } .ovs.warn .d { background: var(--warn); border-color: var(--warn); font-size: var(--fs-xs); }
.ovs.bad, .ovs.bad small { color: var(--danger-ink); font-weight: 600; } .ovs.bad .d { background: var(--danger); border-color: var(--danger); }
.ovs.on, .ovs.on small { color: var(--accent-strong); } .ovs.on .d { background: var(--accent-strong); border-color: var(--accent-strong); box-shadow: 0 0 0 3px var(--accent-soft); }
.ovs.cur .d { animation: ovpulse 1.6s ease-in-out infinite; }
@keyframes ovpulse { 0%, 100% { box-shadow: 0 0 0 3px var(--accent-soft); } 50% { box-shadow: 0 0 0 6px color-mix(in srgb, var(--accent) 18%, transparent); opacity: .75; } }
.ovboxes { display: grid; gap: 3px; padding: 5px 8px; border-radius: 8px; background: var(--surface-2); font-size: var(--fs-xs); }
.ovbox { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; min-width: 0; }
.ovbox.off { opacity: .55; }
.ovbox .n { font-weight: 700; color: var(--text-2); white-space: nowrap; }
.ovbox .bd { width: 8px; height: 8px; border-radius: 50%; background: var(--border-strong); display: inline-block; flex: none; }
.ovbox .bd.done { background: var(--ok); } .ovbox .bd.soft { background: var(--ok); opacity: .45; } .ovbox .bd.on { background: var(--accent-strong); } .ovbox .bd.bad { background: var(--danger); } .ovbox .bd.warn { background: var(--warn); }
.ovbox .last { margin-left: auto; color: var(--text-2); white-space: nowrap; } .ovbox .last .bad { color: var(--danger-ink); font-weight: 700; }
/* สถานะแพคต่อกล่อง (533) + รูปย่อแพค ≤3 กดเปิด lightbox · .ovs .sub2 = บรรทัดล่างของขั้น "แพค" (ส่งรูปให้ลูกค้าแล้ว/ยัง) */
.ovs .sub2 { font-weight: 600; }
.ovs.done .sub2 { color: var(--ok-ink); } .ovs.on .sub2, .ovs.warn .sub2 { color: var(--text-3); }
.ovpk { white-space: nowrap; font-weight: 700; color: var(--text-2); }
.ovpk.done { color: var(--ok-ink); } .ovpk.warn { color: var(--warn-ink); } .ovpk.on { color: var(--accent-strong); font-weight: 600; }
.ovpk .muted { font-weight: 500; }
.ovpics { display: inline-flex; gap: 3px; align-items: center; }
.ovpic { width: 26px; height: 26px; border-radius: 6px; border: 1px solid var(--border); background: var(--surface); padding: 0; overflow: hidden; cursor: zoom-in; display: grid; place-items: center; }
.ovpic img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ovpic.ld { background: var(--surface-2); animation: ovpulse 1.6s ease-in-out infinite; } .ovpic.bad { opacity: .35; cursor: default; }
.ovpic:hover { border-color: var(--accent); }
.ovfoot { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.ovfoot .ibtn:disabled { opacity: .5; cursor: default; }
.ovhist-tg { text-align: left; font-size: var(--fs-xs); font-weight: 700; color: var(--text-2); padding: 4px 2px; background: none; border: 0; cursor: pointer; }
.ovhist-tg:hover { color: var(--accent-strong); }
.tools .body > .ov { grid-column: 1 / -1; }
@media (max-width: 560px) { .ovs { min-width: 25%; } }   /* แผงแคบ/มือถือ: จุดเรียง 2 แถว (4+3) */

/* ---- แท็บใบเสนอราคา แบบ A (Mai 2026-09-21 · mockup Temp/95): 1 ใบ = 2 บรรทัด มีเส้นคั่น ไม่เลื่อนซ้ายขวา · บรรทัดล่าง = โซ่เลข FA › ออเดอร์ › BigSeller › iShip ---- */
#pQuote .sec > .xq-list { max-height: 440px; overflow-y: auto; overflow-x: hidden; }
.xq-list { display: block; border-top: 1px solid var(--border); min-width: 0; }
.xq-row { border-bottom: 1px solid var(--border); padding: 7px 6px 7px 4px; min-width: 0; }
.xq-row:not(.sel):hover { background: var(--surface-2); }
.xq-row.sel { background: var(--accent-soft); box-shadow: inset 3px 0 0 var(--accent); }
.xq-row.dim .xq-l1 > *:not(.xq-acts), .xq-row.dim .xq-l2 { opacity: .6; }   /* ใบยกเลิกจาง — ปุ่มยังชัด */
.xq-l1 { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: var(--fs-xs); cursor: pointer; min-width: 0; outline: none; }
.xq-l1:focus-visible { box-shadow: 0 0 0 2px var(--accent); border-radius: 6px; }
.xq-car { color: var(--text-3); font-size: var(--fs-xs); width: 10px; flex: none; text-align: center; }
.xq-l1 > a.docno, .xq-l1 > b:not(.xq-total) { font-size: var(--fs-sm); }
.xq-date { color: var(--text-2); font-size: var(--fs-xs); white-space: nowrap; }
.xq-total { white-space: nowrap; font-size: var(--fs-xs); }
.xq-sp { flex: 1; min-width: 4px; }
.xq-acts { display: inline-flex; align-items: center; gap: 4px; flex-wrap: wrap; justify-content: flex-end; margin-left: auto; }
.xq-acts .ibtn, .xq-acts .btn { flex: none; }
.xq-l2 { display: none; align-items: center; gap: 5px; flex-wrap: wrap; margin-top: 6px; padding-left: 18px; font-size: var(--fs-xs); min-width: 0; }
.xq-row.open .xq-l2 { display: flex; }
.xq-chip { display: inline-flex; align-items: center; gap: 5px; border: 1px solid var(--border); background: var(--surface); border-radius: 8px; padding: 2px 7px; white-space: nowrap; max-width: 100%; overflow: hidden; text-overflow: ellipsis; }
.xq-app { font-size: var(--fs-xs); font-weight: 800; color: var(--text-3); text-transform: uppercase; letter-spacing: .04em; }
.xq-app.fa { color: #0e7490; } .xq-app.bs { color: #c2410c; } .xq-app.is { color: #6d28d9; } .xq-app.xo { color: var(--accent-strong); }
.xq-n { font-weight: 700; font-size: var(--fs-xs); }
.xq-n .docno { font-weight: 700; }
.xq-lnk { appearance: none; border: 0; background: none; padding: 0; margin: 0; font: inherit; color: var(--link); font-weight: 700; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.xq-sep { color: var(--text-3); margin: 0 1px; }
.xq-st { font-size: var(--fs-xs); color: var(--text-2); }
.xq-chip.ok .xq-st { color: var(--ok-ink); } .xq-chip.wait .xq-st { color: var(--warn-ink); } .xq-chip.cut .xq-st { color: var(--danger-ink); }
.xq-chip.cut { border-color: var(--danger-soft); }
.xq-arr { color: var(--text-3); font-size: var(--fs-md); line-height: 1; }
.xq-reason { font-size: var(--fs-xs); margin-left: 4px; }
.xq-hacts { display: inline-flex; gap: 4px; align-items: center; margin-left: auto; text-transform: none; letter-spacing: 0; font-weight: 600; }
/* ---- แบบ ก (Mai 2026-09-21 · Temp/98): การ์ดขั้นตอน 4 จุด + ตาราง "ใบก่อนหน้า" ---- */
.xq-card { border: 1px solid var(--border); border-radius: 10px; padding: 9px 11px; margin: 8px 0; min-width: 0; background: var(--surface); }
.xq-card.hot { border-color: color-mix(in srgb, #ea580c 40%, var(--border)); background: color-mix(in srgb, #ea580c 4%, var(--surface)); }
.xq-card.run { border-color: color-mix(in srgb, var(--accent) 35%, var(--border)); background: color-mix(in srgb, var(--accent) 3%, var(--surface)); }
.xq-card.done { background: var(--surface-2); }
.xq-card.sel { box-shadow: inset 3px 0 0 var(--accent); }
.xq-card.dim .xq-l1 > *:not(.xq-acts), .xq-card.dim .xq-steps { opacity: .65; }
.xq-card .xq-l1 { cursor: default; }
.xq-card .xq-acts .xq-car { width: auto; font-size: var(--fs-xs); color: var(--text-2); }
.xq-steps { display: flex; align-items: flex-start; margin: 10px 0 2px; min-width: 0; }
.xq-step { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; align-items: center; text-align: center; position: relative; font-size: var(--fs-xs); color: var(--text-3); padding: 0 3px; }
.xq-step .dot { width: 22px; height: 22px; border-radius: 50%; background: var(--surface-2); border: 2px solid var(--border); display: flex; align-items: center; justify-content: center; font-size: var(--fs-xs); font-weight: 700; color: var(--text-3); z-index: 1; }
.xq-step.ok .dot { background: var(--ok); border-color: var(--ok); color: #fff; }
.xq-step.now .dot { background: var(--surface); border-color: #ea580c; color: #ea580c; }
.xq-step.bad .dot { background: var(--danger); border-color: var(--danger); color: #fff; }
.xq-step.now .stl { color: #ea580c; font-weight: 700; }
.xq-step.bad .sub { color: var(--danger-ink); }
.xq-step .stl { margin-top: 3px; white-space: nowrap; max-width: 100%; }   /* ชื่อคลาสห้ามใช้ .lb — ชนกับ lightbox รูป (.lb = จอดำเต็มหน้า) 2026-09-21 */
.xq-step .id { font-size: var(--fs-xs); font-weight: 700; color: var(--text); line-height: 1.5; max-width: 100%; overflow-wrap: anywhere; }
.xq-step .id .docno, .xq-step .id .xq-lnk { font-weight: 700; font-size: var(--fs-xs); }
.xq-step .sub { font-size: var(--fs-xs); color: var(--text-2); margin-top: 1px; }
.xq-step.ok .sub { color: var(--ok-ink); }
.xq-step + .xq-step::before { content: ""; position: absolute; left: -50%; top: 10px; width: 100%; height: 2px; background: var(--border); z-index: 0; }
.xq-step.ok + .xq-step.ok::before, .xq-step.ok + .xq-step.now::before, .xq-step.ok + .xq-step.bad::before { background: var(--ok); }
.xq-act { display: flex; align-items: center; gap: 8px; margin-top: 8px; flex-wrap: wrap; }
.xq-hint { font-size: var(--fs-xs); color: var(--text-2); min-width: 0; }
.xq-hint b { color: var(--text); }
.btn.next { background: #ea580c; color: #fff; border-color: #ea580c; font-weight: 700; height: 32px; padding: 0 14px; font-size: var(--fs-sm); text-decoration: none; display: inline-flex; align-items: center; border-radius: 8px; }
.btn.next:hover { background: #c2410c; border-color: #c2410c; }
/* ไม่อนุมัติ (ปิดงานใบเสนอ · Mai 2026-09-22 "สีจืดไป") — ทรงเท่าปุ่มทำออเดอร์ สีเทาเข้ม ไม่แย่งสายตาปุ่มหลัก */
.btn.nope { background: #475569; color: #fff; border-color: #475569; font-weight: 700; height: 32px; padding: 0 14px; font-size: var(--fs-sm); display: inline-flex; align-items: center; border-radius: 8px; }
.btn.nope:hover { background: #334155; border-color: #334155; }
/* ดูออเดอร์ (คู่ปุ่มหลักบนการ์ดใบเสนอ · 2026-09-22) — ทรงเท่ากัน โทนเขียวอ่อนของระบบ */
.btn.seeo { background: var(--g2, #e6f4ef); color: var(--g, #0b6b4f); border-color: #bfe0d3; font-weight: 700; height: 32px; padding: 0 12px; font-size: var(--fs-sm); display: inline-flex; align-items: center; border-radius: 8px; }
.btn.seeo:hover { background: #d4ece2; border-color: #9fd3c0; }
.xq-refs { display: inline-flex; align-items: center; gap: 4px; flex-wrap: wrap; margin-left: auto; font-size: var(--fs-xs); color: var(--text-2); min-width: 0; }
.xq-refs .docno, .xq-refs .xq-lnk { font-size: var(--fs-xs); }
.xq-hh { display: flex; align-items: center; gap: 6px; font-size: var(--fs-xs); color: var(--text-2); padding: 8px 6px 6px 4px; margin-top: 6px; border-top: 1px dashed var(--border); cursor: pointer; outline: none; }
.xq-hh:hover { color: var(--text); }
.xq-hh:focus-visible { box-shadow: 0 0 0 2px var(--accent); border-radius: 6px; }
.xq-hist { border-top: 1px solid var(--border); }
.xq-hist .xq-row { background: transparent; }
.xq-hist .xq-card { margin: 6px 0; }
.xq-none { font-size: var(--fs-xs); color: var(--text-3); padding: 8px 4px; }
@media (max-width: 560px) { .xq-step .stl { font-size: var(--fs-xs); } .xq-step .id { font-size: var(--fs-xs); } }

/* ลูกค้าชั่วคราวจากชื่อ LINE / ใบเสนอเงินสด (Mai 2026-09-21) */
.cashrow { margin-top: 2px; }
.cashrow .small { font-size: var(--fs-xs); }
.tag.xq-cash { font-size: var(--fs-xs); padding: 0 5px; margin-left: 2px; vertical-align: middle; }

/* ชื่อห้อง = ชื่อ LINE ต้นฉบับ · ชื่อในบิลสีจาง (Mai 2026-09-21) */
.room .nm .t .cn, #hWho .cn { font-weight: 400; color: var(--muted, #6b7280); }

/* ชิปโควตาข้อความ LINE เดือนนี้ (แถบบน ข้างเครดิต iShip — 2026-09-21) · สี = pill ok/warn/err ของ style.css · เหลือ <20% = warn · หมด = err */
/* โควตา LINE = บรรทัดเล็กใต้ชื่อ OA ในชิปสถานะ (Mai 2026-09-21) */
#oaChip.oa2 { flex-wrap: wrap; height: auto; min-height: 32px; padding-top: 4px; padding-bottom: 4px; line-height: 1.25; }
#oaChip .lq { flex-basis: 100%; display: block; font-size: var(--fs-xs); font-weight: 500; opacity: .85; padding-left: 14px; }
#oaChip .lq b { font-weight: 800; }
#oaChip .lq.warn { color: var(--warn-text, #b45309); opacity: 1; }
#oaChip .lq.err { color: var(--danger-text, #b91c1c); opacity: 1; }
#oaChip .lq .ihint { color: inherit; opacity: .7; }
#oaChip .lq .ihint::after { font-weight: 400; }
.stamp .qdot { display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: #22c55e; margin-left: 4px; vertical-align: middle; cursor: help; }   /* แบบ 2: ตอบกลับทัน ไม่นับโควตา */
/* ป้ายทางส่งต่อข้อความขาออก (chat-line-via.js · 11 ต.ค. 69): ฟรี = ตอบกลับทัน/หน้าแชท LINE · ใช้โควตา = ทางการ */
.stamp .lv { display: block; font-size: var(--fs-xs); font-weight: 600; } .stamp .lv.free { color: var(--ok-ink); } .stamp .lv.push { color: var(--text-3); }
.stamp .lv .ihint, .stamp .st .ihint { font-weight: 400; margin-left: 2px; }
.stamp .st.check { color: var(--warn-ink); font-weight: 600; }   /* sending_oa นาน = กำลังตรวจสอบกับหน้าแชท LINE (473 ข้อ 6) */
@media (max-width: 760px) { .cp .hdr .lq { height: 26px; padding: 0 8px; font-size: var(--fs-xs); } }

/* แม่แบบข้อความส่งใบเสนอราคา (QuoteTpl · 2026-09-22) */
.qtpl { display: flex; flex-direction: column; gap: 6px; width: min(560px, 86vw); max-width: 100%; }
/* กล่องแม่แบบต้องอยู่ในหน้าต่าง ไม่ล้น (Mai 2026-09-22) — เนื้อในเลื่อนเอง */
.dlg:has(.qtpl) { max-width: 92vw; }
.dlg:has(.qtpl) .body { max-height: 78vh; overflow: auto; }
.qtpl * { max-width: 100%; box-sizing: border-box; }
.qtpl .row { display: flex; gap: 6px; align-items: center; }
.qtpl .row label { font-size: var(--fs-xs); color: var(--text-3); white-space: nowrap; }
.qtpl .row select { flex: 1; }
.qtpl textarea { min-height: 120px; font-size: var(--fs-sm); line-height: 1.5; }
.qtpl .vars { font-size: var(--fs-xs); color: var(--text-3); display: flex; gap: 4px; flex-wrap: wrap; align-items: center; }
.qtpl .vars .var { font: inherit; font-size: var(--fs-xs); border: 1px solid var(--line); background: var(--surface-2, #f3f4f6); border-radius: 6px; padding: 1px 6px; cursor: pointer; }
.qtpl .vars .link { font: inherit; font-size: var(--fs-xs); border: 0; background: none; color: var(--accent, #0b6b4f); text-decoration: underline; cursor: pointer; padding: 0 2px; }
.qtpl .prev { background: #7fc0ea; border-radius: 10px; padding: 8px; }
.qtpl .prev .ph { font-size: var(--fs-xs); color: #0b3b63; margin-bottom: 4px; }
.qtpl .prev pre { margin: 0; background: #8de08d; border-radius: 10px; padding: 8px 10px; font: inherit; font-size: var(--fs-sm); white-space: pre-wrap; word-break: break-word; max-height: 220px; overflow: auto; }
.qtpl .cq-imgprev { max-height: 120px; object-fit: contain; align-self: flex-start; border: 1px solid var(--line); border-radius: 8px; cursor: zoom-in; transition: transform .12s, box-shadow .12s; }
.qtpl .cq-imgprev:hover { transform: scale(1.03); box-shadow: 0 4px 14px rgba(0,0,0,.18); }
.qtpl-panel { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; background: var(--surface-2, #f3f4f6); border-radius: 8px; padding: 6px 8px; }
.qtpl-panel .in { flex: 1; min-width: 160px; }
/* ชิปเหตุผลไม่อนุมัติใบเสนอ (2026-09-22) */
#dlgExtra .chips { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 8px; }
#dlgExtra .chips .chip { font: inherit; font-size: var(--fs-xs); border: 1px solid var(--line); background: var(--surface-2, #f3f4f6); border-radius: 999px; padding: 4px 10px; cursor: pointer; }
#dlgExtra .chips .chip:hover { border-color: var(--accent, #0b6b4f); color: var(--accent, #0b6b4f); }

/* รูปตัวอย่างใบเสนอในกล่องส่ง (Mai 2026-09-22 "ถ้า hover แล้วรูปใหญ่พออ่านได้ จะสะดวก") —
   ชี้ = รูปใหญ่ลอยกลางจอ (ไม่ต้องคลิก) · คลิก = เปิดตัวซูมเต็มที่เลื่อน/ย่อขยายได้ */
.qtpl-imgwrap { position: relative; display: inline-block; align-self: flex-start; }
.qtpl-imgwrap .tag { position: absolute; left: 4px; right: 4px; bottom: 5px; font-size: var(--fs-xs); text-align: center; padding: 2px 4px; border-radius: 999px; background: rgba(15,23,42,.72); color: #fff; pointer-events: none; opacity: .92; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.qtpl-imgwrap .qtpl-big { display: none; }
.qtpl-imgwrap:hover .qtpl-big { display: block; position: fixed; inset: 0; margin: auto; width: fit-content; height: fit-content; z-index: 60; pointer-events: none; }
.qtpl-imgwrap:hover .qtpl-big img { display: block; max-width: 92vw; max-height: 88vh; border-radius: 10px; border: 1px solid var(--line); background: #fff; box-shadow: 0 18px 60px rgba(0,0,0,.45); transform: scale(var(--qz, 1)); transform-origin: center; transition: transform .08s linear; }
.qtpl-imgwrap:hover .cq-imgprev { border-color: var(--accent, #0b6b4f); box-shadow: 0 0 0 2px rgba(11,107,79,.25); transform: none; }

/* รูปโปรไฟล์: ชี้แล้วเด้งรูปใหญ่ข้าง ๆ (2026-09-22) */
.avpop { position: fixed; z-index: 70; width: 260px; height: 260px; border-radius: 14px; overflow: hidden; border: 1px solid var(--line); background: var(--surface, #fff); box-shadow: 0 16px 44px rgba(0,0,0,.35); pointer-events: none; }
.avpop img { width: 100%; height: 100%; object-fit: cover; display: block; }
.av img { cursor: zoom-in; }
.room .av img { cursor: inherit; }

/* ตารางเทียบข้อมูลก่อน→หลัง ตอนจะทับ FlowAccount/BigSeller (2026-09-22) */
.fa-diff { width: 100%; border-collapse: collapse; font-size: var(--fs-sm); margin-top: 4px; }
.fa-diff th, .fa-diff td { border: 1px solid var(--line); padding: 5px 8px; text-align: left; vertical-align: top; overflow-wrap: anywhere; }
.fa-diff th { background: var(--surface-2, #f3f4f6); font-weight: 700; font-size: var(--fs-xs); }
.fa-diff td.old { color: var(--text-3, #6b7280); text-decoration: line-through; }
.fa-diff td.new { color: var(--accent, #0b6b4f); font-weight: 700; }

/* ===== เครื่องคิดเลขลอย (Mai 2026-09-23) — ปุ่มบนแถบหัว + ป๊อปอัพลากย้ายได้ ===== */
.calcbtn { display: inline-flex; align-items: center; justify-content: center; height: 34px; width: 34px; padding: 0; flex: none; margin-left: 4px;
  border-radius: var(--radius-pill); background: var(--surface); border: 1px solid var(--border-strong); color: var(--text-2);
  font-size: var(--fs-sm); font-weight: 700; cursor: pointer; }
.calcbtn:hover { background: var(--neutral-hover); }
.calcbtn[aria-pressed="true"] { background: var(--accent-soft); border-color: var(--accent); color: var(--accent-strong); }
.calcbtn .ic { font-size: var(--fs-lg); line-height: 1; }

.calcbox { position: fixed; z-index: 9000; width: 272px; background: var(--surface); border: 1px solid var(--border-strong);
  border-radius: 12px; box-shadow: var(--shadow-lg); overflow: hidden; display: flex; flex-direction: column; }
.calcbox[hidden] { display: none; }
.calcbox.dragging { opacity: .96; }
.calcbox .calc-hd { display: flex; align-items: center; gap: 6px; padding: 7px 8px 7px 11px; background: var(--accent-soft);
  color: var(--accent-strong); font-size: var(--fs-sm); font-weight: 800; cursor: move; user-select: none; touch-action: none; }
.calcbox .calc-hd .t { flex: 1; }
.calcbox .calc-hd .x { border: 0; background: transparent; color: inherit; font-size: var(--fs-xs); font-weight: 700; cursor: pointer;
  padding: 2px 6px; border-radius: 6px; }
.calcbox .calc-hd .x:hover { background: rgba(0,0,0,.08); }
.calcbox .calc-hist { max-height: 210px; overflow: auto; padding: 4px; display: flex; flex-direction: column; gap: 2px; }
.calcbox .calc-hist .empty { padding: 14px 10px; text-align: center; font-size: var(--fs-xs); color: var(--text-3); line-height: 1.6; }
.calcbox .calc-hist .row { display: flex; align-items: baseline; gap: 6px; width: 100%; text-align: left; border: 0; cursor: pointer;
  background: transparent; border-radius: 7px; padding: 5px 7px; font-size: var(--fs-sm); color: var(--text-2); }
.calcbox .calc-hist .row:hover { background: var(--surface-2); }
.calcbox .calc-hist .row.copied { background: var(--ok-soft); }
.calcbox .calc-hist .row .q { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  font-family: ui-monospace, Consolas, monospace; font-size: var(--fs-md); color: var(--text); }
.calcbox .calc-hist .row .eq { color: var(--text-3); }
.calcbox .calc-hist .row b { font-size: var(--fs-lg); color: var(--accent-strong); font-variant-numeric: tabular-nums; }
.calcbox .calc-in { border: 0; border-top: 1px solid var(--border); background: var(--input-bg); color: var(--text);
  padding: 10px 11px; font-size: var(--fs-lg); font-family: ui-monospace, Consolas, monospace; outline: none; }
.calcbox .calc-err { padding: 6px 11px; background: var(--danger-soft); color: var(--danger-ink); font-size: var(--fs-xs); font-weight: 700; }
/* ใบล่าสุดที่จบแล้ว ยังกางค้างไว้ให้เห็น (Mai 2026-09-23) */
.xq-lastlb { font-size: var(--fs-xs); font-weight: 800; color: var(--text-2); padding: 2px 2px 6px; }
.xq-lastlb .muted { font-weight: 600; color: var(--text-3); }