@import url("/vendor/fonts.css");   /* PZI24 privacy: Sarabun self-host */

:root{
    color-scheme: light;

    --line-green:#06c755;
    --line-green-dk:#05a948;

    --bg:#f7f8fa;
    --panel:#ffffff;
    --side:#ffffff;
    --border:#e3e6ec;
    --border2:#eef0f4;
    --text:#1b1c20;
    --muted:#8b91a1;

    /* สีสถานะเคส (แถบรายการแชท) */
    --st-new:#e6f8ec;        /* เขียวอ่อน  = ลูกค้าพึ่งทัก ยังไม่มีคนรับ */
    --st-new-bd:#06c755;
    --st-mine:#fff6d8;       /* เหลือง     = รายการของฉัน */
    --st-mine-bd:#e8b800;
    --st-doing:#ffeeda;      /* ส้มอ่อน    = กำลังดำเนินการ (คนอื่นรับ) */
    --st-doing-bd:#ff8a1f;
    --st-done:#ffffff;       /* ขาว        = ดำเนินการเสร็จแล้ว */
    --st-done-bd:#d7dbe3;

    --bubble-in:#ffffff;
    /* ✨ (2026-08) บับเบิลข้อความขาออก — เขียวอ่อนลง ~30% เรียบขึ้น
       ⚠️ อ่อนลงแล้วตัวอักษรสีขาวจะจมพื้น (contrast 1.82 ตกมาตรฐาน)
          จึงต้องเปลี่ยนตัวอักษรเป็นเขียวเข้มคู่กัน — ดู --bubble-out-fg ด้านล่าง
          ตรวจ contrast ทุกคู่แล้วผ่าน WCAG AA (>=4.5) ทั้งโหมดสว่างและมืด */
    --bubble-out:#51d888;
    --bubble-out-fg:#0b3319;      /* ตัวหนังสือหลัก  contrast 7.68 */
    --bubble-out-fg2:#124a2a;     /* เวลา/สถานะ      contrast 5.65 */
    --bubble-out-seen:#08361c;    /* ✓✓ ลูกค้าตอบแล้ว contrast 7.41 */
    --chat-bg:#8fa9c4;
}

/* ===== โหมดมืด (dark) — override เฉพาะตัวแปรสี โครงสร้าง/เลย์เอาต์เหมือนเดิมทุกอย่าง ===== */
html[data-theme="dark"]{
    color-scheme: dark;

    --bg:#12141a;
    --panel:#1b1e26;
    --side:#1b1e26;
    --border:#2c313d;
    --border2:#242832;
    --text:#e8eaf0;
    --muted:#8b91a1;

    /* สีสถานะเคส — เข้มลงให้อ่านง่ายบนพื้นมืด แต่คงโทนสีเดิมไว้ให้จำได้ */
    --st-new:#123024;
    --st-new-bd:#06c755;
    --st-mine:#332c10;
    --st-mine-bd:#e8b800;
    --st-doing:#3a2a15;
    --st-doing-bd:#ff8a1f;
    --st-done:#1b1e26;
    --st-done-bd:#3a4050;

    --bubble-in:#262a35;
    /* โหมดมืดใช้เขียวสว่างกว่านิด เพื่อให้ใช้สีตัวอักษรชุดเดียวกับโหมดสว่างได้
       (ลดจุดที่ต้องคอยดูแลให้ตรงกัน) — ตรวจ contrast แล้วผ่าน AA ทุกคู่ */
    --bubble-out:#57cd8a;
    --bubble-out-fg:#0b3319;
    --bubble-out-fg2:#124a2a;
    --bubble-out-seen:#08361c;
    --chat-bg:#2a3340;
}

/* จุดที่ hardcode สีขาว/เทาไว้ (ไม่ได้ใช้ตัวแปร) — ปรับเฉพาะตอน dark */
html[data-theme="dark"] .pick-box,
html[data-theme="dark"] .team-box,
html[data-theme="dark"] .img-box{
    background:var(--panel);color:var(--text);
}
html[data-theme="dark"] .pick-item,
html[data-theme="dark"] .pf-note-item{
    background:#242832;color:var(--text);
}
html[data-theme="dark"] .pick-cancel,
html[data-theme="dark"] .pf-note-cancel,
html[data-theme="dark"] .pf-note-del,
html[data-theme="dark"] .tag-new-row input,
html[data-theme="dark"] .tp-new input,
html[data-theme="dark"] .st-btn,
html[data-theme="dark"] .img-acts .cancel{
    background:#242832;color:var(--text);border-color:var(--border);
}
html[data-theme="dark"] .grp-head{background:#20242e}
html[data-theme="dark"] .grp-head:hover{background:#262b36}

/* ---- แผงข้อความตอบกลับ + สติกเกอร์: โหมด dark ----
   เดิม hardcode พื้นสีอ่อน (#fff / #f7f8fa) ไว้ แต่ตัวหนังสือใช้ var(--text)
   พอเป็น dark ตัวหนังสือกลายเป็นสีอ่อน -> อ่านไม่ออกบนพื้นอ่อน ตรงนี้ปรับพื้นให้เข้ม */
html[data-theme="dark"] .qk-box,
html[data-theme="dark"] .stk-box{
    background:var(--panel);color:var(--text);
}
html[data-theme="dark"] .qk-item{
    background:#242832;color:var(--text);border-color:var(--border);
}
html[data-theme="dark"] .qk-item:hover{
    background:#1e3a2b;border-color:var(--line-green);
}
html[data-theme="dark"] .qk-tab{
    background:#242832;color:var(--muted);border-color:var(--border);
}
html[data-theme="dark"] .qk-tab.on{
    background:var(--line-green);color:#fff;border-color:transparent;
}
html[data-theme="dark"] .stk-item{
    background:#242832;border-color:var(--border);
}
html[data-theme="dark"] .stk-item:hover{
    background:#1e3a2b;border-color:var(--line-green);
}
/* การ์ดหมวด/แถวข้อความตอบกลับ (ทั้งกลุ่มทีมงาน และตั้งค่าข้อความตอบกลับ) —
   เดิม hardcode พื้นหลังสีขาว (#fafbfc / #fff) ไว้ ไม่ได้ผูกกับธีม พอสลับเป็น
   โหมดมืด ตัวหนังสือเปลี่ยนเป็นสีอ่อนตามธีมแต่พื้นหลังยังขาวอยู่ -> อ่านไม่ออก */
html[data-theme="dark"] .tp-card{
    background:#20242e;
}
html[data-theme="dark"] .rp-item{
    background:#242832;color:var(--text);
}
/* ปุ่มในหน้ากลุ่มทีมงาน/ตั้งค่าข้อความตอบกลับ (ปิด, ✎, ลบ, ตั้งเป็น QA) —
   เดิม hardcode พื้นขาวไว้ ยกเว้นปุ่มที่มีสีเฉพาะตัวอยู่แล้ว (.add เขียว, .qaon
   ม่วง) ซึ่งอ่านออกอยู่แล้วเลยไม่ต้องแตะ กันไว้ด้วย :not() ไม่ให้ทับสีเดิม */
html[data-theme="dark"] .tp-btn:not(.add):not(.qaon){
    background:#242832;color:var(--text);border-color:var(--border);
}
html[data-theme="dark"] .tp-btn.del{color:#ff6b6b}
html[data-theme="dark"] .tp-btn.del:hover{background:#c62828;color:#fff}
/* แถบเลือกพนักงาน/OA ในหน้ากลุ่มทีมงาน — โหมดมืด
   หมายเหตุ: ใช้ :not(.on) เจาะจงเฉพาะ pill ที่ "ยังไม่ถูกเลือก" เท่านั้น เพราะ
   ถ้าไม่กันไว้ ตัวเลือก html[data-theme="dark"] .pill (มี html นำหน้า) จะมี
   ความจำเพาะ (specificity) สูงกว่า .pill.on เฉยๆ แล้วไปทับสีเขียว/ฟ้าของ pill
   ที่เลือกไว้แล้วให้กลายเป็นสีเทาผิดๆ */
html[data-theme="dark"] .pill:not(.on){
    background:#242832;color:var(--text);border-color:var(--border);
}
html[data-theme="dark"] .pill.oa:not(.on){
    color:#8ab4f8;border-color:#2c3f5c;
}
html[data-theme="dark"] .pill.oa.on{
    background:#3d8bfd;color:#fff;
}
html[data-theme="dark"] .tp-count{
    background:#242832;color:var(--muted);
}
html[data-theme="dark"] .tp-count.oa{
    background:#1c2c42;color:#8ab4f8;
}
html[data-theme="dark"] .tp-lbl-oa{color:#8ab4f8}
html[data-theme="dark"] .pf-tag{background:#12301f;color:#5fd99a;border-color:#1e5c3a}
html[data-theme="dark"] .pf-tag.add{background:transparent;color:var(--muted)}
html[data-theme="dark"] .img-warn{background:#3a2f14;border-color:#5c4a1e;color:#f0c674}

/* ⚠️ สำคัญ: ช่องกรอกทุกชนิดในโหมดมืด
   ครอบคลุมแบบรวมทีเดียว (input/textarea/select ทั้งหมด) แทนที่จะไล่ทีละคลาส
   เพราะของเดิมหลายตัวไม่ได้ตั้ง color: ไว้เลย -> เบราว์เซอร์ใช้สีดำ default
   พอพื้นหลังเข้ม ตัวหนังสือเลยกลืนหายไปกับพื้น (มองไม่เห็นตอนพิมพ์) */
html[data-theme="dark"] input,
html[data-theme="dark"] textarea,
html[data-theme="dark"] select{
    background:#242832 !important;
    color:var(--text) !important;
    border-color:var(--border);
}
html[data-theme="dark"] input:focus,
html[data-theme="dark"] textarea:focus,
html[data-theme="dark"] select:focus{
    background:#2b303c !important;   /* focus แล้วสว่างขึ้นนิดนึง ให้รู้ว่ากำลังพิมพ์ตรงไหน */
    color:var(--text) !important;
}
html[data-theme="dark"] input::placeholder,
html[data-theme="dark"] textarea::placeholder{
    color:#6b7280;                    /* ตัวอย่างข้อความ (placeholder) จางกว่าตัวจริง แต่ยังอ่านออก */
}
/* ปฏิทินเลือกวันที่ (input[type=date]) — ไอคอนสีดำมองไม่เห็นบนพื้นเข้ม */
html[data-theme="dark"] input[type=date]::-webkit-calendar-picker-indicator{
    filter:invert(1) opacity(.6);
}

/* ปุ่มสลับโหมด day/dark */
.theme-btn{
    border:1px solid var(--border);background:var(--panel);
    border-radius:9px;padding:6px 10px;cursor:pointer;
    font-size:13px;line-height:1;color:var(--text);
}
.theme-btn:hover{border-color:var(--line-green)}

*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
/* 🐞 FIX (fit-mobile): บน iOS ค่า height:100% ของ html/body อ้างอิงจอ "แบบยืดเต็ม"
   (รวมพื้นที่ใต้แถบเบราว์เซอร์) เหมือน 100vh -> ขอบล่างของหน้าถูกแถบทับ
   ใส่ 100dvh ทับอีกชั้น (เบราว์เซอร์เก่าข้ามบรรทัดนี้ ใช้ 100% เดิม ไม่พัง) */
html,body{ height:100dvh }
/* กันหน้าเลื่อนออกด้านข้างเด็ดขาด — ถ้ามีอะไรกว้างเกิน ให้ตัดที่ขอบจอ
   ไม่ใช่ดันทั้งหน้าให้เลื่อนซ้ายขวาได้ (อาการ "ไม่พอดีหน้าจอ") */
html,body{ max-width:100%; overflow-x:hidden; overscroll-behavior:none }
body{
    font-family:-apple-system, BlinkMacSystemFont, "SF Pro Text", "SF Pro Display", "Sukhumvit Set", "Thonburi", "Noto Sans Thai", "Segoe UI", sans-serif;   /* FIX (2026-08): ฟอนต์แบบ iPhone (SF Pro + Sukhumvit Set) */
    background:var(--bg);
    color:var(--text);
    font-size:13px;   /* ✨ (2026-08) ลดตัวหนังสือทั้งหน้าลง 1px (เดิม 14) */
    overflow:hidden;
}
button{font-family:inherit;cursor:pointer}

/* ================= LAYOUT ================= */
.app{
    display:grid;
    /* ใช้ CSS variable แทนค่าคงที่ -> ปรับความกว้างแถบแชท/โปรไฟล์ลูกค้าด้วย JS ได้
       (ดูปุ่มลาก .col-resizer ด้านล่าง) ค่าเริ่มต้นเท่าของเดิมเป๊ะ ไม่กระทบหน้าตา
       เดิมถ้ายังไม่เคยปรับ (--list-w/--profile-w มาจาก localStorage ถ้าเคยตั้งไว้)
       เพิ่มคอลัมน์แคบๆ 2 เส้น (5px) ไว้เป็นแท่งลากปรับขนาด คั่นระหว่าง
       list↔thread และ thread↔profile */
    grid-template-columns:68px var(--list-w, 320px) 5px 1fr 5px var(--profile-w, 260px);
    grid-template-rows:52px 1fr;
    grid-template-areas:
        "rail topbar topbar topbar topbar topbar"
        "rail list   lrsz   thread rrsz    profile";
    height:100vh;
    /* 🐞 FIX (mobile-vh): บน iOS Safari ค่า 100vh "นับรวมพื้นที่ใต้แถบเบราว์เซอร์"
       ทำให้ช่องพิมพ์ข้อความถูกดันลงไปอยู่ใต้แถบล่าง — พนักงานพิมพ์ตอบลูกค้าไม่ได้
       ต้องเลื่อนจอสู้ตลอด (ต่างจากแอป LINE OA ที่ช่องพิมพ์ติดขอบล่างพอดี)
       100dvh = ความสูงที่ "มองเห็นจริง" ปรับตามแถบเบราว์เซอร์ที่ยืด/หดอัตโนมัติ
       (เบราว์เซอร์เก่าที่ไม่รู้จัก dvh จะข้ามบรรทัดนี้ ใช้ 100vh เดิมต่อไป ไม่พัง) */
    height:100dvh;
}

/* ---- แท่งลากปรับความกว้างคอลัมน์ ---- */
.col-resizer{
    cursor:col-resize;
    background:transparent;
    position:relative;
    z-index:20;
}
.col-resizer::after{
    content:"";
    position:absolute;top:0;bottom:0;left:2px;
    width:1px;background:var(--border);
}
.col-resizer:hover::after, .col-resizer.dragging::after{
    left:0;width:5px;background:var(--line-green);
}
.col-resizer.dragging{ background:#06c75510; }
#colResizeList    { grid-area:lrsz; }
#colResizeProfile { grid-area:rrsz; }

/* ---------- แถบบนสุด ---------- */
.topbar{
    grid-area:topbar;
    background:var(--panel);
    border-bottom:1px solid var(--border);
    display:flex;
    align-items:center;
    gap:14px;
    padding:0 18px;
}
.topbar .oa-pick{
    display:flex;align-items:center;gap:8px;
    font-weight:700;font-size:15px;
}
.oa-avatar{
    width:50px;height:36px;border-radius:18px;
    background:var(--line-green);color:#fff;
    display:grid;place-items:center;font-size:15px;font-weight:800;
    letter-spacing:.02em;
}
.oa-select-wrap{position:relative}
.me-badge{
    display:flex;align-items:center;gap:5px;
    font-size:12.5px;font-weight:700;color:var(--muted);
    padding:6px 11px;border:1px solid var(--border);border-radius:999px;
    white-space:nowrap;background:#fff;
}
html[data-theme="dark"] .me-badge{background:#242832;color:var(--text)}
.oa-select-input{
    border:1px solid var(--border);
    background:#fff;color:var(--text);
    border-radius:8px;padding:6px 10px;
    font-size:13.5px;font-weight:600;
    width:170px;
}
.oa-select-input:focus{outline:2px solid var(--line-green);outline-offset:-1px}
.oa-select-list{
    position:absolute;top:calc(100% + 4px);left:0;
    background:var(--panel);border:1px solid var(--border);border-radius:10px;
    box-shadow:0 12px 30px #0003;
    min-width:220px;max-height:280px;overflow-y:auto;
    padding:6px;z-index:50;
}
.oa-opt{
    padding:8px 10px;border-radius:7px;font-size:13.5px;font-weight:600;
    color:var(--text);cursor:pointer;white-space:nowrap;
    overflow:hidden;text-overflow:ellipsis;
}
.oa-opt:hover, .oa-opt.hi{background:var(--st-new,#e6f8ec);color:#06803a}
.oa-opt.sel{color:var(--line-green)}
.oa-opt.sel::after{
    content:"✓";
    margin-left:8px;
    font-size:1em;          /* ใหญ่เท่าตัวหนังสือ */
    font-weight:900;
    color:var(--line-green);
}
.oa-opt-empty{padding:10px;font-size:12.5px;color:var(--muted);text-align:center}
html[data-theme="dark"] .oa-opt:hover, html[data-theme="dark"] .oa-opt.hi{
    background:#123024;color:#5fd99a;
}
.topbar .spacer{margin-left:auto}
.back-link{
    text-decoration:none;color:var(--muted);
    border:1px solid var(--border);border-radius:8px;
    padding:6px 12px;font-size:13px;font-weight:600;
    background:#fff;
}
.back-link:hover{border-color:var(--line-green);color:var(--line-green)}
#goHome{color:#4a5162;font-weight:700}

/* ---------- แถบไอคอนซ้ายสุด (rail) ---------- */
.rail{
    grid-area:rail;
    background:#2b3038;
    display:flex;flex-direction:column;align-items:center;
    padding:12px 0;gap:6px;
}
.rail .logo{
    width:38px;height:38px;border-radius:10px;
    background:var(--line-green);color:#fff;
    display:grid;place-items:center;font-weight:800;font-size:16px;
    margin-bottom:10px;
}
.rail button{
    width:44px;height:44px;border:0;border-radius:10px;
    background:transparent;color:#aab1bd;font-size:18px;
    display:grid;place-items:center;
    transition:.15s;position:relative;
}
.rail button:hover{background:#3a404a;color:#fff;transform:translateY(-1px)}
.rail button.on{background:#3a404a;color:var(--line-green)}

/* เส้นแบ่ง: ปุ่มแอดมินแยกจากปุ่มแชท */
#railTeams{
    margin-top:8px;
    padding-top:0;
}
#railTeams::before{
    content:"";
    position:absolute;top:-5px;left:8px;right:8px;
    height:1px;background:#4a515c;
}

/* ป้ายชื่อตอนชี้เมาส์ */
.rail button::after{
    content:attr(title);
    position:absolute;left:52px;top:50%;
    transform:translateY(-50%) scale(.9);
    background:#1b1c20;color:#fff;
    padding:5px 10px;border-radius:7px;
    font-size:11.5px;font-weight:600;white-space:nowrap;
    opacity:0;pointer-events:none;transition:.15s;
    z-index:50;
}
.rail button:hover::after{opacity:1;transform:translateY(-50%) scale(1)}

/* ================= รายการแชท (ซ้าย) ================= */
.list{
    grid-area:list;
    background:var(--side);
    border-right:1px solid var(--border);
    display:flex;flex-direction:column;
    min-height:0;
}
.list-search{padding:10px 12px;border-bottom:1px solid var(--border2);display:flex;gap:8px;align-items:center}
.list-search .search-wrap{position:relative;flex:1;min-width:0;display:flex}
.list-search input{
    flex:1;min-width:0;padding:8px 12px;
    border:1px solid var(--border);border-radius:999px;
    font:inherit;font-size:13px;background:#f4f6f8;
}
.list-search input:focus{outline:2px solid var(--line-green);outline-offset:-1px;background:#fff}
.search-tag-list{
    position:absolute;top:calc(100% + 4px);left:0;right:0;
    background:var(--panel);border:1px solid var(--border);border-radius:10px;
    box-shadow:0 12px 30px #0003;
    max-height:240px;overflow-y:auto;
    padding:6px;z-index:50;
}
.search-tag-opt{
    padding:8px 10px;border-radius:7px;font-size:13px;font-weight:600;
    color:var(--text);cursor:pointer;display:flex;align-items:center;gap:6px;
    white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
    border:1.5px solid transparent;      /* ✨ ที่ว่างไว้ใส่กรอบสีบอกที่มา */
}
.search-tag-opt .tag-ico{opacity:.7;flex:none}
.search-tag-opt:hover{background:var(--st-new,#e6f8ec);color:#06803a}
html[data-theme="dark"] .search-tag-opt:hover{background:#123024;color:#5fd99a}

/* ✨ (2026-08) แยกที่มาของคำแนะนำในช่องค้นหา — กันสับสนระหว่าง ชื่อลูกค้า / แท็ก / โน้ต
   แท็ก = กรอบเขียว 🏷 · โน้ต = กรอบเหลือง 📝 · ชื่อลูกค้า = ไม่มีกรอบ (ค้นแบบปกติ) */
.search-tag-opt.k-tag{  border-color:#06c75580; background:#06c7550f }
.search-tag-opt.k-note{ border-color:#f5a62380; background:#f5a6230f }
.search-tag-opt.k-tag .tag-ico{  color:#0a8f43; opacity:1 }
.search-tag-opt.k-note .tag-ico{ color:#b07610; opacity:1 }
.search-tag-opt.k-tag:hover{  background:#06c7551f; color:#06803a }
.search-tag-opt.k-note:hover{ background:#f5a6231f; color:#b07610 }
html[data-theme="dark"] .search-tag-opt.k-tag .tag-ico{  color:#5fe39a }
html[data-theme="dark"] .search-tag-opt.k-note .tag-ico{ color:#ffc964 }
html[data-theme="dark"] .search-tag-opt.k-note:hover{ background:#3a2c10; color:#ffc964 }
/* ชื่อเจ้าของโน้ต ต่อท้ายบรรทัด (โน้ตซ้ำกันได้หลายเคส ต้องรู้ว่าของใคร)
   ⚠️ ข้อความต้องอยู่ใน .opt-txt ที่ย่อได้ ไม่งั้นโน้ตยาวจะดันชื่อเจ้าของหลุดออกนอกกล่อง */
.search-tag-opt .opt-txt{ flex:0 1 auto; min-width:0;
    overflow:hidden; text-overflow:ellipsis; white-space:nowrap }
.search-tag-opt .opt-who{ margin-left:auto; padding-left:10px; flex:none;
    font-size:11px; font-weight:600; color:var(--muted) }

/* ช่องค้นหาเองก็ติดสี บอกว่ากำลังกรองด้วยอะไรอยู่ */
.search-wrap .search-mode-ico{ display:none; position:absolute; left:11px; top:50%;
    transform:translateY(-50%); font-size:13px; line-height:1; pointer-events:none; z-index:2 }
.search-wrap.mode-tag .search-mode-ico,
.search-wrap.mode-note .search-mode-ico{ display:block }
.search-wrap.mode-tag input,
.search-wrap.mode-note input{ padding-left:31px }
.list-search .search-wrap.mode-tag input{  border-color:#06c755; background:#06c7550f }
.list-search .search-wrap.mode-note input{ border-color:#f5a623; background:#f5a6230f }
.list-search .search-wrap.mode-tag input:focus{  outline-color:#06c755; background:#06c7550f }
.list-search .search-wrap.mode-note input:focus{ outline-color:#f5a623; background:#f5a6230f }

/* ---- ปุ่มกรอง "เฉพาะแชทที่ยังไม่อ่าน" ----
   ปิดอยู่ = ปุ่มเทาปกติ, เปิด (active) = เขียวไลน์เต็ม ให้เห็นชัดว่ากำลังกรองอยู่ */
.unread-only-btn{
    flex:none;border:1px solid var(--border);border-radius:999px;
    padding:8px 12px;font-size:12px;font-weight:600;
    background:#f4f6f8;color:var(--muted);cursor:pointer;
    white-space:nowrap;font:inherit;
}
.unread-only-btn:hover{border-color:var(--line-green);color:var(--line-green)}
.unread-only-btn.active{background:var(--line-green);border-color:var(--line-green);color:#fff}

/* ---- หัวข้อกลุ่ม (พับ/กางได้) ---- */
.grp{border-bottom:1px solid var(--border)}
.grp-head{
    display:flex;align-items:center;gap:8px;
    width:100%;border:0;
    padding:10px 12px;
    background:#f4f6f8;
    font-size:13px;font-weight:800;color:#4a5162;
    text-align:left;
    position:sticky;top:0;z-index:2;
    border-left:3px solid transparent;
}
.grp-head:hover{background:#eaeef2}
.grp-head.empty{opacity:.45;cursor:default}
.grp-head.empty:hover{background:#f4f6f8}
.grp-arrow{font-size:10px;color:#8b91a1;width:10px}
.grp-ico{width:9px;height:9px;border-radius:50%;flex:none}
/* 🐞 FIX (cnt-mobile): ตัวเลขแชทค้างหลุดออกนอกจอบนมือถือแนวตั้ง
   สาเหตุ: .grp-head เป็น flex แถวเดียว ไม่มีการกันล้น ป้าย "🚨 N เคสค้าง" และ
   "↗ N เคสโอนมา" กว้างมาก (ข้อความเต็ม) เลยดันตัวเลขซึ่งอยู่ขวาสุดหลุดออกนอกจอ
   -> พนักงานมองไม่เห็นว่ากลุ่มไหนมีลูกค้ารออยู่กี่คน */
.grp-name{ flex:1 1 auto; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap }
.grp-cnt{
    background:#dfe3e8;color:#5d6474;
    border-radius:999px;padding:2px 9px;
    font-size:11.5px;font-weight:800;min-width:24px;text-align:center;
    flex:0 0 auto;          /* ห้ามหด ห้ามถูกดันออก — ตัวเลขนี้สำคัญที่สุดในแถว */
    margin-left:auto;       /* ชิดขวาเสมอ แม้ป้ายอื่นจะยาวแค่ไหน */
}
.grp-cnt.hot{background:#ff4b55;color:#fff}
/* ป้ายเสริมยอมให้หดได้ (ตัวเลขค้างสำคัญกว่า) */
.grp-sos, .grp-alert{ flex:0 1 auto; min-width:0; overflow:hidden; text-overflow:ellipsis }

@media (max-width: 820px), (pointer:coarse) and (hover:none) and (max-width:950px){
    /* จอแคบ: ตัวเลขใหญ่ขึ้นให้เห็นชัด · ป้ายเสริมเหลือแค่ไอคอน+ตัวเลข ประหยัดที่ */
    .grp-head{ padding:11px 10px; gap:6px }
    .grp-cnt{ font-size:13px; min-width:28px; padding:3px 10px }
    .grp-sos, .grp-alert{ font-size:10px; padding:2px 6px; max-width:34vw }
    .grp-sos .lbl, .grp-alert .lbl{ display:none }   /* ซ่อนคำอธิบาย เหลือ 🚨 3 / ↗ 2 */

    /* แถวแชท: ตัวเลขค้างต่อแชทต้องเห็นชัดเช่นกัน
       ป้าย "🚨 ลืมปิดเคส?" กว้างมาก บีบชื่อลูกค้าจนหาย -> เหลือแค่ 🚨 */
    .chat-row{ grid-template-columns:38px minmax(0,1fr) auto; gap:8px; padding:10px }
    .row-meta{ gap:4px; flex:0 0 auto }
    .unread{ min-width:22px; height:22px; font-size:12px; font-weight:900 }
    .sos{ font-size:0; padding:3px 6px }             /* ซ่อนข้อความ เหลือไอคอน */
    .sos::before{ content:"🚨"; font-size:11px }
    .row-timer{ font-size:10px; padding:1px 6px }
    .qa-review-badge{ font-size:9.5px; padding:1px 6px }
}
.grp-more{
    width:100%;border:0;
    background:#fbfcfd;color:var(--line-green);
    padding:11px;font-size:12.5px;font-weight:700;
    border-top:1px dashed var(--border);
}
.grp-more:hover{background:#eafaf0}

.grp-empty{
    padding:14px;text-align:center;
    color:#a8aeb9;font-size:12px;background:#fcfdfe;
}

/* popup เลือกกลุ่มทีมงาน */
.pick-mask{
    position:fixed;inset:0;z-index:999;
    background:#0007;display:flex;align-items:center;justify-content:center;
}
/* ---- กันป๊อปอัปขยับทั้งกล่อง (เด้งขึ้น/ลง) ----
   .team-box ถูกวาดใหม่ทั้งก้อนทุกครั้งที่กดปรับ (ดู draw() ใน openTeamPanel /
   openReplySetup) ความสูงของมันจึงเปลี่ยนไปมาได้เล็กน้อยตลอด (เช่น pill ที่มี
   เครื่องหมาย ✓ ยาวขึ้นจนตกบรรทัดใหม่) เพราะ mask จัดกึ่งกลางจอแนวตั้งแบบ
   ไดนามิก (align-items:center) พอความสูงกล่องเปลี่ยน ตำแหน่งกึ่งกลางที่คำนวณ
   ใหม่จึงทำให้ "ทั้งกล่อง" ขยับขึ้น/ลงตามไปด้วย (คนละเรื่องกับสกอลภายในกล่อง
   ที่จำ/คืนค่าไว้แล้ว) แก้โดยยึดกล่องไว้ด้วยระยะห่างจากขอบบนคงที่แทนการจัด
   กึ่งกลางที่อิงความสูง -> ตำแหน่งกล่องจะไม่ขยับอีกต่อไปไม่ว่าความสูงจะเปลี่ยนแค่ไหน */
.pick-mask:has(> .team-box){
    align-items:flex-start;
    padding:6vh 16px 24px;
}
.pick-box{
    background:#fff;border-radius:14px;padding:18px;
    width:300px;max-width:92vw;box-shadow:0 20px 60px #0004;
}
.pick-title{font-weight:800;font-size:15px;margin-bottom:12px}
.pick-list{display:flex;flex-direction:column;gap:7px;margin-bottom:12px}
.pick-item{
    border:1px solid var(--border);background:#f7f8fa;
    border-radius:9px;padding:10px 12px;
    font-size:13.5px;font-weight:700;color:var(--text);text-align:left;
}
.pick-item:hover{border-color:var(--line-green);background:#eafaf0;color:#06803a}
.pick-cancel{
    width:100%;border:1px solid var(--border);background:#fff;
    border-radius:9px;padding:9px;font-size:13px;color:var(--muted);
}

/* popup เลือกแท็ก (จากที่เคยใช้ หรือพิมพ์ใหม่) */
.tag-new-row{display:flex;gap:7px;margin-bottom:14px}
.tag-new-row input{
    flex:1;min-width:0;border:1px solid var(--border);border-radius:9px;
    padding:9px 11px;font:inherit;font-size:13px;
}
.tag-new-row input:focus{outline:2px solid var(--line-green);outline-offset:-1px}
.tag-new-btn{
    border:none;border-radius:9px;padding:9px 14px;
    background:var(--line-green);color:#fff;
    font-size:13px;font-weight:700;cursor:pointer;flex:none;
}
.tag-new-btn:hover{background:var(--line-green-dk)}
.tag-pick-label{font-size:11.5px;color:var(--muted);margin-bottom:7px}
.tag-pick-list{
    display:flex;gap:6px;flex-wrap:wrap;
    max-height:170px;overflow-y:auto;margin-bottom:14px;
}
.tag-pick{cursor:pointer}
.tag-pick:hover{border-color:var(--line-green);background:#d8f5e4}

/* ---- ยืนยันก่อนส่งรูป (กันวางรูปผิดแล้วหลุดไปหาลูกค้า) ---- */
.img-box{
    background:#fff;border-radius:14px;padding:16px;
    width:460px;max-width:94vw;box-shadow:0 20px 60px #0004;
    display:flex;flex-direction:column;gap:12px;
}
.img-head{display:flex;align-items:center;gap:8px}
.img-head .t{font-weight:800;font-size:15px}
.img-head .to{
    margin-left:auto;font-size:12px;color:var(--muted);
    max-width:200px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.img-strip{
    display:flex;gap:10px;overflow-x:auto;padding:2px;
    max-height:340px;
}
.img-item{position:relative;flex:0 0 auto}
.img-item img{
    max-height:280px;max-width:400px;border-radius:10px;
    border:1px solid var(--border);display:block;background:#f2f3f6;
}
.img-item .x{
    position:absolute;top:6px;right:6px;width:24px;height:24px;
    border:none;border-radius:50%;background:#000a;color:#fff;
    font-size:14px;line-height:1;cursor:pointer;
}
.img-item .x:hover{background:#e0212f}
.img-item .meta{
    margin-top:5px;font-size:11px;color:var(--muted);
    max-width:400px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.img-warn{
    font-size:12px;color:#b46a00;background:#fff6e2;
    border:1px solid #f0d9a6;border-radius:8px;padding:7px 10px;
}
.img-acts{display:flex;gap:8px}
.img-acts button{
    flex:1;border-radius:9px;padding:10px;font-size:13.5px;font-weight:700;cursor:pointer;
}
.img-acts .cancel{border:1px solid var(--border);background:#fff;color:var(--muted)}
.img-acts .cancel:hover{border-color:#e0212f;color:#e0212f}
.img-acts .ok{
    border:none;background:var(--line-green);color:#fff;
}
.img-acts .ok:hover{background:var(--line-green-dk)}
.img-acts .ok:disabled{background:#c8cdd6;cursor:not-allowed}

/* แผงจัดกลุ่มทีมงาน (ในหน้าแชท) */
.team-box{
    background:#fff;border-radius:14px;
    width:620px;max-width:94vw;max-height:86vh;overflow-y:auto;
    padding:18px;box-shadow:0 20px 60px #0004;
}

.tp-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:14px}
.tp-new{display:flex;gap:8px;margin-bottom:16px}
.tp-new input{
    flex:1;border:1px solid var(--border);border-radius:9px;
    padding:9px 12px;font:inherit;font-size:13.5px;
}
.tp-new input:focus{outline:2px solid var(--line-green);outline-offset:-1px}
.tp-btn{
    border:1px solid var(--border);background:#fff;color:#5d6474;
    border-radius:8px;padding:8px 13px;font-size:12.5px;font-weight:700;
}
.tp-btn:hover{border-color:var(--line-green);color:var(--line-green)}
.tp-btn.add{background:var(--line-green);color:#fff;border-color:transparent}
.tp-btn.del{color:#c62828}
.tp-btn.del:hover{background:#c62828;color:#fff;border-color:transparent}

.tp-card{
    border:1px solid var(--border);border-radius:12px;
    padding:14px;margin-bottom:10px;background:#fafbfc;
}
.tp-head{display:flex;align-items:center;justify-content:space-between;gap:8px}
.tp-head b{font-size:14.5px}
.tp-head > div{display:flex;gap:6px}
.tp-lbl{font-size:11.5px;color:var(--muted);font-weight:700;margin:11px 0 6px}
.tp-pills{display:flex;flex-wrap:wrap;gap:6px}
.tp-none{font-size:12px;color:var(--muted)}
.tp-err{color:#c62828;font-size:12.5px;min-height:18px;margin:-10px 0 8px}

/* FIX (2026-07): จัดพนักงานลงกลุ่มแบบดูง่าย — การ์ดแต่ละทีมโชว์เฉพาะ "คนในทีม"
   ส่วนรายชื่อทั้งหมดถูกพับไว้ในกล่อง "+ เพิ่มพนักงาน" (ชื่อไม่ซ้ำเต็มจอทุกการ์ด) */
.pill.add-mem{border-style:dashed;color:var(--line-green);border-color:var(--line-green)}
.tp-addbox{
    border:1px dashed var(--border);border-radius:10px;
    padding:10px;margin-top:8px;background:#ffffff;
}
html[data-theme="dark"] .tp-addbox{background:#00000022}
.tp-addsearch{
    width:100%;box-sizing:border-box;border:1px solid var(--border);border-radius:8px;
    padding:7px 11px;font:inherit;font-size:12.5px;margin-bottom:8px;
}
.tp-addsearch:focus{outline:2px solid var(--line-green);outline-offset:-1px}
.tp-inteam{font-size:10.5px;color:var(--muted);font-weight:400}

/* จัดพนักงานเป็นโฟลเดอร์บริษัทในกล่อง "+ เพิ่มพนักงาน" (2 ชั้น เหมือนแผง LINE OA) */
.tp-folders{display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:8px}
.tp-folder{display:flex;flex-direction:column;gap:3px;align-items:flex-start;text-align:left;
    padding:12px 12px 10px;border:1px solid var(--border);border-radius:11px;background:#fff;color:inherit;font:inherit;cursor:pointer;transition:.13s}
html[data-theme="dark"] .tp-folder{background:#ffffff10}
.tp-folder:hover{border-color:var(--line-green);transform:translateY(-1px)}
.tp-folder-ico{font-size:20px;line-height:1}
.tp-folder-name{font-size:13.5px;font-weight:700;word-break:break-word}
.tp-folder-count{font-size:11px;color:var(--muted)}
/* จัดกลุ่มไลน์ OA ตามโฟลเดอร์ (แยกไลน์เหมือนแผงผูกไลน์ OA) */
.tp-oalist{display:flex;flex-direction:column;gap:10px}
.tp-oafolder{border:1px solid rgba(61,139,253,.25);border-radius:10px;padding:8px 10px;background:rgba(61,139,253,.05)}
html[data-theme="dark"] .tp-oafolder{background:#3d8bfd12;border-color:#3d8bfd40}
.tp-oafolder-head{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:7px}
.tp-oafolder-name{font-size:12.5px;font-weight:800;color:#2568d6}
html[data-theme="dark"] .tp-oafolder-name{color:#7db3ff}
.tp-oafolder-count{font-size:11px;color:var(--muted);font-weight:700}
/* การ์ดโฟลเดอร์ไลน์ที่ติ๊กทั้งโฟลเดอร์ได้ (ช่องติ๊ก) + กดเข้าไปเลือกไลน์ (พื้นที่การ์ด) */
.tp-oftile{flex-direction:row !important;align-items:stretch !important;gap:0 !important;padding:0 !important;overflow:hidden}
.tp-oftile.on{border-color:var(--line-green);background:rgba(6,199,85,.10)}
.tp-oftile.some{border-color:rgba(6,199,85,.45)}
.tp-ofcheck{flex:0 0 auto;width:40px;border:none;border-right:1px solid rgba(128,128,128,.22);
    background:transparent;cursor:pointer;display:flex;align-items:center;justify-content:center;padding:0}
.tp-ofcheck:hover{background:rgba(6,199,85,.12)}
.tp-ofbox{width:19px;height:19px;border:2px solid var(--line-green);border-radius:5px;
    display:flex;align-items:center;justify-content:center;font-size:13px;font-weight:900;color:var(--line-green);line-height:1}
.tp-ofcheck.on  .tp-ofbox{background:var(--line-green);color:#fff}
.tp-ofcheck.some .tp-ofbox{color:var(--line-green)}
.tp-ofenter{flex:1;display:flex;flex-direction:column;gap:3px;align-items:flex-start;text-align:left;
    background:transparent;border:none;cursor:pointer;padding:10px 12px;color:inherit;font:inherit}
.tp-ofenter:hover{background:rgba(61,139,253,.07)}
.tp-oaf-btn{margin-left:auto;border:1px solid #3d8bfd55;background:transparent;color:#2568d6;border-radius:999px;padding:3px 11px;font-size:11px;font-weight:700;cursor:pointer;transition:.15s}
.tp-oaf-btn:hover{background:#3d8bfd;color:#fff}
html[data-theme="dark"] .tp-oaf-btn{color:#7db3ff}
.tp-oaf-btn.clear{margin-left:0;border-color:#ff5a6755;color:#d64550}
.tp-oaf-btn.clear:hover{background:#e04455;color:#fff;border-color:transparent}
.tp-addbar{display:flex;align-items:center;gap:8px;margin-bottom:8px;flex-wrap:wrap}
.tp-back{border:1px solid var(--border);background:#fff;color:inherit;border-radius:8px;padding:6px 11px;font:inherit;font-size:12px;font-weight:700;cursor:pointer}
html[data-theme="dark"] .tp-back{background:#ffffff10}
.tp-back:hover{border-color:var(--line-green);color:var(--line-green)}
.tp-crumb{font-size:12.5px;font-weight:800}
.tp-hint2{font-size:12px;color:var(--muted);margin-bottom:10px}
.tp-emplist{display:flex;flex-direction:column;gap:6px}
.tp-emp{display:flex;align-items:center;gap:8px;flex-wrap:wrap;padding:9px 11px;border:1px solid var(--border);border-radius:9px;background:#fff}
html[data-theme="dark"] .tp-emp{background:#ffffff08}
.tp-emp-name{font-size:13.5px;font-weight:700}
.tp-emp-u{font-size:11px;color:var(--muted)}
.tp-emp-team{font-size:11px;color:var(--line-green);font-weight:700;margin-left:auto}
.tp-emp-team.none{color:var(--muted);font-weight:400}
.tp-colors{display:flex;flex-wrap:wrap;gap:7px;justify-content:flex-end;flex:1}
.tp-color{width:24px;height:24px;border-radius:50%;border:2px solid #ffffff55;cursor:pointer;padding:0;transition:transform .1s}
.tp-color:hover{transform:scale(1.15)}
.tp-color.on{outline:3px solid var(--line-green);outline-offset:2px;transform:scale(1.1)}

/* ทีม QA */
.tp-card.qa{border-color:#7c5cff;background:#f8f6ff}
.qa-tag{
    background:#7c5cff;color:#fff;
    border-radius:999px;padding:1px 8px;
    font-size:10.5px;font-weight:800;margin-left:5px;
}
.tp-btn.qaon{background:#7c5cff;color:#fff;border-color:transparent}

/* โหมด QA ในหน้าแชท */
.done-tag{
    background:#eef1f5;color:#6b7285;
    border-radius:999px;padding:5px 12px;
    font-size:11.5px;font-weight:800;
}
.qa-badge{
    background:#7c5cff;color:#fff;
    border-radius:999px;padding:5px 11px;
    font-size:11.5px;font-weight:800;
}
.composer.locked.qa{background:#f4f1ff;border-top-color:#d3c6ff}
.composer.locked.qa .lock-msg b{color:#5b3fd6}
.composer.locked.mkt{background:#eaf3ff;border-top-color:#bcd9ff}
.composer.locked.mkt .lock-msg b{color:#1266d1}

/* แถบเตือนว่ากำลังอยู่โหมด QA */
body.qa-mode .topbar{
    box-shadow:inset 0 -3px 0 #7c5cff;
}
.pill{
    border:1px solid var(--border);background:#fff;color:#6b7285;
    border-radius:999px;padding:6px 13px;
    font-size:12.5px;font-weight:600;
    transition:transform .1s ease, box-shadow .15s ease, border-color .15s ease, color .15s ease;
}
.pill:hover{border-color:var(--line-green);color:var(--line-green);box-shadow:0 2px 6px #06c75526}
.pill:active{transform:scale(.95)}
.pill.on{background:var(--line-green);color:#fff;border-color:transparent;font-weight:800;box-shadow:0 2px 8px #06c75545}

/* แถบเลือก LINE OA — ตั้งใจให้สีต่างจากพนักงาน (ฟ้าแทนเขียว) เห็นปุ๊บรู้ปั๊บว่าคนละรายการกัน */
.pill.oa{border-color:#c9dcf5;color:#3d6fb0}
.pill.oa:hover{border-color:#3d8bfd;color:#2568d6;box-shadow:0 2px 6px #3d8bfd26}
.pill.oa.on{background:#3d8bfd;color:#fff;border-color:transparent;box-shadow:0 2px 8px #3d8bfd4a}

.tp-lbl-row{display:flex;align-items:center;justify-content:space-between;gap:8px;margin:12px 0 7px;flex-wrap:wrap}
.tp-lbl-row .tp-lbl{margin:0}
.tp-lbl-oa{color:#3d6fb0;font-weight:800}
.tp-count{
    font-size:10.5px;font-weight:800;color:var(--muted);
    background:#eef1f5;border-radius:999px;padding:1px 8px;margin-left:6px;
}
.tp-count.oa{background:#e8f1ff;color:#3d6fb0}
.tp-quick-wrap{display:flex;gap:10px}
.tp-quick{
    font-size:11px;font-weight:700;color:#3d8bfd;
    background:none;border:none;cursor:pointer;padding:0;
}
.tp-quick:hover{text-decoration:underline}
.tp-quick.clear{color:var(--muted)}

/* สีประจำกลุ่ม */
.grp-head.mine  { border-left-color:var(--st-mine-bd) }
.grp-head.mine  .grp-ico{background:var(--st-mine-bd)}
.grp-head.doing { border-left-color:var(--st-doing-bd) }
.grp-head.doing .grp-ico{background:var(--st-doing-bd)}
.grp-head.from  { border-left-color:#7c5cff }
.grp-head.from  .grp-ico{background:#7c5cff}
.grp-head.team  { border-left-color:#7c5cff }
.grp-head.team  .grp-ico{background:#7c5cff}
.grp-head.all   { border-left-color:#9aa3b2 }
.grp-head.all   .grp-ico{background:#9aa3b2}
.grp-head.qadone { border-left-color:#d5d9e0 }
.grp-head.qadone .grp-ico{background:#d5d9e0}
.grp-head.spam  { border-left-color:#ff4b55 }
.grp-head.spam  .grp-ico{background:#ff4b55}

.chat-list{
    overflow-y:auto; flex:1; min-height:0;
    /* FIX (list-infinite): เว้นท้ายลิสต์ไว้ ไม่ให้แถวสุดท้าย/ปุ่มแสดงเพิ่ม
       ถูกขอบล่างบังจนกดไม่ได้ (เห็นชัดตอนเลื่อนสุดแล้วแถวท้ายโดนตัดครึ่ง) */
    padding-bottom:16px;
    scroll-padding-bottom:16px;
}

/* แถวแชท — สีตามสถานะเคส */
.chat-row{
    /* FIX (2026-07): เดิมใช้ content-visibility:auto + contain-intrinsic-size
       เพื่อไม่วาดแถวนอกจอ (เร็วขึ้นตอนแชทเยอะ) แต่ตัวเลขความสูงที่กะไว้ (76px)
       ไม่ตรงกับความสูงจริงของแถว พอเบราว์เซอร์คำนวณความสูงจริงของแถวที่เพิ่งเลื่อน
       เข้าใกล้จอทีหลัง (แบบสุ่ม/ไม่พร้อมกัน) ความสูงรวมของลิสต์เลยขยับเองภายหลัง
       การวาดใหม่เสมอ ทำให้กลไกล็อกตำแหน่งสกรอล (qaScrollLock/anchor) เอาไม่อยู่
       เห็นชัดตอน QA กำลังไล่ตรวจแล้วมีเคสปิดเข้ามาใหม่ (ลิสต์เด้ง)
       ตัดออกไปเลย ปลอดภัยกว่า เพราะแต่ละกลุ่มถูกจำกัดจำนวนแถวด้วย PAGE (60) อยู่แล้ว */
    display:grid;
    grid-template-columns:42px 1fr auto;
    gap:10px;
    padding:11px 12px;
    border-bottom:1px solid var(--border2);
    border-left:4px solid transparent;
    cursor:pointer;
}
.chat-row:hover{filter:brightness(.98)}
.chat-row[aria-selected="true"]{box-shadow:inset 0 0 0 2px var(--line-green)}

/* =========================================================
   🚨 ไฟฉุกเฉิน — รับเคสแล้วลืมปิด (เกิน 30 นาที)
========================================================= */
.chat-row.overdue{
    animation: sosBlink 1s ease-in-out infinite;
    border-left-color:#e02424 !important;
    border-left-width:5px;
}
@keyframes sosBlink{
    0%,100% { background:#ffe5e5; box-shadow:inset 0 0 0 0 #e0242400 }
    50%     { background:#ffc9c9; box-shadow:inset 0 0 30px 0 #e0242433 }
}

.sos{
    background:#e02424;color:#fff;
    border-radius:999px;padding:2px 8px;
    font-size:10px;font-weight:900;
    white-space:nowrap;
    animation: sosPulse .8s ease-in-out infinite;
    box-shadow:0 2px 10px #e0242466;
}
@keyframes sosPulse{
    0%,100% { transform:scale(1);    opacity:1   }
    50%     { transform:scale(1.06); opacity:.75 }
}

/* หัวข้อกลุ่ม "รายการของฉัน" ก็เตือนด้วย ถ้ามีเคสค้าง */
.grp-head.has-sos{
    animation: sosBlink 1.2s ease-in-out infinite;
    border-left-color:#e02424 !important;
}
.grp-sos{
    background:#e02424;color:#fff;
    border-radius:999px;padding:2px 8px;
    font-size:10.5px;font-weight:900;
    margin-right:6px;
    animation: sosPulse .8s ease-in-out infinite;
}

/* ---- ลากรูปมาวางในห้องแชท ---- */
.thread.drag-over{
    position:relative;
}
.thread.drag-over::after{
    content:"🖼 วางรูปที่นี่เพื่อส่งให้ลูกค้า";
    position:absolute;inset:12px;
    border:3px dashed var(--line-green);
    border-radius:16px;
    background:#06c75522;
    display:flex;align-items:center;justify-content:center;
    font-size:17px;font-weight:800;color:#fff;
    text-shadow:0 2px 8px #0006;
    pointer-events:none;
    z-index:10;
}

/* ---- แจ้งเตือนมุมจอ ---- */
.toast{
    position:fixed;left:50%;bottom:26px;
    transform:translate(-50%, 20px);
    background:#1b1c20;color:#fff;
    padding:11px 18px;border-radius:999px;
    font-size:13px;font-weight:600;
    box-shadow:0 8px 30px #0004;
    z-index:9999;opacity:0;
    transition:.28s;
    max-width:88vw;text-align:center;
}
.toast.show{opacity:1;transform:translate(-50%, 0)}

/* ---- นาฬิกาจับเวลาเคส ---- */
.timer{
    background:#eef1f5;color:#5d6474;
    border-radius:999px;padding:4px 11px;
    font-size:12px;font-weight:800;
    font-variant-numeric:tabular-nums;
    white-space:nowrap;
}
.timer.warn{background:#fff3d6;color:#8a6b00}      /* เกิน 10 นาที */
.timer.late{background:#ffe3e3;color:#c62828}      /* เกิน 30 นาที (สีแดง ไม่กะพริบ) */

.row-timer{
    font-size:10.5px;font-weight:800;
    color:#6b7285;background:#eef1f5;
    border-radius:999px;padding:1px 7px;
    font-variant-numeric:tabular-nums;
    white-space:nowrap;
}
.row-timer.warn{background:#fff3d6;color:#8a6b00}
.row-timer.late{background:#ffe3e3;color:#c62828}

/* ---- หัวข้อกลุ่มกะพริบแดง เมื่อมีเคสโอนเข้ามา ---- */
.grp-head.alert{
    animation:grpAlert 1.1s ease-in-out infinite;
    border-left-color:#ff2d2d !important;
}
@keyframes grpAlert{
    0%,100% { background:#f4f6f8 }
    50%     { background:#ffe0e0 }
}
.grp-alert{
    background:#ff2d2d;color:#fff;
    border-radius:999px;padding:2px 8px;
    font-size:10.5px;font-weight:800;
    margin-right:6px;
    animation:alertPulse 1.1s ease-in-out infinite;
    white-space:nowrap;
}
@keyframes alertPulse{50%{opacity:.55}}

/* แถวที่เพิ่งย้ายกลุ่ม -> กะพริบให้เห็น */
.chat-row.just-moved{ animation: justMoved 1.2s ease; }
@keyframes justMoved{
    0%   { box-shadow: inset 0 0 0 3px var(--line-green); transform: translateX(6px); }
    40%  { box-shadow: inset 0 0 0 3px var(--line-green); transform: translateX(0); }
    100% { box-shadow: inset 0 0 0 0 transparent; }
}

.chat-row.new  {background:var(--st-new);   border-left-color:var(--st-new-bd)}
.chat-row.mine {background:var(--st-mine);  border-left-color:var(--st-mine-bd)}
.chat-row.doing{background:var(--st-doing); border-left-color:var(--st-doing-bd)}
.chat-row.done {background:var(--st-done);  border-left-color:var(--st-done-bd)}

/* เคสที่ปิดแล้วและ QA ยังไม่เคยเปิดดู -> แถบสีแดงอ่อน แจ้งเตือนให้ตรวจ
   (พอ QA กดเข้าไปดูแล้ว จะกลับเป็นปกติเหมือนเคสปิดทั่วไป) */
.chat-row.qa-need-review{
    background:#ffecec; border-left-color:#e0245e;
}
.qa-review-badge{
    background:#e0245e;color:#fff;
    border-radius:999px;padding:2px 8px;
    font-size:10px;font-weight:900;white-space:nowrap;
}
/* ปุ่มเคลียร์ที่หัวกลุ่มเคสปิดแล้ว (QA) */
.qa-clear-btn{
    background:#fff;color:#e0245e;border:1px solid #e0245e;
    border-radius:999px;padding:2px 9px;
    font-size:10.5px;font-weight:800;white-space:nowrap;cursor:pointer;
    margin-right:2px;
}
.qa-clear-btn:hover{background:#e0245e;color:#fff}
html[data-theme="dark"] .qa-clear-btn{background:#20242e;color:#ff4b6e;border-color:#ff4b6e}
html[data-theme="dark"] .qa-clear-btn:hover{background:#ff4b6e;color:#fff}
html[data-theme="dark"] .chat-row.qa-need-review{background:#3d2028; border-left-color:#ff4b6e}
html[data-theme="dark"] .qa-review-badge{background:#ff4b6e;color:#fff}
html[data-theme="dark"] .grp-head.qadone.has-qa-new{border-left-color:#ff4b6e !important}
html[data-theme="dark"] .grp-head.qadone.has-qa-new .grp-ico{background:#ff4b6e}
/* หัวกลุ่ม "เคสที่ปิดแล้ว (สำหรับ QA)" -> ขอบแดงเมื่อมีเคสรอตรวจ */
.grp-head.qadone.has-qa-new{
    border-left-color:#e0245e !important;
}
.grp-head.qadone.has-qa-new .grp-ico{background:#e0245e}

.av{
    width:42px;height:42px;border-radius:50%;
    background:#d5dae2;color:#5d6474;
    display:grid;place-items:center;font-weight:800;font-size:14px;
    overflow:hidden;flex:none;position:relative;
}
.av.av-sm{width:34px;height:34px;font-size:13px}
.av img, .pf-av img{
    width:100%;height:100%;object-fit:cover;
    position:absolute;inset:0;
}
.av.has-img span, .pf-av.has-img span{visibility:hidden}
.pf-av{overflow:hidden;position:relative}
.row-body{min-width:0}
/* (2026-08) เคยเติม content-visibility ให้ .chat-row ตรงนี้เพื่อรีดความเร็ว — ถอดออกแล้ว
   เพราะทำให้ลิสต์เด้งขึ้น-ลงเอง (ความสูงแถวนอกจอเป็นค่าประมาณ กลไกล็อกตำแหน่งวัดเพี้ยน)
   ซึ่งเป็นบั๊กตัวเดียวกับที่เคยเจอและถอดไปแล้วรอบ 2026-07 (ดูคอมเมนต์ที่ .chat-row หลัก)
   ห้ามใส่กลับอีก — ความเร็วลิสต์อาศัย queueRender รวบรอบ 250ms + PAGE 60 แถว/กลุ่ม เพียงพอแล้ว */

.row-name{
    /* FIX (2026-08): ขยายรายการแชทซ้าย — ชื่อไลน์ (ป้าย) นำหน้า ตามด้วยหัวชื่อ ใหญ่ชัดขึ้น */
    font-weight:800;font-size:14.5px;   /* ✨ (2026-08) ลด 1px (เดิม 15.5) */
    display:flex;align-items:center;gap:7px;
    white-space:nowrap;overflow:hidden;
    min-width:0;   /* FIX (oa-bigger): ให้ชื่อลูกค้าย่อได้ ป้ายชื่อไลน์จะได้ไม่ถูกดันหาย */
}
/* ✨ FIX (oa-bigger): ป้ายชื่อไลน์ให้ใหญ่/เด่นขึ้น
   เดิม 12px จางกว่าชื่อลูกค้า (15.5px) มาก พนักงานที่ดูแลหลายไลน์พร้อมกัน
   ต้องเพ่งดูว่าแชทนี้มาจากไลน์ไหน — ขยายขนาด เพิ่มความทึบ และเว้นระยะให้อ่านง่าย */
.oa-chip{
    flex:none;
    background:#06c7552e;color:#046b31;
    border:1px solid #8fd9ae;
    border-radius:7px;
    padding:3px 10px;
    font-size:14px;font-weight:900;
    letter-spacing:.2px;
    max-width:190px;overflow:hidden;text-overflow:ellipsis;
    line-height:1.35;
}
html[data-theme="dark"] .oa-chip{
    background:#06c75533; color:#5fe39a; border-color:#1f7a4a;
}
/* จอแคบ: ป้ายใหญ่ขึ้นแล้วอาจเบียดชื่อลูกค้าจนหาย -> จำกัดความกว้างป้าย
   และปล่อยให้ชื่อลูกค้าย่อแทน (ชื่อไลน์สำคัญกว่าตอนไล่ดูรายการ) */
@media (max-width: 820px), (pointer:coarse) and (hover:none) and (max-width:950px){
    .oa-chip{ font-size:13px; padding:2px 8px; max-width:44% }
    .row-name{ font-size:13.5px }   /* ✨ (2026-08) ลด 1px */
}
.row-by{color:#8b91a1;font-weight:700}
.row-msg{
    color:#6b7285;font-size:12.5px;margin-top:3px;   /* ✨ (2026-08) ลด 1px (เดิม 13.5) */
    white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.row-tags{display:flex;gap:4px;margin-top:5px;flex-wrap:wrap}
.tag{
    font-size:10.5px;font-weight:700;
    padding:2px 7px;border-radius:999px;
    background:#00000010;color:#5d6474;
}
.tag.oa{background:#06c75522;color:#06803a}
.tag.owner{background:#00000012;color:#4a5162}
.tag.lbl{background:#eafaf0;color:#06803a;border:1px solid #b9e7cb}
.tag.note{background:#fff4d6;color:#8a6b00}
.tag.from{background:#efe9ff;color:#5b3fd6;border:1px solid #d3c6ff}

/* กล่องพิมพ์ที่ถูกล็อก (ไม่ใช่เจ้าของเคส) */
.composer.locked{
    background:#f6f7f9;
    display:flex;align-items:center;justify-content:center;
    padding:18px 20px;
}
.lock-msg{
    text-align:center;font-size:13.5px;color:#6b7285;line-height:1.6;
}
.lock-msg b{color:#1b1c20}
.lock-msg span{display:block;font-size:12px;color:#8b91a1;margin-top:3px}

.row-meta{text-align:right;display:flex;flex-direction:column;align-items:flex-end;gap:5px}
.row-time{font-size:11px;color:#8b91a1;white-space:nowrap}
.unread{
    background:#ff4b55;color:#fff;
    min-width:19px;height:19px;border-radius:999px;
    display:inline-flex;align-items:center;justify-content:center;
    font-size:11px;font-weight:800;padding:0 5px;
}
.list-empty{padding:40px 20px;text-align:center;color:var(--muted);font-size:13px}
/* ✨ หน้าจอ "กรองแล้วไม่พบ" ของแท็ก/โน้ต */
.list-empty .le-q{ display:block; margin:8px auto 0; max-width:100%;
    color:var(--text); font-weight:700; word-break:break-word }
.list-empty .le-hint{ display:block; margin-top:6px; font-size:11.5px; line-height:1.5 }
.list-empty .le-clear{ margin-top:14px; padding:7px 16px; border-radius:999px; cursor:pointer;
    border:1px solid var(--border); background:transparent; color:var(--text);
    font:inherit; font-size:12.5px; font-weight:700 }
.list-empty .le-clear:hover{ border-color:var(--line-green); color:var(--line-green) }

/* ================= ห้องแชท (กลาง) ================= */
.thread{
    grid-area:thread;
    display:flex;flex-direction:column;
    background:var(--chat-bg);
    min-height:0;
}
.thread-head{
    background:var(--panel);
    border-bottom:1px solid var(--border);
    padding:9px 16px;
    display:flex;align-items:center;gap:10px;
    flex:none;
    flex-wrap:wrap;          /* 🐞 FIX (head-mobile): ปุ่มต้องตกบรรทัดได้ ไม่ล้นหายออกนอกจอ */
}
.th-name{font-weight:800;font-size:15px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* ชื่อ+ป้ายไลน์ ย่อได้ เพื่อกันไปเบียดปุ่มจนปุ่มหลุดจอ
   🐞 FIX (av-squash): เดิมเขียน .thread-head > div:not(.th-actions) ซึ่ง "เหมารวม
   รูปโปรไฟล์ด้วย" (avatarHtml คืน <div class="av av-sm">) -> flex:1 1 auto ไปทับ
   flex:none ของ .av ทำให้รูปถูกยืดออกจนแบนเป็นวงรี
   แก้: เจาะจงเฉพาะกล่องชื่อ (.th-title) และตรึงรูปไม่ให้ยืดเด็ดขาด */
.thread-head > .th-title{ min-width:0; flex:1 1 auto }
.thread-head > .av{ flex:0 0 auto }

.th-actions{margin-left:auto;display:flex;gap:8px}

/* ===== 🐞 FIX (head-mobile): หัวห้องแชทบนมือถือ =====
   อาการที่พบ: MKT (ซึ่งใช้งานผ่านมือถือเป็นหลัก) กด "รับเคส" ไม่ได้
   สาเหตุ: .thread-head เป็น flex แถวเดียว ไม่มี flex-wrap และไม่มีกฎจอแคบเลย
   -> ชื่อลูกค้า + ป้ายไลน์ + ป้ายสถานะ + นาฬิกา ดันปุ่มจนล้นออกนอกจอ กดไม่ถึง
   แก้: ให้ตกบรรทัดได้ + ปุ่มเรียงเต็มแถวล่าง แตะง่าย ไม่ต้องเลื่อนหา */
@media (max-width: 820px), (pointer:coarse) and (hover:none) and (max-width:950px){
    .thread-head{
        padding:8px 10px; gap:8px;
        row-gap:8px;
    }
    .thread-head .av-sm{ width:34px; height:34px; flex:0 0 auto }
    .th-name{ font-size:14.5px }
    .th-actions{
        margin-left:0;
        flex:1 0 100%;              /* ยกทั้งแถบปุ่มลงบรรทัดใหม่ เต็มความกว้าง */
        flex-wrap:wrap; gap:6px;
        justify-content:flex-start;
    }
    .st-btn{
        padding:9px 14px; font-size:13.5px;   /* นิ้วแตะง่ายขึ้น (แนะนำ ≥44px สูง) */
        min-height:40px; flex:0 0 auto;
    }
    .st-pill, .timer{ font-size:11.5px }
}
/* หมายเหตุ: จอ ≤480px มีบล็อกปรับละเอียดอยู่แล้วท้ายไฟล์ (ปุ่ม/ช่องพิมพ์/ระยะขอบ)
   ตรงนี้จึงคุมเฉพาะช่วง 481–820px ที่เดิม "ไม่มีกฎอะไรเลย" — แท็บเล็ตและมือถือจอใหญ่
   ที่ยังใช้เลย์เอาต์ 2 คอลัมน์อยู่ คือช่วงที่ปุ่มล้นหายบ่อยที่สุด */
/* FIX (oa-bigger): ชื่อไลน์บนหัวห้องแชทก็เล็กเกินไป (11.5px) — เห็นชัดขึ้น
   สำคัญมากตอนตอบหลายไลน์สลับกัน จะได้ไม่ตอบผิดไลน์ */
/* ===== หัวห้องแชทบนจอคอม =====
   "ชื่อไลน์" (ป้าย 656-BRONZE) -> ซ่อน ตามที่หน้างานสั่งว่า "หน้าจอคอมไม่ต้องมี"
   เพราะบนจอกว้างเห็นชื่อไลน์จากรายการแชทฝั่งซ้ายอยู่แล้ว ซ้ำซ้อน
   "รูปลูกค้า" -> คงไว้เหมือนเดิม (ไม่ได้สั่งให้เอาออก และรูปที่เคยแบนเป็นวงรี
   เกิดจากบั๊ก flex ที่แก้ไปแล้ว ไม่ใช่เหตุผลให้ต้องซ่อนทิ้ง)
   ซ่อนด้วย display:none ไม่ได้ลบ HTML -> เปิดคืนได้ทันทีถ้าเปลี่ยนใจ */
.th-oa{ display:none }
.th-oa .th-oa-label{ display:none }        /* ไอคอน 📶 เฉพาะมือถือ */

/* มือถือ: แสดงทั้งรูปลูกค้าและชื่อไลน์ (จอแคบไม่มีรายการแชทให้ดูคู่กัน)
   และทำชื่อไลน์เป็นป้ายให้เห็นชัด เพราะ MKT สลับหลายไลน์บ่อย */
@media (max-width: 820px), (pointer:coarse) and (hover:none) and (max-width:950px){
    .th-oa{
        display:inline-flex; align-items:center; gap:5px; margin-top:3px;
        background:#06c7552e; color:#046b31;
        border:1px solid #8fd9ae; border-radius:7px;
        padding:2px 8px;
        font-size:12px; font-weight:900; letter-spacing:.2px;
        max-width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
    }
    .th-oa .th-oa-label{ display:inline; font-size:11px; opacity:.85; flex:0 0 auto }
    html[data-theme="dark"] .th-oa{
        background:#06c75533; color:#5fe39a; border-color:#1f7a4a;
    }
}

/* ปุ่มย้อนกลับ (โผล่เฉพาะมือถือ) */
.back-btn{
    display:none;
    width:32px;height:32px;border-radius:8px;
    border:1px solid var(--border);background:#fff;
    color:#5d6474;font-size:16px;
    place-items:center;
}
.back-btn:hover{border-color:var(--line-green);color:var(--line-green)}
@media (max-width:480px), (pointer:coarse) and (hover:none) and (max-width:950px){ .back-btn{display:grid} }

/* ปุ่มข้อมูลลูกค้า (โผล่เฉพาะจอแคบที่ซ่อนแผงขวา) */
.info-btn{display:none;width:36px;padding:0;place-items:center;font-size:15px}

.st-btn{
    border:1px solid var(--border);
    background:#fff;color:#5d6474;
    border-radius:8px;padding:7px 13px;
    font-size:12.5px;font-weight:700;
}
.st-btn:hover{border-color:#b9bfca}
.st-btn.take{background:var(--line-green);color:#fff;border-color:transparent}
/* FIX (mkt-takeover): ปุ่ม "รับเคสต่อ" ใช้สีส้ม แยกจากรับเคสปกติ (สีเขียว)
   ให้รู้ว่ากำลังจะดึงเคสมาจากคนอื่น ไม่ใช่รับเคสว่าง */
.st-btn.takeover{background:#e8871e;color:#fff;border-color:transparent;font-weight:800}
.st-btn.takeover:hover{background:#cf7615}

/* ===== ✨ การ์ดเมสเสจ (Flex Message) ===== */
.cardv{
    width:230px; border-radius:14px; overflow:hidden;
    background:var(--panel,#fff); border:1px solid var(--border,#e5e5e5);
    box-shadow:0 6px 18px -8px rgba(0,0,0,.35);
}
.cardv.sm{ width:196px }
.cardv-hero{ width:100%; aspect-ratio:20/13; background:#dfe3e8 center/cover no-repeat }
.cardv-body{ padding:11px 13px 9px }
.cardv-title{ font-weight:800; font-size:14.5px; line-height:1.35 }
.cardv-desc{ font-size:12px; color:var(--muted,#6b7285); line-height:1.5; margin-top:4px }
.cardv-foot{ padding:0 11px 11px; display:flex; flex-direction:column; gap:6px }
.cardv-btn{
    padding:8px 10px; border-radius:8px; text-align:center;
    font-size:12.5px; font-weight:700;
    background:#f1f3f5; color:#4a5162; border:1px solid var(--border,#e5e5e5);
    overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.cardv-btn.primary{ background:var(--line-green,#06c755); color:#fff; border-color:transparent }
html[data-theme="dark"] .cardv{ background:#1c1f27; border-color:#2a2e39 }
html[data-theme="dark"] .cardv-btn{ background:#252932; color:#c9cfda; border-color:#333846 }

.bub.card-bub{ background:transparent !important; padding:0 !important; border:0 !important }
.card-note{ font-size:10.5px; color:var(--muted,#8b91a1); margin-top:5px; text-align:center }

.card-grid{
    display:grid; grid-template-columns:repeat(auto-fill,minmax(200px,1fr));
    gap:12px; padding:12px; max-height:60vh; overflow-y:auto;
}
.card-pick{
    border:1px solid var(--border,#e5e5e5); border-radius:14px;
    background:transparent; padding:9px; cursor:pointer; text-align:left;
    transition:border-color .15s, transform .12s;
}
.card-pick:hover{ border-color:var(--line-green,#06c755); transform:translateY(-2px) }
.card-pick-name{ font-size:12px; font-weight:800; margin-bottom:7px; opacity:.85 }
.card-empty{ padding:30px 16px; text-align:center; color:var(--muted,#8b91a1); font-size:13px }

.card-admin{ display:grid; grid-template-columns:190px 1fr 250px; gap:14px; padding:12px; max-height:66vh; overflow:auto }
.card-admin-list{ display:flex; flex-direction:column; gap:5px }
.card-new{
    padding:9px; border-radius:9px; border:1px dashed var(--line-green,#06c755);
    background:transparent; color:var(--line-green,#06c755); font-weight:800; font-size:12.5px; cursor:pointer;
}
.card-row{
    display:flex; align-items:center; justify-content:space-between; gap:6px;
    padding:9px 10px; border-radius:9px; border:1px solid var(--border,#e5e5e5);
    background:transparent; cursor:pointer; font-size:12.5px; text-align:left;
}
.card-row.on{ border-color:var(--line-green,#06c755); background:#06c7551a }
.card-row-t{ font-weight:700; overflow:hidden; text-overflow:ellipsis; white-space:nowrap }
.card-admin-form{ display:flex; flex-direction:column; gap:11px; min-width:0 }
.card-form-row label{ display:block; font-size:11.5px; font-weight:800; opacity:.75; margin-bottom:4px }
.card-type{ display:flex; gap:6px; flex-wrap:wrap }
.ct-pill{
    padding:7px 12px; border-radius:999px; font-size:12.5px; font-weight:700;
    border:1px solid var(--border,#e5e5e5); background:transparent; cursor:pointer;
}
.ct-pill.on{ border-color:var(--line-green,#06c755); background:#06c7551a; color:var(--line-green,#06c755) }
.card-btn-row{ display:grid; grid-template-columns:1fr 128px 1.4fr 30px; gap:6px; margin-bottom:6px }
.card-btn-del{
    border:1px solid var(--border,#e5e5e5); background:transparent; border-radius:8px;
    color:#e02424; font-weight:900; cursor:pointer;
}
.card-form-actions{ display:flex; align-items:center; gap:8px; margin-top:4px }
.card-admin-prev{ min-width:0 }
.pf-hint.bad{ color:#e02424 }
@media (max-width: 980px){
    .card-admin{ grid-template-columns:1fr; max-height:74vh }
    .card-btn-row{ grid-template-columns:1fr 1fr }
}
.st-btn.take:hover{background:var(--line-green-dk)}
.st-btn.doing{background:var(--st-doing-bd);color:#fff;border-color:transparent}
.st-btn.doing:hover{filter:brightness(1.08)}
.st-btn.done{background:#2b3038;color:#fff;border-color:transparent}
.st-btn.done:hover{background:#1d2127}
.st-btn.danger{color:#ff4b55;border-color:#ff4b5555;background:transparent}
.st-btn.danger:hover{background:#ff4b55;color:#fff;border-color:transparent}

/* ป้ายสถานะปัจจุบันของเคส */
.st-pill{
    font-size:11.5px;font-weight:800;
    padding:4px 10px;border-radius:999px;
}
.st-pill.new  {background:var(--st-new);   color:#06803a}
.st-pill.mine {background:var(--st-mine);  color:#8a6b00}
.st-pill.doing{background:var(--st-doing); color:#a54e00}
.st-pill.done {background:#eef0f4;         color:#6b7285}

.messages{
    flex:1;overflow-y:auto;min-height:0;
    padding:18px 20px;
    display:flex;flex-direction:column;gap:10px;
}
.day{
    align-self:center;
    background:#00000026;color:#fff;
    font-size:11px;font-weight:700;
    padding:3px 12px;border-radius:999px;
    margin:4px 0;
}
.msg{max-width:60%;display:flex;flex-direction:column;gap:3px;position:relative;cursor:pointer}
/* 🐞 FIX (media-fit): .msg.in ไม่ได้ตั้ง align-items -> ค่าปริยายคือ stretch
   บับเบิลขาเข้าจึงถูกยืดเต็ม 60% ของจอเสมอ ส่วนรูป/วิดีโอข้างในเล็กกว่ามาก
   -> เหลือช่องว่างรอบสื่อเยอะผิดปกติ (ขาออกไม่เป็นเพราะตั้ง flex-end ไว้แล้ว) */
.msg.in{align-self:flex-start;align-items:flex-start}
.msg.out{align-self:flex-end;align-items:flex-end}

/* FIX (2026-07): เอฟเฟกต์กะพริบสั้น ๆ ตอนเลื่อนจอไปหาข้อความ (กดหมุด/กดข้อความอ้างอิง) */
/* ✨ FIX (jump-red): กดการ์ดอ้างอิง -> เลื่อนไปหาต้นฉบับพร้อม "กรอบแดง" ชัด ๆ
   เดิมกะพริบสีเขียว 1.6 วิ กลืนกับบับเบิลข้อความของเราเอง แยกไม่ออกว่าอันไหน
   ตอนนี้กรอบแดงหนา ค้าง 3 วิ + กะพริบ 2 จังหวะตอนเริ่ม ให้สะดุดตา */
.msg-jump-highlight .bub{ animation:msgJumpFlash 3s ease-out }
@keyframes msgJumpFlash{
    0%   { box-shadow:0 0 0 4px #e02424, 0 0 0 9px #e0242433; }
    12%  { box-shadow:0 0 0 4px transparent, 0 0 0 9px transparent; }
    24%  { box-shadow:0 0 0 4px #e02424, 0 0 0 9px #e0242433; }
    36%  { box-shadow:0 0 0 4px transparent, 0 0 0 9px transparent; }
    48%  { box-shadow:0 0 0 4px #e02424, 0 0 0 9px #e0242433; }
    88%  { box-shadow:0 0 0 4px #e02424, 0 0 0 9px #e0242433; }
    100% { box-shadow:0 0 0 0 transparent; }
}

/* ปุ่มปักหมุดข้อความ — ต้องคลิกที่ข้อความก่อน (เลือกข้อความ) ถึงจะโผล่ขึ้นมา
   เลือกได้พร้อมกันหลายข้อความ (ไม่ใช่เลือกได้ทีละอันเหมือนเดิม) */
.pin-btn{
    position:absolute;top:-4px;
    width:30px;height:30px;border-radius:50%;
    border:1px solid var(--border);background:#fff;
    font-size:14.5px;line-height:1;cursor:pointer;
    box-shadow:0 2px 8px rgba(0,0,0,.2);
    display:flex;align-items:center;justify-content:center;
    opacity:0;pointer-events:none;transition:opacity .15s ease, transform .1s ease;
    box-shadow:0 2px 6px #0003;
}
/* (ตำแหน่งย้ายไปคุมที่ .msg-tools แล้ว — ดู FIX tools-row) */
.msg.is-selected .pin-btn{opacity:1;pointer-events:auto}
.pin-btn:hover{transform:scale(1.15);background:var(--line-green);border-color:transparent;color:#fff}

/* แถบข้อความปักหมุด — อยู่บนสุดของห้องแชท ใต้หัวห้องพอดี */
.pinned-bar{
    display:flex;align-items:flex-start;gap:10px;
    padding:9px 16px;
    background:#fff9e6;border-bottom:1px solid #ffe9a8;
    font-size:12.5px;
    max-height:92px;overflow-y:auto;    /* ⚠️ เพดานความสูงตายตัว — ไม่ว่าข้อความจะยาวแค่ไหนก็ไม่ทะลุเข้าไปในพื้นที่ข้อความแชทแน่นอน */
}
/* ⚠️ FIX (2026-07 รอบ 2): เปลี่ยนจาก "ตัดบรรทัดเดียวแล้วจบด้วย ..." เป็น
   "ยอมให้ขึ้นบรรทัดใหม่ได้สูงสุด 3 บรรทัด แล้วค่อยตัดด้วย ..." ตามที่ขอ — เพื่อให้
   เห็นข้อความยาวได้มากขึ้นกว่าเดิม แต่ยังมีเพดานความสูงตายตัว (max-height ด้านบน
   + -webkit-line-clamp ด้านล่าง) กันไม่ให้ขยายจนบังพื้นที่แชทเกินที่กำหนดไว้เด็ดขาด
   overflow-wrap:anywhere จำเป็นมาก เพราะข้อความไทยส่วนใหญ่ไม่มีช่องว่างให้ตัดคำ
   ถ้าไม่มีบรรทัดนี้ ต่อให้ตั้ง line-clamp ไว้ก็ยังล้นออกนอกกรอบอยู่ดี */
.pinned-icon{font-size:14px;flex:none;padding-top:1px}
/* ✨ (2026-08 v5) ป้าย "ใครปัก · เมื่อไร" ใต้ข้อความบนแถบหมุด */
.pin-meta{ display:block; font-size:11px; opacity:.75; font-weight:600; margin-top:2px }
.pinned-text{
    flex:1;min-width:0;color:#7a5b00;font-weight:600;
    overflow-wrap:anywhere;line-height:1.4;
    display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3;
    overflow:hidden;
}
.pinned-unpin{
    flex:none;border:none;background:none;cursor:pointer;
    color:#a68a3d;font-size:14px;font-weight:800;padding:2px 7px;border-radius:6px;
}
.pinned-unpin:hover{background:#ffe9a8;color:#7a5b00}
html[data-theme="dark"] .pin-btn{background:#242832;color:var(--text);border-color:var(--border)}
html[data-theme="dark"] .pinned-bar{background:#2e2810;border-color:#4a3d10}
html[data-theme="dark"] .pinned-text{color:#e0c675}
html[data-theme="dark"] .pinned-unpin{color:#c9ab5c}
html[data-theme="dark"] .pinned-unpin:hover{background:#4a3d10;color:#e0c675}

/* ---- แถบปักหมุดของ QA เท่านั้น (โหมดตรวจสอบแบบล่องหน) ----
   แยกสีจากแถบปักหมุดปกติชัดเจน (ม่วง แทนที่จะเป็นเหลือง) กันสับสนว่าเป็นหมุดคนละ
   ประเภทกัน — เห็นได้เฉพาะ QA เท่านั้น (ข้อมูล qaPinned ไม่ถูกส่งมาให้คนอื่นเลย
   ตั้งแต่ฝั่งเซิร์ฟเวอร์ ดู server/chatRoutes.js slim()) */
.qa-pinned-bar{
    display:flex;align-items:flex-start;gap:10px;
    padding:9px 16px;
    background:#f2e9ff;border-bottom:1px solid #d9c2ff;
    font-size:12.5px;
    max-height:92px;overflow-y:auto;
}
.qa-pinned-icon{font-size:14px;flex:none;padding-top:1px}
.qa-pinned-text{
    flex:1;min-width:0;color:#5b3a99;font-weight:600;
    overflow-wrap:anywhere;line-height:1.4;
    display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3;
    overflow:hidden;
}
.qa-pinned-text::before{content:"👁 QA เท่านั้น · ";font-weight:700;opacity:.75}
.qa-pinned-unpin{
    flex:none;border:none;background:none;cursor:pointer;
    color:#7d5cc4;font-size:14px;font-weight:800;padding:2px 7px;border-radius:6px;
}
.qa-pinned-unpin:hover{background:#d9c2ff;color:#5b3a99}
html[data-theme="dark"] .qa-pinned-bar{background:#2a2140;border-color:#4a3a70}
html[data-theme="dark"] .qa-pinned-text{color:#c9b3f5}
html[data-theme="dark"] .qa-pinned-unpin{color:#a98cec}
html[data-theme="dark"] .qa-pinned-unpin:hover{background:#4a3a70;color:#c9b3f5}

/* ---- ตอบกลับอ้างอิงข้อความ (quote reply) ---- */
/* FIX (2026-08): ปุ่มตอบกลับ — จากไอคอนจาง ๆ เป็นปุ่มกลมชัดแบบเดียวกับปักหมุด/แปลภาษา */
.quote-btn{
    position:absolute;top:50%;transform:translateY(-50%);
    width:30px;height:30px;border-radius:50%;
    border:1px solid var(--border);background:var(--panel,#fff);color:var(--text);
    box-shadow:0 2px 8px rgba(0,0,0,.2);
    font-size:15px;line-height:1;cursor:pointer;opacity:0;pointer-events:none;transition:opacity .15s,transform .15s;
    display:flex;align-items:center;justify-content:center;
}
html[data-theme="dark"] .quote-btn{background:#242832;border-color:var(--border)}
.msg.is-selected .quote-btn{opacity:1;pointer-events:auto}
/* FIX (2026-08): เอาเมาส์ชี้ข้อความ = ออฟชันเสริมทั้ง 3 ปุ่มโผล่ให้เห็นเลย (เดิมต้องคลิกเลือกก่อน) */
.msg:hover .quote-btn, .msg:hover .pin-btn, .msg:hover .tr-btn{opacity:1;pointer-events:auto}
.quote-btn:hover{transform:translateY(-50%) scale(1.15);background:var(--line-green);color:#fff;border-color:transparent}
html[data-theme="dark"] .quote-btn{color:var(--muted)}
html[data-theme="dark"] .quote-btn:hover{color:var(--line-green)}

/* ===== 🐞 FIX (btn-overlap): ปุ่มเสริมต้องไม่ทับตัวหนังสือในบับเบิล =====
   เดิม .pin-btn อยู่ที่ ±8px และ .tr-btn ที่ top/left -10px = กินพื้นที่เข้าไป
   ในบับเบิล 10-22px ทับข้อความบรรทัดแรก อ่านไม่ออก/กดโดนผิดปุ่ม
   แก้: ดันทั้ง 3 ปุ่มออกไปนอกบับเบิลให้หมด เรียงเป็นแถวเดียวกัน */
/* ===== ✨ FIX (tools-row): รวม 3 ปุ่มเป็น "แถบเดียว" =====
   เดิมวางทีละปุ่มด้วยค่าลบเฉพาะตัว (-36/-70/-104) แล้วมีกฎซ้อนอีกหลายชุด
   (สติกเกอร์ -42/-76/-110 · จอแคบอีกชุด) ปุ่มเลยเรียงไม่ตรงกัน กระจัดกระจาย
   ตอนนี้ให้ flex จัดระยะให้เอง — เรียงลำดับคงที่เสมอ: ↩ ตอบกลับ · 📌 ปักหมุด · 🌐 แปล */
.msg-tools{
    position:absolute; top:50%; transform:translateY(-50%);
    display:flex; align-items:center; gap:6px;
    opacity:0; pointer-events:none; transition:opacity .15s;
    z-index:4;
}
.msg.in  .msg-tools{ left:100%;  margin-left:10px }
.msg.out .msg-tools{ right:100%; margin-right:10px }
.msg:hover .msg-tools, .msg.is-selected .msg-tools{ opacity:1; pointer-events:auto }

/* ปุ่มในแถบ: ให้ flex จัดตำแหน่ง ไม่ต้องคำนวณ offset เองอีก */
.msg-tools .pin-btn,
.msg-tools .quote-btn,
.msg-tools .tr-btn{
    position:static; top:auto; right:auto; bottom:auto; left:auto;
    transform:none; opacity:1; pointer-events:auto;
    flex:0 0 auto; width:30px; height:30px; margin:0;
}
.msg-tools .pin-btn:hover,
.msg-tools .quote-btn:hover,
.msg-tools .tr-btn:hover{ transform:scale(1.15) }

/* (กฎเฉพาะสติกเกอร์เดิมถูกยุบรวมเข้า .msg-tools แล้ว — แถบเดียวใช้ได้กับทุกชนิดบับเบิล) */

/* ---- แท็บหมวดสติกเกอร์ (FIX sticker-sets) ---- */
.stk-tabs{
    display:flex; gap:4px; padding:6px 8px; overflow-x:auto;
    border-bottom:1px solid var(--border,#e5e5e5); flex:0 0 auto;
}
.stk-tab{
    flex:0 0 auto; width:38px; height:34px; border-radius:9px;
    border:1px solid transparent; background:transparent; cursor:pointer;
    font-size:19px; line-height:1; display:flex; align-items:center; justify-content:center;
}
.stk-tab:hover{ background:var(--hover,#0000000d) }
.stk-tab.on{ background:var(--line-green); border-color:transparent }
/* ---- แผงจัดการคลังสติกเกอร์ (FIX sticker-store) ---- */
.stk-manage{ margin-left:auto; font-size:16px }
.stk-admin{ display:flex; gap:12px; padding:12px; min-height:0; overflow:hidden }
.stk-admin-sets{
    flex:0 0 190px; display:flex; flex-direction:column; gap:4px;
    overflow-y:auto; padding-right:4px;
}
.stk-aset{
    display:flex; align-items:center; justify-content:space-between; gap:8px;
    padding:8px 10px; border-radius:10px; cursor:pointer; text-align:left;
    border:1px solid var(--border,#e5e5e5); background:transparent; color:inherit;
    font-size:13px;
}
.stk-aset:hover{ background:var(--hover,#0000000d) }
.stk-aset.on{ background:var(--line-green); border-color:transparent; color:#fff }
.stk-aset small{ opacity:.7; flex:0 0 auto }
.stk-aset.add{ border-style:dashed; justify-content:center; opacity:.8 }
.stk-admin-body{ flex:1; min-width:0; display:flex; flex-direction:column; gap:10px; overflow-y:auto }
.stk-admin-tools{ display:flex; align-items:center; gap:10px; flex-wrap:wrap }
.stk-admin-add{ display:flex; gap:6px; flex-wrap:wrap }
.stk-admin-add input{ flex:1 1 150px; min-width:0 }
.stk-bulk summary{ cursor:pointer; font-size:12.5px; opacity:.8; margin-bottom:6px }
.stk-bulk textarea{ width:100%; margin-bottom:6px }
.stk-agrid{
    display:grid; grid-template-columns:repeat(auto-fill,minmax(72px,1fr));
    gap:8px; align-content:start;
}
.stk-aitem{
    position:relative; border:1px solid var(--border,#e5e5e5); border-radius:10px;
    padding:5px; aspect-ratio:1; display:flex; align-items:center; justify-content:center;
}
.stk-aitem img{ max-width:100%; max-height:100%; object-fit:contain }
.stk-preview{
    flex:0 0 auto; width:56px; height:56px; border-radius:10px;
    border:1px dashed var(--border,#ddd); display:flex; align-items:center; justify-content:center;
    overflow:hidden;
}
.stk-preview img{ max-width:100%; max-height:100% }
.pf-hint.ok{ color:#1aa260 } .pf-hint.bad{ color:#e0405a }
.stk-adel{
    position:absolute; top:-6px; right:-6px; width:22px; height:22px; border-radius:50%;
    border:none; background:#e0405a; color:#fff; cursor:pointer; font-weight:800;
    line-height:1; box-shadow:0 2px 6px rgba(0,0,0,.25);
}
@media (max-width: 820px), (pointer:coarse) and (hover:none) and (max-width:950px){
    .stk-admin{ flex-direction:column }
    .stk-admin-sets{ flex:0 0 auto; flex-direction:row; overflow-x:auto }
    .stk-aset{ flex:0 0 auto }
}
.stk-empty{
    padding:34px 16px; text-align:center; opacity:.65; font-size:13.5px; line-height:1.7;
    grid-column:1 / -1;
}

/* จอแคบ/มือถือ: ที่ว่างข้างบับเบิลไม่พอ -> วางเป็นแถวเหนือบับเบิลแทน
   (ยังไม่ทับข้อความ และไม่ล้นขอบจอ) */
@media (max-width: 820px), (pointer:coarse) and (hover:none) and (max-width:950px){
    /* จอแคบ: ที่ว่างข้างบับเบิลไม่พอ -> ย้ายแถบไปไว้ "เหนือบับเบิล" ทั้งแถบ
       (แค่เปลี่ยนตำแหน่งของ .msg-tools ตัวเดียว ปุ่มข้างในเรียงตามเองเหมือนเดิม) */
    .msg-tools{
        top:auto; bottom:100%; transform:none;
        margin:0 0 4px 0; gap:5px;
    }
    .msg.in  .msg-tools{ left:0;  right:auto; margin-left:0 }
    .msg.out .msg-tools{ right:0; left:auto;  margin-right:0 }
    .msg.has-sticker.in  .msg-tools{ margin-left:0 }
    .msg.has-sticker.out .msg-tools{ margin-right:0 }
    .msg-tools .pin-btn,
    .msg-tools .quote-btn,
    .msg-tools .tr-btn{ width:28px; height:28px; font-size:14px }
    /* มือถือไม่มี hover -> ต้องแตะเลือกข้อความก่อน ถึงจะเห็นแถบ */
    .msg-tools{ opacity:0 }
    .msg.is-selected .msg-tools{ opacity:1; pointer-events:auto }
}

/* สติกเกอร์ไม่มีพื้นหลัง -> เว้นจากตัวการ์ตูนอีกนิด (ปรับที่แถบเดียว ไม่ต้องไล่ทีละปุ่ม) */
.msg.has-sticker.in  .msg-tools{ margin-left:16px }
.msg.has-sticker.out .msg-tools{ margin-right:16px }

/* ---- FIX (2026-08): ปุ่มแปลภาษา 🌐 บนข้อความลูกค้า (โผล่ตอนคลิกเลือกข้อความ เหมือนปุ่มปักหมุด/ตอบกลับ) ---- */
.tr-btn{
    /* FIX (2026-08 v2): ป้ายกลมมุมซ้ายบนของบับเบิลลูกค้า (โผล่ตอนคลิกเลือกข้อความ) */
    position:static;   /* FIX (tools-row): ตำแหน่งคุมที่ .msg-tools แล้ว */
    width:32px;height:32px;border-radius:50%;cursor:pointer;
    border:1px solid var(--border,#ddd);background:var(--panel,#fff);
    box-shadow:0 2px 8px rgba(0,0,0,.2);
    font-size:16px;line-height:1;opacity:0;pointer-events:none;
    transition:opacity .15s, transform .15s;
    display:flex;align-items:center;justify-content:center;
}
html[data-theme="dark"] .tr-btn{background:#242832;border-color:var(--border)}
.msg.is-selected .tr-btn{opacity:1;pointer-events:auto}
.tr-btn:hover{transform:scale(1.18);background:var(--line-green);border-color:transparent}

/* เมนูเลือกภาษา */
.tr-menu{
    position:fixed;z-index:9000;min-width:150px;
    background:var(--panel, #fff);border:1px solid var(--border, #ddd);
    border-radius:12px;box-shadow:0 12px 32px rgba(0,0,0,.28);
    padding:6px;display:flex;flex-direction:column;gap:2px;
}
html[data-theme="dark"] .tr-menu{background:#242832}
.tr-menu-title{font-size:11px;color:var(--muted);padding:4px 10px 6px;font-weight:700}
.tr-menu button{
    border:0;background:transparent;color:inherit;font:inherit;font-size:13.5px;
    text-align:left;padding:7px 10px;border-radius:8px;cursor:pointer;
}
.tr-menu button:hover{background:var(--line-green);color:#fff}

/* กล่องคำแปล: ลูกศรชี้จากบับเบิล -> กล่อง */
.tr-wrap{display:flex;align-items:center;gap:7px;margin-top:2px;max-width:100%}
.msg.out .tr-wrap{flex-direction:row-reverse}
.tr-arrow{color:var(--line-green);font-size:15px;flex:none;animation:trPop .25s ease}
.tr-box{
    position:relative;font-size:13.5px;line-height:1.45;
    padding:7px 11px;border-radius:10px;
    background:var(--panel, #fff);
    border:1.5px solid var(--line-green);
    box-shadow:0 2px 10px rgba(6,199,85,.18);
    animation:trPop .25s ease;word-break:break-word;
}
html[data-theme="dark"] .tr-box{background:#20242e}
.tr-box.loading{border-style:dashed;color:var(--muted)}
.tr-box.err{border-color:#ff5a67;color:#ff5a67}
.tr-lang{display:block;font-style:normal;font-size:10.5px;color:var(--muted);margin-top:3px}
@keyframes trPop{from{opacity:0;transform:translateX(-6px)}to{opacity:1;transform:none}}
/* บาร์แสดงข้อความที่กำลังจะอ้างอิง เหนือกล่องพิมพ์ */
.quote-bar{
    display:flex;align-items:center;gap:8px;
    background:#eef7f0;border-left:3px solid var(--line-green);
    border-radius:8px;padding:6px 10px;margin-bottom:7px;font-size:13px;
}
.quote-bar-icon{color:var(--line-green);flex:none}
.quote-bar-text{flex:1;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.quote-bar-x{border:0;background:transparent;color:var(--muted);cursor:pointer;font-size:14px;flex:none}
.quote-bar-x:hover{color:#c0392b}
html[data-theme="dark"] .quote-bar{background:#1e2b22;border-left-color:var(--line-green)}
/* ข้อความที่ถูกอ้างอิง แสดงในบับเบิลฝั่งเรา */
/* ✨ (2026-08) กรอบตอบกลับแบบ LINE OA: สองบรรทัด การ์ดชัด ตัวโตขึ้น */
.q-ref{
    display:flex; flex-wrap:wrap; align-items:center; gap:2px 8px;
    border-left:4px solid rgba(11,51,25,.55);
    background:rgba(0,0,0,.10); border-radius:10px;
    padding:7px 12px; margin-bottom:6px;
    font-size:13px; opacity:.96; max-width:340px;
}
.msg.in .q-ref{border-left-color:var(--line-green);opacity:.7}
/* FIX (quote-in): การ์ดอ้างอิงเหนือบับเบิลสื่อ (สติกเกอร์/รูป/วิดีโอ) */
.q-outer{ display:flex; flex-direction:column; gap:3px }
.msg.out .q-outer{ align-items:flex-end }
.q-outer .q-ref{
    max-width:260px; background:#00000012; border-radius:8px;
    padding:4px 8px; margin-bottom:0;
}
.q-ref{ cursor:pointer }
.q-ref .q-who{ font-weight:800; font-size:12px; opacity:.9; flex:0 0 auto }
.q-ref .q-at{ flex:0 0 auto; font-size:11px; opacity:.65 }
.q-ref .q-go{ margin-left:auto; flex:0 0 auto; opacity:.75; font-size:13.5px }
.q-ref .q-text{
    flex-basis:100%; min-width:0; white-space:normal;
    display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical;
    overflow:hidden; text-overflow:ellipsis; line-height:1.45; font-size:13.5px;
}
.q-ref:hover{ opacity:1 }
.q-ref:hover .q-go{ opacity:1 }
/* หาต้นฉบับไม่เจอ -> กดไม่ได้ บอกให้ชัดว่าเป็นข้อมูลเก่า */
.q-ref.q-missing{ cursor:default; font-style:italic }
.q-ref.q-missing .q-text{ opacity:.75 }
/* ปุ่มโหลดข้อความเก่า (บนสุดของห้องแชท) */
.load-older{
    display:block;margin:8px auto 14px;padding:6px 18px;
    background:#ffffff22;color:#fff;border:1px solid #ffffff44;
    border-radius:999px;font-size:12.5px;font-weight:700;cursor:pointer;
}
.load-older:hover{background:#ffffff33}
.load-older:disabled{opacity:.6;cursor:default}
html[data-theme="dark"] .load-older{background:#ffffff14;border-color:#ffffff2a}

/* ป้ายคั่นวัน (แบบ LINE) — โผล่กลางจอเมื่อข้อความเปลี่ยนวัน เช่น "วันนี้" / "เมื่อวาน" / "ศ. 24 ก.ค. 2569" */
.day-sep{display:flex;justify-content:center;margin:14px 0 6px;user-select:none}
.day-sep span{
    background:#00000042;color:#fff;
    font-size:11.5px;font-weight:600;line-height:1.4;
    padding:3px 13px;border-radius:999px;
}
html[data-theme="dark"] .day-sep span{background:#ffffff1f}
.bub{
    /* FIX (2026-08): ขยายขนาดแถบข้อความแชท (ทุกโหมด) — อ่านสบายขึ้น */
    padding:11px 15px;border-radius:17px;
    font-size:15.5px;line-height:1.5;
    word-break:break-word;
    white-space:pre-wrap;   /* รักษาการขึ้นบรรทัดใหม่/ช่องว่างตามที่พิมพ์หรือวางมาจริง
                               (เดิมไม่มีบรรทัดใหม่จะถูกยุบรวมเป็นบรรทัดเดียวหมด
                               ทำให้แพทเทิร์น/ข้อความที่จัดบรรทัดไว้เสียรูป) */
    box-shadow:0 1px 1px #0000000f;
}
.msg.in  .bub{background:var(--bubble-in);border-top-left-radius:4px}
.msg.out .bub{background:var(--bubble-out);color:var(--bubble-out-fg);border-top-right-radius:4px}
/* ✨ (2026-08) ฟองของพนักงานคนอื่น = เทาอ่อนแบบ LINE OA (ของตัวเองเขียวปกติ) */
.msg.out.by-other .bub{ background:#e9ebef; color:#26292e; }
.msg.out.by-other .bub.img-bub{ background:#e9ebef }
.msg.out.by-other .ms{ color:#7d8590 }
.msg.out.by-other .ms.sent{ color:#7d8590 }
.msg.out.by-other .ms.seen{ color:#2f9e63 }
/* ✨ (2026-08) ธีมมืด: บับเบิลคนอื่นใช้เทา "โทนมืด" — เทาอ่อนของธีมสว่างจะจ้าเกิน
   บนพื้น #2a3340 · เลือกคู่สีให้ contrast ผ่าน AA เหมือนบับเบิลปกติ */
html[data-theme="dark"] .msg.out.by-other .bub{ background:#414a59; color:#e8ecf2; }
html[data-theme="dark"] .msg.out.by-other .bub.img-bub{ background:#414a59 }
html[data-theme="dark"] .msg.out.by-other .ms{ color:#aab3c0 }
html[data-theme="dark"] .msg.out.by-other .ms.sent{ color:#aab3c0 }
html[data-theme="dark"] .msg.out.by-other .ms.seen{ color:#6fd79f }
.msg.out.by-other .q-ref{ border-left-color:rgba(0,0,0,.35); background:rgba(0,0,0,.06) }
html[data-theme="dark"] .msg.out.by-other .bub{ background:#3a3f4a; color:#dfe3ea }
html[data-theme="dark"] .msg.out.by-other .bub.img-bub{ background:#3a3f4a }
html[data-theme="dark"] .msg.out.by-other .ms,
html[data-theme="dark"] .msg.out.by-other .ms.sent{ color:#9aa3b2 }
html[data-theme="dark"] .msg.out.by-other .ms.seen{ color:#5ad68f }
html[data-theme="dark"] .msg.out.by-other .q-ref{ border-left-color:rgba(255,255,255,.35); background:rgba(255,255,255,.08) }

/* ข้อความที่ถูกปักหมุดไว้ -> กรอบสีแดงรอบบับเบิล (ทั้งหมุดปกติและหมุด QA)
   ใช้ box-shadow เป็นกรอบแทน border จะได้ไม่ดันเลย์เอาต์/ขนาดบับเบิลเปลี่ยน */
/* ✨ FIX (pin-visible): กรอบปักหมุดหนาขึ้น + แดงตลอดทุกโหมด สังเกตง่ายขึ้นมาก
   เดิม 2px และเปลี่ยนเฉดตามธีม บางจอ/โหมดมืดแทบมองไม่ออกว่าปักหมุดไว้ */
.msg.is-pinned .bub{
    box-shadow:0 0 0 3px #e02424, 0 0 0 5px #e0242433, 0 1px 1px #0000000f;
}
html[data-theme="dark"] .msg.is-pinned .bub{
    box-shadow:0 0 0 3px #e02424, 0 0 0 5px #e0242440, 0 1px 1px #0000001f;
}
/* หมุดของ QA — ต้องเด่นที่สุด เพราะ QA ใช้ทำเครื่องหมายจุดที่ต้องตรวจ
   กรอบหนากว่าปกติ + มีป้าย 📌 มุมบน + กะพริบเบา ๆ ตอนเพิ่งเลื่อนมาถึง */
.msg.is-pinned-qa .bub{
    box-shadow:0 0 0 4px #e02424, 0 0 0 7px #e0242438, 0 1px 1px #0000000f;
    position:relative;
}
.msg.is-pinned-qa .bub::before{
    content:"📌"; position:absolute; top:-11px; left:-11px;
    width:24px; height:24px; border-radius:50%;
    background:#e02424; color:#fff; font-size:12px; line-height:24px; text-align:center;
    box-shadow:0 2px 6px rgba(0,0,0,.3); pointer-events:none; z-index:2;
}
.msg.out.is-pinned-qa .bub::before{ left:auto; right:-11px }
/* ข้อความที่กำลังถูกเลือกเพื่อ "ตอบกลับ" อยู่ -> กรอบรอบบับเบิลเหมือนปักหมุด
   แต่ใช้สีเขียว (โทนเดียวกับไอคอน/แถบตอบกลับ) กันสับสนกับกรอบปักหมุด (แดง) */
.msg.is-quoting .bub{
    box-shadow:0 0 0 2px var(--line-green), 0 1px 1px #0000000f;
}
html[data-theme="dark"] .msg.is-quoting .bub{
    box-shadow:0 0 0 2px var(--line-green), 0 1px 1px #0000001f;
}
/* ⚠️ (2026-08) .t อยู่ "นอก" บับเบิล — วางบนพื้นแชท (--chat-bg) ไม่ใช่บนฟองเขียว
   ห้ามใช้สีของตัวอักษรในบับเบิลกับตรงนี้เด็ดขาด
   ตรวจ contrast แล้ว: พื้นสว่าง #8fa9c4 กับพื้นมืด #2a3340 ต่างกันมาก
   ใช้สีเดียวไม่ผ่านทั้งคู่ -> ต้องแยกตามโหมด
     สว่าง #12212f = 6.73 ✅   ·   มืด #ffffff = 12.76 ✅
   (ของเดิมเป็นขาวโปร่งทั้งคู่ ซึ่งบนพื้นสว่างได้แค่ 2.43 = อ่านยากมาแต่แรก) */
.msg .t{
    font-size:9.5px;color:#12212f;   /* ✨ (2026-08) ลด 1px (เดิม 10.5) */
    display:flex;align-items:center;gap:6px;
}
html[data-theme="dark"] .msg .t{ color:#ffffff }

/* ---- สถานะการส่ง (แบบไลน์ OA) ---- */
.ms{
    display:inline-flex;align-items:center;gap:5px;
    font-size:10.5px;font-weight:700;
    white-space:nowrap;
}
/* ✨ (2026-08) บับเบิลเขียวอ่อนลง -> ตัวอักษรขาวโปร่งจมพื้น เปลี่ยนเป็นเขียวเข้ม
   (ตรวจ contrast ผ่าน AA ทั้ง 2 โหมด — ดูคอมเมนต์ที่ --bubble-out) */
.ms.sending{ color:var(--bubble-out-fg2); opacity:.85 }
.ms.sent   { color:var(--bubble-out-fg2); }
.ms.seen   { color:var(--bubble-out-seen); font-weight:700; }   /* ✓✓ ลูกค้าตอบแล้ว */
.ms.failed {
    background:#e02424;color:#fff;
    padding:2px 7px;border-radius:999px;
    box-shadow:0 2px 8px #0003;
}
.ms-btn{
    border:0;background:#ffffff30;color:#fff;
    border-radius:999px;padding:1px 8px;
    font-size:10px;font-weight:800;
    margin-left:2px;
}
.ms-btn:hover{background:#fff;color:#c62828}
.ms-btn.del:hover{background:#fff;color:#5d6474}

/* ฟองข้อความระหว่างส่ง -> จางลงเล็กน้อย */
.msg.is-sending .bub{ opacity:.62; }

/* ส่งไม่สำเร็จ -> ขอบแดง */
.msg.is-failed .bub{
    background:#fff !important;
    color:#c62828;
    border:1.5px solid #e02424;
}
.msg.in .t{color:#12212f}
html[data-theme="dark"] .msg.in .t{ color:#ffffffcc }

/* กล่องพิมพ์ */
.composer{
    background:var(--panel);
    border-top:1px solid var(--border);
    padding:10px 14px 12px;
    flex:none;
}
.composer-tools{display:flex;gap:12px;color:var(--muted);font-size:16px;margin-bottom:7px}
.composer-tools button{border:0;background:transparent;color:var(--muted);font-size:16px}
.composer-tools button:hover{color:var(--line-green)}

/* ---- ปุ่มในกล่องพิมพ์ ---- */
.composer-tools{display:flex;gap:7px;flex-wrap:wrap;margin-bottom:8px}
.ct-btn{
    display:inline-flex;align-items:center;gap:5px;
    border:1px solid var(--border);background:#f7f8fa;
    color:#5d6474;border-radius:999px;
    padding:7px 15px;font-size:13.5px;font-weight:700;
}
.ct-btn:hover{border-color:var(--line-green);color:var(--line-green);background:#fff}
.ct-btn.admin{background:#fff;color:#8b91a1;border-style:dashed}
.ct-btn.admin:hover{border-style:solid}
.ct-plus{
    font-size:15px;font-weight:900;line-height:1;
    color:var(--line-green);
}

/* ---- FIX (2026-08): โครงข้อความชั่วคราวตอนเปิดแชทครั้งแรก (ขึ้นทันที ระหว่างรอโหลด) ---- */
.msk{display:flex;margin:10px 14px}
.msk.out{justify-content:flex-end}
.msk span{
    display:block;height:38px;border-radius:16px;
    background:linear-gradient(100deg, #0000000d 30%, #00000005 45%, #0000000d 60%);
    background-size:220% 100%;animation:mskShine 1.1s linear infinite;
}
html[data-theme="dark"] .msk span{
    background:linear-gradient(100deg, #ffffff12 30%, #ffffff08 45%, #ffffff12 60%);
    background-size:220% 100%;
}
@keyframes mskShine{ 0%{background-position:160% 0} 100%{background-position:-60% 0} }

/* ===== FIX (2026-08): ระบบ SOS ===== */
.sos-btn{ border-color:#ff5a6788 !important; color:#ff8a90 !important; font-weight:800; }
.sos-btn:hover{ background:rgba(255,90,103,.12) !important; }
/* 🐞 FIX (2026-08): SOS หลายไลน์พร้อมกัน — เดิม flex-wrap แถบงอกหลายแถว
   ดันลงมาซ้อนทับเนื้อหาใต้ topbar · แก้เป็นแถวเดียวเลื่อนซ้าย-ขวาได้ */
.sos-bar{ display:flex; flex-wrap:nowrap; gap:8px; align-items:center; max-width:46vw;
    overflow-x:auto; overflow-y:hidden; scrollbar-width:thin; padding-bottom:2px; }
.sos-bar::-webkit-scrollbar{ height:5px; }
.sos-bar::-webkit-scrollbar-thumb{ background:rgba(255,90,103,.4); border-radius:99px; }
.sos-bar .sos-chip{ flex:0 0 auto; white-space:nowrap; }
.sos-chip{
    display:inline-flex; align-items:center; gap:8px;
    padding:5px 12px; border-radius:999px; font-size:12.5px; font-weight:800;
    background:linear-gradient(135deg, rgba(255,90,103,.28), rgba(198,40,40,.22));
    border:1.5px solid #ff5a67; color:#ffd7da; white-space:nowrap;
    animation:sosBlink 1s ease-in-out infinite;
    cursor:default;
}
.sos-chip b{ color:#fff; }
.sos-chip .sos-n{
    background:#ff5a67; color:#fff; border-radius:999px; padding:1px 9px; font-size:11.5px;
}
.sos-done{
    font:inherit; font-size:11px; font-weight:900; cursor:pointer;
    background:#fff; color:#c62828;                      /* ขาวตัดแดง — เห็นชัดบนชิป SOS */
    border:0; border-radius:999px; padding:3px 10px; margin-left:3px;
    box-shadow:0 1px 6px rgba(0,0,0,.3);
    transition:transform .12s ease, box-shadow .14s ease;
    animation:none;                                       /* ปุ่มนิ่ง ไม่กระพริบตามชิป อ่านง่าย */
}
.sos-done:hover{ transform:scale(1.06); box-shadow:0 2px 10px rgba(0,0,0,.4); }
.sos-done:active{ transform:scale(.95); }
@keyframes sosBlink{
    0%, 100%{ box-shadow:0 0 0 0 rgba(255,90,103,.55); opacity:1; }
    50%     { box-shadow:0 0 14px 3px rgba(255,90,103,.45); opacity:.72; }
}
@media (prefers-reduced-motion:reduce){ .sos-chip{ animation:none; } }

/* หน้าต่างเลือกไลน์ SOS: โฟลเดอร์ -> ไลน์ */
.sos-modal{ position:fixed; inset:0; z-index:99998; display:none; align-items:center; justify-content:center;
    background:rgba(0,0,0,.55); backdrop-filter:blur(3px); }
.sos-modal.show{ display:flex; }
.sos-card{
    width:min(560px, 92vw); max-height:78vh; overflow:auto;
    background:var(--panel, #151a22); border:1px solid #ff5a6755; border-radius:16px;
    box-shadow:0 18px 60px rgba(0,0,0,.6); padding:18px;
    animation:panelPop .18s cubic-bezier(.2,.8,.25,1);
}
.sos-card h3{ margin:0 0 4px; color:#ff8a90; display:flex; align-items:center; gap:8px; }
.sos-card .sos-sub{ color:var(--muted); font-size:12.5px; margin-bottom:13px; }
.sos-fgrid{ display:grid; grid-template-columns:repeat(auto-fill, minmax(150px, 1fr)); gap:10px; }
.sos-f, .sos-oa{
    font:inherit; cursor:pointer; text-align:left;
    border:1px solid var(--border); border-radius:12px; background:rgba(255,255,255,.03);
    padding:11px 13px; color:var(--text);
    transition:border-color .14s ease, background .14s ease, transform .12s ease;
}
.sos-f:hover, .sos-oa:hover{ border-color:#ff5a67; background:rgba(255,90,103,.07); }
.sos-f:active, .sos-oa:active{ transform:scale(.97); }
.sos-f b{ display:block; }
.sos-f small, .sos-oa small{ color:var(--muted); }
.sos-list{ display:flex; flex-direction:column; gap:8px; }
.sos-back{ font:inherit; cursor:pointer; border:1px solid var(--border); background:transparent;
    color:var(--muted); border-radius:9px; padding:5px 12px; margin-bottom:11px; }
.sos-back:hover{ color:var(--text); border-color:#ff5a6788; }

/* โน้ตจากแอดมิน (มุมมอง QA — อ่านอย่างเดียว) */
.pf-adminnote{
    border:1px dashed rgba(245,196,81,.5); background:rgba(245,196,81,.06);
    border-radius:10px; padding:9px 11px; margin-bottom:9px;
}
.pf-adminnote-head{ font-size:11.5px; font-weight:800; color:#f5c451; margin-bottom:4px; }
.pf-adminnote-body{ font-size:13px; white-space:pre-wrap; word-break:break-word; }

/* อิโมจิ LINE ในบับเบิลข้อความ */
.ln-emoji{ width:22px; height:22px; vertical-align:-5px; margin:0 1px; }

/* ============================================================
   FIX (2026-08): ชุดปรับความสมูต/ไหลลื่นทั้งหน้าแชท
   ============================================================ */
/* สกรอลนุ่ม: กันแรงเลื่อนทะลุไปลากส่วนอื่น + โมเมนตัมบนมือถือ */
#messages, .chat-list, .qk-list, .stk-grid, .tp-pills{
    overscroll-behavior:contain;
    -webkit-overflow-scrolling:touch;
}
/* ปิดกรอบวาบสีเทาตอนแตะบนมือถือ */
*{ -webkit-tap-highlight-color:transparent; }

/* แถวลิสต์/ปุ่ม: จังหวะ hover-กด นุ่มเสมอกันทั้งระบบ */
.chat-row{ transition:background .14s ease; }
.chat-row:active{ background:rgba(255,255,255,.06); }
.pill, .ct-btn, .qk-item, .qk-tab, .q-oa, .tp-folder{
    transition:background .14s ease, border-color .14s ease, color .14s ease, transform .12s ease;
}
.qk-item:active, .ct-btn:active, .pill:active{ transform:scale(.97); }

/* เข้าห้องใหม่: เนื้อหาห้องไหลขึ้นนุ่ม ๆ 0.22 วิ */
.thread.room-enter #messages,
.thread.room-enter .composer,
.thread.room-enter .thread-head{ animation:roomIn .22s cubic-bezier(.22,.7,.3,1) both; }
/* จังหวะจางออกตอนสลับห้อง (สั้นมาก แค่พอกลบงานรื้อจอ) */
.thread.room-leave #messages,
.thread.room-leave .composer,
.thread.room-leave .thread-head{ opacity:.15; transform:translateY(-3px); transition:opacity .06s ease, transform .06s ease; }
@keyframes roomIn{ from{ opacity:.35; transform:translateY(6px); } to{ opacity:1; transform:none; } }

/* บับเบิลใหม่ที่เพิ่งต่อท้าย: เด้งเข้าเบา ๆ (เฉพาะตัวท้ายสุด ไม่แตะทั้งห้อง) */
#messages .msg:last-child{ animation:msgIn .18s cubic-bezier(.22,.7,.3,1) both; }
@keyframes msgIn{ from{ opacity:0; transform:translateY(5px); } to{ opacity:1; transform:none; } }

/* แผงป๊อป (ข้อความตอบกลับ/สติกเกอร์): เด้งเปิดนุ่ม */
.qk-box, .stk-box{ animation:panelPop .16s cubic-bezier(.2,.8,.25,1) both; }
@keyframes panelPop{ from{ opacity:0; transform:translateY(8px) scale(.985); } to{ opacity:1; transform:none; } }

/* เครื่องที่ตั้ง "ลดการเคลื่อนไหว" -> ปิดชุดนี้ให้อัตโนมัติ */
@media (prefers-reduced-motion:reduce){
    .thread.room-enter #messages, .thread.room-enter .composer, .thread.room-enter .thread-head,
    #messages .msg:last-child, .qk-box, .stk-box{ animation:none !important; }
}

/* ---- แผงข้อความตอบกลับ ---- */
.qk-box{
    background:#fff;border-radius:14px;
    width:480px;max-width:94vw;max-height:78vh;
    display:flex;flex-direction:column;
    box-shadow:0 20px 60px #0004;overflow:hidden;
}
.qk-head{
    display:flex;align-items:center;justify-content:space-between;
    padding:14px 16px;border-bottom:1px solid var(--border);
}
.qk-head b{font-size:15px}

.qk-tabs{
    display:flex;gap:6px;padding:10px 14px;flex-wrap:wrap;
    border-bottom:1px solid var(--border2);
}
.qk-tab{
    border:1px solid var(--border);background:#fff;color:#6b7285;
    border-radius:999px;padding:6px 13px;font-size:13.5px;font-weight:700;
}
.qk-tab.on{background:var(--line-green);color:#fff;border-color:transparent}
.qk-list{
    overflow-y:auto;padding:10px 14px;
    display:flex;flex-direction:column;gap:7px;
}
.qk-item{
    /* FIX (2026-08): ปุ่มข้อความตอบกลับ +10% มองเห็นง่ายขึ้น */
    border:1px solid var(--border);background:#f7f8fa;
    border-radius:11px;padding:12px 14px;
    font-size:15px;color:var(--text);text-align:left;line-height:1.5;
    white-space:pre-wrap;word-break:break-word;
}
.qk-item:hover{border-color:var(--line-green);background:#eafaf0}
.qk-foot{
    padding:10px 14px;border-top:1px solid var(--border2);
    font-size:11.5px;color:var(--muted);
}

/* ---- แผงสติกเกอร์ ---- */
.stk-box{
    background:#fff;border-radius:14px;
    width:420px;max-width:94vw;max-height:70vh;
    display:flex;flex-direction:column;
    box-shadow:0 20px 60px #0004;overflow:hidden;
}
.stk-grid{
    display:grid;grid-template-columns:repeat(auto-fill,minmax(74px,1fr));
    gap:8px;padding:14px;overflow-y:auto;
}
.stk-item{
    border:1px solid var(--border);background:#fff;
    border-radius:12px;padding:6px;aspect-ratio:1;
    display:grid;place-items:center;
}
.stk-item img{width:100%;height:100%;object-fit:contain}
.stk-item:hover{border-color:var(--line-green);background:#f2fbf5}

/* ---- แผงอิโมจิ ---- */
.emj-box{
    background:#fff;border-radius:14px;
    width:360px;max-width:94vw;max-height:70vh;
    display:flex;flex-direction:column;
    box-shadow:0 20px 60px #0004;overflow:hidden;
}
.emj-grid{
    display:grid;grid-template-columns:repeat(auto-fill,minmax(42px,1fr));
    gap:4px;padding:14px;overflow-y:auto;
}
.emj-item{
    border:1px solid transparent;background:none;
    border-radius:8px;padding:4px;aspect-ratio:1;
    font-size:22px;line-height:1;
    display:grid;place-items:center;cursor:pointer;
}
.emj-item:hover{border-color:var(--line-green);background:#f2fbf5}
html[data-theme="dark"] .emj-box{background:#1b1e26}
html[data-theme="dark"] .emj-item:hover{background:#20321f}

/* ---- ตั้งค่าข้อความตอบกลับ ---- */
.rp-items{display:flex;flex-direction:column;gap:6px;margin-top:8px}
.rp-item{
    display:flex;align-items:flex-start;justify-content:space-between;gap:8px;
    background:#fff;border:1px solid var(--border);
    border-radius:9px;padding:8px 11px;font-size:13px;
}
.rp-item > span{white-space:pre-wrap;word-break:break-word;padding-top:2px}
.rp-item > div{display:flex;gap:4px;flex:none}
.rp-add{display:flex;gap:7px;margin-top:9px;align-items:flex-start}
.rp-add textarea,
.rp-item-edit textarea{
    flex:1;border:1px solid var(--border);border-radius:9px;
    padding:8px 11px;font:inherit;font-size:13px;
    resize:vertical;min-height:38px;line-height:1.45;
}
.rp-item-edit{display:flex;flex-direction:column;gap:7px;width:100%}
.rp-item-edit .rp-edit-acts{display:flex;gap:7px;justify-content:flex-end}

/* ---- สถิติ ---- */
.st-total{
    display:flex;align-items:baseline;gap:8px;justify-content:center;
    background:#eafaf0;border-radius:12px;padding:14px;margin-bottom:14px;
    color:#06803a;font-size:13px;
}
.st-total b{font-size:30px;font-weight:900}
.st-rows{display:flex;flex-direction:column;gap:8px;margin-bottom:18px}
.st-row{display:flex;align-items:center;gap:10px}
.st-rank{
    width:22px;height:22px;border-radius:50%;
    background:#eef1f5;color:#5d6474;
    display:grid;place-items:center;font-size:11px;font-weight:800;flex:none;
}
.st-name{width:110px;font-weight:700;font-size:13px;
         overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.st-bar{flex:1;height:9px;background:#eef1f5;border-radius:999px;overflow:hidden}
.st-bar i{display:block;height:100%;background:var(--line-green);border-radius:999px}
.st-num{width:38px;text-align:right;font-size:13.5px;font-variant-numeric:tabular-nums}

.st-keep{
    text-align:center;font-size:11.5px;color:var(--muted);
    margin:-8px 0 14px;
}
/* เลือกช่วงวันที่ + ดาวน์โหลด/ล้าง */
.st-range{
    margin-top:18px;padding-top:16px;
    border-top:1px solid var(--border);
}
.st-range-row{
    display:flex;align-items:center;gap:9px;margin-bottom:12px;
}
.st-range-row input[type=date]{
    flex:1;border:1px solid var(--border);border-radius:9px;
    padding:8px 11px;font:inherit;font-size:13px;
}
.st-range-row input:focus{outline:2px solid var(--line-green);outline-offset:-1px}
.st-range-row span{color:var(--muted);font-size:12.5px}
.st-acts{display:flex;gap:8px;flex-wrap:wrap}
.st-acts .tp-btn{flex:1;min-width:96px}
.st-note{
    margin-top:10px;font-size:11.5px;color:var(--muted);line-height:1.6;
}
.st-note b{color:#c62828}

.st-days{display:flex;gap:8px;align-items:flex-end;justify-content:space-between;padding-top:6px}
.st-day{flex:1;text-align:center}
.st-day-bar{
    background:#b9e7cb;border-radius:5px 5px 0 0;
    min-height:3px;margin:0 auto 4px;width:70%;
}
.st-day-n{font-size:11.5px;font-weight:800;color:#5d6474}
.st-day-d{font-size:10px;color:var(--muted);margin-top:1px}

/* ฟองสติกเกอร์: ไม่มีพื้นหลัง แสดงรูปจริงแบบไลน์ *//* ฟองสติกเกอร์: ไม่มีพื้นหลัง แสดงรูปจริงแบบไลน์ */
.bub.sticker-bub{
    background:transparent !important;
    box-shadow:none;
    padding:0;
}
/* 🐞 FIX (sticker-size): เดิมบังคับกรอบจัตุรัส 130x130 + object-fit:contain
   สติกเกอร์ LINE ไม่ได้จัตุรัสทุกตัว (มีทั้งแนวตั้ง/แนวนอน) พอยัดลงกรอบจัตุรัส
   ด้านที่ยาวกว่าจะถูกย่อจนตัวสติกเกอร์เล็กกว่าที่ควรมาก — ต่างจากไลน์ OA
   แก้: ปล่อยสัดส่วนจริง กำหนดแค่ "ด้านยาวสุดไม่เกิน" เหมือนไลน์ OA */
.bub.sticker-bub img{
    width:auto; height:auto;
    max-width:180px; max-height:180px;
    display:block;
    image-rendering:auto;
}
@media (max-width: 820px), (pointer:coarse) and (hover:none) and (max-width:950px){
    .bub.sticker-bub img{ max-width:150px; max-height:150px }
}
/* รูป/วิดีโอ ที่ลูกค้าส่งมา */
/* 🐞 FIX (media-fit): กรอบสื่อหดตามรูป/วิดีโอจริง ไม่ยืดเปล่า ๆ + ขยายให้ดูสบายตา
   เดิม max-width 260px เล็กเกินไปเมื่อเทียบกับความกว้างบับเบิล */
.bub.img-bub{
    padding:3px; background:#fff;
    width:max-content; max-width:100%;      /* หดตามเนื้อหาจริง */
    line-height:0;                          /* กันช่องว่างใต้รูปจาก inline baseline */
}
.msg.out .bub.img-bub{background:var(--bubble-out)}
.bub.img-bub img,
.bub.img-bub video{
    max-width:340px; max-height:420px;
    width:auto; height:auto;
    border-radius:12px; display:block;
    object-fit:contain;                     /* ไม่ครอปรูปลูกค้าทิ้ง (เดิม cover ตัดขอบ) */
}
/* วิดีโอจากลูกค้า: <video> ไม่มีขนาดในตัวจนกว่าจะโหลด metadata เสร็จ
   ถ้าไม่กำหนดความกว้าง เบราว์เซอร์ใช้ค่าปริยาย 300x150 = จิ๋วกลางกรอบใหญ่ */
.chat-vid-in{
    width:340px; max-width:100%; max-height:420px;
    background:#000; border-radius:12px;
}
@media (max-width: 820px), (pointer:coarse) and (hover:none) and (max-width:950px){
    .bub.img-bub img, .bub.img-bub video{ max-width:70vw; max-height:60vh }
    .chat-vid-in{ width:70vw }
}
.bub.img-bub img{cursor:zoom-in}
/* กล่อง shimmer ระหว่างรอโหลดรูปที่ลูกค้าส่งมา */
.img-wrap{position:relative;display:inline-block;line-height:0}
.img-wrap.loading{
    width:200px;height:200px;border-radius:12px;
    background:linear-gradient(90deg,#eceef2 25%,#f6f7f9 37%,#eceef2 63%);
    background-size:400% 100%;
    animation:img-shimmer 1.4s ease infinite;
    display:flex;align-items:center;justify-content:center;
}
.img-wrap.loading::after{content:"🖼";font-size:26px;opacity:.32}
.img-wrap.loading img{opacity:0;position:absolute;width:0;height:0}
.img-wrap img{opacity:1;transition:opacity .25s ease}
@keyframes img-shimmer{
    0%{background-position:100% 0}
    100%{background-position:0 0}
}
html[data-theme="dark"] .img-wrap.loading{
    background:linear-gradient(90deg,#242832 25%,#2b303c 37%,#242832 63%);
    background-size:400% 100%;
}
/* ปุ่มโหลดรูปใหม่ด้วยมือ — โผล่ตอนเอาเมาส์ชี้ผ่านรูปเท่านั้น (แบบเดียวกับปุ่มปักหมุด) */
.img-reload-btn{
    position:absolute;top:6px;right:6px;
    width:26px;height:26px;border-radius:50%;
    border:1px solid var(--border);background:#fffc;
    font-size:12px;line-height:1;cursor:pointer;
    display:flex;align-items:center;justify-content:center;
    opacity:0;transition:opacity .15s ease, transform .1s ease;
    box-shadow:0 2px 6px #0003;
}
.img-wrap:hover .img-reload-btn{opacity:1}
.img-reload-btn:hover{transform:scale(1.15) rotate(90deg);background:var(--line-green);border-color:transparent;color:#fff}
.img-wrap.loading .img-reload-btn{display:none}
html[data-theme="dark"] .img-reload-btn{background:#242832cc;color:var(--text);border-color:var(--border)}
.img-fail{
    background:#fff4d6;color:#8a6b00;
    border-radius:10px;padding:14px 16px;
    font-size:12.5px;font-weight:700;cursor:pointer;
    text-align:center;
}
.img-fail:hover{background:#ffe9b3}
.file-link{color:inherit;font-weight:700;text-decoration:none}
.file-link:hover{text-decoration:underline}

/* ดูรูปเต็มจอ + ซูมได้ */
/* ---- FIX (2026-08): ตัวเปิดดูวิดีโอจอเล็ก + ปุ่มขยายบนบับเบิลวิดีโอ ---- */
.vid-wrap{position:relative;display:inline-block;max-width:100%}
.vid-wrap video{display:block;max-width:100%;border-radius:10px}
.vid-open-btn{
    position:absolute;top:6px;right:6px;z-index:2;
    width:28px;height:28px;border:0;border-radius:8px;cursor:pointer;
    background:rgba(0,0,0,.55);color:#fff;font-size:14px;line-height:1;
    display:flex;align-items:center;justify-content:center;
    opacity:0;transition:opacity .15s, transform .15s;
}
.vid-wrap:hover .vid-open-btn{opacity:1}
.vid-open-btn:hover{transform:scale(1.12);background:var(--line-green)}
.vid-view .vv-stage{
    display:flex;align-items:center;justify-content:center;
    width:100%;flex:1;min-height:0;padding:10px;
}
.vid-view .vv-stage video{
    width:min(860px, 92vw);max-height:72vh;
    border-radius:14px;background:#000;
    box-shadow:0 18px 60px rgba(0,0,0,.6);
    animation:vvPop .22s ease;
}
@keyframes vvPop{from{opacity:0;transform:scale(.94)}to{opacity:1;transform:none}}

.img-view{
    position:fixed;inset:0;z-index:9999;
    background:#000e;display:flex;flex-direction:column;
    align-items:center;justify-content:center;
    user-select:none;
}
.iv-stage{
    flex:1;width:100%;
    display:flex;align-items:center;justify-content:center;
    overflow:hidden;cursor:zoom-in;
}
.iv-stage.zoomed{cursor:grab}
.iv-stage.dragging{cursor:grabbing}
.iv-stage img{
    max-width:92vw;max-height:78vh;border-radius:10px;
    transform-origin:center center;
    transition:transform .08s ease-out;
    will-change:transform;
}
.iv-stage.dragging img{transition:none}   /* ลากแล้วต้องตามเมาส์ทันที ไม่มีดีเลย์ */

.iv-bar{
    display:flex;align-items:center;gap:6px;
    padding:10px 12px;margin-top:14px;
    background:#1c1e28e8;border:1px solid #2c2f40;border-radius:12px;
    box-shadow:0 8px 30px #0006;
}
.iv-btn{
    width:36px;height:36px;flex:none;
    display:grid;place-items:center;
    border:1px solid #2c2f40;border-radius:9px;
    background:#242832;color:#eef0f6;
    font-size:16px;font-weight:800;cursor:pointer;
    text-decoration:none;line-height:1;
}
.iv-btn:hover{border-color:var(--line-green);color:var(--line-green)}
.iv-btn.iv-close:hover{border-color:#ff4b55;color:#ff4b55}
.iv-pct{
    min-width:56px;text-align:center;
    color:#eef0f6;font-size:12.5px;font-weight:700;
}
.iv-hint{
    color:#ffffff88;font-size:11.5px;
    padding:8px 0 16px;text-align:center;
}
@media (max-width:640px){
    .iv-hint{display:none}
    .iv-stage img{max-width:96vw;max-height:70vh}
}

.sticker-kw{
    font-size:10.5px;color:var(--bubble-out-fg2);
    margin-top:2px;text-align:center;
}
.composer-row{display:flex;gap:10px;align-items:flex-end}
.composer textarea{
    flex:1;resize:none;
    border:1px solid var(--border);border-radius:10px;
    padding:10px 12px;font:inherit;font-size:13px;   /* ✨ (2026-08) ลด 1px · มือถือคง 16px (กัน iOS ซูมเองตอนแตะพิมพ์) */
    min-height:42px;max-height:160px;
    overflow-y:auto;                 /* เกิน max-height แล้วเลื่อนดูภายในกล่อง ไม่ล้นออกไป */
    transition:height .08s ease;     /* ขยับความสูงลื่นขึ้นตอนพิมพ์/วางข้อความยาว */
}
.composer textarea:focus{outline:2px solid var(--line-green);outline-offset:-1px}
.send{
    border:0;border-radius:10px;
    background:var(--line-green);color:#fff;
    padding:0 20px;height:42px;
    font-weight:800;font-size:14px;
}
.send:hover{background:var(--line-green-dk)}
.send:disabled{opacity:.45}

.thread-empty{
    margin:auto;text-align:center;color:#ffffffdd;
    font-size:14px;padding:40px;
}
/* FIX (2026-08): ลายน้ำโลโก้ในพื้นที่โล่ง (ตอนยังไม่ได้เลือกแชท)
   จาง ๆ ไม่รบกวนสายตา · โหลดโลโก้ไม่ได้ก็เหลือแค่ข้อความเดิม ไม่พัง
   เลย์เอาต์ตามสั่ง: โลโก้ใหญ่ (+40% = 210px, เข้ม .17) ลอยกลางพื้นที่
   ส่วนข้อความ "เลือกแชททางซ้าย..." ตรึงไว้ "แถบล่างสุด" ของพื้นที่ */
.thread-empty.wm{
    margin:0;                       /* เลิกลอยกลาง (เดิม margin:auto) */
    align-self:stretch;
    flex:1;                         /* กินเต็มพื้นที่แนวตั้งของ .thread */
    width:100%;
    display:flex;flex-direction:column;align-items:center;
    padding:24px 20px 22px;         /* ระยะข้อความจากขอบล่างสุด */
}
.thread-empty.wm::before{
    content:"";
    width:210px;height:210px;border-radius:38px;
    background:url("../u1e-logo.png") center/cover no-repeat;
    opacity:.17;
    filter:saturate(.85);
    margin:auto 0;                  /* ดันบน-ล่างเท่ากัน = โลโก้ลอยกลางพื้นที่พอดี */
    animation:wmIn 1s ease both;
}
@keyframes wmIn{ from{ opacity:0; transform:scale(.92); } to{ opacity:.17; transform:scale(1); } }
@media (prefers-reduced-motion:reduce){ .thread-empty.wm::before{ animation:none; } }

/* ================= โปรไฟล์ (ขวา) ================= */
.profile{
    grid-area:profile;
    background:var(--panel);
    border-left:1px solid var(--border);
    padding:18px 16px;
    overflow-y:auto;
    position:relative;
}
.pf-close{
    display:none;
    position:absolute;top:10px;right:10px;
    width:28px;height:28px;border-radius:8px;
    border:1px solid var(--border);background:#fff;
    color:#5d6474;font-size:13px;
    place-items:center;
}
.pf-close:hover{border-color:#c62828;color:#c62828}
@media (max-width:940px), (pointer:coarse) and (hover:none){ .pf-close{display:grid} }
.pf-top{text-align:center;padding-bottom:14px;border-bottom:1px solid var(--border2)}
.pf-av{
    width:64px;height:64px;border-radius:50%;
    background:#d5dae2;color:#5d6474;
    display:grid;place-items:center;
    font-size:22px;font-weight:800;margin:0 auto 8px;
}
.pf-name{font-weight:800;font-size:15px}
.pf-real{font-size:11.5px;color:var(--muted);margin-top:3px}
.name-edit{
    border:0;background:transparent;
    color:var(--muted);font-size:12px;
    padding:2px 4px;border-radius:5px;
}
.name-edit:hover{background:#eafaf0;color:var(--line-green)}
.renamed{font-size:10px;color:#06803a;opacity:.7}
/* ชื่อไลน์ในแผงโปรไฟล์ — แบบเดิม (ข้อความธรรมดา ไม่มีกรอบ)
   หมายเหตุ: เคยลองทำเป็นป้ายกรอบเขียวแล้ว แต่หน้างานไม่เอา จึงคืนค่าเดิม
   (ป้ายกรอบยังใช้อยู่ที่ "รายการแชท" ซึ่งจำเป็นต้องแยกไลน์ให้ชัด) */
/* ✨ (2026-08 v2) ป้าย OA หน้าโปรไฟล์: ใช้ .oa-chip ของรายการแชทเป็นตัวจริง
   ตรงนี้เหลือแค่จัดตำแหน่งในแผง (สี/ขนาด/ทรง มาจาก .oa-chip ที่เดียว) */
.pf-oa{ display:inline-block; margin-top:7px; }

.pf-sec{margin-top:16px}
/* ✨ (2026-08 v2) ค้นหาข้อความในห้อง — เปิดด้วยปุ่ม 🔍 บนแถบหัวห้อง (คีย์ลัด Ctrl+F ยังใช้ได้)
   แถบนี้เป็นลูกของ #thread ไม่ใช่ body — พอเปลี่ยนห้อง/ออกจากห้อง #thread ถูกวาดใหม่หรือถูกซ่อน
   แถบจะหายไปเองโดยอัตโนมัติ ไม่ต้องไปแก้โค้ดส่วนอื่นให้มาสั่งปิด
   ตำแหน่งจริงคำนวณจาก JS (mfPlace) ให้ห้อยใต้ปุ่มเสมอ ค่าล่างเป็นแค่ค่ากันหลุดจอ */
#msgFindBar{ position:fixed; top:74px; right:16px; z-index:99998; display:flex; gap:7px;
    align-items:center; padding:9px 11px; border-radius:13px;
    background:var(--panel,#171a23); border:1px solid var(--border,#2a2f3c);
    box-shadow:0 10px 30px rgba(0,0,0,.35) }
#msgFindBar[hidden]{ display:none !important }
#msgFindBar input{ width:210px; flex:1 1 auto; min-width:120px;
    padding:8px 11px; border-radius:9px; font-size:13.5px;
    border:1px solid var(--border,#2a2f3c); background:rgba(255,255,255,.05); color:var(--text); outline:none }
#msgFindBar input:focus{ border-color:rgba(74,168,255,.55) }
#msgFindBar.no-hit input{ border-color:#ff4b5588 }          /* พิมพ์แล้วไม่เจอ */
#msgFindBar button{ border:0; border-radius:8px; padding:7px 10px; cursor:pointer;
    background:rgba(255,255,255,.07); color:var(--text); font-size:12.5px }
#msgFindBar button:hover{ background:rgba(255,255,255,.14) }
#mfCount{ color:var(--muted); font-size:12px; min-width:34px; text-align:center; white-space:nowrap }
#mfCount.none{ color:#ff4b55; font-weight:700 }

/* ปุ่ม 🔍 ค้นหา บนแถบหัวห้องแชท */
.st-btn.find-btn{ display:inline-flex; align-items:center; gap:6px }
.st-btn.find-btn.on{ background:var(--line-green); color:#fff; border-color:transparent }
@media (max-width:820px), (pointer:coarse) and (hover:none) and (max-width:950px){ .st-btn.find-btn .fb-t{ display:none } }   /* จอแคบเหลือแต่แว่นขยาย */

/* ✨ (2026-08) ป้ายบอกแหล่งที่เจอในผลค้นหา: แท็ก=เขียว โน้ต=เหลือง ข้อความ=แดงอ่อน */
.hit-b{ display:inline-flex; align-items:center; gap:5px; margin:3px 0 1px;
    padding:2.5px 9px; border-radius:8px; font-size:11.5px; font-weight:700;
    border:1.5px solid; max-width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap }
.hit-b b{ font-weight:800 }
.hit-tag{  background:#06c75514; border-color:#06c75580; color:#0a8f43 }
.hit-note{ background:#f5a62314; border-color:#f5a62380; color:#b07610 }
.hit-text{ background:#ff5a6712; border-color:#ff5a6766; color:#c9424e }
html[data-theme="dark"] .hit-tag{  color:#5fe39a }
html[data-theme="dark"] .hit-note{ color:#ffc964 }
html[data-theme="dark"] .hit-text{ color:#ff98a5 }
/* ✨ ประวัติรับ/โอนเคส */
.pf-caselog{ border-left:3px solid var(--border,#2a2f3c); padding-left:10px; margin-top:4px }
.pf-cl-row{ font-size:12.5px; line-height:1.55; margin:5px 0; color:var(--text) }
.pf-cl-row b{ font-weight:800 }
/* ✨ (2026-08 v4) ประวัติเคส: ปุ่มในแผงโปรไฟล์ */
.pf-cl-btn{
    display:flex; align-items:center; justify-content:space-between; gap:10px;
    width:100%; min-height:40px;                 /* กดง่ายด้วยนิ้วบนมือถือ */
    padding:9px 12px; border-radius:11px; cursor:pointer;
    border:1px solid var(--border,#2a2f3c); background:var(--card,#ffffff08);
    font:inherit; font-size:13px; font-weight:800; color:var(--text);
    transition:transform .12s, background .16s, border-color .16s;
}
.pf-cl-btn:hover{ background:var(--hover,#ffffff12); transform:translateY(-1px) }
.pf-cl-btn:active{ transform:scale(.985) }
.pf-cl-count{ font-size:11.5px; font-weight:700; color:var(--muted) }

/* ✨ (2026-08 v4) ประวัติเคส: เนื้อในป๊อปอัพ (การ์ดป๊อปอัพเป็นพื้นขาวเสมอทุกธีม
   -> ใช้สีคงที่ชุดเดียวกับ .c-title/.c-msg ไม่ผูกกับตัวแปรธีมของหน้าแชท) */
.c-cl-sub{ font-size:12px; color:#8a93a3; margin:-4px 0 14px; word-break:break-word }
.c-caselog{
    text-align:left; max-height:min(52vh,400px); overflow-y:auto;
    padding-right:4px; margin-bottom:4px;
}
.c-cl-item{ border-left:3px solid #e3e6ec; padding:1px 0 1px 11px; margin:0 0 13px }
.c-cl-item:last-child{ margin-bottom:2px }
.c-cl-t{ font-size:13.5px; font-weight:900; color:#1b1c20; line-height:1.5 }
.c-cl-when{ font-size:12px; color:#8a93a3; line-height:1.55 }
.c-cl-who{
    font-size:12.5px; color:#4b5563; line-height:1.55;
    /* ชื่อกลุ่ม/ชื่อพนักงานยาว ๆ ต้องตัดบรรทัดได้ ห้ามดันกล่องป๊อปอัพล้นจอ
       overflow-wrap = ตัดกลางคำเฉพาะเมื่อจำเป็น (ยังอ่านชื่อได้ครบ ไม่ตัดทิ้ง) */
    overflow-wrap:anywhere; word-break:break-word; white-space:normal;
}
.c-cl-sys{ color:#8a93a3; font-weight:400 }
.c-cl-empty{ font-size:13px; color:#8a93a3; text-align:center; padding:6px 0 10px }
.c-cl-open  .c-cl-t{ color:#0a8f43 }
.c-cl-recv  .c-cl-t{ color:#0a8f43 }
.c-cl-move  .c-cl-t{ color:#b07610 }
.c-cl-close .c-cl-t{ color:#2f7ee0 }
.c-cl-open  { border-left-color:#7fd9a0 }
.c-cl-recv  { border-left-color:#7fd9a0 }
.c-cl-move  { border-left-color:#f2ce6a }
.c-cl-close { border-left-color:#a9cffb }
/* ✨ (ข้อ 7) รายการ "เปลี่ยนชื่อลูกค้า" ในประวัติเคส */
.c-cl-rename{ border-left-color:#c7a6ff }
.c-cl-rename .c-cl-t{ color:#7c5cff }
.pf-label{
    font-size:10.5px;font-weight:800;letter-spacing:.08em;
    text-transform:uppercase;color:var(--muted);margin-bottom:7px;
}
.pf-val{font-size:13.5px;font-weight:600}
.pf-val.mono{
    font-family:ui-monospace,"SF Mono",Menlo,monospace;
    font-size:12px;font-weight:500;color:#5d6474;
    word-break:break-all;
}
.pf-hint{font-size:11px;color:var(--muted);margin-top:6px}

.pf-note{
    width:100%;min-height:90px;resize:vertical;
    border:1px solid var(--border);border-radius:8px;
    padding:9px;font:inherit;font-size:13px;
}
.pf-note:focus{outline:2px solid var(--line-green);outline-offset:-1px}

/* รายการโน้ตแบบเพิ่มทีละอัน (+) */
.pf-notes{display:flex;flex-direction:column;gap:7px;margin-bottom:8px}
.pf-note-item{
    position:relative;
    border:1px solid var(--border);border-radius:8px;
    padding:8px 30px 22px 10px;font-size:12.5px;line-height:1.5;
    color:var(--text);background:#f7f8fa;
}
.pf-note-text{white-space:pre-wrap;word-break:break-word}
.pf-note-del{
    position:absolute;right:6px;bottom:5px;
    width:20px;height:20px;line-height:18px;padding:0;
    border:1px solid var(--border);border-radius:50%;
    background:#fff;color:var(--muted);
    font-size:14px;font-weight:800;cursor:pointer;
}
.pf-note-del:hover{border-color:#e0212f;color:#e0212f;background:#fff0f1}
.pf-note-empty{font-size:12.5px;color:var(--muted);padding:6px 2px}
.pf-note-meta{font-size:11px;color:var(--muted);margin-top:5px;text-align:right}
.pf-note-new{margin-top:8px}
.pf-note-new .pf-note{min-height:70px}
.pf-note-actions{display:flex;gap:8px;margin-top:6px}
.pf-note-cancel,.pf-note-save{
    flex:1;border-radius:8px;padding:8px;font-size:12.5px;font-weight:700;cursor:pointer;
}
.pf-note-cancel{border:1px solid var(--border);background:#fff;color:var(--muted)}
.pf-note-cancel:hover{border-color:#e0212f;color:#e0212f}
.pf-note-save{border:none;background:var(--line-green);color:#fff}
.pf-note-save:hover{background:var(--line-green-dk)}

.pf-tags{display:flex;gap:6px;flex-wrap:wrap}
.pf-tag{
    display:inline-flex;align-items:center;gap:5px;
    font-size:11.5px;font-weight:700;
    padding:4px 9px;border-radius:999px;
    background:#eafaf0;color:#06803a;border:1px solid #b9e7cb;
}
.pf-tag.add{
    background:#fff;color:var(--muted);border:1px dashed var(--border);
    cursor:pointer;
}
.pf-tag.add:hover{border-color:var(--line-green);color:var(--line-green)}
.tag-x{
    border:0;background:transparent;color:#06803a99;
    font-size:14px;line-height:1;padding:0;
}
.tag-x:hover{color:#c62828}

/* ================= RESPONSIVE ================= */

/* โน้ตบุ๊กจอเล็กลง: บีบคอลัมน์ให้พอดี แต่ยังเห็นแผงขวา (ปรับขนาดเองได้เหมือนเดิม) */
@media (max-width:1350px){
    .app{grid-template-columns:60px var(--list-w, 290px) 5px 1fr 5px var(--profile-w, 240px)}
}
@media (max-width:1150px){
    .app{grid-template-columns:56px var(--list-w, 265px) 5px 1fr 5px var(--profile-w, 215px)}
    .profile{padding:14px 12px}
    .msg{max-width:72%}
}

/* จอแคบมาก: ซ่อนแผงขวา (กดปุ่ม ⓘ ที่หัวแชทเพื่อเปิดทับได้) — โปรไฟล์หลุดออกจาก
   ผังกริดไปเป็น fixed overlay แล้ว เลยไม่ต้องมีแท่งลากฝั่งขวาอีก (ซ่อนไว้) */
@media (max-width:940px), (pointer:coarse) and (hover:none){
    .app{grid-template-columns:56px var(--list-w, 250px) 5px 1fr;
         grid-template-areas:"rail topbar topbar topbar" "rail list lrsz thread"}
    .profile{
        position:fixed;top:0;right:0;bottom:0;
        width:280px;z-index:20;
        box-shadow:-8px 0 30px #00000026;
        display:none;
    }
    .app.show-profile .profile{display:block}
    .info-btn{display:grid !important}
    #colResizeProfile{display:none}
}

/* มือถือ: จอแคบเกินจะลากปรับขนาดเองสะดวก ซ่อนแท่งลากทั้งคู่
   ⚠️ FIX (2026-07): เดิม breakpoint ตั้งไว้ที่ 820px กว้างเกินไป — หน้าต่าง
   เดสก์ท็อปทั่วไปที่แค่ไม่ได้ maximize เต็มจอ (หรือซูมหน้าเว็บสูงกว่า 100%)
   มักแคบกว่า 820px โดยไม่รู้ตัว ทำให้ดันไปเจอโหมด "มือถือ" ที่คลิกเปิดแชทแล้ว
   สลับทั้งหน้าจอไปโชว์แชทเต็มจอ ซ่อนรายการฝั่งซ้ายไปเลย (ต้องกด "ย้อนกลับ" ถึง
   จะเห็นรายการอีกที) ดูเหมือนหน้าจอ "สไลด์เด้ง" ทั้งที่จริงๆ เป็นการสลับโหมด
   ตามที่ตั้งใจออกแบบไว้สำหรับมือถือจริง ๆ เท่านั้น — ลดเหลือ 480px (ความกว้าง
   จอมือถือทั่วไป) ให้รายการ+หน้าแชทอยู่ด้วยกันเสมอเหมือน LINE OA ปกติ บนหน้าจอ
   เดสก์ท็อป/แท็บเล็ตทุกขนาดที่สมเหตุสมผล ไม่สลับโหมดไปมาอีกต่อไป */
@media (max-width:480px), (pointer:coarse) and (hover:none) and (max-width:950px){
    .app{grid-template-columns:1fr;grid-template-rows:52px 1fr;
         grid-template-areas:"topbar" "list"}
    .rail{display:none}
    .thread{display:none}
    .app.viewing{grid-template-areas:"topbar" "thread"}
    .app.viewing .list{display:none}
    .app.viewing .thread{display:flex}
    .msg{max-width:82%}
    .profile{width:100%}
    .col-resizer{display:none}

    /* FIX (2026-08): ปรับหน้าแชทบนโทรศัพท์ (โหมด MKT ใช้มือถือเป็นหลัก)
       - ปุ่มหัวห้อง (รับเคส/ปิดเคส/โอน) ใหญ่พอกดนิ้วง่าย ไม่ล้นจอ
       - ช่องพิมพ์ + ปุ่มส่ง ขนาดเหมาะนิ้ว · กันซูมอัตโนมัติ iOS (font>=16px)
       - แถบสถานะหัวห้องตัดบรรทัดได้ ไม่ดันเนื้อหาล้น */
    .thread-head{flex-wrap:wrap;gap:6px;padding:8px 10px;min-height:auto}
    .th-actions{flex-wrap:wrap;gap:6px;width:100%;justify-content:flex-start}
    .st-btn{padding:9px 13px;font-size:13.5px;border-radius:10px}
    .st-btn.take,.st-btn.done{padding:10px 16px;font-size:14.5px;font-weight:800}
    .composer{padding:8px}
    .composer textarea,.composer input[type="text"]{font-size:16px}
    .composer .send-btn{min-width:46px;min-height:42px}
    .composer.locked .lock-msg{font-size:12.5px;padding:10px}
    .messages{padding:10px 8px}
    .search-wrap input{font-size:16px}

    /* ===== ✨ FIX (mobile-line): หน้าแชทบนมือถือให้ใกล้เคียงแอป LINE OA =====
       ปัญหาเดิม (เห็นชัดในโหมด MKT ที่ใช้มือถือเป็นหลัก):
       - ช่องพิมพ์ถูกแถบล่างของ Safari ทับ (แก้ที่ 100dvh แล้ว) และไม่เว้นแถบโฮม iPhone
       - จอบาก/แถบโฮม ทับเนื้อหาซ้าย-ขวา-ล่าง เพราะยังไม่ได้เปิด viewport-fit=cover
       - บับเบิลแคบ อ่านยาก ต่างจากแอป LINE ที่ใช้พื้นที่เกือบเต็มจอ
       (หัวห้องไม่ต้องทำ sticky — .messages เป็นตัวเลื่อน หัวห้องอยู่นิ่งอยู่แล้ว) */

    /* ช่องพิมพ์ติดขอบล่างพอดี + เว้นแถบโฮม iPhone (ไม่ให้นิ้วบังปุ่มส่ง) */
    .composer{
        padding-bottom: calc(8px + env(safe-area-inset-bottom, 0px));
        padding-left:  calc(8px + env(safe-area-inset-left, 0px));
        padding-right: calc(8px + env(safe-area-inset-right, 0px));
    }
    /* แถบบนสุดเว้นจอบาก */
    /* 🐞 FIX (fit-mobile): แถบบนสุดล้นจอ
       สาเหตุ: .oa-select-input กว้างตายตัว 170px + .me-badge ตั้ง nowrap (ชื่อยาว
       ย่อไม่ได้) + โลโก้ + ช่องไฟ 14px×2 + ขอบ 18px×2  รวมแล้วเกินจอมือถือ
       -> ป้ายชื่อผู้ใช้ถูกดันทะลุขอบขวา และทั้งหน้าเลื่อนซ้ายขวาได้
       แก้: ให้ทุกชิ้นย่อได้ตามพื้นที่จริง ช่องเลือก OA ยืดหยุ่นแทนความกว้างตายตัว */
    .topbar{
        padding-left: calc(10px + env(safe-area-inset-left, 0px));
        padding-right: calc(10px + env(safe-area-inset-right, 0px));
        gap:8px; min-width:0; overflow:hidden;
    }
    .topbar > *{ min-width:0 }
    /* กล่องซ้าย (โลโก้ + ช่องเลือก OA + ป้ายชื่อผู้ใช้) ต้องย่อได้ทั้งก้อน */
    .topbar .oa-pick{ flex:1 1 auto; min-width:0; gap:6px }
    .oa-avatar{ flex:0 0 auto; width:42px; height:32px; font-size:13px }
    .oa-select-wrap{ flex:1 1 auto; min-width:0 }
    .oa-select-input{ width:100%; min-width:0; font-size:16px }   /* 16px = กัน iOS ซูมเอง */
    .me-badge{
        flex:0 1 auto; min-width:0; overflow:hidden;
        text-overflow:ellipsis; white-space:nowrap;
        max-width:34vw; padding:6px 9px; font-size:12px;
    }
    .me-badge #meBadgeName{ overflow:hidden; text-overflow:ellipsis }

    /* ปุ่มขวา (สแปม/หน้าหลัก/ธีม/กลับ…) กินที่มากจนดันช่องเลือก OA ล้นจอ
       -> รวมเป็นแถบเลื่อนแนวนอนของตัวเอง: ปุ่มยังครบทุกตัว ข้อความยังอ่านได้
       แค่ปัดนิ้วดูปุ่มที่เหลือ (ปลอดภัยกว่าซ่อนข้อความด้วย font-size:0
       ซึ่งพึ่ง ::first-letter ที่เบราว์เซอร์รองรับไม่เหมือนกัน) */
    .topbar{ flex-wrap:nowrap }
    .topbar .spacer{ flex:0 0 0; margin-left:0 }
    .topbar .back-link, .topbar .theme-btn{
        flex:0 0 auto; padding:6px 9px; font-size:12px;
    }
    /* กลุ่มปุ่มขวาเลื่อนได้ ไม่ดันของอื่น */
    .topbar > .back-link, .topbar > .theme-btn, .topbar > .sos-bar{
        scroll-snap-align:start;
    }
    .topbar{
        overflow-x:auto; overflow-y:hidden;
        scrollbar-width:none; -webkit-overflow-scrolling:touch;
    }
    .topbar::-webkit-scrollbar{ display:none }
    /* กล่องซ้ายตรึงไว้ ไม่เลื่อนหายไปกับปุ่ม (ต้องเห็นว่าเลือกไลน์ไหนอยู่เสมอ) */
    .topbar .oa-pick{ position:sticky; left:0; z-index:2; background:var(--panel) }

    /* บับเบิลกว้างขึ้นแบบ LINE (เดิม 82%) + ตัวหนังสืออ่านสบายบนจอเล็ก */
    .msg{ max-width:86% }
    .bub{ font-size:15px; line-height:1.45; padding:9px 13px; border-radius:16px }
    .messages{ padding-bottom:6px }

    /* รายการแชทเว้นขอบล่างด้วย (กันแถวสุดท้ายโดนแถบโฮมบัง) */
    .list{ padding-bottom: env(safe-area-inset-bottom, 0px) }
}
/* ====== ระบบรันคิว: แบนเนอร์แจ้งเตือน + ปุ่มรอคิว ====== */
.queue-banner{
    position:fixed; left:50%; transform:translateX(-50%);
    top:8px; z-index:99999;
    padding:8px 20px; border-radius:999px;
    font-size:14px; font-weight:700; color:#fff;
    background:#3a3f4d; border:1px solid rgba(255,255,255,.15);
    box-shadow:0 6px 20px rgba(0,0,0,.35); pointer-events:none;
    max-width:90vw; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.queue-banner.my-turn{
    background:linear-gradient(135deg,#06c755,#04a446);
    animation:queueBlink 1s ease-in-out infinite;
}
@keyframes queueBlink{
    0%,100%{ box-shadow:0 0 0 0 rgba(6,199,85,.65); transform:translateX(-50%) scale(1); }
    50%    { box-shadow:0 0 0 12px rgba(6,199,85,0);  transform:translateX(-50%) scale(1.04); }
}
.st-btn.take.queue-wait{
    background:#555 !important; border-color:#666 !important;
    color:#ddd !important; cursor:not-allowed; opacity:.85;
}
/* ===== Modal ตั้งค่าคิว ===== */
.q-modal{ position:fixed; inset:0; z-index:100000; background:rgba(0,0,0,.6);
    display:flex; align-items:center; justify-content:center; padding:16px; }
.q-box{ background:#1b1f27; color:#e9ecf2; width:560px; max-width:96vw; max-height:90vh; overflow:auto;
    border:1px solid rgba(255,255,255,.12); border-radius:14px; padding:18px 20px;
    box-shadow:0 20px 60px rgba(0,0,0,.5); }
.q-head{ display:flex; justify-content:space-between; align-items:center; font-size:17px; margin-bottom:10px; }
.q-x{ background:none; border:none; color:#aaa; font-size:20px; cursor:pointer; }
.q-status{ font-size:13px; padding:8px 12px; border-radius:8px; background:rgba(255,255,255,.05);
    border:1px solid rgba(255,255,255,.1); margin-bottom:12px; }
.q-status.on{ background:rgba(6,199,85,.14); border-color:rgba(6,199,85,.4); color:#a9f0c6; }
.q-sec{ margin-bottom:14px; }
.q-label{ font-size:13px; color:#c9a04a; font-weight:700; margin-bottom:6px; }
.q-oalist{ display:flex; flex-wrap:wrap; gap:6px; }
.q-oa{ display:inline-flex; align-items:center; gap:5px; padding:5px 10px; border-radius:8px; font-size:12.5px;
    background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.12); cursor:pointer; }
.q-oa.sel{ background:rgba(74,168,255,.18); border-color:#4aa8ff; color:#cfe6ff; }
/* FIX (2026-08): โฟลเดอร์เลือกไลน์ในระบบคิว */
.qf{ border:1px solid var(--border); border-radius:11px; margin-bottom:7px; overflow:hidden; }
.qf.open{ border-color:#4aa8ff88; }
.qf-head{ display:flex; align-items:center; gap:8px; padding:9px 13px; cursor:pointer; user-select:none; transition:background .15s; }
.qf-head:hover{ background:rgba(255,255,255,.05); }
.qf.open .qf-head{ background:rgba(74,168,255,.1); }
.qf-caret{ color:var(--muted); font-size:11px; width:11px; flex:none; }
.qf.open .qf-caret{ color:#4aa8ff; }
.qf-name{ font-weight:800; font-size:13px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.qf-count{ margin-left:auto; flex:none; font-size:11.5px; color:var(--muted); }
.qf-dot{ flex:none; width:8px; height:8px; border-radius:50%; background:#4aa8ff; }
.qf-body{ padding:10px 13px 12px; border-top:1px dashed var(--border); animation:qfSlide .2s ease both; }
@keyframes qfSlide{ from{opacity:0;transform:translateY(-5px)} to{opacity:1;transform:none} }
.qf-quick{ display:flex; gap:6px; margin-bottom:9px; }
.qf-pills{ display:flex; flex-wrap:wrap; gap:6px; }
.q-oa.mini{ font-size:11px; padding:4px 10px; }
.q-pool{ display:flex; flex-wrap:wrap; gap:6px; }
.q-chip{ padding:5px 10px; border-radius:999px; font-size:12.5px; cursor:pointer;
    background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.14); }
.q-chip:hover{ border-color:#06c755; }
.q-order{ display:flex; flex-direction:column; gap:5px; }
.q-orow{ display:flex; align-items:center; gap:8px; padding:6px 10px; border-radius:8px;
    background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.1); font-size:13px; }
.q-orow .q-num{ color:#c9a04a; font-weight:800; width:22px; }
.q-orow .q-rm{ margin-left:auto; background:none; border:none; color:#ff6b6b; cursor:pointer; font-size:15px; }
.q-empty{ color:#8a92a4; font-size:12.5px; padding:6px 0; }
.q-btns{ display:flex; flex-wrap:wrap; gap:8px; margin-top:6px; }
.q-btn{ flex:1; min-width:130px; padding:9px 12px; border-radius:9px; font-size:13px; font-weight:700;
    cursor:pointer; border:1px solid rgba(255,255,255,.15); color:#fff; background:#333a47; }
.q-btn.save{ background:#3a3f4d; }
.q-btn.start{ background:linear-gradient(135deg,#0bbf5b,#06994a); }
.q-btn.stop{ background:#7a2b2b; }
.q-btn.skip{ background:#8a6d1e; }
.q-input{ width:100%; padding:9px 12px; border-radius:9px; margin-bottom:10px; box-sizing:border-box;
    background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.15); color:#e9ecf2; font-size:14px; }
.q-gcard{ background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.12); border-radius:10px; padding:12px 14px; margin-bottom:10px; }
.q-gcard.on{ border-color:rgba(6,199,85,.45); background:rgba(6,199,85,.08); }
.q-grow1{ display:flex; justify-content:space-between; align-items:center; gap:8px; font-size:15px; }
.q-gstat{ font-size:12.5px; color:#c8cdd8; font-weight:500; }
.q-gmeta{ font-size:12px; color:#9aa2b1; margin:6px 0 8px; }
.q-gbtns{ display:flex; flex-wrap:wrap; gap:6px; }
.q-mini{ padding:5px 12px; border-radius:8px; font-size:12.5px; font-weight:700; cursor:pointer;
    border:1px solid rgba(255,255,255,.18); color:#fff; background:#3a4150; }
.q-mini.start{ background:linear-gradient(135deg,#0bbf5b,#06994a); }
.q-mini.stop{ background:#7a2b2b; }
.q-mini.skip{ background:#8a6d1e; }
.q-mini.del{ background:#4a2233; color:#ff9db0; }
.q-taken{ color:#e0a34a; font-size:11px; }
/* ============================================================
   ⏱ (2026-08) POPUP คิวของฉัน — ลากย้ายได้ · เห็นว่าถึงคิวไหนแล้ว
   ============================================================ */
.myq{
    position:fixed; z-index:9000; width:232px;
    background:var(--panel,#1b1e26); color:var(--text,#e8ecf3);
    border:1px solid var(--line,#3a4050); border-radius:12px;
    box-shadow:0 8px 26px rgba(0,0,0,.35);
    font-size:12.5px; user-select:none;
}
.myq-h{
    display:flex; align-items:center; gap:8px;
    padding:8px 10px; border-bottom:1px solid var(--line,#3a4050);
    cursor:grab; font-weight:800;
}
.myq-h.drag{ cursor:grabbing }
.myq-min{ margin-left:auto; border:0; background:transparent; color:inherit;
    cursor:pointer; font-size:14px; line-height:1; padding:2px 5px; border-radius:6px }
.myq-min:hover{ background:rgba(127,127,127,.2) }
.myq-b{ padding:9px 10px; display:flex; flex-direction:column; gap:9px; max-height:44vh; overflow:auto }
.myq.mini .myq-b{ display:none }
.myq-g{ border:1px solid var(--line,#3a4050); border-radius:9px; padding:8px 9px }
.myq-g.turn{ border-color:#0bbf5b; background:rgba(11,191,91,.12) }
.myq-g.off{ opacity:.6 }
.myq-n{ font-weight:800; margin-bottom:3px }
.myq-s{ font-size:11.5px; opacity:.85; line-height:1.6 }
.myq-bar{ height:4px; border-radius:99px; background:rgba(127,127,127,.28); margin:6px 0 2px; overflow:hidden }
.myq-bar>i{ display:block; height:100%; background:#0bbf5b; transition:width .5s linear }
.myq-act{ display:flex; gap:6px; margin-top:7px }
.myq-act button{ flex:1; padding:5px 8px; border-radius:7px; font-size:11.5px; font-weight:700;
    cursor:pointer; border:1px solid var(--line,#3a4050); background:transparent; color:inherit }
.myq-act button.on{ background:#0bbf5b; border-color:transparent; color:#08361c }
.myq-act button.off{ background:#7a2b2b; border-color:transparent; color:#fff }
/* ✨ เคสที่ถืออยู่ / เตือนครบเพดาน */
.myq-open{ font-size:11.5px; opacity:.85; padding:2px 1px 0 }
.myq-open b{ color:#0bbf5b }
.myq-cap{
    background:rgba(224,60,60,.14); border:1px solid rgba(224,60,60,.5);
    color:#ffb4b4; border-radius:9px; padding:8px 9px; font-size:11.5px; line-height:1.6;
}
.myq-cap b{ font-size:14px }
.myq-cap span{ opacity:.9 }
/* ✨ ลำดับคิว */
.myq-seq{ display:flex; flex-wrap:wrap; gap:4px; margin-top:6px }
.myq-p{
    font-size:10.5px; padding:2px 7px; border-radius:999px;
    background:rgba(127,127,127,.18); white-space:nowrap;
}
.myq-p.now{ background:#0bbf5b; color:#08361c; font-weight:800 }
.myq-p.me { outline:1px solid #0bbf5b }
.myq-p.pz { opacity:.5; text-decoration:line-through }
/* 🐞 กันปุ่มในการ์ดกลุ่มคิวซ้อนกันตอนจอแคบ */
.q-gbtns{ align-items:center; row-gap:8px }
.q-mini{ white-space:nowrap; flex:0 0 auto }
.q-grow1{ flex-wrap:wrap }

/* รูปย่อในแผงข้อความตอบกลับ (FIX 2026-08: ตอบกลับแนบรูปได้) */
.qk-thumb{ width:44px; height:44px; object-fit:cover; border-radius:8px;
    border:1px solid rgba(0,0,0,.12); flex:none; }
.qk-item.has-img{ display:flex; align-items:center; gap:10px; text-align:left; }

/* ============================================================
   FIX (2026-08): ระบบ popup กลาง (แทน alert/confirm) — ธีมสว่างเข้ากับหน้าแชท
   ใช้ผ่าน cAlert(...) / cConfirm(...) — สอดคล้องกับป๊อปอัพหน้ารายงาน
   ============================================================ */
.c-modal{
    /* 🐞 FIX (2026-08): กล่องยืนยันไปโผล่ "ข้างหลัง" แผงระบบรันคิว
       สาเหตุ: .q-modal (แผงคิว) z-index:100000 สูงกว่า .c-modal เดิม 99999
       กล่องยืนยันเป็น "ชั้นบนสุดเสมอ" ต้องสูงกว่าทุก modal ในระบบ
       ตั้ง 2147483000 (ใกล้ค่าสูงสุดของ int32) กันโดนทับอีกในอนาคต */
    position:fixed; inset:0; z-index:2147483000; display:none;
    align-items:center; justify-content:center; padding:20px;
    background:rgba(20,24,32,.42); backdrop-filter:blur(5px);
    animation:cFade .2s ease both;
}
.c-modal.show{ display:flex; }
.c-modal.closing{ animation:cFadeOut .17s ease both; }
@keyframes cFade{ from{opacity:0} to{opacity:1} }
@keyframes cFadeOut{ from{opacity:1} to{opacity:0} }

.c-card{
    width:min(410px,100%); background:#fff; border-radius:20px;
    box-shadow:0 30px 70px -18px rgba(20,30,50,.4), 0 0 0 1px rgba(0,0,0,.04);
    padding:26px 24px 20px; text-align:center;
    animation:cPop .34s cubic-bezier(.34,1.56,.64,1) both;
}
.c-modal.closing .c-card{ animation:cPopOut .17s ease both; }
@keyframes cPop{ from{opacity:0;transform:translateY(18px) scale(.93)} to{opacity:1;transform:none} }
@keyframes cPopOut{ from{opacity:1;transform:none} to{opacity:0;transform:translateY(8px) scale(.97)} }

.c-ic{
    width:62px; height:62px; margin:0 auto 15px; border-radius:50%;
    display:flex; align-items:center; justify-content:center; font-size:31px;
    animation:cIcPop .45s cubic-bezier(.34,1.56,.64,1) .08s both;
}
@keyframes cIcPop{ from{opacity:0;transform:scale(.3)} to{opacity:1;transform:scale(1)} }
.c-ic.warn{ background:#fff6e0; box-shadow:0 0 0 1px #f2ce6a inset; }
.c-ic.danger{ background:#ffe9ec; box-shadow:0 0 0 1px #ffb0b8 inset; }
.c-ic.ok{ background:#e6f8ec; box-shadow:0 0 0 1px #7fd9a0 inset; }
.c-ic.info{ background:#e6f1ff; box-shadow:0 0 0 1px #a9cffb inset; }

.c-title{ font-size:18px; font-weight:900; color:#1b1c20; margin-bottom:8px; }
.c-msg{ font-size:13.5px; color:#6b7280; line-height:1.65; margin-bottom:22px; white-space:pre-line; }
.c-btns{ display:flex; gap:10px; justify-content:center; }
.c-btn{
    flex:1; max-width:165px; border:1px solid #e3e6ec; border-radius:12px;
    padding:12px 16px; font:inherit; font-size:14px; font-weight:800; cursor:pointer;
    background:#f4f6f9; color:#1b1c20;
    transition:transform .12s, filter .16s, background .16s, border-color .16s;
}
.c-btn:hover{ transform:translateY(-2px); background:#eef1f5; }
.c-btn:active{ transform:scale(.96); }
.c-btn.primary{ background:linear-gradient(135deg,#06c755,#05a948); color:#fff; border-color:transparent; }
.c-btn.danger{ background:linear-gradient(135deg,#ff5a67,#e0414e); color:#fff; border-color:transparent; }
.c-btn.primary:hover,.c-btn.danger:hover{ filter:brightness(1.06); transform:translateY(-2px); }
@media (prefers-reduced-motion:reduce){ .c-modal,.c-card,.c-ic{ animation:none !important; } }

/* ---- FIX (2026-08): popup รองรับดาร์กโหมด (ตามธีมหน้าแชท) ---- */
html[data-theme="dark"] .c-card{
    background:#232733;
    box-shadow:0 30px 70px -18px rgba(0,0,0,.75), 0 0 0 1px rgba(255,255,255,.06);
}
html[data-theme="dark"] .c-title{ color:var(--text); }
html[data-theme="dark"] .c-msg{ color:var(--muted); }
html[data-theme="dark"] .c-ic.warn{   background:#3a3010; box-shadow:0 0 0 1px #7a6220 inset; }
html[data-theme="dark"] .c-ic.danger{ background:#3d2226; box-shadow:0 0 0 1px #7a3a42 inset; }
html[data-theme="dark"] .c-ic.ok{     background:#16321f; box-shadow:0 0 0 1px #2b6b42 inset; }
html[data-theme="dark"] .c-ic.info{   background:#1c2a3d; box-shadow:0 0 0 1px #37567e inset; }
html[data-theme="dark"] .c-btn{ background:#2b303d; color:var(--text); border-color:#3a4050; }
html[data-theme="dark"] .c-btn:hover{ background:#333949; }
html[data-theme="dark"] .c-btn.primary,html[data-theme="dark"] .c-btn.danger{ border-color:transparent; }

/* บรรทัดชื่อลูกค้า (เด่นกลางจอ) ใน popup สแปม */
.c-hl{
    font-size:16.5px; font-weight:900; color:#e0414e;
    background:rgba(255,90,103,.08); border:1px dashed rgba(255,90,103,.4);
    border-radius:10px; padding:7px 12px; margin:0 auto 12px;
    max-width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
    animation:cIcPop .4s cubic-bezier(.34,1.56,.64,1) .1s both;
}
html[data-theme="dark"] .c-hl{ color:#ff8a94; background:rgba(255,90,103,.1); }

/* ---- ป้าย "หมายเหตุ" + ช่องกรอกใน popup สแปม (เรียงเป็นสัดส่วน + อนิเมชันไล่จังหวะ) ---- */
.c-note-label{
    display:flex; align-items:center; gap:7px;
    margin:16px 0 8px; text-align:left;
    font-size:12.5px; font-weight:800; color:#8a5a00;
    animation:cIcPop .4s cubic-bezier(.34,1.56,.64,1) .14s both;
}
.c-note-label::before{ content:"📝"; font-size:14px; }
html[data-theme="dark"] .c-note-label{ color:var(--amber, #f5c451); }
.c-text-in{ height:42px !important; resize:none; font-size:15px; }
.c-note-in{ animation:cIcPop .4s cubic-bezier(.34,1.56,.64,1) .2s both; }

/* ========================================================================
   FIX (2026-08): จัดกรอบข้อความตอบกลับ (ฝั่งเรา) ชิดขวาให้เรียงสวย
   ======================================================================== */
.msg.out{ margin-left:auto; }                       /* ดันชิดขวาสุดเสมอ */
.msg.out .bub{
    /* 🐞 (2026-08) เดิมเป็น gradient เข้ม -> ทับตัวแปร --bubble-out ที่ตั้งไว้ด้านบน
       ทำให้ปรับสีตรงตัวแปรแล้วไม่มีผลจริง (จุดนี้ประกาศทีหลัง = ชนะ)
       ตามที่หน้างานสั่ง: "เขียวเรียบ ๆ" -> เลิกใช้ gradient ใช้สีเดียวจากตัวแปร */
    background:var(--bubble-out);
    border-radius:16px 16px 5px 16px;               /* หางมุมขวาล่างแบบแชทจริง */
    box-shadow:0 1px 4px rgba(11,51,25,.12);
    text-align:left;                                 /* เนื้อความในกรอบอ่านซ้ายปกติ */
}
.msg.in .bub{ border-radius:16px 16px 16px 5px; }
.msg.out .meta{ justify-content:flex-end; text-align:right; }
.msg + .msg{ margin-top:7px; }
.msg.in + .msg.out, .msg.out + .msg.in{ margin-top:13px; }  /* สลับฝั่ง = เว้นชัดขึ้น */

/* ---- วิดีโอในแชท ---- */
.vid-bub{ padding:4px !important; overflow:hidden; }
.chat-vid{
    display:block; max-width:min(330px, 100%); max-height:260px;
    border-radius:13px; background:#000;
}

/* FIX (media-render): การ์ดสื่อที่เปิดไม่ได้ — แทนข้อความดิบ "[วิดีโอ]" */
.bub.media-missing{
    display:flex; align-items:center; gap:10px;
    padding:10px 12px; min-width:190px;
}
.media-missing .mm-ic{ font-size:22px; line-height:1; opacity:.75 }
.media-missing .mm-info{ display:flex; flex-direction:column; gap:2px; min-width:0 }
.media-missing .mm-name{ font-weight:700 }
.media-missing .mm-why{ font-size:11.5px; opacity:.7 }

/* ---- ชิปไฟล์เอกสาร ---- */
.file-bub{
    display:flex !important; align-items:center; gap:10px;
    min-width:190px; max-width:290px; cursor:pointer;
    transition:filter .15s, transform .12s;
}
.file-bub:hover{ filter:brightness(1.07); transform:translateY(-1px); }
.file-ic{ font-size:26px; flex:none; }
.file-info{ min-width:0; flex:1; display:flex; flex-direction:column; gap:1px; }
.file-name{ font-weight:700; font-size:13.5px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.file-size{ font-size:11px; opacity:.75; }
.file-dl{
    flex:none; width:30px; height:30px; border-radius:50%;
    display:flex; align-items:center; justify-content:center;
    background:rgba(255,255,255,.22); font-size:14px;
}
.msg.in .file-dl{ background:rgba(0,0,0,.1); }

/* ========================================================================
   FIX (2026-08 v3): หน้าต่างดาวน์โหลด "นักสู้ชาร์จพลังคลื่นสีฟ้า" ฉบับ 3D
   แสงเงารอบทิศ: ตัวละครโดนแสงฟ้าจากลูกพลังด้านขวา + เงาตกพื้น + ประกายลอย
   ======================================================================== */
.ew-mask{
    position:fixed; inset:0; z-index:9500;
    display:flex; align-items:center; justify-content:center;
    background:radial-gradient(ellipse at 60% 45%, rgba(18,38,66,.92), rgba(2,6,14,.94) 70%);
    backdrop-filter:blur(4px);
    animation:ewFade .2s ease both;
}
@keyframes ewFade{ from{opacity:0} to{opacity:1} }
.ew-mask.closing{ animation:ewOut .24s ease both; }
@keyframes ewOut{ to{opacity:0} }

.ew-scene{
    position:relative; width:360px; height:250px;
    display:flex; align-items:center; justify-content:center;
    perspective:700px;                          /* ให้ฉากมีความลึก */
}
/* ออร่าฟ้ารอบตัว */
.ew-aura{
    position:absolute; left:54px; top:32px; width:130px; height:176px;
    border-radius:50% 50% 42% 42%;
    background:radial-gradient(ellipse at 50% 65%, rgba(127,212,255,.4), rgba(79,155,255,.1) 58%, transparent 75%);
    filter:blur(6px);
    animation:ewAura .5s ease-in-out infinite alternate;
}
.ew-scene.hi .ew-aura{
    background:radial-gradient(ellipse at 50% 65%, rgba(210,242,255,.75), rgba(79,155,255,.22) 58%, transparent 78%);
    animation-duration:.24s;
}
@keyframes ewAura{ from{ transform:scaleY(1) } to{ transform:scaleY(1.1) scaleX(1.07) } }

/* ---- นักสู้ 3D: ทุกชิ้นมี gradient ทรงกระบอก/ทรงกลม + ขอบขวารับแสงฟ้าจากลูกพลัง ---- */
.ew-fighter{
    position:absolute; left:64px; top:44px; width:104px; height:150px;
    transform:rotateY(-8deg);                   /* เอียงเข้าหาลูกพลังนิด ๆ = มีมิติ */
    transform-style:preserve-3d;
    filter:drop-shadow(6px 10px 10px rgba(0,0,0,.5));   /* เงาตัวละครทั้งตัว */
}
.ew-fighter > div{ position:absolute; }
.ew-hair{
    left:12px; top:-18px; width:52px; height:31px; z-index:3;
    background:linear-gradient(115deg, #05070c 40%, #1d2636 72%, #35507a 100%); /* ปลายผมรับแสงฟ้า */
    clip-path:polygon(0 100%, 6% 35%, 16% 70%, 24% 8%, 34% 62%, 44% 0, 55% 58%, 66% 6%, 76% 66%, 88% 22%, 100% 100%);
}
.ew-scene.hi .ew-hair{ filter:drop-shadow(0 0 8px rgba(127,212,255,.7)); }
.ew-head{
    left:23px; top:4px; width:27px; height:25px; z-index:2;
    border-radius:46% 54% 50% 50%;
    /* ทรงกลม: สว่างขวาบน (ฝั่งลูกพลัง) มืดซ้ายล่าง + ขอบสะท้อนแสงฟ้า */
    background:radial-gradient(circle at 68% 32%, #ffe3bd, #f2c79a 45%, #c99668 82%, #96683f);
    box-shadow:inset -3px -3px 5px rgba(60,30,10,.35), inset 2px 1px 3px rgba(255,255,255,.4),
               1px 0 4px rgba(127,212,255,.0);
}
.ew-scene.hi .ew-head{ box-shadow:inset -3px -3px 5px rgba(60,30,10,.35), inset 2px 1px 3px rgba(255,255,255,.4), 3px 0 8px rgba(127,212,255,.45); }
.ew-head::before{
    content:""; position:absolute; top:8px; left:5px; width:15px; height:2px;
    background:#12141c; transform:rotate(8deg); border-radius:2px;
}
.ew-torso{
    left:15px; top:26px; width:44px; height:46px; z-index:2;
    border-radius:13px 15px 8px 8px;
    /* เสื้อฝึก: ไล่เฉดทรงกระบอก + rim light ฟ้าฝั่งขวา */
    background:linear-gradient(100deg, #16294e 8%, #274a86 45%, #3665b3 78%, #6fa8e8 97%);
    box-shadow:inset -4px 0 7px rgba(0,0,10,.45), inset 3px 2px 5px rgba(140,190,255,.25);
}
.ew-belt{
    left:15px; top:63px; width:44px; height:8px; z-index:3;
    border-radius:3px;
    background:linear-gradient(180deg, #ffffff, #cfd8e6 60%, #9aa7ba);
    box-shadow:0 1px 2px rgba(0,0,0,.4);
}
.ew-arm{
    width:44px; height:13px; z-index:1;
    border-radius:8px;
    /* แขน: โคนเป็นแขนเสื้อ ปลายเป็นมือ (ผิว) — ไล่เฉดกระบอก */
    background:linear-gradient(90deg, #1c3663 0%, #2f5697 52%, #f2c79a 56%, #e0af7d 86%, #c08a55 100%);
    box-shadow:inset 0 -3px 4px rgba(0,0,20,.35), inset 0 2px 3px rgba(255,255,255,.22);
}
.ew-arm.a1{ left:50px; top:33px; transform:rotate(13deg); }
.ew-arm.a2{ left:50px; top:50px; transform:rotate(-9deg); }
.ew-leg{
    width:16px; height:48px; z-index:1;
    border-radius:8px 8px 6px 6px;
    background:linear-gradient(90deg, #14171f 20%, #2a3040 55%, #4a5468 90%);
    box-shadow:inset -3px 0 4px rgba(0,0,0,.5), inset 2px 0 3px rgba(255,255,255,.1);
}
.ew-leg::after{                                  /* รองเท้า */
    content:""; position:absolute; bottom:-4px; left:-2px; width:20px; height:9px;
    border-radius:5px 8px 4px 4px;
    background:linear-gradient(180deg, #3a72c4, #1f3f74);
    box-shadow:0 2px 3px rgba(0,0,0,.5);
}
.ew-leg.l1{ left:15px; top:72px; transform:rotate(16deg); }
.ew-leg.l2{ left:44px; top:72px; transform:rotate(-18deg); }
.ew-scene.hi .ew-fighter{ animation:ewShake .12s linear infinite; }
@keyframes ewShake{ 0%,100%{ transform:rotateY(-8deg) translate(0,0) } 25%{ transform:rotateY(-8deg) translate(-1px,1px) } 75%{ transform:rotateY(-8deg) translate(1px,-1px) } }

/* ลูกพลัง 3D: แกนขาวร้อน + เปลือกฟ้า + ไฮไลต์กระจก + วงแหวนพลังหมุน */
.ew-orb{
    position:absolute; left:216px; top:106px;
    width:78px; height:78px; border-radius:50%;
    transform:translate(-50%,-50%) scale(.25);
    background:radial-gradient(circle at 40% 35%, #ffffff 0%, #eaf8ff 22%, #9fe0ff 45%, #4fb2ff 68%, #1d6fd6 88%, rgba(29,111,214,.3));
    box-shadow:
        inset -8px -10px 18px rgba(10,60,140,.55),      /* เงาในทรงกลม */
        inset 5px 6px 10px rgba(255,255,255,.75),        /* แสงสะท้อนบน */
        0 0 30px rgba(79,195,255,.95), 0 0 74px rgba(47,155,255,.5);
    transition:transform .16s ease-out;
    animation:ewOrbPulse .45s ease-in-out infinite alternate;
}
.ew-orb::before{                                 /* ไฮไลต์กระจก (specular) */
    content:""; position:absolute; top:12%; left:18%;
    width:30%; height:20%; border-radius:50%;
    background:radial-gradient(ellipse, rgba(255,255,255,.95), transparent 70%);
    transform:rotate(-24deg);
}
.ew-orb::after{                                  /* วงแหวนพลังหมุนรอบ */
    content:""; position:absolute; inset:-9px;
    border-radius:50%;
    border:2px solid transparent;
    border-top-color:rgba(190,235,255,.85);
    border-bottom-color:rgba(79,195,255,.4);
    animation:ewRing 1s linear infinite;
}
@keyframes ewRing{ to{ transform:rotate(360deg) } }
@keyframes ewOrbPulse{ from{ filter:brightness(1) } to{ filter:brightness(1.28) } }

/* ประกายพลังลอยขึ้นรอบลูกพลัง (โผล่ตอนพลังแรง) */
.ew-scene.hi::after{
    content:"✦    ✧      ✦"; position:absolute; left:190px; top:60px; width:80px;
    color:#bfe9ff; font-size:10px; letter-spacing:4px;
    text-shadow:0 0 8px rgba(127,212,255,.9);
    animation:ewRise 1.1s ease-out infinite;
}
@keyframes ewRise{ from{ transform:translateY(26px); opacity:0 } 30%{ opacity:1 } to{ transform:translateY(-18px); opacity:0 } }

/* คลื่นลำแสง 3D: แกนขาว + เปลือกฟ้าสองชั้น + ริ้วพลังวิ่งในลำ */
.ew-beam{
    position:absolute; left:220px; top:106px; height:42px; width:0;
    transform:translateY(-50%);
    border-radius:21px;
    background:
        repeating-linear-gradient(90deg, rgba(255,255,255,0) 0 26px, rgba(210,240,255,.5) 26px 34px),
        linear-gradient(180deg, rgba(79,178,255,.5), #d8f2ff 22%, #ffffff 50%, #d8f2ff 78%, rgba(79,178,255,.5));
    box-shadow:0 0 20px rgba(127,212,255,1), 0 0 64px rgba(47,155,255,.85), inset 0 3px 6px rgba(255,255,255,.9);
    opacity:0;
}
.ew-scene.fire .ew-beam{ animation:ewBeam .55s cubic-bezier(.2,.9,.3,1) both; }
@keyframes ewBeam{
    0%  { width:0;     opacity:0; }
    12% { opacity:1; }
    100%{ width:620px; opacity:1; }
}
.ew-scene.fire .ew-orb{ animation:ewOrbFire .5s ease both; }
@keyframes ewOrbFire{ 40%{ transform:translate(-50%,-50%) scale(1.75); } 100%{ transform:translate(-50%,-50%) scale(.92); filter:brightness(1.75); } }
.ew-scene.fire .ew-aura{ opacity:.2; }
.ew-scene.fire .ew-fighter{ animation:ewRecoil .5s ease both; }
@keyframes ewRecoil{ 30%{ transform:rotateY(-8deg) translateX(-8px) } 100%{ transform:rotateY(-8deg) translateX(-3px) } }

/* พื้น: เงา + แสงฟ้าสะท้อนจากลูกพลัง */
.ew-ground{
    position:absolute; left:52px; bottom:22px; width:220px; height:16px;
    border-radius:50%;
    transform:rotateX(56deg);   /* FIX (2026-08 v3.1): เอียงพื้นตามเปอร์สเปกทีฟ = ลึกขึ้น */
    background:
        radial-gradient(ellipse at 30% 50%, rgba(0,0,0,.55), transparent 60%),
        radial-gradient(ellipse at 76% 50%, rgba(79,178,255,.35), transparent 65%);
    filter:blur(1px);
}
.ew-pct{
    position:absolute; left:0; right:0; bottom:-10px; text-align:center;
    font-size:28px; font-weight:900; letter-spacing:.06em; color:#e6f7ff;
    text-shadow:0 0 18px rgba(79,195,255,1), 0 2px 3px rgba(0,20,50,.7);
}
.ew-label{
    position:absolute; left:0; right:0; top:-18px; text-align:center;
    font-size:12.5px; font-weight:700; color:#ffffffd5; letter-spacing:.03em;
    text-shadow:0 1px 3px rgba(0,0,0,.6);
}
@media (prefers-reduced-motion:reduce){
    .ew-aura, .ew-orb, .ew-orb::after, .ew-scene.hi::after,
    .ew-scene.hi .ew-fighter, .ew-scene.fire .ew-fighter{ animation:none !important; }
}

/* FIX (2026-08): แถวโฟลเดอร์ในช่องค้นหาบัญชี OA (เลือกทั้งโฟลเดอร์ได้) */
.oa-folder-opt{
    display:flex; align-items:center; gap:7px;
    padding:8px 10px; cursor:pointer; user-select:none;
    background:rgba(61,139,253,.06);
    border-top:1px solid rgba(61,139,253,.18);
    font-size:12.5px; font-weight:800; color:#2568d6;
}
html[data-theme="dark"] .oa-folder-opt{ background:#3d8bfd14; color:#7db3ff; border-top-color:#3d8bfd33; }
.oa-folder-opt:hover{ filter:brightness(1.1); }
.oa-fmark{
    width:16px; height:16px; flex:none;
    border:1.5px solid currentColor; border-radius:4px;
    display:flex; align-items:center; justify-content:center;
    font-size:10px; line-height:1;
}
.oa-folder-opt.on   .oa-fmark{ background:currentColor; color:#fff; }
html[data-theme="dark"] .oa-folder-opt.on .oa-fmark{ color:#10131c; }
.oa-folder-opt.some .oa-fmark{ opacity:.85; }
.oa-fico{ flex:none; }
.oa-fname{ flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.oa-fcount{ flex:none; font-size:11px; opacity:.75; font-weight:700; }
.oa-opt.in-folder{ padding-left:26px; }

/* FIX (2026-08): ป้ายไฟล์แนบในคลังตอบกลับ */
.qk-badge{
    display:inline-flex; align-items:center; gap:4px;
    background:rgba(61,139,253,.12); border:1px solid rgba(61,139,253,.3);
    color:#7db3ff; border-radius:999px; padding:2px 9px;
    font-size:11px; font-weight:700; margin-right:6px; max-width:160px;
    overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.rp-atts{ display:flex; gap:6px; flex-wrap:wrap; margin-top:5px; }
.rp-att{
    display:inline-flex; align-items:center; gap:5px;
    background:rgba(255,255,255,.06); border:1px solid var(--border);
    border-radius:999px; padding:2px 8px; font-size:11px; font-weight:700;
}
.rp-att-thumb{ width:20px; height:20px; border-radius:5px; object-fit:cover; }
.rp-att-x{ cursor:pointer; color:#ff8a93; font-weight:900; padding:0 2px; }
.rp-att-x:hover{ filter:brightness(1.3); }

/* FIX (2026-08 v3.1): เติมมิติ 3D — พลังหมุนวนในลูกพลัง + สะท้อนแสง + เกลียวพลังในลำแสง */
.ew-orb{ overflow:hidden; }
.ew-orb::before{
    content:""; position:absolute; inset:-25%;
    background:conic-gradient(from 0deg,
        transparent 0 40deg, rgba(255,255,255,.5) 60deg, transparent 90deg,
        transparent 180deg, rgba(200,240,255,.45) 220deg, transparent 260deg);
    border-radius:50%;
    animation:ewSwirl 1.1s linear infinite;
}
.ew-orb::after{
    content:""; position:absolute; top:13%; left:19%;
    width:27%; height:18%; border-radius:50%;
    background:radial-gradient(ellipse, rgba(255,255,255,.95), transparent 70%);
    transform:rotate(-24deg);
}
@keyframes ewSwirl{ to{ transform:rotate(360deg); } }
.ew-beam{
    background:
        repeating-linear-gradient(115deg, transparent 0 22px, rgba(255,255,255,.3) 22px 30px),
        linear-gradient(180deg, rgba(120,205,255,.5), #ffffff 26%, #ffffff 74%, rgba(90,170,255,.55)) !important;
    background-size:60px 100%, 100% 100% !important;
    box-shadow:0 0 20px rgba(150,220,255,.95), 0 0 60px rgba(47,130,255,.85),
               inset 0 5px 8px rgba(255,255,255,.8), inset 0 -6px 9px rgba(60,130,255,.6) !important;
}
.ew-scene.fire .ew-beam{ animation:ewBeam .55s cubic-bezier(.2,.9,.3,1) both, ewFlow .3s linear infinite !important; }
@keyframes ewFlow{ to{ background-position:60px 0, 0 0; } }
/* FIX (2026-08 v3.1): ประกายพลังลอยขึ้นรอบตัว (เม็ดหน้า-หลัง = มิติลึก) */
.ew-scene::before, .ew-scene::after{
    content:""; position:absolute; border-radius:50%;
    background:radial-gradient(circle, #d8f4ff, rgba(79,195,255,0) 70%);
    pointer-events:none; opacity:0; z-index:1;
}
.ew-scene::before{ left:86px;  bottom:54px; width:9px; height:9px; animation:ewSpark 1.6s ease-in infinite .2s; }
.ew-scene::after { left:150px; bottom:46px; width:6px; height:6px; filter:blur(1px); animation:ewSpark 1.9s ease-in infinite .8s; }
@keyframes ewSpark{
    0%  { transform:translateY(0) scale(.6);   opacity:0; }
    15% { opacity:.9; }
    100%{ transform:translateY(-90px) scale(1.15); opacity:0; }
}
@media (prefers-reduced-motion:reduce){ .ew-scene::before, .ew-scene::after{ animation:none !important; } }
@media (prefers-reduced-motion:reduce){ .ew-orb::before, .ew-scene.fire .ew-beam{ animation:none !important; } }

/* FIX (2026-08 v2): ช่องเลือกบัญชี OA แบบ 2 ชั้น — การ์ดโฟลเดอร์สวย ๆ */
.oa-sec{
    padding:7px 10px 4px; font-size:11px; font-weight:800;
    color:#7db3ff; opacity:.9; letter-spacing:.02em;
}
.oa-fcard{
    display:flex; align-items:center; gap:9px;
    margin:5px 6px; padding:9px 10px;
    border-radius:11px; cursor:pointer; user-select:none;
    background:linear-gradient(135deg, rgba(61,139,253,.09), rgba(61,139,253,.03));
    border:1px solid rgba(61,139,253,.22);
    transition:transform .13s, border-color .15s, background .15s;
    animation:oaCardIn .22s ease both;
}
@keyframes oaCardIn{ from{ opacity:0; transform:translateY(4px); } to{ opacity:1; transform:none; } }
.oa-fcard:hover{ transform:translateY(-1px); border-color:rgba(61,139,253,.55); }
.oa-fcard.on{   border-color:rgba(6,199,85,.5);  background:linear-gradient(135deg, rgba(6,199,85,.12), rgba(6,199,85,.03)); }
.oa-fcard.some{ border-color:rgba(245,196,81,.45); }
.oa-fcheck{
    flex:none; width:26px; height:26px; border-radius:8px;
    border:1.5px solid rgba(125,179,255,.6); background:transparent;
    display:flex; align-items:center; justify-content:center; cursor:pointer; padding:0;
    transition:background .15s, border-color .15s, transform .12s;
}
.oa-fcheck:hover{ transform:scale(1.08); }
.oa-fcard.on   .oa-fcheck{ background:#06c755; border-color:#06c755; }
.oa-fcard.some .oa-fcheck{ border-color:#f5c451; }
.oa-fmark{ font-size:13px; font-weight:900; color:#fff; line-height:1; }
.oa-fcard.some .oa-fmark{ color:#f5c451; }
.oa-fico{ flex:none; font-size:19px; }
.oa-fbody{ flex:1; min-width:0; display:flex; flex-direction:column; gap:1px; }
.oa-fname{ font-size:13.5px; font-weight:800; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.oa-fsub{ font-size:11px; color:var(--muted); }
.oa-fcard.on .oa-fsub{ color:#3ddc84; font-weight:700; }
.oa-fchev{ flex:none; font-size:17px; color:var(--muted); font-weight:700; }
.oa-fcard:hover .oa-fchev{ color:#7db3ff; }

.oa-fhead{
    position:sticky; top:0; z-index:2;
    display:flex; align-items:center; gap:8px;
    padding:8px 9px; backdrop-filter:blur(6px);
    background:rgba(16,19,28,.88);
    border-bottom:1px solid rgba(61,139,253,.25);
    animation:oaCardIn .18s ease both;
}
.oa-fback{
    flex:none; border:1px solid rgba(125,179,255,.4); background:rgba(61,139,253,.1);
    color:#7db3ff; border-radius:8px; padding:5px 10px;
    font:inherit; font-size:12px; font-weight:800; cursor:pointer;
    transition:transform .12s, filter .15s;
}
.oa-fback:hover{ transform:translateX(-2px); filter:brightness(1.15); }
.oa-fcrumb{ flex:1; min-width:0; font-size:12.5px; font-weight:800;
    overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.oa-fcrumb b{ color:#3ddc84; margin-left:4px; }
.oa-fmini{
    flex:none; border:1px solid var(--border); background:rgba(255,255,255,.06);
    color:var(--text); border-radius:8px; padding:5px 10px;
    font:inherit; font-size:11.5px; font-weight:700; cursor:pointer;
}
.oa-fmini:hover{ border-color:#06c755; color:#3ddc84; }
.oa-opt.oa-all{ font-weight:800; }

/* FIX (2026-08): แถบแนบไฟล์ "ตอนสร้างรายการใหม่" ในตั้งค่าตอบกลับ */
.rp-newatt{
    display:flex; align-items:center; gap:6px; flex-wrap:wrap;
    margin-top:7px; padding:7px 9px;
    background:rgba(255,255,255,.03);
    border:1px dashed var(--border); border-radius:10px;
}
.rp-newatt-lb{ font-size:11.5px; color:var(--muted); font-weight:700; margin-right:2px; }
/* ---- FIX (2026-08): อนิเมชันเฟดออกตอนกด ← กลับ / 🏠 หน้าหลัก ---- */
body.page-leave{ animation:pageLeave .22s ease forwards; pointer-events:none; }
@keyframes pageLeave{ to{ opacity:0; transform:scale(.988); } }
@media (prefers-reduced-motion:reduce){ body.page-leave{ animation:none; } }
/* ---- FIX (2026-08): ชั้นพับ "กลุ่มทีมทั้งหมด" ของแอดมิน ---- */
.grp-head.teamfold{ border-left-color:var(--gold, #c9a04a); }
.grp-head.teamfold .grp-ico{ background:var(--gold, #c9a04a); }
.grp-head.teamfold .grp-name{ font-weight:800; }
.teamfold-sub{ font-size:11px; color:var(--muted); font-weight:600; }
.teamfold-body{ margin-left:10px; border-left:2px dashed rgba(128,128,128,.25); padding-left:4px; }
.teamfold-body .grp-head{ font-size:.96em; }

/* ---- FIX (2026-08): ช่องหมายเหตุใน popup สแปม ---- */
.c-note-in{
    width:100%; margin-top:10px; padding:9px 11px; resize:vertical;
    font:inherit; font-size:13.5px; line-height:1.45;
    border-radius:10px; border:1px solid var(--border);
    background:var(--panel2, rgba(255,255,255,.06)); color:var(--text);
}
.c-note-in:focus{ outline:none; border-color:#ff5a67; box-shadow:0 0 0 3px rgba(255,90,103,.18); }

/* ---- ✨ แปลภาษาก่อนส่ง (2026-08 v3.1) ----
   🐞 FIX: เมนูย้ายไปเกาะ <body> + position:fixed + เจาะจง #trMenu ทุกกฎ
   (เดิมฝังในแถบเครื่องมือ โดนทั้งสไตล์ปุ่มของแถบทับ (บล็อกเขียวทึบ) และ
   ตัวดักคลิกของแถบแย่งอีเวนต์จนเมนูค้าง กดปิดไม่ได้) */
#trBtn.on{ color:#5ee39a !important; border-color:rgba(6,199,85,.45) !important; background:rgba(6,199,85,.1) !important; }
#trMenu{
    position:fixed; z-index:100001; min-width:230px; padding:8px;
    background:linear-gradient(165deg, #1d212b, #141821);
    border:1px solid rgba(255,255,255,.14); border-radius:14px;
    box-shadow:0 18px 50px -12px rgba(0,0,0,.8);
    animation:trIn .16s cubic-bezier(.2,.8,.3,1) both;
}
@keyframes trIn{ from{ opacity:0; transform:translateY(6px) scale(.97) } to{ opacity:1; transform:none } }
#trMenu .tr-item{
    all:unset; box-sizing:border-box;
    display:flex; align-items:center; gap:9px; width:100%;
    padding:9px 11px; color:#dfe4ec !important; background:transparent !important;
    font-family:inherit; font-size:13.5px; border-radius:9px; cursor:pointer; text-align:left;
}
#trMenu .tr-item:hover{ background:rgba(255,255,255,.08) !important; }
#trMenu .tr-item.on{ color:#5ee39a !important; background:rgba(6,199,85,.12) !important; font-weight:800; }
#trMenu .tr-sub{ margin-left:auto; font-size:11.5px; color:#8d92a8 !important; }
#trMenu .tr-sep{ height:1px; margin:6px 4px; background:rgba(255,255,255,.08); }
#trMenu .tr-cc{
    flex:0 0 auto; min-width:30px; text-align:center;
    font-size:10.5px; font-weight:900; letter-spacing:.05em;
    padding:2px 5px; border-radius:6px;
    background:rgba(74,168,255,.14); color:#7cc0ff !important;
    border:1px solid rgba(74,168,255,.3);
}

#qpPop[hidden], #sosPop[hidden], #spellPopup[hidden], #trMenu[hidden],
#chatBootScreen[hidden]{
    display:none !important;
}
#qpPop{ position:fixed; inset:0; z-index:100005; display:flex; align-items:center;
    justify-content:center; padding:18px; background:rgba(5,10,16,.72); backdrop-filter:blur(5px); }
#qpPop .qp-box{ width:min(420px,94vw); text-align:center; padding:24px 20px 18px; border-radius:20px;
    position:relative; overflow:hidden;
    background:linear-gradient(160deg, rgba(20,32,26,.98), rgba(12,20,16,.98));
    border:1px solid rgba(6,199,85,.45);
    box-shadow:0 24px 70px -18px rgba(0,0,0,.9), 0 0 46px -14px rgba(6,199,85,.55);
    animation:qpIn .3s cubic-bezier(.2,1.25,.3,1) both; }
@keyframes qpIn{ from{ opacity:0; transform:scale(.88) translateY(14px) } to{ opacity:1; transform:none } }
#qpPop h3{ margin:2px 0 3px; font-size:19px; color:#7dffb0; }
#qpPop .qp-sub{ color:#9db4a6; font-size:12.5px; margin-bottom:12px; }
#qpPop .qp-cust{ padding:12px 14px; border-radius:13px; text-align:left;
    background:rgba(6,199,85,.08); border:1px solid rgba(6,199,85,.3); }
#qpPop .qp-cust b{ font-size:16.5px; color:#fff; }
#qpPop .qp-cust small{ display:block; color:#9db4a6; margin-top:3px; font-size:12.5px; }
#qpPop .qp-count{ font-size:44px; font-weight:900; color:#7dffb0; line-height:1.1; margin:12px 0 2px;
    font-variant-numeric:tabular-nums; }
#qpPop .qp-count.warn{ color:#ffb45e; }
#qpPop .qp-count.danger{ color:#ff7a88; animation:qpPulse .5s ease infinite alternate; }
@keyframes qpPulse{ from{ transform:scale(1) } to{ transform:scale(1.12) } }
#qpPop .qp-bar{ height:6px; border-radius:99px; background:rgba(255,255,255,.1); overflow:hidden; margin:8px 2px 14px; }
#qpPop .qp-bar i{ display:block; height:100%; background:linear-gradient(90deg,#12e070,#04a446);
    border-radius:99px; transition:width 1s linear; }
#qpPop .qp-btns{ display:flex; gap:9px; }
#qpPop .qp-btn{ flex:1; padding:13px 8px; border:0; border-radius:13px; cursor:pointer;
    font:inherit; font-size:15.5px; font-weight:900; transition:transform .13s; }
#qpPop .qp-btn:hover{ transform:translateY(-2px); }
#qpPop .qp-take{ color:#052312; background:linear-gradient(135deg,#12e070,#04a446);
    box-shadow:0 10px 26px -8px rgba(6,199,85,.55); }
#qpPop .qp-next{ color:#dfe4ec; background:rgba(255,255,255,.09); border:1px solid rgba(255,255,255,.16) !important; }

/* ═══════════════════════════════════════════════════════════════
   🎨 THEME OVERRIDE (2026-08-19) — ปรับโทนสีตาม reference
   Light: ขาว / แดง / ดำ   ·   Dark: ดำ / ม่วง
   วิธี: override เฉพาะ "ค่าตัวแปรสี" — ทุก selector ที่อ้าง
   var(--line-green) / var(--bubble-*) เปลี่ยนตามอัตโนมัติ
   ไม่แตะ layout / โครง DOM / logic · ปิด block นี้ = กลับธีมเขียวเดิม
═══════════════════════════════════════════════════════════════ */

/* ---------- LIGHT: ขาว / แดง / ดำ ---------- */
:root{
    /* accent หลัก เขียว -> แดง (ใช้ 91 จุดทั่วไฟล์) */
    --line-green:#E11D2E;
    --line-green-dk:#b3131f;

    /* bubble: เรา = แดงอ่อน / อีกฝ่าย = เทาอ่อน */
    --bubble-in:#f0f1f4;              /* อีกฝ่าย เทาอ่อน */
    --bubble-out:#ffe1e3;            /* เรา แดงอ่อนมาก (พาสเทล) */
    --bubble-out-fg:#8a1017;         /* ตัวอักษรแดงเข้ม (contrast ผ่าน AA) */
    --bubble-out-fg2:#a3212a;        /* เวลา/สถานะ */
    --bubble-out-seen:#7a0d13;       /* ✓✓ */

    /* สถานะ new (เดิมเขียว) -> โทนแดงอ่อน ให้เข้าธีม */
    --st-new:#fdeaec;
    --st-new-bd:#E11D2E;

    --chat-bg:#eceef2;              /* พื้นแชทเทาอ่อนสะอาด แทนฟ้าเดิม */
}

/* ---------- DARK: ดำ / ม่วง ---------- */
html[data-theme="dark"]{
    --line-green:#a78bfa;            /* accent ม่วงสว่าง */
    --line-green-dk:#8b5cf6;

    --bg:#0e0d14;                   /* ดำอมม่วง */
    --panel:#191622;
    --side:#191622;
    --border:#2a2438;
    --border2:#221d2e;
    --text:#ece9f5;
    --muted:#8f88a6;

    --bubble-in:#241f30;             /* อีกฝ่าย เทาเข้มอมม่วง */
    --bubble-out:#6d4bc4;            /* เรา ม่วง */
    --bubble-out-fg:#ffffff;
    --bubble-out-fg2:#e6ddf9;
    --bubble-out-seen:#d6c9f5;

    --st-new:#241a38;
    --st-new-bd:#a78bfa;
    --st-mine:#332c10;
    --st-doing:#3a2a15;
    --st-done:#191622;
    --st-done-bd:#3a3350;

    --chat-bg:#141019;
}

/* ---------- ขัดให้ modern (ปลอดภัย: เงา/มุมโค้ง/ระยะ เท่านั้น) ---------- */
/* การ์ดรายการแชท: มุมโค้งขึ้น เงานุ่ม active เด่น */
.chat-item, .list-item, .conv-item{ border-radius:12px !important; }
/* composer ปุ่มส่ง: กลมเด่น (ถ้ามี selector ปุ่มส่ง) */
.composer .send-btn, .send-btn, button.send{ border-radius:12px !important; }
/* right panel การ์ด: เงานุ่ม */
.detail-card, .pf-card, .right-panel .card{ border-radius:14px !important; }

/* ---------- override จุด hardcode เขียวที่ไม่ผ่านตัวแปร (29 จุด) ----------
   ให้เข้าธีมแดง/ม่วง · ครอบด้วย selector เดิมเป๊ะ เปลี่ยนแค่ค่าสี */
.col-resizer.dragging{ background:#E11D2E10 !important; }
.search-tag-opt.k-tag{ border-color:#E11D2E80 !important; background:#E11D2E0f !important }
.search-tag-opt.k-tag:hover{ background:#E11D2E1f !important; color:#b3131f !important }
.list-search .search-wrap.mode-tag input{ border-color:#E11D2E !important; background:#E11D2E0f !important }
.list-search .search-wrap.mode-tag input:focus{ outline-color:#E11D2E !important; background:#E11D2E0f !important }
.pill:hover{ box-shadow:0 2px 6px #E11D2E26 !important }
.pill.on{ box-shadow:0 2px 8px #E11D2E45 !important }
.tag.oa{ background:#E11D2E1a !important; color:#b3131f !important }

/* dark: ให้เป็นม่วง */
html[data-theme="dark"] .col-resizer.dragging{ background:#a78bfa22 !important; }
html[data-theme="dark"] .search-tag-opt.k-tag{ border-color:#a78bfa80 !important; background:#a78bfa14 !important }
html[data-theme="dark"] .search-tag-opt.k-tag:hover{ background:#a78bfa26 !important; color:#c4b5fd !important }
html[data-theme="dark"] .list-search .search-wrap.mode-tag input{ border-color:#a78bfa !important; background:#a78bfa14 !important }
html[data-theme="dark"] .pill:hover{ box-shadow:0 2px 6px #a78bfa33 !important }
html[data-theme="dark"] .pill.on{ box-shadow:0 2px 8px #a78bfa55 !important }
html[data-theme="dark"] .tag.oa{ background:#a78bfa22 !important; color:#c4b5fd !important }

/* ═══════════════════════════════════════════════════════════════
   🖼️ โลโก้ + ซ่อน rail ไอคอน + ปุ่ม ☰ (2026-08-19)
═══════════════════════════════════════════════════════════════ */

/* 1) badge "L" (rail) -> โลโก้ */
.rail .logo{
    background-image:url("/u1e-logo.png") !important;
    background-size:cover !important; background-position:center !important;
    color:transparent !important; font-size:0 !important;
    border-radius:11px !important; overflow:hidden;
}

/* 2) badge "U1E" (topbar oa-avatar) -> โลโก้ */
.oa-avatar{
    background-image:url("/u1e-logo.png") !important;
    background-size:cover !important; background-position:center !important;
    color:transparent !important; font-size:0 !important;
    border-radius:9px !important; overflow:hidden;
}

/* 3) ซ่อนไอคอน rail: กลุ่มทีมงาน + รายงาน */
.rail #railStats{ display:none !important; }   /* ซ่อนเฉพาะรายงาน — คืนปุ่มกลุ่มสมาชิก */

/* 4) ปุ่ม ☰ + เมนูยุบ */
.hmenu-btn{ position:relative; }
.hmenu-pop{
    position:absolute; top:calc(100% + 6px); right:0; z-index:900;
    background:var(--panel); border:1px solid var(--border); border-radius:12px;
    box-shadow:0 8px 28px rgba(0,0,0,.18); padding:6px; min-width:200px;
    display:none; flex-direction:column; gap:2px;
}
.hmenu-pop.on{ display:flex; }
.hmenu-pop .back-link{ width:100%; justify-content:flex-start; text-align:left; }

/* ═══════════════════════════════════════════════════════════════
   ✍️ ฟอนต์ TH Sarabun PSK + ขนาดบับเบิล +1.5px + แถบเขียว->แดง
   (2026-08-19)
═══════════════════════════════════════════════════════════════ */

/* 1) ฟอนต์ภาษาไทยหน้าแชท -> TH Sarabun PSK (fallback: Sarabun เว็บ -> เดิม) */
body, button, input, textarea, .bub, .msg, .list, .topbar, .rail{
    font-family:"TH Sarabun PSK","TH SarabunPSK","Sarabun",
        -apple-system, BlinkMacSystemFont, "Sukhumvit Set", "Noto Sans Thai", "Segoe UI", sans-serif !important;
}

/* 2) ตัวอักษรในบับเบิล — ✨ (2026-08) ลดลง 1px ตามสั่ง (17 -> 16) */
.bub{ font-size:16px !important; }
@media (max-width: 820px), (pointer:coarse) and (hover:none) and (max-width:950px){ .bub{ font-size:16px !important; } }

/* 3) แถบสถานะเขียวพาสเทล (ลูกค้าพึ่งทัก) -> แดงพาสเทลเข้าธีม */
:root{
    --st-new:#fdeaec;         /* แดงอ่อนพาสเทล แทนเขียว #e6f8ec */
    --st-new-bd:#E11D2E;
}
html[data-theme="dark"]{
    --st-new:#2a1418;         /* แดงเข้มพาสเทลบนพื้นมืด */
    --st-new-bd:#E11D2E;
}

/* ═══════════════════════════════════════════════════════════════
   🔴 บับเบิลตัวเอง = แดงพาสเทลชัดขึ้น + ครอบ rule hardcode (2026-08-19)
   (แก้ที่ตัว .bub ตรง ๆ ด้วย !important — ชนะทุก rule เดิม)
═══════════════════════════════════════════════════════════════ */
:root{
    --bubble-out:#ffc9cd;                /* แดงพาสเทลชัดขึ้น (เดิม #ffe1e3 จางไป) */
    --bubble-out-fg:#7a0d13;
}
/* บับเบิลข้อความตัวเอง (light) — บังคับสีตรง กันโดน hardcode ทับ */
.msg.out .bub{
    background:#ffc9cd !important;
    color:#7a0d13 !important;
}
/* ฟองพนักงานคนอื่น (เดิม hardcode เทา) -> แดงพาสเทลอ่อนกว่า แยกจากของเรา */
.msg.out.by-other .bub{
    background:#ffe1e3 !important;
    color:#a3212a !important;
}
/* dark: ม่วง */
html[data-theme="dark"] .msg.out .bub{
    background:#6d4bc4 !important;
    color:#ffffff !important;
}
html[data-theme="dark"] .msg.out.by-other .bub{
    background:#4a3d63 !important;
    color:#e6ddf9 !important;
}

/* ═══════════════════════════════════════════════════════════════
   🔴 สีตัวอักษรบับเบิลตัวเอง = แดง (กันเขียวหลงเหลือ) 2026-08-19
   ครอบทุก selector: ข้อความหลัก + เวลา + สถานะ ✓/✓✓
═══════════════════════════════════════════════════════════════ */
/* light */
.msg.out .bub, .msg.out .bub *{ color:#7a0d13 !important; }
.msg.out .ms, .msg.out .ms.sending, .msg.out .ms.sent{ color:#a3212a !important; }
.msg.out .ms.seen{ color:#7a0d13 !important; }
/* ฟองพนักงานคนอื่น = เทา (คงแยกจากของเรา ไม่ให้เขียว) */
.msg.out.by-other .bub, .msg.out.by-other .bub *{ color:#a3212a !important; }
.msg.out.by-other .ms, .msg.out.by-other .ms.sent{ color:#b06a70 !important; }
.msg.out.by-other .ms.seen{ color:#8a1017 !important; }
/* dark = ม่วง/ขาว */
html[data-theme="dark"] .msg.out .bub, html[data-theme="dark"] .msg.out .bub *{ color:#ffffff !important; }
html[data-theme="dark"] .msg.out .ms, html[data-theme="dark"] .msg.out .ms.sent{ color:#e6ddf9 !important; }
html[data-theme="dark"] .msg.out .ms.seen{ color:#d6c9f5 !important; }
html[data-theme="dark"] .msg.out.by-other .bub, html[data-theme="dark"] .msg.out.by-other .bub *{ color:#e6ddf9 !important; }
html[data-theme="dark"] .msg.out.by-other .ms.seen{ color:#c9b8f0 !important; }

/* ═══════════════════════════════════════════════════════════════
   🟢 บับเบิลตัวเอง = เขียวพาสเทล (ตามที่ต้องการ) 2026-08-19
   ทับ override แดงทั้งหมดด้านบน (ตัวหลังสุดชนะ)
═══════════════════════════════════════════════════════════════ */
/* พื้นบับเบิล = เขียวพาสเทล */
.msg.out .bub{
    background:#d4f5dd !important;      /* เขียวพาสเทลอ่อนสวย */
    color:#1a6b3a !important;           /* ตัวอักษรเขียวเข้มอ่านชัด */
}
.msg.out .bub, .msg.out .bub *{ color:#1a6b3a !important; }
/* เวลา/สถานะ = เขียว */
.msg.out .ms, .msg.out .ms.sending, .msg.out .ms.sent{ color:#2f9e63 !important; }
.msg.out .ms.seen{ color:#1a6b3a !important; }
/* ฟองพนักงานคนอื่น = เขียวพาสเทลอ่อนกว่า (แยกจากของเรา) */
.msg.out.by-other .bub{ background:#e8f8ee !important; }
.msg.out.by-other .bub, .msg.out.by-other .bub *{ color:#2f9e63 !important; }
.msg.out.by-other .ms, .msg.out.by-other .ms.sent{ color:#5bb583 !important; }
.msg.out.by-other .ms.seen{ color:#2f9e63 !important; }

/* dark: เขียวพาสเทลบนพื้นมืด */
html[data-theme="dark"] .msg.out .bub{ background:#1e3a2b !important; }
html[data-theme="dark"] .msg.out .bub, html[data-theme="dark"] .msg.out .bub *{ color:#8de0aa !important; }
html[data-theme="dark"] .msg.out .ms, html[data-theme="dark"] .msg.out .ms.sent{ color:#6fce93 !important; }
html[data-theme="dark"] .msg.out .ms.seen{ color:#8de0aa !important; }
html[data-theme="dark"] .msg.out.by-other .bub{ background:#2a3d33 !important; }
html[data-theme="dark"] .msg.out.by-other .bub, html[data-theme="dark"] .msg.out.by-other .bub *{ color:#a5d9ba !important; }


/* ═══════════════════════════════════════════════════════════════
   🔤 โลโก้ห้องแชท = ตัวอักษร "U1E CHAT" (ตามสั่ง 2026-08-19)
   แทนที่รูปโลโก้กล่องแดงเดิม (ชั้น background-image ด้านบนโดนทับด้วยบล็อกนี้
   — อยู่ท้ายไฟล์ + selector เจาะจงกว่า + !important เท่ากัน = ชนะแน่นอน)
   ⚠️ คง class .oa-avatar ไว้ เพราะ chat.js ผูกคลิก "กลับหน้ารายการแชท" ไว้กับมัน
═══════════════════════════════════════════════════════════════ */
.oa-avatar.oa-logo-text{
    background:none !important; background-image:none !important;
    width:auto !important; height:auto !important; min-width:0 !important;
    border-radius:0 !important; overflow:visible !important;
    display:flex !important; align-items:baseline; gap:7px;
    padding:0 2px; user-select:none; cursor:pointer; line-height:1;
}
.oa-avatar.oa-logo-text .lg-u1e{
    color:#c1121f !important;               /* แดงแบรนด์ (โทนเดียวกับภาพตัวอย่าง) */
    font-weight:900; font-size:21px !important; letter-spacing:.5px;
}
.oa-avatar.oa-logo-text .lg-chat{
    color:#5b6472 !important;               /* เทาอมน้ำเงินแบบภาพตัวอย่าง */
    font-weight:800; font-size:15px !important; letter-spacing:4px;
}
/* ธีมมืด: U1E แดงสว่างขึ้นให้เด่นบนพื้นเข้ม · CHAT เทาอ่อน */
html[data-theme="dark"] .oa-avatar.oa-logo-text .lg-u1e{ color:#ff5a64 !important }
html[data-theme="dark"] .oa-avatar.oa-logo-text .lg-chat{ color:#aab3c0 !important }
/* จอแคบ: ซ่อนคำว่า CHAT เหลือ U1E — ไม่เบียดช่องเลือกบัญชี OA */
@media (max-width: 560px){
    .oa-avatar.oa-logo-text .lg-chat{ display:none }
}

/* ========================================================================
   ✨ (2026-08 Phase 2) popup "แก้ไขข้อมูลลูกค้า" — ชื่อ/User + ประเภทลูกค้า
   ------------------------------------------------------------------------
   ใช้โครง popup กลางเดิม (.c-modal/.c-msg/.c-note-in/.c-note-label) ทั้งหมด
   เพิ่มเฉพาะ selector ใหม่ที่ขึ้นต้น .c-cust- / .c-cls- เท่านั้น
   -> ไม่ชนกับ global style เดิม และไม่แตะสไตล์ปุ่ม/กล่องเดิมแม้แต่บรรทัดเดียว
   ======================================================================== */
.c-cust-edit{ text-align:left; }
/* ป้าย "ชื่อ / User" กับ "ประเภทลูกค้า" ใช้ .c-note-label เดิม แต่ในกล่องนี้
   ไม่ต้องมีไอคอน 📝 นำหน้า (ของเดิมเป็นป้าย "หมายเหตุ" จึงมีไอคอน) */
.c-cust-edit .c-note-label::before{ content:none; }
.c-cust-edit .c-note-label:first-child{ margin-top:0; }
.c-req{ color:#e11d2e; font-weight:900; }

/* ---- ตัวเลือกประเภทลูกค้า ---- */
.c-cls-group{
    display:flex; flex-direction:column; gap:8px;
    animation:cIcPop .4s cubic-bezier(.34,1.56,.64,1) .24s both;
}
.c-cls-opt{
    display:flex; align-items:center; gap:10px;
    padding:11px 13px; border:1.5px solid #e5e7eb; border-radius:11px;
    font-size:14.5px; font-weight:700; color:#374151;
    cursor:pointer; user-select:none;
    transition:border-color .15s, background .15s;
}
.c-cls-opt:hover{ border-color:#c9a04a; background:#c9a04a0f; }
.c-cls-opt input[type="radio"]{
    width:18px; height:18px; margin:0; flex:none;
    accent-color:#06c755; cursor:pointer;
}
/* วงกลมที่ถูกเลือก -> ไฮไลต์ทั้งแถว (อ่านง่ายบนจอเล็ก) */
.c-cls-opt:has(input:checked){ border-color:#06c755; background:#06c7551a; color:#0b3319; }
/* โฟกัสด้วยคีย์บอร์ดต้องเห็นชัดเสมอ (ห้าม outline หาย) */
.c-cls-opt:focus-within{ outline:2px solid #06c755; outline-offset:2px; }

html[data-theme="dark"] .c-cls-opt{ border-color:#2a2a2a; color:#e5e7eb; }
html[data-theme="dark"] .c-cls-opt:hover{ background:#c9a04a1a; }
html[data-theme="dark"] .c-cls-opt:has(input:checked){ background:#06c7552e; color:#eafff1; }

/* ---- แถบแจ้งข้อผิดพลาดในกล่อง (validation + ข้อความจากเซิร์ฟเวอร์) ---- */
.c-cust-err{
    margin-top:12px; padding:9px 12px; border-radius:9px;
    background:#ff5a6714; border:1px solid #ff5a6740;
    color:#c81e2b; font-size:13px; font-weight:700; line-height:1.5;
    text-align:left; white-space:pre-line;
}
html[data-theme="dark"] .c-cust-err{ color:#ff8f99; }

/* ---- จอเล็ก: ไม่ล้นจอ ปุ่มยังกดได้ ---- */
@media (max-width:480px){
    .c-cls-opt{ padding:12px 11px; font-size:14px; }
    .c-cls-group{ gap:7px; }
    .c-cust-edit .c-note-label{ margin:13px 0 7px; }
}

/* ------------------------------------------------------------------------
   ✨ (2026-08 Phase 2 รอบ 2) สถานะ disabled ของปุ่มใน popup กลาง
   ปุ่ม "บันทึก" ถูกปิดตอนยังไม่เลือกประเภทลูกค้า และปุ่มทั้งคู่ถูกปิด
   ระหว่างรอเซิร์ฟเวอร์ -> ต้องดูออกด้วยตาว่ากดไม่ได้ (เดิมยังดูเหมือนกดได้)
   ⚠️ ประกาศไว้ท้ายไฟล์เพื่อให้ชนะ .c-btn:hover เดิม และครอบเฉพาะ .c-btn
      ของ popup กลางเท่านั้น ไม่กระทบปุ่มอื่นในระบบ
   ------------------------------------------------------------------------ */
.c-btn:disabled{
    opacity:.5;
    cursor:not-allowed;
    filter:none;
}
/* ปิด hover/active effect ทั้งหมดตอน disabled (รวม .primary/.danger) */
.c-btn:disabled:hover,
.c-btn:disabled:active,
.c-btn.primary:disabled:hover,
.c-btn.danger:disabled:hover{
    transform:none;
    filter:none;
    background:inherit;
}
.c-btn:disabled:hover{ background:#f4f6f9; }
.c-btn.primary:disabled:hover{ background:linear-gradient(135deg,#06c755,#05a948); }
.c-btn.danger:disabled:hover{ background:linear-gradient(135deg,#ff5a67,#e0414e); }
html[data-theme="dark"] .c-btn:disabled:hover{ background:inherit; }

/* ============================================================
   ✨ (2026-08) QA EVALUATION — ปุ่ม ⋮ / ป้ายคะแนน / กล่องให้คะแนน
   ------------------------------------------------------------
   ต่อยอด .msg-tools เดิม ไม่แตะกฎเดิมของ quote / pin / translate
   ใช้ตัวแปรสีเดิมของธีมทั้งหมด -> รองรับ dark mode ที่มีอยู่โดยอัตโนมัติ
============================================================ */

/* ปุ่ม ⋮ ในแถบเครื่องมือเดิม — ใช้กฎขนาด/ตำแหน่งชุดเดียวกับปุ่มอื่น */
.msg-tools .qa-btn{
    position:static; transform:none; opacity:1; pointer-events:auto;
    flex:0 0 auto; width:30px; height:30px; margin:0; padding:0;
    display:flex; align-items:center; justify-content:center;
    border:1px solid var(--border,#e3e6ec); border-radius:9px;
    background:var(--panel,#fff); color:var(--muted,#8b91a1);
    font-size:17px; line-height:1; cursor:pointer;
}
.msg-tools .qa-btn:hover{ transform:scale(1.15); color:var(--text,#1b1c20) }

/* ป้ายคะแนนใต้บับเบิล */
.qa-badge{
    display:inline-block; margin:4px 0 0; padding:2px 8px;
    border-radius:999px; font-size:11.5px; font-weight:700;
    border:1px solid transparent; white-space:nowrap;
}
.qa-badge.pos{ color:#0a7d3f; background:#e6f8ec; border-color:#06c75540 }
.qa-badge.neg{ color:#b3261e; background:#fdecea; border-color:#b3261e33 }

/* ---- กล่องให้คะแนน ---- */
.qa-modal{
    position:fixed; inset:0; z-index:100000; display:none;
    align-items:center; justify-content:center;
    background:rgba(0,0,0,.45); padding:16px;
}
.qa-modal.show{ display:flex }
.qa-card{
    background:var(--panel,#fff); color:var(--text,#1b1c20);
    border:1px solid var(--border,#e3e6ec); border-radius:16px;
    width:min(460px,100%); max-height:88vh; display:flex; flex-direction:column;
    box-shadow:0 18px 60px rgba(0,0,0,.28);
}
.qa-hd{ padding:14px 18px; font-weight:700; font-size:15px;
        border-bottom:1px solid var(--border2,#eef0f4) }
.qa-bd{ padding:12px 18px; overflow:auto; flex:1; min-height:0 }
.qa-ft{ padding:12px 18px; border-top:1px solid var(--border2,#eef0f4);
        display:flex; gap:8px; justify-content:flex-end }

.qa-quote{
    background:var(--bg,#f7f8fa); border:1px solid var(--border2,#eef0f4);
    border-radius:10px; padding:9px 11px; font-size:13px;
    max-height:96px; overflow:auto; margin-bottom:12px;
    white-space:pre-wrap; word-break:break-word;
}
.qa-grp{ margin-bottom:12px }
.qa-grp > label{ display:block; font-size:12px; color:var(--muted,#8b91a1); margin-bottom:5px }
.qa-row{ display:flex; gap:7px; flex-wrap:wrap }
.qa-2col{ display:grid; grid-template-columns:1fr 1fr; gap:10px }

/* ปุ่มคะแนน — มีเฉพาะค่าที่อนุญาต (+1/+0.25/-0.5/-1/-1.5/-2) */
.qa-sc{
    flex:0 0 auto; min-width:58px; padding:8px 12px;
    border-radius:10px; border:1.5px solid var(--border,#e3e6ec);
    background:var(--panel,#fff); color:var(--text,#1b1c20);
    font-size:14px; font-weight:700; cursor:pointer;
}
.qa-sc.pos:hover, .qa-sc.pos.on{ border-color:#06c755; background:#e6f8ec; color:#0a7d3f }
.qa-sc.neg:hover, .qa-sc.neg.on{ border-color:#b3261e; background:#fdecea; color:#b3261e }
.qa-sc.on{ box-shadow:0 0 0 3px rgba(0,0,0,.06) }

.qa-modal input, .qa-modal textarea{
    width:100%; box-sizing:border-box; padding:8px 10px;
    border:1px solid var(--border,#e3e6ec); border-radius:9px;
    background:var(--panel,#fff); color:var(--text,#1b1c20);
    font-size:13.5px; font-family:inherit; resize:vertical;
}
.qa-note{ font-size:11.5px; color:var(--muted,#8b91a1); margin-top:2px }
.qa-b{
    padding:9px 18px; border-radius:10px; cursor:pointer; font-size:13.5px;
    border:1px solid var(--border,#e3e6ec);
    background:var(--panel,#fff); color:var(--text,#1b1c20);
}
.qa-b.primary{ background:var(--line-green,#06c755); border-color:transparent; color:#fff; font-weight:700 }
.qa-b[disabled]{ opacity:.6; cursor:default }

/* ---- มือถือ: กล่องเต็มความกว้าง ปุ่มกดง่าย และปุ่ม ⋮ ต้องแตะติด ---- */
@media (max-width:600px){
    .qa-modal{ padding:0; align-items:flex-end }
    .qa-card{ width:100%; max-height:92vh; border-radius:16px 16px 0 0 }
    .qa-2col{ grid-template-columns:1fr }
    .qa-sc{ flex:1 1 auto; min-width:0; padding:11px 8px }   /* นิ้วแตะง่าย */
    .qa-ft .qa-b{ flex:1 1 auto; padding:12px }
    /* แถบเครื่องมือบนจอแคบถูกกดให้เล็กลงอยู่แล้ว — ให้ปุ่ม QA เท่าปุ่มอื่นเสมอ */
    .msg-tools .qa-btn{ width:28px; height:28px; font-size:16px }
}

/* ✨ (2026-08) ปุ่ม "ยกเลิกการตรวจ" ในกล่องให้คะแนน QA
   ใช้สีเตือนชุดเดิมของธีม ไม่เพิ่มตัวแปรสีใหม่ */
.qa-b.danger{ color:#b3261e; border-color:#b3261e55; background:transparent; font-weight:600 }
.qa-b.danger:hover{ background:#fdecea }
@media (max-width:600px){
    /* มือถือ: ปุ่มยกเลิกขึ้นบรรทัดของตัวเอง ไม่เบียดปุ่มบันทึก */
    .qa-ft{ flex-wrap:wrap }
    .qa-b.danger{ order:3; flex:1 1 100%; margin-right:0 !important; padding:12px }
}


/* ===== ✨ (2026-09 Phase 1c) แท็กหลักของลูกค้า — primaryTag =====
   หลักการ: ไม่ประกาศสีใหม่เลยสักค่า ใช้ currentColor/em ล้วน
   -> สืบทอดสีและขนาดจาก .pf-tag / .tag.lbl เดิมทั้งหมด ธีมไหนก็เข้ากันได้
   ลบทั้งบล็อกนี้ = rollback CSS ครบ (ไม่มีการแก้ selector เดิมแม้แต่ตัวเดียว) */

/* ชิปแท็กหลักในแผงโปรไฟล์ — เน้นด้วยเส้นขอบ+น้ำหนักตัวอักษร ไม่ใช่สีใหม่ */
.pf-tag.primary{
    font-weight: 600;
    box-shadow: inset 0 0 0 1px currentColor;
}

/* ปุ่มดาว — ขนาด/ระยะอิงจากตัวอักษรของชิป ไม่ล็อกพิกเซล */
.tag-star{
    background: none;
    border: 0;
    padding: 0 .15em;
    margin-left: .25em;
    font: inherit;
    line-height: 1;
    color: inherit;
    cursor: pointer;
    opacity: .45;
    transition: opacity .12s ease;
}
.tag-star:hover,
.tag-star:focus-visible{ opacity: 1; }
.tag-star.on{ opacity: 1; }

/* แตะบนมือถือ: ขยายพื้นที่กดโดยไม่ดันเลย์เอาต์ */
@media (hover: none){
    .tag-star{ padding: .2em .35em; opacity: .8; }
}

/* ชิปในรายการห้องแชท (.tag.lbl) — ใช้ตัวหนาอย่างเดียว กันแถวสูงขึ้น */
.tag.lbl.primary{ font-weight: 600; }

/* ========================================================================
   PZI23 (2026-09-09) — หน้าแชทพอดีทุกจอสัมผัส: มือถือ · iPad · แท็บเล็ต
   ------------------------------------------------------------------------
   ⚠️ ทุกกฎในบล็อกนี้อยู่ใต้ (pointer:coarse) and (hover:none) เท่านั้น
      เครื่องที่มีเมาส์/แทร็กแพด (คอม โน้ตบุ๊ก iPad ที่ต่อ Magic Keyboard)
      รายงาน hover:hover + pointer:fine -> ไม่เข้าเงื่อนไขแม้แต่ข้อเดียว
      => เลย์เอาต์เดสก์ท็อปเดิมไม่ถูกแตะเลย ไม่ว่าจะย่อหน้าต่างแคบแค่ไหน

   ⚠️ ทุกกฎบังคับ min-width:481px -> มือถือจอ ≤480px ที่ใช้งานได้ดีอยู่แล้ว
      ได้ผลลัพธ์เท่าเดิมเป๊ะ ไม่มีอะไรขยับ

   เส้นแบ่ง (ตามที่หน้างานเลือก = ตัวเลือก A)
     · จอสัมผัส ≤950px  -> จอเดียวแบบแอป LINE  (มือถือทุกแนว · iPad แนวตั้ง · แท็บเล็ต)
     · จอสัมผัส ≥951px  -> 2 แผง รายการ+ห้องแชท (iPad/แท็บเล็ตแนวนอน)
   ======================================================================== */

/* ---------- ขนาดที่นิ้วแตะได้จริง (ทุกจอสัมผัสตั้งแต่ 481px ขึ้นไป) ---------- */
@media (pointer:coarse) and (hover:none) and (min-width:481px){
    /* มาตรฐาน Apple HIG: เป้าที่กดได้ต้องสูงอย่างน้อย 44px
       (เดิมบล็อก ≤820px ตั้งไว้ 40px ซึ่งยังพลาดง่ายเวลารีบตอบลูกค้า) */
    .st-btn, .ct-btn, .back-btn, .info-btn, .unread-only-btn, .grp-more{
        min-height:44px;
    }
    .back-btn, .info-btn{ width:44px }
    .chat-row{ min-height:58px }          /* แถวห้องแชทแตะง่าย ไม่กดพลาดห้องข้าง ๆ */
    .grp-head{ min-height:44px }

    /* ⚠️ 16px คือค่าต่ำสุดที่ iOS จะ "ไม่ซูมหน้าเอง" ตอนแตะพิมพ์
       ต่ำกว่านี้ Safari จะซูมเข้าแล้วหน้าจอเบี้ยวทั้งหน้า พนักงานต้องบีบซูมออกเอง */
    .composer textarea, .composer input[type="text"],
    .search-wrap input, .oa-select-input{ font-size:16px }

    /* ปุ่มส่ง: นิ้วโป้งต้องกดติดตั้งแต่ครั้งแรก */
    .composer .send-btn{ min-width:48px; min-height:44px }

    /* ระยะห่างระหว่างปุ่มกันกดพลาดปุ่มข้าง ๆ (เช่น ปิดเคส vs โอนเคส) */
    .th-actions{ gap:8px }
    .composer-tools{ gap:8px }
}

/* ---------- แท็บเล็ต/iPad แนวนอน: 2 แผง (ตัวเลือก A) ---------- */
@media (pointer:coarse) and (hover:none) and (min-width:951px){
    /* รายการแชท + ห้องแชท อยู่คู่กันเหมือน LINE บน iPad แนวนอน
       แผงโปรไฟล์ลูกค้าเป็นแผงเลื่อนทับ เปิดด้วยปุ่ม ⓘ (มาจากบล็อก 940px ที่ขยายไว้)
       ⚠️ ใช้ค่าความกว้างคงที่ ไม่อิง --list-w เพราะแท่งลากถูกซ่อนบนจอสัมผัส
          (ลากด้วยนิ้วไม่แม่นพอ) ค่าที่บันทึกไว้จากเครื่องคอมจึงไม่ควรตามมาบังคับ */
    .app{
        grid-template-columns:60px 320px 5px 1fr;
        grid-template-areas:"rail topbar topbar topbar" "rail list lrsz thread";
    }
    .col-resizer{ display:none }
    .profile{ width:360px }
    .msg{ max-width:74% }

    /* ขอบจอปลอดภัย: แท็บเล็ตแนวนอนบางรุ่นมีมุมโค้ง/แถบโฮมด้านล่าง */
    .composer{
        padding-bottom: calc(12px + env(safe-area-inset-bottom, 0px));
        padding-right:  calc(14px + env(safe-area-inset-right, 0px));
    }
    .list{ padding-bottom: env(safe-area-inset-bottom, 0px) }
    .topbar{ padding-right: calc(18px + env(safe-area-inset-right, 0px)) }
}

/* ---------- กันหน้าเลื่อนซ้าย-ขวาบนจอสัมผัส ---------- */
@media (pointer:coarse) and (hover:none) and (min-width:481px){
    /* ของยาว ๆ ต้องเลื่อนอยู่ในกล่องตัวเอง ห้ามดันทั้งหน้าให้เลื่อนตาม
       (อาการ "หน้าจอไถไปทางขวาแล้วมีพื้นที่ว่าง") */
    .app{ max-width:100vw; overflow-x:hidden }
    .messages{ overflow-x:hidden }
    .bub{ max-width:100%; overflow-wrap:anywhere }

    /* ความสูงจริงเมื่อคีย์บอร์ดเด้งขึ้น — ช่องพิมพ์ต้องติดขอบล่างเสมอ
       (100dvh ถูกตั้งไว้แล้วที่ chat.css:199,231 · ตรงนี้กันแผงกลางไม่ให้ดันล้น) */
    .thread{ min-height:0 }
    .messages{ min-height:0 }
}

/* ========================================================================
   PZI23 QA SPLIT (2026-09-10) — หัวกลุ่ม "ตรวจสอบแล้ว (สำหรับ QA)"

   กลุ่มนี้ใช้คลาส .qadone ร่วมกับกลุ่ม "เคสที่ปิดแล้ว (รอตรวจ)" อยู่แล้ว
   จึงได้สีและโครงเดิมทั้งหมด — ที่นี่ปรับเฉพาะ 2 อย่างให้แยกออกจากกันด้วยตา:
     1) ไม่มีตัวเลขที่หัวกลุ่ม (ตัวเลขถูกถอดจากฝั่ง JS แล้ว) -> ชื่อกลุ่มยืดเต็มแถวได้
     2) โทนจางลงกว่ากลุ่มรอตรวจ เพราะเป็น "ของที่ทำเสร็จแล้ว" ไม่ใช่คิวงาน

   ⚠️ เจาะจงด้วย [data-grp="qa_reviewed"] เท่านั้น — ไม่แตะกลุ่มอื่นแม้แต่กลุ่มเดียว
   ⚠️ ไม่ประกาศสีตายตัว ใช้ตัวแปรธีมเดิมของไฟล์ -> โหมดมืดทำงานเหมือนกลุ่มอื่น
   ======================================================================== */
.grp-head[data-grp="qa_reviewed"]{
    opacity: .82;
}
.grp-head[data-grp="qa_reviewed"]:hover{
    opacity: 1;
}
/* ไม่มีป้ายตัวเลข -> ให้ชื่อกลุ่มใช้พื้นที่ที่เหลือได้เต็ม ไม่มีช่องว่างค้างทางขวา */
.grp-head[data-grp="qa_reviewed"] .grp-name{
    flex: 1 1 auto;
}

/* จอสัมผัส: หัวกลุ่มทุกกลุ่มต้องแตะง่าย (ชุดจอสัมผัสด้านบนคุม .grp-head อยู่แล้ว
   ตรงนี้กันเฉพาะกรณีที่ opacity ทำให้ดูเหมือนกดไม่ได้) */
@media (pointer:coarse) and (hover:none){
    .grp-head[data-grp="qa_reviewed"]{ opacity: .9; }
}