/* X10 Chat — UI v3 (วางต่อท้าย public/style.css ได้เลย ไม่ต้องแก้ไฟล์เดิม)
   ธีม: ใช้ตัวแปรเดิมของโปรเจกต์ (--blue, --bg, --card ...) แล้วเพิ่มตัวแปรใหม่เฉพาะส่วนที่ UI v3 ต้องใช้
   ทุกกฎขึ้นต้นด้วย .x10v3 เพื่อไม่ให้ทับ CSS เดิม */

:root {
  --v3-mut: #556377;          /* ข้อความรอง (คอนทราสต์ผ่าน AA บนพื้นขาว/ฟ้าอ่อน) */
  --v3-sub: #F4F6F9;          /* พื้นผิวรอง */
  --v3-bd2: #EEF2F7;          /* เส้นคั่นอ่อน */
  --v3-me: #E8F0F8;           /* พื้นข้อความของเรา */
  --v3-up: #166534;           /* ค่าดีขึ้น / อ่านแล้ว */
  --v3-down: #991B1B;
  --v3-warn-fg: #92400E;
}
html[data-theme="dark"] {
  --v3-mut: #9AA9BA;
  --v3-sub: #18242F;
  --v3-bd2: #22303D;
  --v3-me: #17293C;
  --v3-up: #34D399;
  --v3-down: #F87171;
  --v3-warn-fg: #FBBF24;
}

/* ---------- แถบข้าง: หมวดห้อง (ยุบ/ขยาย) ---------- */
.x10v3 .chan-sec {
  display: flex; align-items: center; gap: 7px; width: 100%;
  background: none; border: 0; cursor: pointer; font-family: inherit;
  padding: 11px 16px 4px; font-weight: 700; font-size: 11px; letter-spacing: .04em;
  color: var(--side-section);
}
.x10v3 .chan-sec .caret { display: inline-block; font-size: 9px; transition: transform .15s; }
.x10v3 .chan-sec[aria-expanded="true"] .caret { transform: rotate(90deg); }
.x10v3 .chan-sec .count { font-weight: 400; opacity: .75; margin-left: auto; }
.x10v3 .chan-sec-body[hidden] { display: none; }

/* ---------- ข้อความ / โพส ---------- */
.x10v3 .post { display: flex; gap: 11px; padding: 6px 8px; border-radius: 10px; }
/* Boss สั่งเอาออก 2026-08-27 (ท้วงหลายรอบ): พื้นหลังข้อความของเราสีอ่อน #17293C
   ลากเต็มความกว้างแถว มองเหมือนบัค — ตอนนี้แยกฝั่งด้วยการชิดขวาแล้ว ไม่ต้องมีพื้น */
.x10v3 .post.mine { background: transparent; }
/* ===== พื้นเทาตอนชี้/แตะ (Boss สั่ง 2026-08-31 ข้อ 1 · ตามรูป Slack) =====
   ⚠️ hover เท่านั้น — พื้นถาวรถูกท้วงมาแล้วหลายรอบ (ดูคอมเมนต์ .post.mine ด้านบน)
   ใช้ --v3-sub = พื้นผิวรองของธีม จึงถูกทั้งโหมดสว่างและมืดอัตโนมัติ */
@media (hover: hover) {
  .x10v3 .post:hover { background: var(--v3-sub); }
}
/* มือถือไม่มี hover จริง — app.js toggle .show-actions ตอนแตะอยู่แล้ว ใช้ตัวนั้นเป็นตัวจับ */
.x10v3 .post.show-actions { background: var(--v3-sub); }
/* ข้อความระบบ/ตัวคั่น ไม่ต้องมีพื้น */
.x10v3 .post.system:hover { background: transparent; }

.x10v3 .post.compact { padding: 2px 8px; }
.x10v3 .post.compact .avatar { visibility: hidden; }
.x10v3 .post-head { display: flex; gap: 9px; align-items: baseline; }
.x10v3 .post-name { font-weight: 700; font-size: 14px; }
.x10v3 .post-time { font-size: 11px; color: var(--v3-mut); }
.x10v3 .post-read { font-size: 11px; color: var(--v3-up); }
.x10v3 .post-text { font-size: 14.5px; line-height: 1.6; white-space: pre-line; overflow-wrap: anywhere; }
.x10v3 .post-quote {
  border-left: 2px solid var(--border); padding: 2px 0 2px 10px; margin: 5px 0;
  font-size: 12.5px; color: var(--v3-mut);
}
.x10v3 .post-acts { display: flex; gap: 14px; margin-top: 6px; font-size: 11.5px; color: var(--v3-mut); }
.x10v3 .post-acts button { background: none; border: 0; padding: 0; font: inherit; cursor: pointer; color: inherit; }
.x10v3 .post-acts button.primary { color: var(--blue); font-weight: 600; }
.x10v3 .link-more { display: block; background: none; border: 0; padding: 4px 0 0; color: var(--blue); font-weight: 600; font-size: 12.5px; cursor: pointer; }

/* รูปแนบในโพส: ใหญ่พอให้ดูรู้เรื่อง */
.x10v3 .post-imgs { display: grid; gap: 8px; margin-top: 9px; grid-template-columns: repeat(2, minmax(0, auto)); }
.x10v3 .post-imgs.single { grid-template-columns: 1fr; }
.x10v3 .post-img { width: 238px; height: 172px; border-radius: 12px; border: 1px solid var(--border); background-size: cover; background-position: center; }
.x10v3 .post-imgs.single .post-img { width: 340px; height: 240px; }

/* การ์ดไฟล์ */
.x10v3 .file-card { display: flex; align-items: center; gap: 11px; border: 1px solid var(--border); background: var(--v3-sub); border-radius: 11px; padding: 9px 12px; max-width: 420px; }
.x10v3 .file-ext { width: 34px; height: 34px; border-radius: 8px; background: var(--v3-me); color: var(--blue); display: flex; align-items: center; justify-content: center; font-size: 10px; font-weight: 700; flex: none; }
.x10v3 .file-name { font-size: 13px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.x10v3 .file-size { font-size: 11.5px; color: var(--v3-mut); }

/* ---------- คอมเมนต์ใต้โพส (2 ระดับ) ---------- */
.x10v3 .comments { margin-top: 9px; padding-left: 12px; border-left: 2px solid var(--border); display: flex; flex-direction: column; gap: 8px; max-width: 680px; }
.x10v3 .comments-count { font-size: 11.5px; color: var(--v3-mut); font-weight: 600; }
.x10v3 .cmt { display: flex; gap: 9px; }
.x10v3 .cmt-bubble { background: var(--v3-sub); border-radius: 13px; padding: 7px 12px; }
.x10v3 .cmt-name { font-size: 12.5px; font-weight: 700; }
.x10v3 .cmt-text { font-size: 13px; line-height: 1.55; white-space: pre-line; }
.x10v3 .cmt-acts { display: flex; gap: 12px; font-size: 11px; color: var(--v3-mut); padding: 4px 12px 0; }
.x10v3 .cmt-acts button { background: none; border: 0; padding: 0; font: inherit; font-weight: 600; color: var(--blue); cursor: pointer; }
.x10v3 .cmt-replies { margin: 8px 0 0 12px; padding-left: 11px; border-left: 2px solid var(--v3-bd2); display: flex; flex-direction: column; gap: 7px; }

/* ---------- แถบตอบกลับ + แถบแนบไฟล์ เหนือช่องพิมพ์ ---------- */
.x10v3 .reply-strip { display: flex; align-items: center; gap: 10px; border-left: 3px solid var(--blue); background: var(--v3-sub); border-radius: 0 10px 10px 0; padding: 8px 12px; margin-bottom: 9px; }
.x10v3 .reply-strip span { flex: 1; min-width: 0; font-size: 12.5px; color: var(--v3-mut); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.x10v3 .attach-bar { border: 1px solid var(--border); background: var(--v3-sub); border-radius: 14px; padding: 11px 12px; margin-bottom: 9px; }
.x10v3 .attach-row { display: flex; gap: 9px; align-items: flex-start; flex-wrap: wrap; }
.x10v3 .attach-thumb { width: 120px; height: 88px; border-radius: 10px; border: 1px solid var(--border); background-size: cover; background-position: center; position: relative; }
.x10v3 .attach-pick { width: 120px; height: 88px; border: 1.5px dashed var(--border); border-radius: 10px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; cursor: pointer; color: var(--v3-mut); font-size: 11.5px; }
.x10v3 .attach-x { position: absolute; top: 4px; right: 4px; width: 22px; height: 22px; border: 0; border-radius: 50%; background: rgba(0,0,0,.55); color: #fff; cursor: pointer; }

/* ---------- การ์ดรีวิว (โพสจากบอทรีวิว) ---------- */
.x10v3 .rev { border: 1px solid var(--border); border-left: 3px solid var(--blue); border-radius: 11px; overflow: hidden; margin-top: 7px; max-width: 680px; }
.x10v3 .rev-head { display: flex; align-items: center; gap: 14px; padding: 11px 14px; }
.x10v3 .rev-src { font-size: 10.5px; font-weight: 700; padding: 3px 8px; border-radius: 999px; white-space: nowrap; }
.x10v3 .rev-src.exec { background: #E8F0F8; color: #0F4C81; }
.x10v3 .rev-src.fb   { background: #E7EEFC; color: #1D4ED8; }
.x10v3 .rev-src.ota  { background: #FEF3C7; color: #92400E; }
.x10v3 .rev-src.goo  { background: #DCFCE7; color: #166534; }
.x10v3 .rev-total { font-weight: 700; font-size: 20px; padding: 2px 10px; border-radius: 10px; }
.x10v3 .rev-meta { font-size: 12.5px; color: var(--v3-mut); margin-top: 2px; }
.x10v3 .rev-pills { display: flex; flex-wrap: wrap; gap: 6px; padding: 0 14px 11px; }
.x10v3 .rev-pill { display: flex; align-items: center; gap: 6px; border: 1px solid var(--border); border-radius: 999px; padding: 3px 4px 3px 10px; font-size: 12px; white-space: nowrap; }
.x10v3 .rev-grid { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 10px; padding: 11px 14px 12px; border-top: 1px solid var(--v3-bd2); }
.x10v3 .rev-group { border: 1px solid var(--border); border-radius: 10px; overflow: hidden; }
.x10v3 .rev-group-head { display: flex; align-items: center; gap: 8px; padding: 7px 10px; background: var(--v3-sub); border-bottom: 1px solid var(--v3-bd2); font-weight: 700; font-size: 12.5px; }
.x10v3 .rev-item { display: flex; align-items: center; gap: 9px; padding: 4px 10px; font-size: 12.5px; }
.x10v3 .rev-item .bar { width: 50px; height: 5px; border-radius: 999px; background: var(--v3-bd2); flex: none; }
.x10v3 .rev-item .bar > i { display: block; height: 5px; border-radius: 999px; }
.x10v3 .rev-foot { display: flex; align-items: center; gap: 11px; padding: 8px 14px; border-top: 1px solid var(--v3-bd2); background: var(--card); }
.x10v3 .score { font-weight: 700; font-size: 12.5px; min-width: 24px; text-align: center; padding: 2px 6px; border-radius: 6px; }
.x10v3 .score.low  { color: #991B1B; background: #FEE2E2; }
.x10v3 .score.mid  { color: #92400E; background: #FEF3C7; }
.x10v3 .score.good { color: #166534; background: #DCFCE7; }

/* ---------- modal สร้างกลุ่ม ---------- */
.x10v3-modal { position: fixed; inset: 0; background: var(--backdrop); display: flex; align-items: center; justify-content: center; z-index: 60; }
/* กล่องสร้างห้อง — จัดใหม่ 2026-08-29 (Boss: ตัวอักษรใหญ่ไป + ไม่เป็นระเบียบ)
   ปัญหาเดิม: .seg button { flex:1 } บีบชิปหมวด 10 อันให้อยู่แถวเดียว
   ชื่อยาวเลยตัดคำกลางคำ ("แอ ดมิน" / "แม่ บ้าน") → ให้ wrap + กว้างตามข้อความ */
.x10v3-modal .box { width: 400px; max-width: 94vw; max-height: 88vh; overflow-y: auto;
  background: var(--card); color: var(--text); border-radius: 14px; box-shadow: var(--shadow-modal); padding: 18px 20px; }
.x10v3-modal .box h3 { margin: 0 0 14px; font-size: 15.5px; font-weight: 700; }
.x10v3-modal .box label { display: block; font-size: 11.5px; font-weight: 600; color: var(--v3-mut);
  margin: 0 0 5px; letter-spacing: .01em; }
/* ช่องกรอกในกล่องนี้เล็กลงกว่า input กลาง (15px/10px) ที่บวมเกินไปในโมดัล
   ⚠️ บนมือถือปล่อยให้กฎ 16px ของ style.css ชนะ — ต่ำกว่า 16px แล้ว iOS จะซูมหน้าจอตอนโฟกัส */
.x10v3-modal .box input { font-size: 13.5px; padding: 8px 11px; margin-bottom: 13px; border-radius: 8px; }
@media (max-width: 860px) { .x10v3-modal .box input { font-size: 16px; } }

/* หมวด: ชิปห่อบรรทัดได้ กว้างตามชื่อจริง ไม่ถูกบีบจนตัดคำ */
.x10v3-modal .seg { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 12px; }
.x10v3-modal .seg button { flex: 0 0 auto; max-width: 100%; border: 1px solid var(--border);
  background: var(--card); color: var(--v3-mut); border-radius: 999px; padding: 6px 12px;
  font: 600 12.5px inherit; line-height: 1.35; cursor: pointer; white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis; transition: background .12s, border-color .12s, color .12s; }
.x10v3-modal .seg button:hover { border-color: var(--blue); color: var(--text); }
.x10v3-modal .seg button[aria-pressed="true"] { border-color: var(--blue); background: var(--v3-me); color: var(--blue); }
/* ประเภท (เปิด/ปิด) มี 2 ปุ่ม — ให้แบ่งครึ่งเต็มความกว้าง อ่านง่ายกว่าชิปกลม */
.x10v3-modal .seg.two { flex-wrap: nowrap; margin-bottom: 16px; }
.x10v3-modal .seg.two button { flex: 1 1 0; border-radius: 9px; padding: 9px 6px; white-space: normal; }
/* เส้นคั่นก่อนแถวปุ่ม — แยกส่วนกรอกกับส่วนยืนยันให้เป็นระเบียบ */
.x10v3-modal .acts { display: flex; gap: 8px; justify-content: flex-end;
  border-top: 1px solid var(--v3-bd2); padding-top: 14px; margin-top: 2px; }
.x10v3-modal .acts .btn { font-size: 13px; padding: 8px 16px; }

/* มือถือ (Boss: มือถือเป็นหลัก) — กล่องชิดขอบล่าง ปุ่มยืนยันกดถึงด้วยนิ้วโป้ง */
@media (max-width: 620px) {
  .x10v3-modal { align-items: flex-end; }
  .x10v3-modal .box { width: 100%; max-width: 100%; max-height: 90vh;
    border-radius: 16px 16px 0 0; padding: 16px 16px calc(16px + env(safe-area-inset-bottom)); }
  .x10v3-modal .seg button { padding: 7px 12px; font-size: 12.5px; }   /* นิ้วกดโดน */
  .x10v3-modal .acts .btn { flex: 1; padding: 11px 12px; }             /* ปุ่มเต็มแถว กดง่าย */
}

/* ---------- ไม่ย่อข้อความแล้ว (Boss สั่ง 2026-08-21) ----------
   เดิม line-clamp 4 บรรทัด + ปุ่ม "แสดงเพิ่ม" — สรุป KPI ยาวโดยธรรมชาติ
   ย่อแล้วต้องกดทุกใบ เลยโชว์เต็มทุกข้อความ ปล่อยให้กล่องแชทเลื่อนแทน
   กฎ .v3-clamped ถูกลบทิ้ง ไม่ใช่แค่ปิด เพื่อไม่ให้พลาดกลับมาย่ออีก */
/* การ์ดรีวิว: ต้นฉบับถูกซ่อน แต่ยัง copy ได้ถ้าเปิดดู */
.x10v3 #messages .msg-text.v3-rev-raw[hidden] { display: none; }
/* อัลบั้มเดิมใช้ grid-template-columns inline — v3 ปล่อยให้ของเดิมคุมจำนวนคอลัมน์ */
.x10v3 #messages .album-grid.post-imgs { grid-template-columns: inherit; }
.x10v3 #messages .album-img { border-radius: 12px; border: none; }   /* Boss สั่ง 2026-08-27: ลบเส้นรอบภาพ */

/* ---------- โหมดมืด: ป้ายช่องทางรีวิว (ZIP กำหนดสีไว้ชุดเดียว อ่านไม่ออกบนพื้นเข้ม) ---------- */
html[data-theme="dark"] .x10v3 .rev-src.exec { background: #1E3A5F; color: #BFDBFE; }
html[data-theme="dark"] .x10v3 .rev-src.fb   { background: #1E306B; color: #C7D7FE; }
html[data-theme="dark"] .x10v3 .rev-src.ota  { background: #4A3208; color: #FDE68A; }
html[data-theme="dark"] .x10v3 .rev-src.goo  { background: #0F3D24; color: #A7F3D0; }
/* แถบคะแนนในรายการ: ZIP ใช้ currentColor → จางเกินบนพื้นเข้ม */
html[data-theme="dark"] .x10v3 .rev-item .bar { background: #2A3947; }

/* ---------- มือถือ: การ์ดรีวิว ZIP ตรึง 2 คอลัมน์ → ป้ายคะแนนถูกบีบตกขอบ ---------- */
@media (max-width: 620px) {
  .x10v3 .rev-grid { grid-template-columns: 1fr; }
  .x10v3 .rev-item { gap: 7px; }
  .x10v3 .rev-item .bar { width: 38px; }
  .x10v3 .rev-head { flex-wrap: wrap; gap: 8px; }
  .x10v3 .post-imgs .post-img { width: 100%; height: 150px; }
  .x10v3 .post-imgs.single .post-img { width: 100%; height: 200px; }
}


/* =====================================================================
 * X10 Chat — UI v3 · SHELL  (จาก "X10 Chat v3 (standalone).html" ของจริง)
 * ค่าทุกตัวคัดมาจากไฟล์ดีไซน์ ไม่ได้เดา:
 *   THEME.light  card #FFFFFF · sub #F4F6F9 · bd #E2E8F0 · bd2 #EEF2F7
 *                txt #1E293B · mut #556377 · acc #0F4C81 · side #0A3A63
 *                meBg #E8F0F8 · up #166534 · down #991B1B
 *   THEME.dark   card #111C28 · sub #18242F · bd #2A3849 · bd2 #22303D
 *                txt #E5EAF0 · mut #9AA9BA · acc #7FBAEC · side #0B1520
 *                meBg #17293C · up #34D399 · down #F87171
 * ฟอนต์: Noto Sans Thai · แถบข้าง 300px น้ำเงินเข้ม · main = พื้น card
 * เปลี่ยนแค่การมองเห็น ข้อมูล/ระบบเดิมไม่แตะ
 * =================================================================== */
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+Thai:wght@400;500;600;700&display=swap');

/* ---- token ของดีไซน์จริง (ผูกกับตัวแปรเดิมของแอป) ---- */
:root {
  --v3-card: #FFFFFF; --v3-bd: #E2E8F0;
  /* ⚠️ ชุดสี/สีเองของผู้ใช้ต้องไหลมาถึงแถบข้างด้วย (Boss แจ้ง 2026-08-24 "กดแล้วสีไม่เปลี่ยน")
     เดิม --v3-side/--v3-acc ฮาร์ดโค้ด #0A3A63/#0F4C81 ไว้ และ .x10v3 .sidebar เจาะจงกว่า
     .sidebar ใน style.css จึงชนะเสมอ → เปลี่ยนชุดสีแล้วแถบข้างไม่ขยับ
     ผูกกับ --side-bg/--blue (ที่ block html[data-accent=...] เปลี่ยนให้) แล้ว fallback เป็นค่าเดิม */
  --v3-acc: var(--blue, #0F4C81);
  /* ⚠️ ไม่ผูก --v3-side กับ --side-bg ตรงๆ ในโหมดสว่างที่ "ไม่เลือกชุดสี"
     เพราะ :root ของ style.css ตั้ง --side-bg: #FFFFFF (ดีไซน์แถบข้างขาว)
     แต่สกิน v3 บังคับตัวอักษรแถบข้างเป็น #fff → ขาวบนขาว อ่านไม่ออก
     ค่าเริ่มต้นจึงคงน้ำเงินเข้มของ v3 ไว้ แล้วให้ block html[data-accent=...]
     กับสีเอง (inline --v3-side จาก app.js) มาทับเป็นรายกรณี */
  --v3-side: #0A3A63; --v3-side-txt: #B9CBDD; --v3-side-nav: #9FB6CC;
  --v3-side-sec: #8FAAC4; --v3-side-hover: rgba(255,255,255,.08);
  --v3-side-active: rgba(255,255,255,.13);
  /* ห้องที่กำลังเปิดอยู่ — เข้มกว่า hover/active เดิมชัดเจน ไม่งั้นแยกไม่ออก */
  --v3-side-cur: rgba(255,255,255,.24);
}
html[data-theme="dark"] {
  --v3-card: #111C28; --v3-bd: #2A3849;
  --v3-acc: var(--blue, #7FBAEC);
  --v3-side: #0B1520; --v3-side-txt: #9AA9BA; --v3-side-nav: #8798AA;
  --v3-side-sec: #7E8FA2;
  /* พื้นแถบข้างธีมมืดเข้มมาก ขาวโปร่งต้องแรงขึ้นจึงจะเห็นต่าง */
  --v3-side-cur: rgba(255,255,255,.20);
}

/* ฟอนต์ยกไปกำหนดที่ body ใน style.css แล้ว (Kanit) — บรรทัดนี้เคยทับจนเปลี่ยนฟอนต์ไม่ขึ้น
   .x10v3 เจาะจงกว่า body และ x10-ui.css โหลดทีหลัง จึงชนะทุกครั้ง */
/* ⚠️ ห้ามใส่ font-family/font-size ที่ .x10v3
   .x10v3 อยู่บน <body> เอง → inherit = รับจาก <html> = ฟอนต์ default ของเบราว์เซอร์
   (Times New Roman) และ .x10v3 เจาะจงกว่า body จึงชนะ ทำให้ฟอนต์ Kanit ไม่ขึ้น
   ปล่อยว่างไว้ ให้กฎ body ใน style.css เป็นเจ้าของฟอนต์จุดเดียว */
.x10v3 #app { background: var(--v3-sub); }

/* ---------- แถบข้าง: 300px น้ำเงินเข้ม ---------- */
.x10v3 .sidebar {
  width: 300px; background: var(--v3-side); color: var(--v3-side-strong, #fff);
  border-right: 0; box-shadow: none;
}
.x10v3 .sidebar-head { padding: 16px 16px 10px; border-bottom: 0; }
.x10v3 .sidebar-head .brand { font-weight: 700; font-size: 17px; color: var(--v3-side-strong, #fff); }
.x10v3 .sidebar-head .icon-btn {
  width: 30px; height: 30px; border-radius: 9px;
  background: transparent; color: #D9E4EE; font-size: 15px;
}
.x10v3 .sidebar-head .icon-btn:hover { background: var(--v3-side-hover); color: var(--v3-side-strong, #fff); }
/* ปุ่ม ＋ สร้างกลุ่ม = พื้นยกขึ้นเล็กน้อย ตามดีไซน์ */
.x10v3 .sidebar-head .icon-btn:last-child { background: rgba(255,255,255,.12); color: var(--v3-side-strong, #fff); }

.x10v3 .sidebar-me {
  margin: 0 12px 10px; padding: 6px 8px; border-radius: 10px;
  background: transparent; border: 0;
}
.x10v3 .sidebar-me:hover { background: var(--v3-side-hover); }
.x10v3 .me-name { font-weight: 600; font-size: 14px; color: var(--v3-side-strong, #fff); }
.x10v3 .me-status { font-size: 11.5px; color: #B9CBDD; }

/* ---------- เมนู: กริด 2 คอลัมน์ ---------- */
.x10v3 .side-nav {
  display: grid; grid-template-columns: 1fr 1fr; gap: 2px 6px; margin: 0 12px 4px; padding: 0;
}
.x10v3 .side-nav .nav-btn {
  display: flex; align-items: center; gap: 9px;
  border: 0; background: transparent; cursor: pointer;
  padding: 7px 8px; border-radius: 8px; font: 13px inherit; color: var(--v3-side-nav);
}
.x10v3 .side-nav .nav-btn .nav-icon { font-size: 14px; flex: none; }
.x10v3 .side-nav .nav-btn .nav-label { flex: 1; text-align: left; min-width: 0; }
.x10v3 .side-nav .nav-btn:hover { background: var(--v3-side-hover); color: var(--v3-side-strong, #fff); }
.x10v3 .side-nav .nav-btn.active { color: var(--v3-side-strong, #fff); font-weight: 700; background: transparent; }
.x10v3 .side-admin { margin: 0 12px 4px; padding: 0; }
.x10v3 .side-admin .nav-btn {
  width: 100%; display: flex; align-items: center; gap: 9px;
  border: 0; background: transparent; cursor: pointer;
  padding: 7px 8px; border-radius: 8px; font: 13px inherit; color: var(--v3-side-nav);
}
.x10v3 .side-admin .nav-btn:hover { background: var(--v3-side-hover); color: var(--v3-side-strong, #fff); }
.x10v3 .side-admin .nav-btn-label { flex: 1; text-align: left; }
.x10v3 .nav-badge, .x10v3 .chan-unread {
  background: #DC2626; color: #fff; font-weight: 700; font-size: 10px;
  padding: 3px 6px; border-radius: 999px; flex: none; min-width: 0; height: auto;
}
.x10v3 .nav-dot { width: 7px; height: 7px; border-radius: 50%; background: #F59E0B; flex: none; }

/* ---------- ช่องค้นหา: พื้นโปร่งบนน้ำเงิน ---------- */
/* ช่องค้นหา + ปุ่ม DM อยู่แถวเดียวกัน (Boss สั่ง 2026-09-04)
   ⚠️ .side-search เดิมเป็น width:calc(100%-24px) + margin ซ้ายขวา ถ้าปล่อยไว้ในแถว flex
      มันจะดันปุ่ม DM ตกบรรทัด/ล้นออกนอกแถบข้าง → ต้องเปลี่ยนเป็น flex:1 1 auto + min-width:0 */
.x10v3 .side-search-row {
  display: flex; align-items: center; gap: 8px; margin: 10px 12px;
}
.x10v3 .side-search-row .side-search {
  /* ⚠️ ต้องเป็น flex:1 1 0 + width:0 ไม่ใช่ 1 1 auto
     ถ้าใช้ auto ช่องค้นหาจะยึดความกว้างเดิม (calc(100%-24px)) เป็นฐานแล้วไม่ยอมหด
     → ปุ่ม DM ล้นออกนอกแถบข้าง 23px บนมือถือ (เจอตอนเทส 360px) */
  margin: 0; width: 0; flex: 1 1 0; min-width: 0;
}
.x10v3 .side-search {
  padding: 8px 11px;
  background: rgba(255,255,255,.08); border: 0; border-radius: 9px;
  color: var(--v3-side-strong, #fff); font-size: 13.5px;
}
/* ปุ่ม DM ข้างช่องค้นหา — กดแล้วเด้งไปหน้าแชทส่วนตัว
   ⚠️ flex:0 0 auto ไม่ให้โดนช่องค้นหาบีบจนหาย */
.x10v3 .side-dm-btn {
  position: relative; flex: 0 0 auto;
  display: inline-flex; align-items: center; justify-content: center;
  width: 36px; height: 36px; border-radius: 9px; cursor: pointer;
  border: 0; background: rgba(255,255,255,.08); font-size: 16px; line-height: 1;
}
.x10v3 .side-dm-btn:hover { background: rgba(255,255,255,.16); }
.x10v3 .side-dm-badge {
  position: absolute; top: -4px; right: -4px; min-width: 16px; height: 16px;
  padding: 0 4px; border-radius: 999px; background: var(--red, #e01e5a); color: #fff;
  font-size: 10px; font-weight: 700; line-height: 16px; text-align: center;
}
.x10v3 .side-dm-badge.hidden { display: none; }
.x10v3 .side-search:focus { outline: 0; background: rgba(255,255,255,.14); }
.x10v3 .side-search::placeholder { color: #8FAAC4; }

/* ---------- หัวหมวด + รายการห้อง ---------- */
.x10v3 .side-section,
.x10v3 .chan-sec {
  padding: 11px 16px 4px; font-weight: 700; font-size: 11px;
  letter-spacing: .05em; color: var(--v3-side-sec); background: transparent; border: 0;
}
.x10v3 .side-section .mini-hint,
.x10v3 .side-section .online-badge,
.x10v3 .chan-sec .count, .x10v3 .chan-sec .chan-sec-n { font-weight: 400; opacity: .75; }
.x10v3 .chan-item, .x10v3 .user-item {
  width: 100%; display: flex; align-items: center; gap: 9px; margin: 0;
  padding: 7px 16px; border-radius: 0; font-size: 13.5px;
  background: transparent; color: var(--v3-side-txt); cursor: pointer;
}
.x10v3 .chan-item:hover, .x10v3 .user-item:hover { background: var(--v3-side-hover); color: var(--v3-side-strong, #fff); }
/* ห้องที่กำลังเปิดอยู่ — Boss/พี่อ้อมแจ้ง 2026-08-26: มองไม่ออกว่าอยู่ห้องไหน
   เดิมมีแค่พื้นขาวโปร่ง 13% + ตัวหนา ซึ่งกลืนกับห้องอื่นเกือบหมด
   เน้น 4 ทาง: ตัวใหญ่ขึ้น · แถบสีซ้าย · พื้นเข้มขึ้น · ลอยขึ้นมา (เงา+ขยาย)
   ⚠️ แถบข้าง v3 เป็นพื้นน้ำเงินเข้ม/ดำ → ตัวเน้นต้องเป็นสีขาว ไม่ใช่ --blue */
.x10v3 .chan-item.active {
  /* ห้องที่กำลังเปิดอยู่ — Boss/พี่อ้อมแจ้ง 2026-08-26
     ⚠️ ห้ามใช้ transform: scale() — แถวจะยื่นเกินขอบแถบข้าง (300→306px)
        ไปทับพื้นที่แชท ทำให้ "แถบข้างทั้งแถบดูใหญ่ขึ้น" (Boss แจ้งรอบ 2)
     → เน้นภายในกล่องเดิมเท่านั้น: พื้นสว่างขึ้น + แถบซ้ายหนา + ตัวใหญ่ */
  background: var(--v3-side-cur, rgba(255,255,255,.22));
  color: #fff; font-weight: 700;
  font-size: 15px;                          /* ห้องอื่น 13.5px */
  position: relative;
  padding-left: 22px;                       /* เว้นที่แถบสี ตัวหนังสือไม่ขยับ */
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.14);
}
/* แถบขาวด้านซ้าย = ตัวชี้ "อยู่นี่" เห็นด้วยหางตา ไม่ต้องอ่าน */
.x10v3 .chan-item.active::before {
  content: ''; position: absolute; left: 0; top: 0; bottom: 0;
  width: 5px; background: var(--v3-side-strong, #fff);
}
/* ไอคอน/ชื่อห้องสว่างเต็มที่ ไม่หมองเหมือนห้องที่ไม่ได้เปิด */
.x10v3 .chan-item.active .chan-ic { opacity: 1; }
.x10v3 .chan-item.chan-locked { color: var(--v3-side-dim, #7E93A8); }
.x10v3 .side-scroll { flex: 1; overflow-y: auto; padding-bottom: 14px; }

/* ---------- main: พื้น card ---------- */
.x10v3 .main { background: var(--v3-card); color: var(--text); }
.x10v3 .chat-head {
  padding: 14px 20px 12px; border-bottom: 1px solid var(--v3-bd);
  background: var(--v3-card); box-shadow: none;
}
.x10v3 .chat-name { font-weight: 700; font-size: 17px; }
.x10v3 .chat-topic { font-size: 12.5px; color: var(--v3-mut); margin-top: 3px; }
.x10v3 .lock-badge {
  border: 1px solid var(--v3-bd); background: var(--v3-sub); color: var(--v3-mut);
  font-size: 11px; padding: 2px 9px; border-radius: 999px;
}
/* ปุ่มหัวห้อง = กล่องสี่เหลี่ยมมุมมน 36px มีเส้นขอบ */
.x10v3 .chat-actions .icon-btn {
  width: 36px; height: 36px; border: 1px solid var(--v3-bd); border-radius: 10px;
  background: transparent; color: var(--v3-mut);
}
.x10v3 .chat-actions .icon-btn:hover { border-color: var(--v3-acc); color: var(--v3-acc); }

/* ---------- ข้อความ ---------- */
/* Boss สั่ง 2026-08-27: "ตัวของแชทในช่องใหญ่ไป ปรับไปขนาดปกติ/เริ่มต้น"
   ลด padding ลงใกล้ค่าเดิมของแอป (.messages = 12px) ให้ข้อความไม่ลอยห่างขอบ */
.x10v3 .messages { background: var(--v3-card); padding: 10px 12px 6px; }
.x10v3 .post-text { font-size: 14px; line-height: 1.55; }
.x10v3 .post-name { font-size: 13.5px; }
/* เดสก์ท็อปเท่านั้น: ลดขนาดข้อความ+รูปอีกขั้น (Boss สั่ง 2026-08-27 "ในคอมลดขนาด ภาพก็ด้วย")
   มือถือไม่แตะ — จอเล็กอยู่แล้ว ลดอีกจะอ่านลำบาก */
@media (min-width: 861px) {
  .x10v3 .messages { padding: 8px 14px 6px; }
  .x10v3 .post-text, .x10v3 #messages .msg-text { font-size: 13.5px; line-height: 1.5; }
  .x10v3 .post-name, .x10v3 #messages .msg-name { font-size: 13px; }
  /* รูปในห้องแชทเล็กลง 320 → 260px */
  .x10v3 #messages img.msg-image,
  .x10v3 #messages video.msg-video { max-width: min(260px, 100%); }
  .x10v3 #messages .album-grid { width: 272px; }
}
.x10v3 .day-sep span {
  font-size: 11.5px; color: var(--v3-mut); background: var(--v3-bd2);
  padding: 3px 13px; border-radius: 999px; border: 0;
}
.x10v3 .msg.system .msg-sys {
  font-size: 11.5px; color: var(--v3-mut); background: var(--v3-bd2);
  padding: 3px 13px; border-radius: 999px; border: 0;
}

/* ---------- ช่องพิมพ์: การ์ดมุมมน 14px มีเงาบาง ---------- */
/* ดีไซน์: ช่องพิมพ์เป็น "การ์ด" มุมมน 14px มีเงาบาง
   ปุ่มเดิมเป็นลูกตรงของ .composer (ไม่มี wrapper) → ทำ .composer เป็นการ์ดเลย
   ไม่แก้ HTML = onclick/id เดิมอยู่ครบ */
.x10v3 .composer {
  margin: 10px 20px 16px;
  background: var(--v3-card); border: 1px solid var(--v3-bd); border-radius: 14px;
  box-shadow: 0 1px 3px rgba(15,76,129,.08);
  padding: 8px 10px 8px 12px; border-top: 0;
  display: flex; align-items: center; gap: 9px;
}
.x10v3 .composer #msg-input {
  border: 0; outline: 0; background: transparent;
  font-size: 14.5px; color: var(--text); padding: 6px 4px;
}
.x10v3 .composer .icon-btn {
  width: 32px; height: 32px; border: 0; border-radius: 10px;
  background: var(--v3-sub); color: var(--v3-mut); flex: none;
}
.x10v3 .composer .icon-btn:hover { background: var(--v3-me); color: var(--v3-acc); }
.x10v3 .composer .icon-btn.send {
  width: 38px; height: 38px; border-radius: 11px;
  background: #0F4C81; color: #fff;
}
.x10v3 .composer .icon-btn.send:hover { background: #0A3A63; }
.x10v3 .reply-bar {
  border-left: 3px solid var(--v3-acc); background: var(--v3-sub);
  border-radius: 0 10px 10px 0; padding: 8px 12px; margin-bottom: 9px;
  font-size: 12.5px; color: var(--v3-mut);
}

/* ---------- หัวหน้าอื่น ๆ ---------- */
.x10v3 .page-head {
  padding: 15px 20px; border-bottom: 1px solid var(--v3-bd);
  background: var(--v3-card); box-shadow: none;
}
.x10v3 .page-head h2 { font-weight: 700; font-size: 17px; color: var(--v3-acc); }

/* ---------- ปุ่ม / การ์ด / โมดัล ---------- */
.x10v3 .btn {
  border-radius: 9px; font-weight: 600; font-size: 13px; padding: 8px 14px;
  border: 1px solid var(--v3-bd); background: transparent; color: var(--v3-mut);
}
.x10v3 .btn:hover { border-color: var(--v3-acc); color: var(--v3-acc); }
.x10v3 .btn.primary {
  background: #0F4C81; border-color: #0F4C81; color: #fff; padding: 8px 16px;
}
.x10v3 .btn.primary:hover { background: #0A3A63; border-color: #0A3A63; color: #fff; }
.x10v3 .btn.small { font-size: 12px; padding: 5px 12px; }
.x10v3 .card, .x10v3 .modal-box, .x10v3 .pop-menu {
  background: var(--v3-card); border: 1px solid var(--v3-bd); border-radius: 14px;
}
.x10v3 .pop-menu { box-shadow: 0 4px 16px rgba(16,24,40,.10); }

/* ---------- แถบล่างมือถือ + login ---------- */
.x10v3 .bottom-nav { background: var(--v3-card); border-top: 1px solid var(--v3-bd); }
.x10v3 .bottom-nav button { color: var(--v3-mut); }
.x10v3 .bottom-nav button.active { color: var(--v3-acc); }
.x10v3 .login-screen { background: var(--v3-sub); }
.x10v3 .login-card {
  background: var(--v3-card); border: 1px solid var(--v3-bd); border-radius: 16px;
  box-shadow: 0 12px 40px rgba(16,24,40,.18);
}
.x10v3 .login-card input {
  background: var(--v3-sub); border: 1px solid var(--v3-bd); border-radius: 10px;
  padding: 11px 14px; font-size: 14px; color: var(--text);
}
.x10v3 .login-card input:focus { outline: 0; border-color: var(--v3-acc); background: var(--v3-card); }

/* ---------- มือถือ: แถบข้างเป็น drawer ---------- */
@media (max-width: 860px) {
  .x10v3 .sidebar { width: 86vw; max-width: 320px; }
}

/* ============================================================
   iOS safe-area — ต้นเหตุจริงที่ทำให้แก้ใน style.css แล้วไม่ขึ้น
   (Boss แจ้ง 2026-08-21 · ภาพ iOS mockup)

   <body class="x10v3"> ติดตายใน index.html และไฟล์นี้โหลด "หลัง" style.css
   → `.x10v3 .chat-head { padding: 14px 20px 12px }` (บรรทัด 267)
     `.x10v3 .page-head { padding: 15px 20px }`      (บรรทัด 327)
     เป็น shorthand + specificity สูงกว่า = ลบ padding-top ที่ style.css
     ใส่ safe-area ไว้ทิ้งทั้งหมด → หัวห้อง/หัวเพจ กลับไปชิด y=0 ใต้เกาะ/รอยบาก
   → ต้องเขียนทับที่นี่ ด้วย selector .x10v3 เท่ากันและอยู่หลังกว่า

   ใช้ max() กันจอไม่มีรอยบาก (inset=0) ไม่ให้ padding บนหายไปจนหัวห้องแน่น
   ============================================================ */
@supports (-webkit-touch-callout: none) {
  @media (max-width: 860px) {
    .x10v3 .chat-head { padding-top: max(14px, env(safe-area-inset-top)); }
    .x10v3 .page-head { padding-top: max(15px, env(safe-area-inset-top)); }
    /* ไซด์บาร์ v3 เป็น drawer fixed inset:0 → หัวแถบก็ชนรอยบากเหมือนกัน
       เว้นที่ตัว container (มีพื้น --v3-side เต็มตัว) ไม่ใช่ที่ .sidebar-head
       เพราะ .x10v3 .sidebar-head มี shorthand padding ทับอยู่เช่นกัน */
    .x10v3 .sidebar { padding-top: env(safe-area-inset-top); }
    /* หน้า login v3 */
    .x10v3 .login-screen {
      padding-top: env(safe-area-inset-top);
      padding-bottom: env(safe-area-inset-bottom);
      box-sizing: border-box;
    }
  }
}

/* คำติ / คำชม ในการ์ดรีวิว — Boss 2026-08-24 (เดิมข้อความถูกซ่อนแล้วไม่วาดกลับ) */
.x10v3 .rev-note { margin: 0 14px 11px; border: 1px solid var(--v3-bd); border-radius: 9px; padding: 8px 11px; background: var(--v3-sub, var(--card)); }
.x10v3 .rev-note-neg { border-left: 3px solid #DC2626; }
.x10v3 .rev-note-pos { border-left: 3px solid #16A34A; }
.x10v3 .rev-note-h { font-weight: 700; font-size: 12px; margin-bottom: 3px; }
.x10v3 .rev-note-neg .rev-note-h { color: #B91C1C; }
.x10v3 .rev-note-pos .rev-note-h { color: #15803D; }
.x10v3 .rev-note-b { font-size: 13px; line-height: 1.55; white-space: pre-line; overflow-wrap: anywhere; }


/* ---- เลือกชุดสีแล้ว แถบข้างต้องเปลี่ยนตาม ----
   สกิน v3 ทาแถบข้างด้วย --v3-side (ไม่ใช่ --side-bg) และ .x10v3 .sidebar เจาะจงกว่า
   จึงต้องส่งค่าต่อที่นี่ · ชุดสีทุกชุดให้แถบข้างเข้มพอสำหรับตัวอักษรสีขาวของ v3 อยู่แล้ว */
html[data-accent="emerald"],
html[data-accent="violet"],
html[data-accent="slate"],
html[data-accent="terracotta"],
html[data-accent="magenta"],
html[data-accent="teal"],
html[data-accent="maroon"],
html[data-accent="indigo"],
html[data-accent="forest"],
html[data-accent="amberg"],
html[data-accent="navy"],
html[data-accent="rose"],
html[data-accent="plum"] {
  --v3-side: var(--side-bg);
}

/* ---------- แถบห้องแบบใหม่: จุดสีหมวด + ปุ่ม + + แถวสร้างห้องในหมวด (2026-08-24) ---------- */
/* หัวหมวดชื่ออ่านชัดขึ้น (เดิมจาง 11px) และเรียงเป็นแถวเดียวกับป้าย/ปุ่ม */
.x10v3 .chan-sec-btn { display: flex; align-items: center; gap: 8px; }
.x10v3 .chan-sec .grow { flex: 1; min-width: 0; text-align: left; font-size: 12.5px;
  color: var(--v3-side-txt); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.x10v3 .chan-sec-dot { width: 9px; height: 9px; border-radius: 50%; flex: none; }
.x10v3 .chan-sec-car { flex: none; opacity: .65; font-size: 10px; }
/* จำนวนห้อง/คนข้างชื่อหมวด + ปุ่ม 🔔 ปิด-เปิดเตือนทั้งหมวด (Boss สั่ง 2026-08-31) */
.x10v3 .chan-sec-n {
  flex: none; font-size: 10.5px; font-weight: 700; opacity: .6;
  background: rgba(255, 255, 255, .14); border-radius: 9px; padding: 0 6px; line-height: 16px;
}
.x10v3 .chan-sec-bell {
  flex: none; cursor: pointer; font-size: 12px; line-height: 1;
  padding: 3px; border-radius: 6px; opacity: .85;
}
.x10v3 .chan-sec-bell:hover { background: rgba(255, 255, 255, .22); opacity: 1; }
.x10v3 .chan-sec-bell.off { opacity: 1; }
/* หมวดที่ปิดเตือน = ชื่อหมวดหมองลง ให้เห็นจากไกลว่าหมวดนี้เงียบ */
.x10v3 .chan-sec:has(.chan-sec-bell.off) > .grow { opacity: .55; }

/* แถบเตือนว่าเบราว์เซอร์ปิดสิทธิ์แจ้งเตือนอยู่ — ลอยล่าง กลางจอ */
#ntf-perm-bar {
  position: fixed; z-index: 9998; left: 50%; transform: translateX(-50%);
  bottom: calc(12px + env(safe-area-inset-bottom));
  display: flex; align-items: center; gap: 9px;
  max-width: min(560px, calc(100vw - 20px));
  background: #7C2D12; color: #FFEDD5; border: 1px solid #C2410C;
  border-radius: 12px; padding: 9px 11px; font-size: 13px;
  box-shadow: 0 10px 26px rgba(0, 0, 0, .34);
}
/* ⚠️ ตอนเปิดดูรูป (lightbox) ต้องซ่อนแถบนี้ — ไม่งั้นทับแถบเครื่องมือวาด/ปุ่มเซฟด้านล่าง */
body:has(#lightbox:not(.hidden)) #ntf-perm-bar { display: none; }

/* ปุ่ม "แก้/วาดบนรูป" ต้องมีป้ายเห็นชัด — title เฉยๆ มือถือไม่มี hover เลยไม่มีใครรู้ว่ากดได้
   (พี่ป๋องขอ 2026-08-31 "ทำให้ซูม+วาด/พิมพ์ลงภาพได้" ทั้งที่ของมีอยู่แล้วแต่หาไม่เจอ) */
.lb-btn-draw { display: inline-flex; align-items: center; gap: 5px; }
.lb-btn-draw .lb-btn-lb { font-size: 12px; font-weight: 700; white-space: nowrap; }
.lb-btn-draw.active { background: #F97316 !important; color: #fff !important; }
@media (max-width: 768px) {
  /* มือถือจอแคบ: เหลือไอคอนพอ ไม่ให้แถบล้น (ตอนกดเข้าโหมดวาดแล้วมีปุ่มเครื่องมือเยอะ) */
  .lb-btn-draw .lb-btn-lb { display: none; }
}
#ntf-perm-bar .npb-ic { font-size: 16px; flex: none; }
#ntf-perm-bar .npb-tx { flex: 1 1 auto; line-height: 1.35; }
#ntf-perm-bar .npb-how {
  flex: none; cursor: pointer; border: 0; border-radius: 8px;
  background: #FDBA74; color: #7C2D12; font-weight: 800; font-size: 12px; padding: 6px 10px;
}
#ntf-perm-bar .npb-x {
  flex: none; cursor: pointer; border: 0; background: transparent;
  color: #FFEDD5; font-size: 15px; padding: 2px 4px; opacity: .8;
}
/* มือถือ: ยกเหนือแถบแท็บล่าง ไม่ให้ทับปุ่ม */
@media (max-width: 768px) {
  /* มือถือ: กินความกว้างเกือบเต็มจอ ไม่ให้ข้อความหักเป็นก้อนสูง + ยกเหนือแถบแท็บล่าง */
  #ntf-perm-bar {
    bottom: calc(64px + env(safe-area-inset-bottom));
    left: 8px; right: 8px; transform: none; max-width: none;
    font-size: 12px; padding: 8px 10px; gap: 7px;
  }
  #ntf-perm-bar .npb-tx { font-size: 11.5px; line-height: 1.3; }
  #ntf-perm-bar .npb-how { font-size: 11px; padding: 5px 8px; white-space: nowrap; }
}
/* ปุ่ม + ที่หัวหมวด — โผล่ตลอดบนมือถือ (ไม่มี hover) */
.x10v3 .chan-sec-add {
  flex: none; width: 22px; height: 22px; border-radius: 7px; display: flex;
  align-items: center; justify-content: center; font-size: 14px; line-height: 1;
  background: rgba(255, 255, 255, .12); color: var(--v3-side-txt); cursor: pointer;
}
.x10v3 .chan-sec-add:hover { background: rgba(255, 255, 255, .22); }
/* ปุ่มลบหมวด (แอดมิน) — โผล่ตลอดเหมือนปุ่ม + เพราะมือถือไม่มี hover */
.x10v3 .chan-sec-del {
  flex: none; width: 22px; height: 22px; border-radius: 7px; display: flex;
  align-items: center; justify-content: center; font-size: 12px; line-height: 1;
  background: rgba(255, 255, 255, .12); color: var(--v3-side-txt); cursor: pointer; opacity: .75;
}
.x10v3 .chan-sec-del:hover { background: rgba(220, 60, 60, .45); opacity: 1; }
/* แถว "สร้างห้องใน <หมวด>" ใต้ห้องสุดท้ายของหมวด */
.x10v3 .chan-add-row {
  display: flex; align-items: center; gap: 8px; cursor: pointer;
  padding: 5px 16px 5px 30px; font-size: 12.5px; color: var(--v3-side-sec);
}
.x10v3 .chan-add-row:hover { color: var(--v3-side-txt); background: rgba(255, 255, 255, .06); }

/* ============================================================
   ชื่อห้องบนมือถือ — Boss แจ้ง 2026-08-26 (ภาพ Android 360px)
   อาการ: ชื่อ "รูปภาพแก้บัค" ขึ้นแค่ "รูป…" ห้องชื่อยาวมองไม่เห็นเลย
   สาเหตุ: ปุ่มหัวห้อง 4 ตัว × 36px + ช่องไฟ + ป้ายล็อก + padding 40px
           ≈ 220px จากจอ 360px → เหลือให้ชื่อไม่ถึง 100px
   แก้: ยุบทุกอย่างที่ไม่ใช่ชื่อห้องให้เล็กลง แล้วให้ชื่อกินที่ที่เหลือทั้งหมด
        + ยอมให้ชื่อยาวตัด 2 บรรทัดแทนตัด … ตั้งแต่ 3 ตัวอักษร
   ============================================================ */
/* จอแคบ = ซ่อนปุ่มโทร/วิดีโอในหัวห้อง (ย้ายไปอยู่ในเมนู ⋯ แล้ว)
   จอกว้าง = ซ่อนรายการซ้ำในเมนู ⋯ เพราะปุ่มโชว์อยู่ข้างนอกแล้ว */
.only-narrow { display: none; }
@media (max-width: 560px) {
  .hide-narrow { display: none !important; }
  .only-narrow { display: flex; }
  .x10v3 .chat-head { padding-left: 10px; padding-right: 10px; gap: 4px; align-items: flex-start; }
  /* จอแคบ: แท็บเลื่อนชิดซ้ายกว่าเดิม + ตัวเล็กลง ไม่ให้ทับปุ่มเมนู/ชื่อห้อง */
  .x10v3 .chat-meta { left: 8px; gap: 2px; }
  .x10v3 .chat-meta-btn { font-size: 10.5px; padding: 1px 6px 2px; }
  /* ปุ่มเล็กลง 36→32 และช่องไฟแคบ — คืนที่ให้ชื่อ ~20px */
  .x10v3 .chat-actions { gap: 1px; flex: 0 0 auto; }
  .x10v3 .chat-actions .icon-btn { width: 32px; height: 32px; border-radius: 8px; }
  .x10v3 .chat-head > .icon-btn { width: 32px; height: 32px; flex: 0 0 auto; }
  /* ชื่อห้องกินที่ที่เหลือทั้งหมด และยาวได้ 2 บรรทัด */
  .x10v3 .chat-title { flex: 1 1 auto; min-width: 0; }
  .x10v3 .chat-name {
    font-size: 15.5px; line-height: 1.25;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
    overflow: hidden; white-space: normal; text-overflow: unset;
  }
  /* ป้าย 🔒 ล็อก ไม่ควรแย่งที่ชื่อ — ย่อเหลือไอคอนเดี่ยว (ข้อความซ่อนอยู่แล้วที่ style.css) */
  .x10v3 .lock-badge { padding: 1px 5px; font-size: 10px; flex: 0 0 auto; }
  /* หัวข้อห้องบรรทัดล่าง ตัวเล็กลงหน่อย ไม่ให้หัวห้องสูงเกิน */
  .x10v3 .chat-topic { font-size: 11.5px; margin-top: 1px; }
}

/* ============================================================
   ป้าย "คำขอเข้าห้อง" — แยกจากป้ายข้อความไม่อ่าน (Boss สั่ง 2026-08-26)
   เดิมใช้ class .chan-unread ตัวเดียวกัน = แดงเหมือนกันเป๊ะ
   → Boss เข้าใจว่ามีข้อความค้าง กดอ่านเท่าไหร่ก็ไม่หาย (เพราะคนละเรื่อง)
   ใหม่: สีส้ม + ไอคอนคน → รู้ทันทีว่า "มีคนขอเข้าห้อง" ไม่ใช่ข้อความ
   หมายเหตุ: ป้ายนี้ฝั่ง server ส่งให้เฉพาะแอดมิน/เจ้าของห้องอยู่แล้ว
             (/api/my/join-requests กรองด้วย role='owner' หรือ admin)
   ============================================================ */
.chan-joinreq {
  display: inline-flex; align-items: center; gap: 3px;
  background: var(--amber, #D98324); color: #fff;
  font-size: 10.5px; font-weight: 700; line-height: 1;
  padding: 3px 6px; border-radius: 999px; flex: 0 0 auto;
}
.chan-joinreq .ic { width: 11px; height: 11px; stroke: #fff; fill: none; }
/* ในเมนูจัดการห้อง (ปุ่มยาว) ให้ชิดขวา */
.head-more .chan-joinreq { margin-left: auto; }

/* ---- แถบแท็บใต้หัวห้อง — ธีม v3 (Boss 2026-08-29) ---- */
.x10v3 .room-tabs { background: var(--v3-card); border-bottom: 1px solid var(--v3-bd); padding: 0 20px; }
.x10v3 .rt-tab { color: var(--v3-mut); }
.x10v3 .rt-tab:hover { color: var(--text); }
.x10v3 .rt-tab.rt-on { color: var(--v3-acc); border-bottom-color: var(--v3-acc); }
.x10v3 .rt-add { color: var(--v3-mut); background: var(--v3-card); }
.x10v3 .rt-add:hover { background: var(--v3-sub); color: var(--v3-acc); }
.x10v3 .rt-soon { background: var(--v3-sub); color: var(--v3-mut); }
@media (max-width: 860px) { .x10v3 .room-tabs { padding: 0 8px; } }

/* ---- โฟลเดอร์ในห้อง — ธีม v3 (Boss 2026-08-29) ---- */
.x10v3 .gal-tabs { border-bottom-color: var(--v3-bd); }
.x10v3 .gal-tab { color: var(--v3-mut); }
.x10v3 .gal-tab.gal-on { color: var(--v3-acc); border-bottom-color: var(--v3-acc); }
.x10v3 .fd-row { background: var(--v3-card); border-color: var(--v3-bd); color: var(--text); }
.x10v3 .fd-row:hover { border-color: var(--v3-acc); background: var(--v3-sub); }
.x10v3 .fd-ct { background: var(--v3-sub); color: var(--v3-mut); }
.x10v3 .fd-back { color: var(--v3-acc); }
.x10v3 .fd-tick { background: var(--v3-sub); border-color: var(--v3-bd); }
.x10v3 #fd-out .fd-head { background: var(--v3-card); }

/* ============================================================
   หน้าแชทหลักตามสเปค Boss 2026-08-29
   หัวห้อง (สมาชิก/ปักหมุด) · กล่องพิมพ์ 3 แถว · ตัวหนา-เอียง-โค้ด
   ⚠️ ต้องอยู่ใน .x10v3 ให้หมด — สกิน v3 คือของที่เห็นจริงในห้อง
   ============================================================ */
/* สมาชิก/ปักหมุด = ชิปเล็กต่อท้ายชื่อห้อง บรรทัดเดียวกัน (Boss สั่ง 2026-09-04)
   เดิมเป็นบรรทัดที่ 2 ใต้ชื่อห้องทำให้หัวห้องสูง 2 บรรทัด
   เคยลองทำเป็นหูแฟ้มเกาะขอบบน/ขอบล่างของหัวห้อง — บนคอมห่างชื่อห้องจนดูไม่ออกว่าเป็นของห้องไหน
   และแบบขอบล่างยังลอยไปทับข้อความแรกด้วย → มาอยู่ติดชื่อห้องเลย อ่านง่ายสุด ไม่เพิ่มความสูง
   ⚠️ flex:0 0 auto กันโดนชื่อห้องยาวๆ บีบจนเลขหาย */
.x10v3 .chat-meta {
  display: flex; align-items: center; gap: 4px; flex: 0 0 auto;
}
.x10v3 .chat-meta-btn {
  display: inline-flex; align-items: center; gap: 4px;
  border: 1px solid var(--v3-bd); background: var(--v3-sub); cursor: pointer;
  font-family: inherit; font-size: 11.5px; color: var(--v3-mut);
  padding: 1px 8px; border-radius: 999px; line-height: 1.5; white-space: nowrap;
}
.x10v3 .chat-meta-btn:hover { background: var(--v3-card); color: var(--text); }
.x10v3 .chat-meta-btn.hidden { display: none; }

/* ---- กล่องพิมพ์ 3 แถว ---- */
.x10v3 .composer { display: block; padding: 0; }
/* ⚠️ ห้ามใส่ overflow:hidden ที่ .composer — เมนู ＋ / แผงอีโมจิ / รายชื่อ @ วางไว้
   bottom:100% (โผล่เหนือกล่องพิมพ์) จะโดนตัดหายทั้งแผง กดปุ่มแล้วเหมือนไม่มีอะไรเกิดขึ้น
   (Boss แจ้ง 2026-09-02 "ใน dm กดรูปบวกไม่เกิดอะไรขึ้น") มุมมนใช้ border-radius พอแล้ว */
.x10v3 .composer:focus-within { border-color: var(--v3-acc); box-shadow: 0 0 0 1px var(--v3-acc); }
/* แถบจัดข้อความ: อยู่ในแถวปุ่มล่างข้างไมค์ ยุบอยู่หลังปุ่ม ☰ กดแล้วคลี่ออกข้าง (Boss สั่ง 2026-09-04)
   ⚠️ ห้าม flex-wrap:wrap — แถวปุ่มล่างจะตกบรรทัดดันกล่องพิมพ์สูงขึ้นบนมือถือ
      จอแคบให้เลื่อนแนวนอนแทน (ปุ่มครบ 8 ตัวทุกจอ ไม่ซ่อนเหมือนของเดิม) */
.x10v3 .cp-fmt {
  display: flex; align-items: center; gap: 1px; flex-wrap: nowrap;
  overflow-x: auto; scrollbar-width: none; min-width: 0;
  padding: 0 2px; margin-left: 2px;
  border-left: 1px solid var(--v3-bd);
}
.x10v3 .cp-fmt::-webkit-scrollbar { display: none; }
.x10v3 .cp-fmt.hidden { display: none; }
.x10v3 .cp-fmt-tg.on { background: var(--v3-sub); color: var(--text); }
.x10v3 .cp-fbtn {
  border: 0; background: transparent; cursor: pointer; font-family: inherit;
  font-size: 13px; color: var(--v3-mut); min-width: 26px; height: 26px; flex: 0 0 auto;
  border-radius: 4px; display: inline-flex; align-items: center; justify-content: center;
}
.x10v3 .cp-fbtn:hover { background: var(--v3-sub); color: var(--text); }
.x10v3 .cp-fsep { width: 1px; height: 16px; background: var(--v3-bd); margin: 0 4px; }
.x10v3 .composer #msg-input {
  display: block; width: 100%; padding: 10px 12px;
  min-height: 40px; max-height: 150px; resize: none;
  background: transparent; border: 0; border-radius: 0; box-shadow: none;
}
.x10v3 .composer #msg-input:focus {
  background: transparent; border: 0; box-shadow: none; outline: 0;
}
.x10v3 .cp-act {
  display: flex; align-items: center; justify-content: space-between;
  gap: 8px; padding: 6px 8px 7px;
}
.x10v3 .cp-act-l { display: flex; align-items: center; gap: 2px; flex-wrap: wrap; }
.x10v3 .cp-act .icon-btn { width: 30px; height: 30px; font-size: 15px; }
/* ปุ่มส่ง: เขียวเมื่อพิมพ์แล้ว เทาเมื่อว่าง (ตามสเปค) */
.x10v3 .composer .icon-btn.send { background: #ccc; color: #fff; transition: background .12s ease; }
.x10v3 .composer.has-text .icon-btn.send { background: #007a5a; }
.x10v3 .composer .icon-btn.send:hover { filter: brightness(1.06); }

/* ---- ตัวหนา/เอียง/ขีดฆ่า/โค้ด ในข้อความ ---- */
.x10v3 .msg-code {
  font-family: ui-monospace, 'SFMono-Regular', Menlo, monospace;
  font-size: .88em; background: var(--v3-sub); color: #c7254e;
  padding: 1px 5px; border-radius: 4px; border: 1px solid var(--v3-bd);
}
[data-theme="dark"] .x10v3 .msg-code { color: #ff8fa3; }

/* ---- รายการปักหมุด ---- */
.x10v3 .pin-list { display: flex; flex-direction: column; gap: 6px; }
.x10v3 .pin-row {
  display: grid; grid-template-columns: 32px 1fr; gap: 10px; align-items: start;
  padding: 9px 11px; border: 1px solid var(--v3-bd); border-radius: 8px; cursor: pointer;
}
.x10v3 .pin-row:hover { background: var(--v3-sub); }

@media (max-width: 860px) {
  /* จอแคบ: คลี่แถบจัดข้อความแล้วให้ปุ่มอื่นยุบหลบ แถบเลื่อนเอาเองได้ ไม่ตกบรรทัด */
  .x10v3 .cp-act-l { flex-wrap: nowrap; min-width: 0; }
  .x10v3 .cp-act-l:has(.cp-fmt:not(.hidden)) > .icon-btn:not(.cp-fmt-tg):not(#btn-voice) { display: none; }
  /* บอกให้รู้ว่ายังเลื่อนดูปุ่มที่เหลือได้ — ไม่งั้นเห็นแค่ 6 ตัวแล้วนึกว่ามีเท่านี้ */
  .x10v3 .cp-fmt {
    -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 18px), transparent);
            mask-image: linear-gradient(90deg, #000 calc(100% - 18px), transparent);
  }
  .x10v3 .cp-fmt.at-end { -webkit-mask-image: none; mask-image: none; }
}

/* คอมเมนต์ใช้แถบไอคอนเดียวกับโพสต์ชั้นบน (Boss แจ้ง 2026-08-29)
   เดิมเป็นปุ่มตัวหนังสือ 5 ปุ่มโชว์ตลอดทุกคอมเมนต์ → เนื้อความจมอยู่ในปุ่ม */
.x10v3 .msg.nested .msg-under { padding-left: 12px; margin-top: 3px; }
.x10v3 .msg-tool.liked { color: var(--v3-acc); opacity: 1; }
.x10v3 .msg-tool.liked svg { fill: currentColor; }

/* ป้าย "ร่าง" ในรายชื่อห้อง — มีข้อความพิมพ์ค้างไว้ (Boss สั่ง 2026-08-29) */
.x10v3 .chan-draft {
  flex: none; font-size: 10px; font-weight: 700; line-height: 1;
  padding: 3px 6px; border-radius: 4px;
  background: rgba(232,163,61,.22); color: #b3781f;
}
[data-theme="dark"] .x10v3 .chan-draft { color: #e0a84e; }

/* ===== แผงอีโมจิในช่องพิมพ์ (Boss สั่ง 2026-08-29) ===== */
.x10v3 .emoji-pop {
  position: absolute; left: 12px; right: 12px; bottom: 100%; margin-bottom: 6px;
  max-width: 420px; z-index: 70;
  background: var(--v3-card); border: 1px solid var(--v3-bd); border-radius: 12px;
  box-shadow: 0 -6px 24px rgba(0,0,0,.18); padding: 8px; display: flex; flex-direction: column; gap: 7px;
}
.x10v3 .emoji-pop.hidden { display: none; }
.x10v3 .emoji-q {
  border: 1px solid var(--v3-bd); border-radius: 8px; background: var(--bg);
  color: var(--text); font-family: inherit; font-size: 14px; padding: 7px 10px; outline: 0;
}
.x10v3 .emoji-q:focus { border-color: var(--v3-acc); }
.x10v3 .emoji-tabs { display: flex; gap: 2px; flex-wrap: wrap; }
.x10v3 .em-tab {
  border: 0; background: transparent; cursor: pointer; font-size: 16px; line-height: 1;
  padding: 5px 8px; border-radius: 7px;
}
.x10v3 .em-tab:hover { background: var(--v3-sub); }
.x10v3 .em-tab.on { background: var(--v3-me); }
.x10v3 .emoji-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(36px, 1fr));
  gap: 2px; max-height: 230px; overflow-y: auto;
}
.x10v3 .em-cell {
  border: 0; background: transparent; cursor: pointer; font-size: 21px; line-height: 1;
  padding: 6px 0; border-radius: 7px;
}
.x10v3 .em-cell:hover { background: var(--v3-sub); transform: scale(1.15); }

/* แผงรีแอ็ก: แยกแถวอีโมจิมาตรฐาน / พลูโต */
/* ⚠️ .react-pick เป็น position:absolute ในกล่องแคบ (.msg-tools ~30px) → หดตามพ่อ
   ต้องกำหนดความกว้างตรงๆ ไม่งั้น 15 อีโมจิพับเป็นแถวตั้งสูง 330px */
.x10v3 .react-pick {
  flex-direction: column; align-items: stretch; gap: 4px;
  width: max-content; max-width: min(330px, calc(100vw - 24px));
  border-radius: 12px; padding: 6px 7px;
}
.x10v3 .react-pick .rp-row { display: flex; flex-wrap: wrap; gap: 1px; }
.x10v3 .react-pick .rp-row button { font-size: 20px; padding: 3px 4px; }
.x10v3 .react-pick .rp-pluto { border-top: 1px solid var(--v3-bd); padding-top: 4px; }
/* แถวสติกเกอร์สี (ระบุคนรับงาน) — คั่นจากแถวพลูโตให้เห็นว่าเป็นอีกชุด */
.x10v3 .react-pick .rp-color { border-top: 1px solid var(--v3-bd); padding-top: 4px; }
/* กฎเดิมบังคับ nowrap ตอนอยู่ในแถบเครื่องมือ — แผง 2 แถวต้อง wrap ได้ */
.x10v3 .msg-tools .react-pick { flex-wrap: wrap; }
/* ⚠️⚠️ .msg-tools มี opacity:.4 (จางไว้จนกว่าจะ hover) → แผงที่เป็นลูกจางตามไปด้วย
   opacity ของพ่อกดทั้ง subtree กันไม่ได้ด้วย background → ต้องดันพ่อเป็น 1 ตอนแผงเปิด
   (เมื่อก่อนไม่เห็นปัญหาเพราะแผงเล็กและเปิดตอน hover ซึ่ง opacity เป็น 1 อยู่แล้ว) */
.x10v3 .msg-tools:has(.react-pick) { opacity: 1 !important; }

/* ปุ่ม 🏗️ เข้า Physical ในท้ายการ์ดรีวิว (Boss สั่ง 2026-09-01)
   ⚠️ มือถือ 360px: 3 ปุ่มในแถวเดียวจะล้น → ให้ footer ตัดบรรทัดได้ และ gap แคบลง
      (เดิม gap 11px + 2 ปุ่มพอดี พอเพิ่มปุ่มที่ 3 คือดันล้นขอบการ์ด) */
.x10v3 .rev-foot { flex-wrap: wrap; row-gap: 7px; }
.x10v3 .rev-foot [data-x10-physical] { white-space: nowrap; }
/* ส่งแล้ว = เขียว กดซ้ำไม่ได้ ให้เห็นชัดว่าใบนี้ส่งไปแล้ว */
.x10v3 .rev-foot .btn.sent { background: #dcfce7; border-color: #86efac; color: #166534; }
@media (max-width: 420px) {
  .x10v3 .rev-foot { gap: 7px; }
  .x10v3 .rev-foot .btn.small { padding: 5px 9px; font-size: 12px; }
}