/* lobby.css — แผงแชทล็อบบี้ Closed Beta (Art Production · 17 ก.ย. 2026 · ข้อเสนอ รอเจ้าของดู)
   สเปก: docs/beta/LOBBY-CHAT-SPEC-2026-09-17.md (Head) · กฎ: CONCEPT Main Lobby "ห้ามแสดงสถานะอะไรทั้งสิ้น"
   วางทับหน้า ไม่ดันผัง: position fixed ขวาสุด · ปิดอยู่ = [hidden] ไม่มีกล่องในผังเลย → ของที่เปลี่ยนในหน้าแรกตอนปิดมีแค่ปุ่ม CHAT ROOM ในแถว .tools (+ ผังท้ายหน้าที่เจ้าของสั่ง)
   วัสดุโทน B: แผง = กระดาษการ์ดแผ่นยาวแปะกำแพง · หัว = แถบหมึก · ปุ่ม = ยางเดิมของ paper.css
   สีจากทะเบียนเท่านั้น (สำเนา :root อยู่ใน paper.css) · ห้ามตัวอักษร --red บนกระดาษ · ป้าย Silkscreen ≥ 12 px
   ของที่ **ไม่มี** ในไฟล์นี้โดยตั้งใจ: จุดออนไลน์ · จำนวนคน · กำลังพิมพ์ · ติ๊กส่งแล้ว/อ่านแล้ว · ป้ายข้อความใหม่บนปุ่มตอนปิดแผง */

#lobby { position: fixed; top: 0; right: 0; bottom: 0; z-index: 30; display: flex; flex-direction: column;
  width: min(400px, 100vw); color: var(--text); background: var(--card);
  border-left: var(--border-heavy); box-shadow: -8px 0 0 var(--px-3); }
#lobby[hidden] { display: none; }
/* เปิด = เลื่อนเข้าจากขวา 12 เฟรมแบบเลยเป้า (motion.css .mo-drawer · ชั้นนอกห้องแข่ง) · ปิด = หายทันที (ไม่ให้ผังด้านหลังรอ) */

/* หัว — แถบหมึก ชื่อ + ปุ่มปิด · บรรทัดใต้หัวบอกสองเรื่องที่ privacy ต้องบอกด้วย: ใครเห็น · ลบเมื่อไร */
.lb-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 6px 8px 6px 16px; background: var(--ink); }
.lb-head h2 { margin: 0; padding: 0; background: none; color: var(--card); font: 400 12px/1.4 var(--font-label); letter-spacing: .14em; }
.lb-head button { margin: 0 0 6px; padding: 6px 10px; border-color: var(--px-9); }
.lb-about { margin: 0; padding: 10px 16px; border-bottom: 3px solid var(--ink); font-size: 15px; line-height: 1.35; color: var(--label); }

/* รายการ — เลื่อนในแผงเอง หน้าไม่เลื่อนตาม · ข้อความเก่าอยู่บน ใหม่อยู่ล่าง (แบบแชททั่วไป) */
.lb-list { position: relative; flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 0 16px 12px; }

/* หัวช่วงเวลา = เวลาหยาบระดับชั่วโมง (สเปกข้อ 2 · เจ้าของเคาะ 17 ก.ย.)
   **ทุกข้อความอยู่ใต้หัวชั่วโมงหนึ่งหัวเสมอ** — ไม่มีเวลาบนตัวข้อความ ไม่มีนาที ไม่มี "x นาทีที่แล้ว"
   หัวติดขอบบนตอนเลื่อน — อ่านข้อความกลางกองก็ยังรู้ว่าอยู่ชั่วโมงไหน */
.lb-hour { position: sticky; top: 0; z-index: 1; display: flex; align-items: center; gap: 10px; margin: 0; padding: 14px 0 8px; background: var(--card);   /* ไม่มี margin — ขอบบนของ sticky ต้องชนขอบรายการ ไม่งั้นข้อความเก่าโผล่เหนือหัว */ font: 400 12px/1 var(--font-label); letter-spacing: .1em; color: var(--label); }
.lb-hour::after { content: ""; flex: 1; border-top: 2px dashed var(--ink); opacity: .35; }

/* ข้อความ — ชื่อในเกม (หมึกหนา) + ปุ่มรายงานบรรทัดเดียวกัน · เนื้อความใต้ชื่อ
   ชื่อและเนื้อความเป็นของที่ผู้เล่นพิมพ์ → data-no-i18n ในหน้า · ตัดคำได้ทุกที่ (ลิงก์ยาว/คำไม่มีช่องว่าง ไม่ดันแผง) */
.lb-msg { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: start; gap: 2px 10px; padding: 8px 0; }
.lb-msg + .lb-msg { border-top: 2px solid rgba(17, 17, 17, .12); }
.lb-name { min-width: 0; overflow-wrap: anywhere; font: 700 17px/1.3 var(--font-heading); color: var(--ink); }
.lb-body { grid-column: 1 / -1; margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; font: 500 17px/1.4 var(--font-heading); color: var(--text); }
/* ข้อความของเราเอง: แถบหมึกซ้าย + ป้าย YOU · ไม่มีปุ่มรายงาน (รายงานตัวเองไม่มีความหมาย) — ไม่ใช่สถานะ ไม่บอกอะไรเกี่ยวกับคนอื่น */
.lb-msg.mine { padding-left: 12px; box-shadow: inset 5px 0 0 var(--ink); }
.lb-you { display: inline-block; margin-left: 6px; padding: 1px 5px; vertical-align: 2px; font: 400 12px/1.3 var(--font-label); letter-spacing: .08em; color: var(--card); background: var(--ink); }

/* ปุ่มรายงาน — ยางรุ่นเล็ก เห็นตลอด ไม่ซ่อนไว้รอ hover (จอสัมผัสไม่มี hover · เทสต์ข้อ 6 ต้องเจอทุกข้อความ) */
.lb-rep { --depth: 3px; margin: 1px 0 var(--depth); padding: 4px 7px; font-size: 12px; letter-spacing: .08em; border-width: 2px; }
#lobby button:focus-visible { outline-color: var(--ink); }
.lb-head button:focus-visible { outline-color: var(--card); }

/* ถามก่อนรายงาน — กล่องเส้นประใต้ข้อความ ไม่ใช่ป๊อปอัปทับ (ข้อความที่จะรายงานต้องยังเห็นอยู่) */
.lb-ask { grid-column: 1 / -1; margin: 6px 0 2px; padding: 8px 10px; border: var(--border-dashed); font-size: 15px; line-height: 1.35; }
.lb-ask p { margin: 0 0 8px; }
.lb-ask button { margin: 0 6px 6px 0; }
.lb-done { grid-column: 1 / -1; justify-self: start; margin-top: 4px; padding: 2px 7px; font: 400 12px/1.4 var(--font-label); letter-spacing: .06em; color: var(--card); background: var(--ink); }

/* ว่าง / โหลด / โหลดไม่ได้ — กลางรายการ · ไม่พูดถึงว่ามีใครอยู่หรือไม่อยู่ (นั่นคือสถานะ) */
.lb-empty { display: grid; justify-items: center; gap: 10px; margin: 48px 8px; text-align: center; }
.lb-empty img { width: 64px; height: 64px; image-rendering: pixelated; }
.lb-empty p { margin: 0; }
.lb-empty .lb-big { font: 700 21px/1.2 var(--font-heading); color: var(--ink); }
.lb-empty .note { color: var(--label); }

/* ข้อความใหม่มาตอนเลื่อนขึ้นไปอ่านของเก่า — ปุ่มลอยท้ายรายการ ไม่ดึงจอลงเอง (ดึงเองระหว่างอ่าน = เสียที่) · ไม่มีตัวเลข */
.lb-jump { position: sticky; bottom: 4px; display: flex; justify-content: center; margin-top: 8px; pointer-events: none; }
.lb-jump button { margin: 0 0 3px; pointer-events: auto; box-shadow: inset 0 3px 0 rgba(255,255,255,.10), inset 0 -5px 0 rgba(0,0,0,.65), 0 3px 0 var(--px-3), 0 0 0 4px var(--card); }

/* ช่องพิมพ์ — ติดท้ายแผง · 300 ตัว (ตรง check ของ lobby_messages.body) · Enter ส่ง · Shift+Enter ขึ้นบรรทัด */
.lb-compose { padding: 12px 16px 16px; border-top: 3px solid var(--ink); }
.lb-compose label { display: block; margin-bottom: 6px; font: 400 12px var(--font-label); letter-spacing: .1em; color: var(--label); }
.lb-compose textarea { display: block; width: 100%; min-height: 64px; max-height: 140px; resize: none; line-height: 1.35; }
.lb-compose textarea:focus-visible { outline: 3px solid var(--ink); outline-offset: 0; }
.lb-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 10px; }
.lb-row .primary { margin: 0 0 var(--depth); font-size: 19px; padding: 9px 18px; }
.lb-meta { font-size: 15px; line-height: 1.3; color: var(--label); }
.lb-count { font-variant-numeric: tabular-nums; }
.lb-count.near { color: var(--ink); font-weight: 700; }
.lb-stat { min-height: 1.35em; margin: 6px 0 0; font-size: 15px; line-height: 1.35; color: var(--ink); }

/* ปุ่มเปิด — ไอคอน icon-chat (icon-set-2 · เจ้าของสั่งวาด 17 ก.ย.)
   อยู่แถวล่างเดียวกับปุ่มขั้นตอน 1–3 · ไอคอน + CHAT ROOM (เจ้าของเคาะ 17 ก.ย. — ภาษา/เพลง/เต็มจอ ย้ายไปท้ายหน้าให้)
   กดค้าง = แผงเปิดอยู่ (aria-expanded) · **ไม่มีจุด/ตัวเลขข้อความใหม่บนปุ่ม** — แผงปิดไม่ถามเซิร์ฟเวอร์เลย จึงไม่มีอะไรให้บอก และบอกไม่ได้ด้วย */
#lobbybtn[aria-expanded="true"] { transform: translateY(var(--depth)); border-color: var(--px-12); color: var(--px-12); box-shadow: inset 0 5px 0 rgba(0, 0, 0, .6); }

/* จอแคบ: แผงเต็มจอ · ขอบซ้ายไม่มีที่ให้เงา */
@media (max-width: 600px) {
  #lobby { width: 100vw; border-left: 0; box-shadow: none; }
}