/* ============================================================
   X10 Chat — ชั้นมือถือ (iOS / Android)
   ซีด "มือถือ iOS และ Android" 2026-08-22
   ------------------------------------------------------------
   ⚠️ กฎเหล็ก: ทุก selector ในไฟล์นี้ต้องขึ้นต้นด้วย body.x10m
   เดสก์ท็อปต้องไม่ได้รับผลกระทบแม้แต่กฎเดียว
   ⚠️ ไฟล์นี้โหลดหลัง x10-ui.css เพื่อชนะ .x10v3 (บทเรียน safe-area 2026-08-21)
   ============================================================ */

body.x10m {
  /* พื้นที่ปลอดภัย: iOS 26px ตามซีด / Android gesture nav 20px */
  --x10m-safe-b: max(env(safe-area-inset-bottom), 26px);
  --x10m-tabbar-h: 56px;
  --x10m-hit: 44px;              /* พื้นที่แตะขั้นต่ำตามซีดหน้า 03 */

  /* ⚠️ บั๊กเดิมของแอป: --card/--bg/--text/--border ถูกประกาศ **เฉพาะใน
     html[data-theme="dark"]** เท่านั้น → ธีมสว่างไม่มีค่าเหล่านี้เลย
     ของเดิมไม่พังเพราะแต่ละ element ใส่สีตัวเองไว้ แต่ชั้นมือถือใช้ token พวกนี้
     ถ้าไม่กันไว้ แผ่นเมนู/แถบล่างจะ "โปร่งใส" ในธีมสว่าง (เจอจริงจากภาพทดสอบ)
     → ตั้งค่าสำรองเฉพาะชั้นมือถือ ไม่แตะ token ส่วนกลาง (เดสก์ท็อปไม่กระทบ) */
  --x10m-surface: var(--card, #FFFFFF);
  --x10m-ground: var(--bg, #F4F6F9);
  --x10m-line: var(--border, #E6EBF1);
  --x10m-ink: var(--text, #1E293B);
  --x10m-dim: var(--muted, #64748B);
}
html[data-theme="dark"] body.x10m {
  --x10m-surface: var(--card, #172231);
  --x10m-ground: var(--bg, #0E1621);
  --x10m-line: var(--border, #2A3849);
  --x10m-ink: var(--text, #E5EAF0);
  --x10m-dim: var(--muted, #94A3B8);
}
body.x10m.plat-android { --x10m-safe-b: max(env(safe-area-inset-bottom), 20px); }

/* ---- ซ่อนแถบล่างเดิม (8 ปุ่มเรียงแบน) แทนด้วยโครง 3 แท็บ + เมนู ---- */
body.x10m .bottom-nav { display: none !important; }

/* เว้นที่ให้แถบล่างใหม่ ไม่ให้ทับเนื้อหา */
body.x10m .app { padding-bottom: calc(var(--x10m-tabbar-h) + var(--x10m-safe-b)); }
body.x10m.in-room .app { padding-bottom: 0; }   /* อยู่ในห้องแชท: ซ่อนแถบ ให้ที่กับกล่องพิมพ์ */

/* ============================================================
   แถบแท็บล่าง (ซีดหน้า 02)
   ============================================================ */
body.x10m .x10m-tabbar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 60;
  display: flex; align-items: stretch;
  height: calc(var(--x10m-tabbar-h) + var(--x10m-safe-b));
  padding-bottom: var(--x10m-safe-b);
  background: var(--x10m-surface);
  border-top: 1px solid var(--x10m-line);
  /* เบลอพื้นหลังแบบ iOS — Android ไม่ทุกเครื่องรองรับ แต่ fallback เป็นสีทึบอยู่แล้ว */
  -webkit-backdrop-filter: saturate(180%) blur(14px);
  backdrop-filter: saturate(180%) blur(14px);
}
body.x10m.in-room .x10m-tabbar { display: none; }   /* ในห้องแชท = เต็มจอ */

body.x10m .x10m-tab {
  flex: 1 1 0; min-width: 0;
  min-height: var(--x10m-hit);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 2px; position: relative;
  background: none; border: 0; padding: 4px 2px;
  color: var(--x10m-dim); font: inherit; cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
body.x10m .x10m-tab-ic { font-size: 21px; line-height: 1; }
body.x10m .x10m-tab-tx {
  font-size: 10.5px; font-weight: 500; letter-spacing: -.01em;
  max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
body.x10m .x10m-tab.active { color: var(--blue); }
body.x10m .x10m-tab.active .x10m-tab-tx { font-weight: 700; }
body.x10m .x10m-tab:active { background: var(--side-hover); }

/* ป้ายแจ้งเตือน */
body.x10m .x10m-tab-badge {
  position: absolute; top: 2px; left: 50%; margin-left: 6px;
  min-width: 17px; height: 17px; padding: 0 4px;
  border-radius: 999px; background: var(--red); color: #fff;
  font-size: 10px; font-weight: 700; line-height: 17px; text-align: center;
}
body.x10m .x10m-tab-badge.dot-only {
  min-width: 8px; width: 8px; height: 8px; padding: 0; margin-left: 10px;
}
body.x10m .x10m-tab-badge.hidden { display: none; }

/* ============================================================
   หัวข้อ: iOS กลาง / Android ชิดซ้าย (ซีดหน้า 03)
   ============================================================ */
body.x10m .page-head { min-height: var(--x10m-hit); align-items: center; }
body.x10m.plat-ios .page-head h2 {
  flex: 1; text-align: center;
  font-size: 17px; font-weight: 600;
  /* ปุ่ม ☰ ซ้ายกว้าง ~40px — เผื่อขวาเท่ากันไม่ให้หัวข้อเยื้อง */
  padding-right: 40px;
}
body.x10m.plat-android .page-head h2 {
  flex: 1; text-align: left;
  font-size: 20px; font-weight: 600; letter-spacing: -.01em;
}

/* พื้นที่แตะทุกปุ่มไม่น้อยกว่า 44px (ซีดหน้า 03) */
body.x10m .icon-btn,
body.x10m .nav-btn,
body.x10m .btn {
  min-height: var(--x10m-hit);
  min-width: var(--x10m-hit);
}
/* ⚠️ ยกเว้นปุ่มบนหัวห้อง (กระดิ่ง/⋯/☰) — x10-ui.css ตั้งใจย่อเป็น 32px บนจอแคบ
   แต่ min-*:44px ข้างบนทับ ทำให้กลายเป็นกล่องใหญ่คร่อมหัวห้อง
   (Boss 2026-08-28: "ในมือถือการแจ้งเตือนมันใหญ่ไป")
   → คืนขนาดกล่องเป็น 34px แล้วขยายพื้นที่แตะด้วย ::after แทน นิ้วยังกดติดเท่าเดิม */
body.x10m .chat-head .icon-btn,
body.x10m .chat-actions .icon-btn {
  min-width: 34px; min-height: 34px;
  width: 34px; height: 34px;
  position: relative;
}
body.x10m .chat-head .icon-btn::after,
body.x10m .chat-actions .icon-btn::after {
  content: ''; position: absolute; left: 50%; top: 50%;
  width: var(--x10m-hit); height: var(--x10m-hit);
  transform: translate(-50%, -50%);
}
/* ปุ่มในแถวแน่น ๆ (chip/ตัวกรอง) ไม่ต้องสูง 44 แต่ต้องแตะติด → ขยายด้วย pseudo */
body.x10m .chip, body.x10m .tab-btn { position: relative; }
body.x10m .chip::after, body.x10m .tab-btn::after {
  content: ''; position: absolute; inset: 50% 0 auto 0;
  height: var(--x10m-hit); transform: translateY(-50%);
}

/* ============================================================
   แผ่นเลื่อนขึ้น "เมนูรวม" (ซีดหน้า 04)
   ============================================================ */
body.x10m .x10m-sheet-bd {
  position: fixed; inset: 0; z-index: 70;
  background: rgba(8, 12, 18, .45);
  -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px);
}
body.x10m .x10m-sheet-bd.hidden { display: none; }

body.x10m .x10m-sheet {
  position: fixed; left: 0; right: 0;
  /* วางเหนือแถบแท็บ ไม่ทับ (แถบยังกดได้ตอนแผ่นเปิด) */
  bottom: calc(var(--x10m-tabbar-h) + var(--x10m-safe-b)); z-index: 71;
  background: var(--x10m-surface);
  border-top: 1px solid var(--x10m-line);
  border-radius: 18px 18px 0 0;
  box-shadow: var(--shadow-modal);
  padding-bottom: 8px;
  /* ซ่อนลงใต้จอ: ต้องเลื่อนเลยความสูงแถบแท็บด้วย ไม่งั้นขอบแผ่นโผล่ค้าง */
  transform: translateY(calc(100% + var(--x10m-tabbar-h) + var(--x10m-safe-b)));
  transition: transform 220ms cubic-bezier(.32, .72, 0, 1);
  /* ต้องไม่สูงจนทับแถบแท็บล่าง (เจอจริงในภาพทดสอบ Android/สว่าง)
     เผื่อความสูงแถบ + safe area + ระยะหายใจ 12px */
  max-height: calc(100vh - var(--x10m-tabbar-h) - var(--x10m-safe-b) - 12px);
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}
body.x10m .x10m-sheet.up { transform: translateY(0); }
body.x10m .x10m-sheet.hidden { display: none; }

body.x10m .x10m-sheet-grip { padding: 8px 0 2px; display: flex; justify-content: center; touch-action: none; }
body.x10m .x10m-sheet-grip span {
  width: 38px; height: 4px; border-radius: 999px; background: var(--x10m-line);
}
body.x10m .x10m-sheet-head { padding: 4px 20px 10px; touch-action: none; }
body.x10m .x10m-sheet-head h3 {
  margin: 0; font-size: 17px; font-weight: 700; color: var(--x10m-ink);
}
body.x10m.plat-ios .x10m-sheet-head h3 { text-align: center; }

/* ตาราง 3 คอลัมน์ — 9 ฟังก์ชันพอดี 3 แถว */
body.x10m .x10m-sheet-grid {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 6px; padding: 4px 12px 12px;
}
body.x10m .x10m-mtile {
  position: relative;
  min-height: 84px;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 7px;
  background: none; border: 1px solid transparent; border-radius: var(--radius);
  color: var(--x10m-ink); font: inherit; cursor: pointer; padding: 10px 4px;
  -webkit-tap-highlight-color: transparent;
}
body.x10m .x10m-mtile:active { background: var(--side-hover); }
body.x10m .x10m-mtile.active { border-color: var(--blue); color: var(--blue); background: var(--side-hover); }
body.x10m .x10m-mtile-ic { font-size: 23px; line-height: 1; }
body.x10m .x10m-mtile-tx {
  font-size: 11.5px; font-weight: 500; text-align: center; line-height: 1.25;
  max-width: 100%; overflow: hidden; display: -webkit-box;
  -webkit-line-clamp: 2; -webkit-box-orient: vertical;
}
body.x10m .x10m-mtile-badge {
  position: absolute; top: 8px; right: 12px;
  min-width: 18px; height: 18px; padding: 0 5px;
  border-radius: 999px; background: var(--red); color: #fff;
  font-size: 10.5px; font-weight: 700; line-height: 18px; text-align: center;
}

/* ท้ายแผ่น: สวิตช์ธีม */
body.x10m .x10m-sheet-foot {
  border-top: 1px solid var(--x10m-line); padding: 8px 12px;
}
body.x10m .x10m-foot-btn {
  width: 100%; min-height: var(--x10m-hit);
  display: flex; align-items: center; gap: 10px;
  background: none; border: 0; border-radius: var(--radius);
  color: var(--x10m-ink); font: inherit; font-size: 14px; padding: 10px 12px;
  cursor: pointer; -webkit-tap-highlight-color: transparent;
}
body.x10m .x10m-foot-btn:active { background: var(--side-hover); }

@media (prefers-reduced-motion: reduce) {
  body.x10m .x10m-sheet { transition: none; }
}

/* ============================================================
   ปัดซ้ายที่รายการแชท (ซีดหน้า 06)
   ============================================================ */
body.x10m .x10m-swrap { position: relative; overflow: hidden; }
body.x10m .x10m-swrap > .chan-item {
  position: relative; z-index: 1;
  /* ทึบแสงจริง ไม่งั้นจะเห็นปุ่มด้านล่างทะลุขึ้นมาตอนเลื่อน
     ⚠️ ต้องใช้ --v3-side (สีที่ .x10v3 .sidebar ทาจริง) ไม่ใช่ --side-bg
        ไม่งั้นเลือกชุดสีแล้วแถวนี้สีไม่ตรงกับแถบข้างที่มันอยู่ */
  background: var(--v3-side, var(--side-bg));
  transition: transform 180ms cubic-bezier(.32, .72, 0, 1);
  will-change: transform;
}
/* ตอนลาก JS ตั้ง transform ตรง ๆ — ปิด transition ไม่ให้หนืดตามนิ้ว */
body.x10m .x10m-swrap > .chan-item.sw-drag { transition: none; }

body.x10m .x10m-sacts {
  position: absolute; inset: 0 0 0 auto; z-index: 0;
  display: flex; align-items: stretch;
}
body.x10m .x10m-sact {
  width: 76px;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
  border: 0; color: #fff; font: inherit; font-size: 10.5px; font-weight: 600;
  line-height: 1.15; padding: 2px 4px; text-align: center;
  cursor: pointer; -webkit-tap-highlight-color: transparent;
  /* แถวห้องเตี้ยกว่า 44px ได้ → ห้ามใส่ min-height ที่ปุ่ม ไม่งั้นตัวหนังสือถูกตัด
     พื้นที่แตะยังผ่านเกณฑ์เพราะปุ่มสูงเท่าแถว + กว้าง 76px */
  min-width: 44px;
  overflow: hidden;
}
body.x10m .x10m-sact span:first-child { font-size: 15px; line-height: 1; }
body.x10m .x10m-sact span:last-child {
  max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
/* แถวในรายการห้องบนมือถือต้องสูงพอให้ทั้งแตะติดและวางปุ่มได้ */
body.x10m .x10m-swrap > .chan-item { min-height: var(--x10m-hit); align-items: center; }
body.x10m .sact-read { background: var(--blue); }
body.x10m .sact-mute { background: #6B7280; }
body.x10m .x10m-sact:active { filter: brightness(.9); }

/* ห้องที่ปิดเสียงอยู่ — ให้เห็นสถานะในรายการ */
body.x10m .chan-item.chan-muted { opacity: .62; }
body.x10m .chan-item.chan-muted .grow::after {
  content: ' 🔇'; font-size: 11px; opacity: .8;
}

/* ============================================================
   ลากลงรีเฟรช
   ============================================================ */
body.x10m .x10m-ptr {
  height: 0; overflow: hidden;
  display: flex; align-items: center; justify-content: center;
  transition: height 160ms ease;
  color: var(--x10m-dim);
}
body.x10m .x10m-ptr-ic { font-size: 18px; display: block; }
body.x10m .x10m-ptr.ready .x10m-ptr-ic { color: var(--blue); }
body.x10m .x10m-ptr.spin .x10m-ptr-ic { animation: x10m-spin 800ms linear infinite; }
@keyframes x10m-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
  body.x10m .x10m-ptr { transition: none; }
  body.x10m .x10m-ptr.spin .x10m-ptr-ic { animation: none; }
}

/* ============================================================
   กล้อง / สแกนสลิป (ซีดหน้า 05-06)
   ============================================================ */
body.x10m .x10m-hidden-file { display: none !important; }

body.x10m .x10m-camrow {
  display: grid; grid-template-columns: 1fr 1fr; gap: 8px;
  margin: 0 0 10px;
}
body.x10m .x10m-cambtn {
  min-height: 56px;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px;
  background: var(--side-hover); border: 1px solid var(--x10m-line);
  border-radius: var(--radius); color: var(--x10m-ink);
  font: inherit; font-size: 12.5px; font-weight: 600;
  cursor: pointer; -webkit-tap-highlight-color: transparent;
}
body.x10m .x10m-cambtn span:first-child { font-size: 20px; line-height: 1; }
body.x10m .x10m-cambtn:active { background: var(--blue-light); border-color: var(--blue); }

/* ============================================================
   แถบสถานะออฟไลน์ / ข้อความค้างส่ง (ซีดหน้า 06)
   ============================================================ */
body.x10m .x10m-offbar {
  position: fixed; left: 0; right: 0;
  bottom: calc(var(--x10m-tabbar-h) + var(--x10m-safe-b));
  z-index: 59;
  padding: 7px 14px;
  font-size: 12px; font-weight: 600; text-align: center;
  color: #fff; background: var(--blue);
}
body.x10m .x10m-offbar.is-off { background: #B45309; }
/* ในห้องแชทไม่มีแถบล่าง → แถบนี้ต้องลงไปติดขอบจอ */
body.x10m.in-room .x10m-offbar { bottom: var(--x10m-safe-b); }

/* ============================================================
   หน้าจอล็อกแอป (PIN / Face ID) — ซีดหน้า 06
   ============================================================ */
body.x10m .x10m-lock {
  position: fixed; inset: 0; z-index: 200;
  display: flex; align-items: center; justify-content: center;
  padding: 24px;
  background: var(--x10m-ground);
}
body.x10m .x10m-lock.hidden { display: none; }
body.x10m .x10m-lock-card {
  width: 100%; max-width: 320px; text-align: center;
}
body.x10m .x10m-lock-ic { font-size: 44px; margin-bottom: 10px; }
body.x10m .x10m-lock-card h3 {
  margin: 0 0 6px; font-size: 19px; font-weight: 700; color: var(--x10m-ink);
}
body.x10m .x10m-lock-sub {
  margin: 0 0 20px; font-size: 13px; color: var(--x10m-dim);
}
body.x10m #x10m-lock-pin {
  width: 100%; min-height: var(--x10m-hit);
  padding: 12px 14px; margin-bottom: 10px;
  font-size: 20px; text-align: center; letter-spacing: .3em;
  background: var(--x10m-surface); color: var(--x10m-ink);
  border: 1px solid var(--x10m-line); border-radius: var(--radius);
}
body.x10m #x10m-lock-pin.hidden { display: none; }
body.x10m .x10m-lock-err {
  min-height: 18px; margin-bottom: 8px;
  font-size: 12.5px; font-weight: 600; color: var(--red);
}
body.x10m .x10m-lock-btn, body.x10m .x10m-lock-bio {
  width: 100%; min-height: var(--x10m-hit);
  border-radius: var(--radius); border: 1px solid var(--x10m-line);
  font: inherit; font-size: 15px; font-weight: 600; cursor: pointer;
  margin-bottom: 8px;
}
body.x10m .x10m-lock-btn { background: var(--blue); color: #fff; border-color: var(--blue); }
body.x10m .x10m-lock-btn.hidden, body.x10m .x10m-lock-bio.hidden { display: none; }
body.x10m .x10m-lock-bio { background: transparent; color: var(--x10m-ink); }

/* ============================================================
   แถวตั้งค่าในแผ่นเมนูรวม (แจ้งเตือน / ล็อกแอป)
   ============================================================ */
body.x10m .x10m-setrow {
  display: flex; align-items: center; gap: 10px;
  width: 100%; min-height: var(--x10m-hit);
  padding: 10px 12px;
  background: none; border: 0; border-radius: var(--radius);
  color: var(--x10m-ink); font: inherit; font-size: 14px;
  text-align: left; cursor: pointer; -webkit-tap-highlight-color: transparent;
}
body.x10m .x10m-setrow:active { background: var(--side-hover); }
/* แถวเดียวกันนี้ใช้กับ <a> ด้วย (ลิงก์ติดตั้งแอป) — ตัดเส้นใต้และคุมกล่องให้เท่าปุ่ม */
body.x10m a.x10m-setrow { text-decoration: none; box-sizing: border-box; }
body.x10m .x10m-setrow .grow { flex: 1; min-width: 0; }
body.x10m .x10m-setrow .x10m-setstate {
  font-size: 12px; font-weight: 600; color: var(--x10m-dim);
}
body.x10m .x10m-setrow .x10m-setstate.on { color: var(--green); }

/* ============================================================
   ปัดขวาจากขอบซ้ายเปิดรายการห้อง (Boss สั่ง 2026-08-22)
   ============================================================ */
/* ตอนลากด้วยนิ้ว: ต้องเห็นฉากมืดค่อย ๆ เข้ม และต้องไม่มี transition มาหนืด
   (.show ของเดิมมี transition + pointer-events ซึ่งจะกินทัชระหว่างลาก) */
body.x10m .side-backdrop.x10m-dragging {
  transition: none;
  pointer-events: none;
}

/* ============================================================
   ล็อกหน้าไม่ให้ขยับตามนิ้ว (Boss แจ้ง 2026-08-22)
   ------------------------------------------------------------
   อาการ: ปัดซ้าย/ขวาแล้ว "หน้ามันไปตามนิ้ว" — เพราะเดิม html/body
   ไม่มี overscroll-behavior/touch-action เลย เบราว์เซอร์จึงใช้ค่าปกติ:
     · ยางยืดแนวนอน (overscroll) ของทั้งหน้า
     · iOS ปัดขอบจอ = ย้อนกลับหน้าเว็บ (swipe back navigation)
   ต้องการ: หน้านิ่ง ให้ขยับแค่แผงเมนู/แถวห้องที่เราคุมเอง
   ============================================================ */
/* html ต้องคุมด้วย :has() (html ไม่ใช่ลูกของ body จะเขียน body.x10m html ไม่ได้)
   :has() รองรับใน Safari 15.4+ / Chrome 105+ = ครอบมือถือที่ใช้งานจริงทั้งหมด
   ถ้าเบราว์เซอร์เก่าไม่รู้จัก ก็แค่ไม่ได้ผลตรงนี้ ตัว body ยังกันให้อยู่ */
html:has(body.x10m) {
  overscroll-behavior: none;
  overflow-x: hidden;
}

body.x10m {
  /* หน้าหลักต้องไม่มีสกรอลล์แนวนอนเด็ดขาด */
  overflow-x: hidden;
  /* ไม่ให้ลากจนทั้งหน้าเลื่อนไปมา (ยางยืดแนวนอน) */
  overscroll-behavior-x: none;

  /* ⚠️⚠️ ห้ามใส่ `touch-action: pan-y` ที่ body เด็ดขาด!
     touch-action **ไม่ inherit แต่ ancestor จำกัดลูกได้** — ถ้า body ตัด pan-x ทิ้ง
     ลูกจะ **ขอคืนไม่ได้เลย** (คำนวณออกมาเป็น `manipulation`)
     ผลคือตารางกว้าง / TaskFlow / โค้ดบล็อก **เลื่อนแนวนอนไม่ได้ทั้งแอป**
     (เจอจริงจาก test-hscroll.js: ทุกกล่องกลายเป็น manipulation)
     → กันหน้าขยับด้วย JS `preventDefault()` ตอนล็อกทิศเป็นแนวนอนแทน
       (ดู swipeMove / edgeMove ใน mobile.js ที่ใช้ passive:false) */
}
body.x10m .app { overflow-x: hidden; }

/* ยางยืดแนวนอนของกล่องที่เลื่อนได้ ไม่ให้ทะลุไปขยับหน้าแม่ */
body.x10m .tbl-wrap,
body.x10m .paste-queue,
body.x10m pre,
body.x10m .msg-table-wrap,
body.x10m #tf-body {
  overscroll-behavior-x: contain;
}

/* ============================================================
   แก้จากการตรวจ FLOW ทุกหน้า 2026-08-22
   ============================================================ */
/* หน้าเลขา: ปุ่ม "ล้างประวัติ" ล้นทะลุกรอบหน้าไปทับแถบแท็บล่าง
   วัดได้: หน้าจบที่ 582 แต่ .sec-chat-tools ยาวถึง 619 = เนื้อหาล้นตัวครอบ
   → ใส่ padding ในตัวมันแก้ไม่ได้ ต้อง "กัน" ที่ระดับหน้าแทน
   ⚠️ อีก session กำลังแก้โครง #sec-main / .sec-chat อยู่ (bak-secmainfix 11:43)
      จึง **ไม่แตะ #sec-main / .sec-chat** ที่นี่ เพื่อไม่ให้ทับ flex layout ของเขา */
/* หน้าเลขาบนมือถือ — ⚠️ ยังมีปัญหาค้าง (ไม่แก้ที่นี่ โดยเจตนา)
   อาการ: ปุ่ม "🗑 ล้างประวัติ" ถูกตัดหายใต้จอบน iPhone (แตะไม่ได้)
          และกล่องแชท .sec-chat ยุบเหลือ ~12px
   ต้นเหตุอยู่ที่โครง flex ของ .sec-wrap / #sec-main / .sec-sect ใน style.css
   ซึ่ง **อีก session กำลังแก้อยู่** (style.css.bak-secmainfix-20260822-114339
   คอมเมนต์เขาเขียนไว้ตรงกัน: "ถ้า #sec-main ไม่ส่งความสูงต่อ กล่องแชทจะยุบ")
   → ลองแก้จากชั้นมือถือแล้ว 3 วิธี (overflow:hidden / บีบ padding / flex)
     ทุกวิธีไม่หาย เพราะต้นเหตุอยู่เหนือขึ้นไปในสายที่เขาถืออยู่
   → **ปล่อยให้แก้ที่ต้นเหตุ** ดีกว่าใส่กฎทับแล้วชนกันภายหลัง (แจ้ง Boss แล้ว)
   Android ไม่มีปัญหานี้ (จอสูงกว่า ปุ่มอยู่ในจอพอดี) */

/* .btn-mini เดิมสูงแค่ ~25px — แตะยากบนมือถือ (เกณฑ์ซีด 44px)
   ขยายพื้นที่แตะด้วย pseudo แทนการดันขนาดปุ่ม เพื่อไม่ให้เลย์เอาต์เพี้ยน */
body.x10m .btn-mini {
  position: relative;
  padding: 6px 10px;
  font-size: 12.5px;
}
body.x10m .btn-mini::after {
  content: ''; position: absolute; left: 0; right: 0;
  top: 50%; height: var(--x10m-hit); transform: translateY(-50%);
}

/* ============================================================
   แบนเนอร์ชวนเปิดแจ้งเตือน (2026-08-28)
   ลอยเหนือแถบแท็บล่าง — ไม่ทับปุ่ม ไม่ทับ safe-area ของ iPhone
   ============================================================ */
body.x10m .x10m-pushnag {
  position: fixed;
  left: 10px; right: 10px;
  bottom: calc(var(--x10m-tabbar-h) + var(--x10m-safe-b) + 10px);
  z-index: 900;
  display: flex; align-items: center; gap: 10px;
  padding: 10px 12px;
  background: var(--x10m-surface);
  border: 1px solid var(--x10m-line);
  border-radius: 14px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, .18);
  animation: x10m-pushnag-in .22s ease-out;
}
@keyframes x10m-pushnag-in {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: none; }
}
body.x10m .x10m-pushnag-ic { font-size: 22px; line-height: 1; flex: 0 0 auto; }
body.x10m .x10m-pushnag-tx { flex: 1 1 auto; min-width: 0; }
body.x10m .x10m-pushnag-tx b {
  display: block; font-size: 14px; line-height: 1.3;
  color: var(--x10m-ink);
}
body.x10m .x10m-pushnag-tx span {
  display: block; font-size: 12px; line-height: 1.35; margin-top: 2px;
  color: var(--muted);
}
body.x10m .x10m-pushnag button {
  flex: 0 0 auto;
  min-height: 34px; padding: 0 12px;
  border-radius: 9px; font-size: 13px; font-weight: 600;
  border: 1px solid var(--x10m-line);
  background: transparent; color: var(--muted);
  cursor: pointer;
}
body.x10m .x10m-pushnag-go {
  border-color: transparent !important;
  background: var(--blue) !important;
  color: #fff !important;
}
/* จอแคบ 360px: ข้อความยาวไม่ดันปุ่มตกขอบ */
@media (max-width: 380px) {
  body.x10m .x10m-pushnag { gap: 8px; padding: 9px 10px; }
  body.x10m .x10m-pushnag-ic { font-size: 19px; }
  body.x10m .x10m-pushnag button { padding: 0 9px; font-size: 12px; }
}

/* ============================================================
   แถบพิมพ์แบบ Slack (Boss 2026-08-28) — ประหยัดพื้นที่บนมือถือ
   ------------------------------------------------------------
   Slack มีแค่ ＋ / ช่องพิมพ์ / ไมค์ — ปุ่มส่งโผล่ตอนพิมพ์เท่านั้น
   ของเรามี 4-5 ปุ่มเบียดจนช่องพิมพ์เหลือนิดเดียว
   → ยังไม่พิมพ์: โชว์ไมค์ (อัดเสียง) ซ่อนปุ่มส่ง
     พิมพ์แล้ว/มีไฟล์แนบ: โชว์ปุ่มส่ง ซ่อนไมค์
   สลับด้วยคลาส .has-text ที่ JS ใส่ให้ (composerToggleSend)
   ============================================================ */
body.x10m .composer .icon-btn.send { display: none; }
body.x10m .composer.has-text .icon-btn.send { display: flex; }
body.x10m .composer.has-text #btn-voice { display: none; }
/* ช่องพิมพ์ได้พื้นที่คืนเต็มที่ เหลือปุ่มข้างละ 1 */
body.x10m .composer #msg-input { min-width: 0; flex: 1; }

/* ---- แผ่นแนบไฟล์แบบ Slack (แถบรูปแนวนอน + เมนูรายการ) ---- */
body.x10m .atsheet-bd { position: fixed; inset: 0; z-index: 80; background: rgba(8,12,18,.45); }
body.x10m .atsheet-bd.hidden { display: none; }
body.x10m .atsheet {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 81;
  background: var(--x10m-surface, var(--card));
  border-radius: 18px 18px 0 0; box-shadow: var(--shadow-modal);
  padding: 0 0 calc(8px + var(--x10m-safe-b, 0px));
  max-height: 82vh; overflow-y: auto;
  transform: translateY(100%); transition: transform 220ms cubic-bezier(.32,.72,0,1);
}
body.x10m .atsheet.open { transform: translateY(0); }
body.x10m .atsheet.hidden { display: none; }
body.x10m .atsheet-grip { display: flex; justify-content: center; padding: 8px 0 4px; }
body.x10m .atsheet-grip span { width: 40px; height: 4px; border-radius: 2px; background: var(--x10m-line, var(--border)); }
body.x10m .atsheet-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 6px 16px 10px; font-weight: 700; font-size: 15px;
}
body.x10m .atsheet-head .atsheet-x {
  background: none; border: 0; font-size: 20px; line-height: 1;
  color: var(--muted); padding: 4px 6px; cursor: pointer;
}
/* แถบรูปแนวนอน: การ์ดกล้อง + รูปที่เลือกไว้ (เลื่อนซ้ายขวา) */
body.x10m .atsheet-strip {
  display: flex; gap: 8px; overflow-x: auto; padding: 0 16px 12px;
  -webkit-overflow-scrolling: touch;
}
body.x10m .atsheet-tile {
  flex: 0 0 auto; width: 104px; height: 104px; border-radius: 12px;
  border: 1px solid var(--x10m-line, var(--border)); background: var(--sunken, var(--bg));
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 6px; cursor: pointer; padding: 0; color: var(--muted); font-size: 12px;
}
body.x10m .atsheet-tile .atsheet-tile-ic { font-size: 26px; line-height: 1; }
body.x10m .atsheet-thumb {
  position: relative; flex: 0 0 auto; width: 104px; height: 104px;
  border-radius: 12px; overflow: hidden; border: 1px solid var(--x10m-line, var(--border));
}
body.x10m .atsheet-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
body.x10m .atsheet-thumb .atsheet-thx {
  position: absolute; top: 4px; right: 4px; width: 22px; height: 22px;
  border-radius: 50%; border: 0; background: rgba(0,0,0,.55); color: #fff;
  font-size: 12px; line-height: 1; cursor: pointer;
}
/* เมนูรายการแบบ Slack */
body.x10m .atsheet-row {
  display: flex; align-items: center; gap: 14px; width: 100%;
  padding: 14px 18px; background: none; border: 0; cursor: pointer;
  font-size: 15px; color: var(--text); text-align: left;
}
body.x10m .atsheet-row:active { background: var(--side-hover, rgba(127,127,127,.12)); }
body.x10m .atsheet-row .atsheet-row-ic { font-size: 19px; width: 24px; text-align: center; flex-shrink: 0; }
body.x10m .atsheet-sep { height: 1px; background: var(--x10m-line, var(--border)); margin: 6px 16px; }

/* ---- แถบแท็บใต้หัวห้อง — โหมดมือถือ (Boss 2026-08-29) ----
   ห้ามให้กฎ min-height 44px ของ mobile.css ไปทำแถบแท็บบวม
   (บทเรียนเดิม: ปุ่มกระดิ่ง/⋯ หัวห้องเคยบวมเพราะกฎนี้ทับ) */
body.x10m .room-tabs .rt-tab { min-height: 0; min-width: 0; padding: 8px 9px; }
body.x10m .room-tabs .rt-add { min-height: 0; min-width: 0; padding: 6px 9px; }

/* ============================================================
   แถบแท็บใต้หัวห้อง — เลื่อนข้างยาก (Boss แจ้ง 2026-09-02)
   ------------------------------------------------------------
   อาการ: บนมือถือ ปัดแถบแท็บซ้าย/ขวาแล้วไม่ค่อยติด ต้องปัดตรงมาก
   สาเหตุ: .room-tabs เป็น overflow-x:auto แต่ **ไม่ได้ประกาศ touch-action**
     → เบราว์เซอร์ใช้ค่า auto = ลังเลระหว่าง pan-x ของแท็บ กับ pan-y
       ของกล่องข้อความที่อยู่ใต้ลงไป ต้องปัดแนวนอนชัดมากถึงจะล็อกทิศให้
     ซ้ำร้าย ไม่มี overscroll-behavior-x → เลื่อนสุดแล้วแรงทะลุไปหน้าแม่
   แก้: ประกาศ pan-x ตรงๆ ที่ตัวแถบ (ไม่ใช่ที่ body — ancestor ตัด pan-x
        แล้วลูกขอคืนไม่ได้ ดูคำเตือน body.x10m ด้านบน)
   ⚠️ ต้องใส่ที่ตัวลูก (.rt-tab/.rt-add) ด้วย เพราะ touch-action ไม่ inherit
      นิ้วที่แตะโดนปุ่มพอดี (ซึ่งเป็นกรณีปกติ เพราะปุ่มเต็มความสูงแถบ)
      จะอ่านค่าจากปุ่ม ไม่ใช่จากแถบ
   ============================================================ */
body.x10m .room-tabs {
  touch-action: pan-x;
  overscroll-behavior-x: contain;
  scroll-behavior: smooth;
}
body.x10m .room-tabs .rt-tab,
body.x10m .room-tabs .rt-ic,
body.x10m .room-tabs .rt-add {
  touch-action: pan-x;
}

/* ============================================================
   เมนูแชทมือถือ — เลื่อนลงล่างสุดแล้วติดขัด (Boss แจ้ง 2026-09-02)
   ------------------------------------------------------------
   แก้หลักอยู่ที่ mobile.js (attachPulls ผูกผิดตัว + เช็ค scrollTop ทุกครั้ง)
   ตรงนี้กัน 2 อย่างที่เหลือ:
   1. overscroll-behavior-y: contain — เลื่อนถึงสุดแล้วแรงต้องไม่ทะลุไปหน้าแม่
      (หน้าแม่มี edgeMove/swipeMove ดักด้วย passive:false อยู่ = สะดุด)
   2. .x10m-ptr เป็นลูกของ .side-scroll ที่เป็น flex column → flex-shrink
      ค่าปกติ 1 จะบีบตัวหมุนตอนกาง ทำให้ท่าลากลงกระตุก
      (บทเรียนเดียวกับ .kpi-card ที่โดนบีบจนข้อความโดนตัด)
   ============================================================ */
body.x10m .side-scroll {
  overscroll-behavior-y: contain;
  -webkit-overflow-scrolling: touch;
}
body.x10m .side-scroll > .x10m-ptr { flex: 0 0 auto; }

/* ============================================================
   แถบแท็บล่างบังกล่องพิมพ์ (Boss แจ้ง 2026-09-02)
   ------------------------------------------------------------
   แก้ต้นเหตุแล้วที่ app.js (openChannel เรียก showPage ก่อนปลด hidden
   ทำให้ showPage ถอดคลาส `in-room` ทิ้ง แถบล่างเลยโผล่มาทับ)
   ตรงนี้เป็น "กันชั้นสอง" ที่ไม่พึ่ง JS เลย:
     ถ้า #chat-room ไม่ได้ hidden = อยู่ในห้องจริง → ซ่อนแถบ + คืนที่ให้กล่องพิมพ์
   ต่อให้เส้นทางไหนลืมใส่ `in-room` กล่องพิมพ์ก็จะไม่ถูกบังอีก
   ⚠️ ต้องอยู่ท้ายไฟล์ = ประกาศทีหลังกฎบรรทัด 40-41/57 ถึงจะทับได้
   (`:has()` ใช้แบบเดียวกับ html:has(body.x10m) ด้านบนแล้ว)
   ============================================================ */
body.x10m:has(#chat-room:not(.hidden)) .x10m-tabbar { display: none; }
body.x10m:has(#chat-room:not(.hidden)) .app { padding-bottom: 0; }


/* ปุ่ม DM ข้างช่องค้นหาในแถบข้าง (Boss สั่ง 2026-09-04 · ทำเพื่อมือถือโดยเฉพาะ)
   เป้าแตะ 44px ตามมาตรฐาน — 36px ของจอคอมเล็กไปสำหรับนิ้ว */
body.x10m .side-dm-btn { width: 44px; height: 44px; font-size: 18px; }
body.x10m .side-search-row { gap: 8px; }

/* ============================================================
   รอบ 2 — ปรับ UI มือถือทั้งแอป (ตัวจำลอง 2026-09-04)
   อ้างอิง: โครงแบบ Slack + ความแน่นแบบ Discord
   หลักการ: ไม่ลบฟีเจอร์ใดๆ แค่ "ซ่อนของที่ไม่ได้ใช้ตลอดเวลา" ให้เนื้อหาเด่นขึ้น
   ⚠️ ทุก selector ต้องขึ้นต้น body.x10m (กฎเหล็กของไฟล์นี้)
   ⚠️ รองรับทั้ง Android และ iOS — ไม่ใช้ :has() กับ property ที่ Safari เก่าไม่รู้จัก
   ============================================================ */

/* ---- 1) แถบเครื่องมือใต้ทุกข้อความ (😊 ↩ ⧉ 🔖 ⋯) ----
   เดิมโชว์ครบ 5 ปุ่มใต้ "ทุกข้อความ" ตลอดเวลา = จอเต็มไปด้วยปุ่ม เนื้อหาจม
   Slack/Discord บนมือถือ: กดค้างที่ข้อความถึงจะขึ้นเมนู
   → ซ่อนปุ่มรอง เหลือ ⋯ ปุ่มเดียว (กดแล้วได้ทุกคำสั่งเหมือนเดิม ไม่มีอะไรหาย) */
/* ⚠️ แก้ 2026-09-04: รอบแรกซ่อนหมดเหลือแต่ ⋯ แต่ "ตอบกลับ" หายไปด้วย
   ซึ่งเป็นปุ่มที่ใช้บ่อยที่สุดในการคุยงาน (Boss ทัก "ระบบตอบกลับไม่มีได้ไง")
   Slack/Discord ก็โชว์ปุ่มตอบกลับไว้ตลอด → เหลือ 2 ปุ่ม: ↩ ตอบกลับ + ⋯ ที่เหลือ */
body.x10m .msg-under .msg-tools .msg-tool { display: none; }
body.x10m .msg-under .msg-tools .msg-tool[onclick*="commentInThread"],
body.x10m .msg-under .msg-tools .msg-tool[onclick*="dmSetReply"],
body.x10m .msg-under .msg-tools .msg-tool:last-child { display: inline-flex; }
/* ปุ่มตอบกลับเด่นขึ้นนิด ให้เห็นว่ากดได้ */
body.x10m .msg-under .msg-tools .msg-tool[onclick*="commentInThread"],
body.x10m .msg-under .msg-tools .msg-tool[onclick*="dmSetReply"] { opacity: .85; }
/* เวลายังอยู่ แต่จางลงให้เป็นข้อมูลรอง */
body.x10m .msg-under-time { opacity: .6; font-size: 11px; }
body.x10m .msg-under { gap: 6px; margin-top: 1px; }

/* ---- 2) ความแน่นแบบ Discord ----
   ลดช่องไฟระหว่างข้อความ ให้เห็นบทสนทนาต่อจอมากขึ้น */
body.x10m .msg { padding-top: 2px; padding-bottom: 2px; }
body.x10m .msg + .msg { margin-top: 0; }

/* ---- 3) หัวห้อง: ยุบให้เตี้ยแบบ Slack ----
   มือถือมีที่จำกัด หัวห้องไม่ควรกินเกิน 1 บรรทัด */
body.x10m .chat-head { padding-top: 8px; padding-bottom: 8px; }
body.x10m .chat-name { font-size: 15px; }
/* หัวข้อห้อง (topic) ยาวๆ ซ่อนบนมือถือ — กดชื่อห้องดูได้อยู่แล้ว */
body.x10m .chat-topic { display: none; }

/* ---- 4) กล่องพิมพ์: เหลือปุ่มที่ใช้บ่อยจริง ----
   เดิม 6 ปุ่ม (＋ 📎 @ 😀 🎤 ☰) เบียดกันบนจอ 360px
   Slack มือถือมีแค่ ＋ กับ 😀 · ที่เหลืออยู่ในเมนู ＋ (ยังกดได้ครบ ไม่ได้ลบ)
   → ซ่อน 📎 (ซ้ำกับ ＋) และ ☰ (แถบจัดข้อความ นานๆ ใช้ที) */
body.x10m .cp-act-l #btn-attach-quick,
body.x10m .cp-act-l .cp-fmt-tg,
body.x10m .cp-act-l .cp-fmt { display: none; }
body.x10m .cp-act { padding: 5px 8px 6px; }

/* ---- 5) หัวห้องบรรทัดเดียวแบบ Slack ----
   ชื่อห้อง + ป้ายล็อก + จำนวนคน อยู่บรรทัดเดียวกัน ไม่ตกบรรทัด
   ⚠️ ต้อง min-width:0 ทุกชั้น ไม่งั้นชื่อยาวดันชิปหลุดขอบ (Flexbox overflow) */
body.x10m .chat-name-row { flex-wrap: nowrap; min-width: 0; gap: 6px; }
body.x10m .chat-name { min-width: 0; }
body.x10m .chat-meta-btn { font-size: 10.5px; padding: 1px 6px; }
/* ปุ่มหัวห้องเล็กลงนิด คืนที่ให้ชื่อห้อง */
body.x10m .chat-actions .icon-btn { width: 34px; height: 34px; }

/* ---- 6) แท็บล่างใหม่: ไอคอน SVG แบบ Slack/Discord ----
   เดิมใช้อีโมจิ (# 💬 🔔 ☑) ซึ่ง Android กับ iOS วาดคนละแบบ ขนาดไม่เท่ากัน
   บางเครื่อง # กับ ☑ ขึ้นเป็นสี่เหลี่ยมว่าง · เปลี่ยนเป็น SVG คุมได้ทุกเครื่อง */
body.x10m .x10m-tab-ic { font-size: 0; line-height: 0; display: inline-flex; }
body.x10m .x10m-tab-ic .ic { width: 23px; height: 23px; }
/* แท็บที่เลือกอยู่: ไอคอนทึบ + สีเน้น + ขีดบอกตำแหน่งด้านบน (แบบ Slack) */
body.x10m .x10m-tab.active::before {
  content: ''; position: absolute; top: 0; left: 50%; transform: translateX(-50%);
  width: 26px; height: 3px; border-radius: 0 0 3px 3px; background: var(--blue);
}
/* กดแล้วต้องรู้สึกว่ากดติด — ย่อเล็กน้อยแทนพื้นหลังเทาที่มองแทบไม่เห็นบนมือถือ */
body.x10m .x10m-tab { transition: transform .09s ease, color .12s ease; }
body.x10m .x10m-tab:active { background: none; transform: scale(.90); }

/* ---- 7) หน้า DM: แถวแน่นขึ้นแบบ Discord ----
   เดิมแถวสูง ~132px เห็นได้แค่ 5 คนต่อจอ ต้องเลื่อนนานกว่าจะเจอคนที่จะทัก
   ลดรูปโปรไฟล์ 48→40 + บีบช่องไฟ → เห็น ~8 คนต่อจอ หาคนเจอเร็วขึ้น */
body.x10m .dmp-av .avatar { width: 40px !important; height: 40px !important; font-size: 15px; }
body.x10m .dmp-row { padding: 6px 8px; gap: 10px; }
body.x10m .dmp-name { font-size: 14.5px; }
body.x10m .dmp-prev { font-size: 12.5px; }
body.x10m .dmp-on { width: 11px; height: 11px; border-width: 2px; }

/* ปุ่ม "# ไปช่องแชท" บนหัวหน้า DM — ซ้ำกับแท็บ "ช่อง" ที่อยู่ข้างล่างแล้ว
   ซ่อนบนมือถือ คืนที่ให้หัวข้อ (คอมยังมีเหมือนเดิม เพราะคอมไม่มีแท็บล่าง) */
body.x10m #page-dm .page-head .btn { display: none; }

/* ============================================================
   รอบ 4 — ยกเครื่องแท็บ "ช่อง" (ตัวจำลอง 2026-09-04)
   ปัญหาเดิม: กดแท็บ "ช่อง" ได้หน้าว่างเปล่า! เพราะรายชื่อห้องอยู่ใน
   drawer ที่ต้องกดแฮมเบอร์เกอร์เปิด = เมนูหลักของแอปถูกซ่อนไว้
   Slack/Discord มือถือ: รายชื่อห้องเป็น "หน้าเต็มจอ" กดแท็บแล้วเห็นเลย
   → ทำให้ sidebar กลายเป็นหน้าจริงเมื่ออยู่แท็บช่อง (ไม่ใช่ drawer ลอย)
   ⚠️ ไม่แตะ JS ของ drawer เดิม — ยังเปิดด้วยแฮมเบอร์เกอร์ตอนอยู่ในห้องได้เหมือนเดิม
   ============================================================ */
body.x10m.page-chat-list .sidebar {
  position: static !important;
  transform: none !important;
  inset: auto !important;
  max-width: none !important;
  width: 100% !important;
  box-shadow: none !important;
  display: flex !important;
  flex: 1 1 auto;
  min-height: 0;
}
body.x10m.page-chat-list .app { flex-direction: column; }
body.x10m.page-chat-list .main { display: none !important; }
body.x10m.page-chat-list #side-backdrop { display: none !important; }
/* ปุ่มแฮมเบอร์เกอร์ในแถบข้างไม่ต้องมีตอนเป็นหน้าเต็ม */
body.x10m.page-chat-list .sidebar .side-close { display: none; }

/* ---- รอบ 4b: ล้างของซ้ำ/ของไม่จำเป็นออกจากหน้ารายชื่อห้อง ----
   กว่าจะถึงห้องแรกต้องผ่าน 6 ชั้น: โลโก้ → โปรไฟล์ → เมนู → ค้นหา → สลับมุมมอง → หมวด
   Slack/Discord: เปิดมาเห็นห้องเลย ของอื่นอยู่ในโปรไฟล์/เมนู */
/* โลโก้ X10 Chat + ปุ่มดาวน์โหลด/ธีม — ซ้ำกับแท็บล่าง/เมนู ไม่ต้องกินที่บนสุด */
body.x10m.page-chat-list .sidebar-head { display: none; }
/* กล่อง "เมนู" ในแถบข้าง = ไทล์ชุดเดียวกับแท็บล่าง+แผ่นเมนู (ซ้ำ 3 ที่) */
body.x10m.page-chat-list #mn-bar,
body.x10m.page-chat-list #mn-panel { display: none; }
/* แถวสลับมุมมอง "แยกกลุ่ม/รวมทั้งหมด" — ของนานๆ ใช้ ย้ายความสำคัญลง */
body.x10m.page-chat-list .side-section-row { padding: 4px 12px; font-size: 11px; opacity: .7; }
/* ปุ่มจัดการหมวด (🔔 ➕ 🗑) โผล่เฉพาะตอนกดค้าง/แอดมินกดเข้าไปจัดการ
   โชว์ตลอดบนมือถือ = กดโดนโดยไม่ตั้งใจ + รกสายตา */
body.x10m.page-chat-list .chan-sec-bell,
body.x10m.page-chat-list .chan-sec-add,
body.x10m.page-chat-list .chan-sec-del { display: none !important; }
/* "+ สร้างห้องใน …" ใต้ทุกหมวด — ซ้ำกับปุ่ม + ที่หัวแอป และคนทั่วไปไม่ได้สร้างห้องบ่อย */
body.x10m.page-chat-list .chan-add-row,
body.x10m.page-chat-list .chan-body > .chan-new { display: none; }
/* โปรไฟล์ตัวเองย่อลงเป็นแถวเดียว */
body.x10m.page-chat-list .side-me { padding: 6px 12px; }
body.x10m.page-chat-list .side-me .avatar { width: 30px !important; height: 30px !important; }
/* "ลากห้องมาวางตรงนี้" — ลากวางเป็นท่าของเมาส์ บนมือถือทำไม่ได้ กินที่ครึ่งจอเปล่าๆ */
body.x10m.page-chat-list .chan-drop-hint { display: none; }

/* ============================================================
   รอบ 5 — หน้าที่ยังเป็นตารางเดสก์ท็อป (ตัวจำลอง 2026-09-04)
   ============================================================ */

/* ---- "แผนของเรา": ตาราง 30 คอลัมน์ยัดลงจอ 360px ----
   เดิม table-layout:fixed + width:100% = บีบ 30 วันให้พอดีจอ
   → ช่องกว้าง ~9px เลขวันที่อ่านไม่ออก แตะเลือกวันไม่โดน
   แก้: ปล่อยให้ตารางกว้างตามจริงแล้ว "เลื่อนแนวนอน" แทน (ชื่อคนตรึงซ้ายอยู่แล้ว) */
body.x10m table.op-grid { width: auto !important; min-width: max-content; }
body.x10m table.op-grid td, body.x10m table.op-grid th { min-width: 26px; }
body.x10m .op-dnum { font-size: 11px; }
body.x10m .op-grid-wrap {
  overflow: auto; max-height: none;
  -webkit-overflow-scrolling: touch;   /* iOS: เลื่อนลื่น ไม่งั้นสะดุด */
  overscroll-behavior-x: contain;      /* เลื่อนตารางแล้วไม่ลากทั้งหน้าไปด้วย */
}
/* ชิปคำอธิบายสี (หยุด/สลับ/EX/HBD...) 12 อัน กินครึ่งจอก่อนถึงตาราง
   ยุบเป็นแถวเลื่อนข้างแทนการตัดบรรทัด */
body.x10m .op-legend, body.x10m .op-chips {
  display: flex; flex-wrap: nowrap; overflow-x: auto; gap: 6px;
  -webkit-overflow-scrolling: touch; scrollbar-width: none;
}
body.x10m .op-legend::-webkit-scrollbar, body.x10m .op-chips::-webkit-scrollbar { display: none; }
body.x10m .op-legend > *, body.x10m .op-chips > * { flex: 0 0 auto; }

/* ---- ตารางทั่วไปในหน้าอื่น (ภาพรวม/รายงาน) ----
   ตารางกว้างเกินจอต้องเลื่อนในกล่องตัวเอง ไม่ใช่ดันทั้งหน้าให้เลื่อนข้าง
   (กฎมาตรฐาน: หน้าเว็บห้ามเลื่อนแนวนอน แต่ตารางเลื่อนได้) */
body.x10m .page-body table { max-width: none; }
body.x10m .card > table, body.x10m .tbl-wrap, body.x10m .table-wrap {
  display: block; overflow-x: auto; -webkit-overflow-scrolling: touch;
  overscroll-behavior-x: contain;
}
/* ---- ปุ่มเล็กเกินไปในหน้าตั้งค่า/แอดมิน ----
   เป้าแตะต่ำกว่า 38px = นิ้วกดพลาด (มาตรฐาน iOS 44 / Android 48) */
body.x10m .page-body .btn.small,
body.x10m .page-body .sec-tab,
body.x10m .page-body .chip { min-height: 38px; padding-top: 7px; padding-bottom: 7px; }
/* แถบแท็บย่อยในหน้า (เช่น ผู้ใช้/ประเภท/ทีม) เลื่อนข้างได้แทนตกบรรทัด */
body.x10m .sec-tabs, body.x10m .tab-bar {
  display: flex; flex-wrap: nowrap; overflow-x: auto;
  -webkit-overflow-scrolling: touch; scrollbar-width: none;
}
body.x10m .sec-tabs::-webkit-scrollbar, body.x10m .tab-bar::-webkit-scrollbar { display: none; }
body.x10m .sec-tabs > *, body.x10m .tab-bar > * { flex: 0 0 auto; }

/* ============================================================
   รอบ 6 — เมนู ⋯ หัวห้อง + โมดัลเด้งจากล่าง (ตัวจำลอง 2026-09-04)
   ============================================================ */
/* ---- หัวข้อกลุ่มในเมนู ---- */
.pm-head {
  font-size: 11px; font-weight: 700; letter-spacing: .04em;
  color: var(--muted, #64748B); padding: 8px 14px 4px; text-transform: none;
}
.pm-sep { height: 1px; background: var(--border, #E2E8F0); margin: 4px 0; }

/* ---- เมนู ⋯ บนมือถือ = แผ่นเด้งจากขอบล่าง (แบบ Slack/Discord) ----
   เดิมเป็นป๊อปอัพเล็กๆ ลอยใต้ปุ่มมุมขวาบน → นิ้วโป้งเอื้อมไม่ถึง ต้องขยับมือจับใหม่
   แผ่นล่าง = อยู่ในระยะนิ้วโป้ง + แตะง่ายกว่า + มีที่ให้ปุ่มใหญ่ขึ้น */
body.x10m .pop-menu.head-more:not(.hidden) {
  position: fixed !important;
  left: 0 !important; right: 0 !important;
  top: auto !important; bottom: 0 !important;
  width: auto !important; max-width: none !important;
  max-height: 72vh; overflow-y: auto;
  border-radius: 16px 16px 0 0;
  padding: 6px 0 calc(10px + env(safe-area-inset-bottom));
  box-shadow: 0 -10px 40px rgba(0,0,0,.28);
  animation: x10mSheetUp .2s cubic-bezier(.22,.61,.36,1);
  z-index: 500;
}
@keyframes x10mSheetUp { from { transform: translateY(100%); } to { transform: translateY(0); } }
/* ขีดจับด้านบนแผ่น บอกว่านี่คือแผ่นเลื่อน */
body.x10m .pop-menu.head-more:not(.hidden)::before {
  content: ''; display: block; width: 38px; height: 4px; border-radius: 99px;
  background: var(--border, #CBD5E1); margin: 2px auto 8px;
}
/* ปุ่มในแผ่นต้องใหญ่พอให้นิ้วกด */
body.x10m .pop-menu.head-more button {
  min-height: 48px; font-size: 15px; padding-left: 16px; padding-right: 16px;
}
body.x10m .pop-menu.head-more .pm-icon { width: 22px; }

/* ---- โมดัลทั้ง 48 ตัว = แผ่นเด้งจากขอบล่าง (แบบ Slack/Discord/iOS) ----
   เดิมเป็นกล่องลอยกลางจอแบบเดสก์ท็อป: ปุ่มปิด/ปุ่มยืนยันอยู่กลางจอหรือบนสุด
   นิ้วโป้งเอื้อมไม่ถึง ต้องขยับมือจับใหม่ทุกครั้ง
   แผ่นล่าง = เนื้อหาเริ่มจากล่างขึ้นบน ปุ่มสำคัญอยู่ในระยะนิ้ว + ปัดลงปิดได้ (ท่ามาตรฐานมือถือ)
   ⚠️ ไม่แตะ JS ของโมดัลเลย — เปิด/ปิดยังเป็นกลไกเดิมทุกตัว */
body.x10m .modal-backdrop { align-items: flex-end; padding: 0; }
body.x10m .modal {
  max-width: none; width: 100%;
  border-radius: 18px 18px 0 0;
  max-height: 90vh;
  padding: 8px 16px calc(16px + env(safe-area-inset-bottom));
  animation: x10mSheetUp .22s cubic-bezier(.22,.61,.36,1);
  margin-top: 0 !important;
}
/* ขีดจับด้านบน — บอกว่าปัดลงปิดได้ */
body.x10m .modal::before {
  content: ''; display: block; width: 38px; height: 4px; border-radius: 99px;
  background: var(--border, #CBD5E1); margin: 4px auto 10px;
  position: sticky; top: 0;
}
body.x10m .modal h3 { font-size: 17px; margin-bottom: 10px; }
/* ปุ่มท้ายโมดัลเรียงเต็มความกว้าง กดง่ายกว่าปุ่มเล็กชิดขวา */
body.x10m .modal-actions {
  flex-direction: column-reverse; gap: 8px; margin-top: 14px;
  position: sticky; bottom: 0; background: var(--card);
  padding-top: 10px;
}
body.x10m .modal-actions .btn { width: 100%; min-height: 46px; }
/* ⚠️ ยกเว้นแถวที่มีข้อความ/ตัวนับปนอยู่ (เช่น "เลือกแล้ว n") ไม่ต้องยืดเต็ม */
body.x10m .modal-actions .grow { width: auto; text-align: center; }

/* ---- หน้าแจ้งเตือน: ยุบแถวควบคุมให้แน่นขึ้น ----
   เดิม แท็บสถานะ + ปุ่ม "ทุกชนิด/ตั้งค่า" กิน 2 แถวเต็มก่อนถึงรายการจริง */
body.x10m #page-threads .ntf-tab { padding: 8px 10px; font-size: 13px; }
body.x10m #page-threads .ntf-tools,
body.x10m #page-threads .ntf-filter-row { padding: 6px 10px; gap: 6px; }
body.x10m #page-threads .ntf-tools .btn { min-height: 38px; font-size: 13px; }

/* ---- แผ่นเมนูรวม: ต้องเหลือพื้นหลังให้แตะปิด ----
   เดิม max-height เกือบเต็มจอ พอไทล์เพิ่มเป็น 10 อัน แผ่นสูงจนเหลือขอบบนแค่ 17px
   → แตะพื้นหลังเพื่อปิดแทบไม่ได้ และมือถือไม่มีปุ่ม Escape = ปิดยาก
   จำกัดที่ 78vh เหลือพื้นหลังชัดเจนด้านบน + เพิ่มปุ่มปิดในหัวแผ่นเป็นทางที่สอง */
body.x10m .x10m-sheet { max-height: 78vh; }
body.x10m .x10m-sheet-head { position: relative; }
body.x10m .x10m-sheet-close {
  position: absolute; right: 6px; top: 50%; transform: translateY(-50%);
  width: 40px; height: 40px; border: 0; background: none; cursor: pointer;
  font-size: 20px; line-height: 1; color: var(--x10m-dim);
  display: flex; align-items: center; justify-content: center; border-radius: 50%;
}
body.x10m .x10m-sheet-close:active { background: var(--side-hover); }

/* ---- หน้าแจ้งเตือน: ยุบส่วนหัวให้เหลือที่ให้เนื้อหา ----
   เดิม หัวเพจ 75px + แท็บ 45px + แถวปุ่มกรอง 75px = 195px หายไปก่อนถึงรายการแรก
   (จอสูง 780 เหลือให้เนื้อหาไม่ถึงครึ่ง) */
body.x10m #page-threads .page-head { padding-top: 8px; padding-bottom: 8px; min-height: 0; }
body.x10m #page-threads .page-head h2 { font-size: 16px; }
/* ปุ่ม "ทุกชนิด/ตั้งค่า" ยุบเป็นชิปเล็กแถวเดียวกับแท็บ ไม่กินอีกแถว */
body.x10m #page-threads .ntf-tools { padding: 6px 10px; }
body.x10m #page-threads .ntf-tools .btn { min-height: 34px; font-size: 12.5px; padding: 4px 10px; }
/* หัวข้อพับ "ข้อความยังไม่ได้อ่าน" ให้ดูเป็นปุ่มกดได้จริง ไม่ใช่ข้อความลอย */
body.x10m #page-threads .ntf-fold,
body.x10m #page-threads summary {
  min-height: 44px; display: flex; align-items: center; gap: 6px;
  padding: 0 12px; font-size: 14px; cursor: pointer;
}
/* ข้อความ "ยังไม่มีการแจ้งเตือน" ไม่ต้องกินที่เยอะ */
body.x10m #page-threads .empty-hint,
body.x10m #page-threads .muted { padding: 18px 12px; }

/* ---- หน้า DM: แถวชิปกรอง (ตัวจำลอง 2026-09-04) ---- */
.dmp-filters { display: flex; gap: 8px; padding: 8px 12px 4px; flex-wrap: wrap; }
.dmp-fchip {
  display: inline-flex; align-items: center; gap: 6px;
  border: 1px solid var(--border, #E2E8F0); background: var(--card, #fff);
  color: var(--muted, #64748B); font-family: inherit; font-size: 12.5px;
  padding: 6px 12px; border-radius: 999px; cursor: pointer; min-height: 34px;
}
.dmp-fchip.on { background: var(--blue, #0F4C81); border-color: var(--blue, #0F4C81); color: #fff; }
.dmp-fdot { width: 8px; height: 8px; border-radius: 50%; background: var(--online, #2BAC76); flex: 0 0 auto; }
.dmp-fchip.on .dmp-fdot { background: #fff; }
body.x10m .dmp-fchip { min-height: 38px; font-size: 13px; }

/* ---- แถบเตือน "เบราว์เซอร์ปิดสิทธิ์แจ้งเตือน" ----
   วางที่ bottom:12px = ทับแถบแท็บล่างพอดี กดแท็บไม่ได้เลย (เจอตอนเทส 2026-09-04)
   ยกขึ้นเหนือแถบแท็บ + เหนือแถบเดโม และไม่ให้กินคลิกนอกตัวปุ่มเอง */
body.x10m #ntf-perm-bar {
  bottom: calc(var(--x10m-tabbar-h) + var(--x10m-safe-b) + 26px);
  pointer-events: none;
}
body.x10m #ntf-perm-bar .npb-how,
body.x10m #ntf-perm-bar .npb-x { pointer-events: auto; }
/* ในห้องแชทไม่มีแถบแท็บ → ลดระยะลงมา ไม่ให้ลอยกลางจอ */
body.x10m.in-room #ntf-perm-bar { bottom: calc(env(safe-area-inset-bottom) + 78px); }