/* ══════════════════════════════════════════════════════════════════
   Tableory · ลูกค้า (P11) และรายชื่อหน้าประตู (P8)

   สองหน้าจออยู่ในไฟล์เดียว เพราะแผนจัดสรรสไตล์ชีตให้ P11 ไฟล์เดียว
   และ index.html (ซึ่งเป็นไฟล์ของ P0) มี <link> ครบตั้งแต่ต้นแล้ว ห้ามเพิ่ม
   ไฟล์ที่ไม่มี <link> คือไฟล์ที่ไม่ถูกโหลด และเป็นความผิดที่ไม่มี error ที่ไหนเลย

   ต้องโหลด "หลัง" app.css เสมอ — ทุกสีในไฟล์นี้เป็นโทเคนของ app.css ทั้งหมด
   จึงตามธีมสว่าง/มืดเองโดยไม่ต้องประกาศชุดสีซ้ำ และไม่มีสีดิบสักค่าเดียวในไฟล์นี้

   สภาพการใช้งานที่ทุกกฎในไฟล์นี้อ้างถึง:
   ยืนที่ประตู ห้าทุ่ม ในที่มืด ถือโทรศัพท์มือเดียว
   ══════════════════════════════════════════════════════════════════ */

/* ตัวอักษรไทยห้ามถูกยืดระยะ และต้องมีระยะบรรทัดไม่ต่ำกว่า 1.75
   เพราะสระบนและวรรณยุกต์ของไทยกินพื้นที่เหนือบรรทัด ถ้าบีบแน่นจะอ่านไม่ออกในที่มืด */
.cl, .gl { letter-spacing: normal; line-height: 1.75; padding-bottom: 4px; }

/* ══════════════════ รายชื่อหน้าประตู (P8) ══════════════════ */

.gl-head { position: sticky; top: 0; z-index: 5; background: var(--ground); padding-top: 2px; }

/* .daybar ของ app.css สูง 40px ซึ่งต่ำกว่าเป้าสัมผัสขั้นต่ำของหน้านี้
   ปุ่มพวกนี้ถูกกดด้วยนิ้วโป้งข้างเดียวขณะยืนอยู่ที่ประตู */
/* min-height อย่างเดียวไม่พอ: ป้ายที่สั้นที่สุด ("In" / "เข้าแล้ว") บีบปุ่มเหลือกว้าง 40.5px
   ซึ่งต่ำกว่าพื้น 42px ของทั้งแอป และเป็นปุ่มที่พนักงานประตูกดบ่อยที่สุด */
.gl-states button, .gl-picker button { min-height: var(--tap); min-width: var(--tap); }
.gl-picker button .num { color: var(--accent-text); font-weight: 600; margin-left: 4px; }
.gl-picker button[aria-pressed="true"] .num { color: var(--sel-text); }

.gl-find { display: flex; gap: 8px; align-items: stretch; padding-bottom: 8px; }

.gl-q {
  flex: 1 1 auto; min-width: 0;
  min-height: var(--tap);
  padding: 0 12px;
  border-radius: var(--r-sm);
  border: 1px solid var(--line);
  background: var(--surface-2);
  color: var(--ink);
  font-size: 16px;            /* ต่ำกว่า 16px แล้ว iOS จะซูมหน้าเข้าตอนโฟกัส */
  font-family: var(--font);
}
.gl-q:focus { border-color: var(--bronze); outline: none; }
.gl-q::placeholder { color: var(--ink-mute); }

.gl-manage {
  flex: 0 0 auto;
  min-width: var(--tap); min-height: var(--tap);
  border-radius: var(--r-sm);
  border: 1px solid var(--line);
  background: var(--surface-2);
  color: var(--ink-dim);
  font-size: 17px;
}

.gl-sum { padding-bottom: 6px; }
.gl-hint { font-size: 12.5px; color: var(--ink-mute); line-height: 1.8; }

/* หัวของรายการที่กำลังดู — ตัวนับอยู่ขวาสุดเพราะตากวาดจากซ้ายไปหาตัวเลขเสมอ */
.gl-lhead {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: baseline;
  gap: 2px 10px;
  padding: 6px 0 10px;
  border-bottom: 1px solid var(--line);
  margin-bottom: 8px;
}
.gl-lname { font-size: 15px; font-weight: 600; color: var(--sel-text); }
.gl-lowner { grid-column: 1; font-size: 12px; color: var(--ink-mute); }
.gl-lcount { grid-column: 2; grid-row: 1 / span 2; font-size: 24px; font-weight: 600; }
.gl-lcount span { font-size: 14px; color: var(--ink-mute); font-weight: 400; }

.gl-list { display: flex; flex-direction: column; gap: 6px; }

/* ทั้งแถวคือปุ่ม — ปุ่มเล็กมุมขวาคือการบังคับให้เล็ง ซึ่งทำไม่ได้ด้วยนิ้วโป้งในที่มืด */
.gl-row {
  display: flex; align-items: center; gap: 12px;
  width: 100%;
  min-height: 56px;
  padding: 10px 12px;
  text-align: left;
  border: 1px solid var(--line);
  border-left: 3px solid var(--st-booked);
  border-radius: var(--r);
  background: var(--surface);
  color: var(--ink);
  font-family: var(--font);
  font-size: 15px;
}
.gl-row:active { background: var(--surface-2); }

.gl-party {
  flex: none; min-width: 34px;
  font-size: 21px; font-weight: 600; text-align: center;
}
.gl-main { min-width: 0; flex: 1; display: flex; flex-direction: column; gap: 2px; }
.gl-name {
  font-size: 16px; font-weight: 500;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.gl-sub { font-size: 12px; color: var(--ink-mute); }

/* "เข้าแล้ว" แยกด้วย "เส้น" ก่อน แล้วค่อยด้วยสี — กฎเดียวกับสถานะโต๊ะใน ui/floor.js
   เพราะในที่มืดและบนจอที่หรี่แสง ความต่างของสีหายก่อนความต่างของเส้นเสมอ */
.gl-row.is-arrived {
  border-left-style: double;
  border-left-width: 6px;
  border-left-color: var(--st-seated);
}
.gl-row.is-arrived .gl-name { color: var(--ink-dim); }
.gl-row.is-pending { border-style: dashed; border-left-style: dashed; }

/* ชื่อที่ถูกลบตามคำขอ หรือถูกล้างเมื่อครบกำหนด — ต้องอ่านออกว่า "ถูกลบ" ไม่ใช่ช่องว่าง */
.gl-erased { color: var(--ink-mute); font-style: italic; }

.gl-warn { border-color: var(--bronze); color: var(--accent-text); }

/* ══════════════════ ลูกค้า (P11) ══════════════════ */

.cl-head { position: sticky; top: 0; z-index: 5; background: var(--ground); padding: 2px 0 10px; }

.cl-q {
  width: 100%;
  min-height: var(--tap);
  padding: 0 12px;
  border-radius: var(--r-sm);
  border: 1px solid var(--line);
  background: var(--surface-2);
  color: var(--ink);
  font-size: 16px;
  font-family: var(--font);
}
.cl-q:focus { border-color: var(--bronze); outline: none; }
.cl-q::placeholder { color: var(--ink-mute); }

/* ── สถานะของชั้นค้นหาที่สอง ──
   หน้าจอที่นิ่งคือหน้าจอที่พนักงานกดซ้ำ บรรทัดนี้จึงไม่ใช่ของประดับ
   มันคือคำตอบของ "กดแล้วไม่ติดหรือเปล่า" ซึ่งเป็นคำถามที่เกิดขึ้นทุกครั้งที่เน็ตอืด */
.cl-note {
  font-size: 12.5px; color: var(--ink-mute);
  padding: 8px 2px; line-height: 1.8;
}
.cl-note.is-busy { color: var(--accent-text); }
.cl-note.is-busy::before { content: '· '; }

.cl-body { display: flex; flex-direction: column; gap: 6px; }

.cl-row {
  display: flex; align-items: center; gap: 12px;
  width: 100%;
  min-height: 56px;
  padding: 10px 12px;
  text-align: left;
  border: 1px solid var(--line);
  border-radius: var(--r);
  background: var(--surface);
  color: var(--ink);
  font-family: var(--font);
}
.cl-row:active { background: var(--surface-2); }

.cl-main { min-width: 0; flex: 1; display: flex; flex-direction: column; gap: 3px; }
.cl-name {
  display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
  font-size: 16px; font-weight: 500;
}
.cl-sub { font-size: 12.5px; color: var(--ink-mute); }
.cl-visits { flex: none; text-align: right; font-size: 20px; font-weight: 600; }
.cl-visits small { display: block; font-size: 10.5px; font-weight: 400; color: var(--ink-mute); }

/* คำกำกับข้าง ๆ จุด VIP — จุดอย่างเดียวพอบนผังโต๊ะ (มีบริบทของโต๊ะช่วยอ่าน)
   แต่ไม่พอในรายชื่อล้วน ซึ่งเป็นสิ่งเดียวที่หน้านี้มี */
.cl-viptag {
  font-size: 11px; font-weight: 600; letter-spacing: .04em;
  color: var(--accent-text); margin-left: -2px;
}

.cl-badges, .cl-tags { display: flex; gap: 6px; flex-wrap: wrap; }
/* ตราที่เตือนต้องต่างด้วยเส้น ไม่ใช่ด้วยสีอย่างเดียว */
.tag--no_show_risk { border-style: dashed; border-color: var(--rust-light); color: var(--rust-light); }
.tag--regular { border-color: var(--sage); color: var(--olive-light); }
.tag--first_timer, .tag--group_first_timer { border-color: var(--bronze); color: var(--accent-text); }

/* ── ค้นหาล่าสุด ── อยู่บนเครื่องนี้เท่านั้น และหายเมื่อปิดแอป (ดู ui/clients/search.js) */
.cl-recent { padding: 6px 0 14px; }
.cl-recent-head { display: flex; align-items: baseline; gap: 10px; }
.cl-recent-head h3 { font-size: 13px; color: var(--ink-dim); font-weight: 500; margin: 0 0 8px; }
.cl-clear {
  margin-left: auto;
  min-height: 42px; padding: 0 12px;
  border: 1px solid var(--line); border-radius: var(--r-sm);
  background: transparent; color: var(--ink-dim);
  font-family: var(--font); font-size: 13px;
}
.cl-hint { font-size: 12px; color: var(--ink-mute); line-height: 1.8; margin-top: 8px; }

/* ── โปรไฟล์ ── */
.cl-title { display: flex; align-items: center; gap: 8px; font-size: 20px; font-weight: 600; }
.cl-erased { color: var(--ink-mute); font-style: italic; font-weight: 400; font-size: 17px; }
.cl-warn { border-color: var(--bronze); color: var(--accent-text); }

.cl-contact { margin-top: 12px; display: flex; flex-direction: column; gap: 8px; }
.cl-masked { font-size: 17px; color: var(--ink-dim); }
/* ปุ่มโทรเป็นลิงก์ tel: เต็มความกว้าง — มือเดียว ในที่มืด ไม่ใช่ตัวเลขให้อ่านออกเสียง */
.cl-call {
  display: block; min-height: var(--tap); line-height: var(--tap);
  padding: 0 12px;
  border: 1px solid var(--bronze); border-radius: var(--r-sm);
  color: var(--accent-text); text-decoration: none; font-size: 18px;
}
.cl-email { font-size: 14px; color: var(--ink-dim); word-break: break-all; }
.cl-notes { font-size: 14px; color: var(--ink-dim); margin-top: 12px; }

.cl-stats { display: flex; gap: 16px; flex-wrap: wrap; }
.cl-stats b { font-size: 19px; font-weight: 600; color: var(--ink); }
.cl-stats span span { font-size: 11.5px; color: var(--ink-mute); margin-left: 4px; }

.cl-bks { display: flex; flex-direction: column; gap: 6px; }
.cl-bk {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 10px;
  border: 1px solid var(--line); border-radius: var(--r-sm);
  background: var(--surface);
  font-size: 13.5px;
}
.cl-bk-date { flex: none; min-width: 78px; color: var(--ink-dim); }
.cl-bk-main { flex: 1; min-width: 0; display: flex; gap: 8px; align-items: baseline; }
.cl-bk-time { font-weight: 600; }
.cl-bk-main .dim { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ── ประวัติการแก้ช่องทางติดต่อ (0064) ── รูปร่างเดียวกับแถวการจองข้างบน
   ค่าเก่าขีดฆ่า ค่าใหม่ตัวหนา — แบบเดียวกับคู่ "ก่อน/หลัง" ในแท็บบันทึก (dashboard.css .au-pair) */
.cl-chgs { display: flex; flex-direction: column; gap: 6px; }
.cl-chg {
  display: flex; flex-direction: column; gap: 3px;
  padding: 8px 10px;
  border: 1px solid var(--line); border-radius: var(--r-sm);
  background: var(--surface);
  font-size: 13.5px;
}
.cl-chg-head { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.cl-chg-kind { font-size: 12px; color: var(--ink-mute); }
.cl-chg-when { margin-left: auto; font-size: 12px; color: var(--ink-dim); }
.cl-chg-vals { word-break: break-all; }
.cl-chg-vals s { color: var(--ink-mute); }
.cl-chg-sub { font-size: 12px; color: var(--ink-mute); }

/* ══════════════════ ข้อความ (บทสนทนากับแขก) ══════════════════

   อยู่ในไฟล์นี้ด้วยเหตุผลเดียวกับที่รายชื่อหน้าประตู (P8) อยู่ในไฟล์นี้:
   index.html เขียนไว้ที่หัวรายการ <link> เองว่าทุกบรรทัดอยู่ครบตั้งแต่ต้น
   และ "การปล่อยให้แต่ละแพ็กเกจมาเติมบรรทัดของตัวเองทีหลัง คือการชนกันในไฟล์เดียว"
   หน้าข้อความใกล้กับหน้าลูกค้าที่สุดอยู่แล้ว — ทั้งคู่คือ "คนคนหนึ่ง" ไม่ใช่ "คืนหนึ่ง"

   ไม่มีสีดิบสักค่าในบล็อกนี้ ทุกอย่างเป็นโทเคนของ app.css จึงตามธีมเองทั้งสองโหมด
   สภาพการใช้งานที่ทุกกฎอ้างถึง: ยืนที่โต๊ะต้อนรับ สามทุ่ม ถือโทรศัพท์มือเดียว
   ══════════════════════════════════════════════════════════════ */

.msg { letter-spacing: normal; line-height: 1.75; padding-bottom: 12px; }
.msg-title { font-size: 19px; font-weight: 600; margin: 0; }
.msg-head { padding: 2px 0 10px; }
.msg-hint { font-size: 12.5px; color: var(--ink-mute); line-height: 1.8; margin: 2px 0 0; }
.msg-warn { color: var(--accent-text); }
.msg-note { margin: 0 0 12px; }
.msg-note p { margin: 0 0 4px; }
.msg-ro { padding: 10px 0 0; }

/* ── ถาดเข้า ───────────────────────────────────────────────── */

.msg-list { display: flex; flex-direction: column; gap: 6px; }

/* ทั้งแถวคือปุ่ม — ปุ่มเล็กมุมขวาคือการบังคับให้เล็ง ซึ่งทำไม่ได้ด้วยนิ้วโป้ง
   min-width:0 ทุกชั้นที่ซ้อนกัน ไม่งั้นข้อความยาวจะดันทั้งหน้าให้เลื่อนแนวนอนที่ 390px */
.msg-row {
  display: flex; flex-direction: column; gap: 2px;
  width: 100%; min-width: 0;
  min-height: var(--tap);
  padding: 10px 12px;
  text-align: left;
  border: 1px solid var(--line);
  border-left: 3px solid var(--line);
  border-radius: var(--r);
  background: var(--surface);
  color: var(--ink);
  font-family: var(--font);
  font-size: 15px;
  line-height: 1.75;
}
/* รอตอบ = เส้นซ้ายสีบรอนซ์ · สีไม่ใช่ตัวบอกอย่างเดียว ป้าย "แขก" อยู่ในแถวด้วย */
.msg-row--wait { border-left-color: var(--st-booked); background: var(--accent-wash-faint); }

.msg-row-top { display: flex; justify-content: space-between; gap: 10px; align-items: baseline; min-width: 0; }
.msg-row-name { font-weight: 600; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.msg-row-when { flex: none; font-size: 11.5px; color: var(--ink-mute); }
.msg-row-sub { font-size: 12px; color: var(--ink-dim); }
.msg-row-prev {
  font-size: 14px; color: var(--ink);
  min-width: 0; overflow-wrap: anywhere;
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden;
}
.msg-row-who {
  display: inline-block; margin-right: 6px; padding: 0 7px;
  border-radius: 999px; background: var(--surface-2);
  font-size: 11.5px; line-height: 1.75; color: var(--ink-mute); vertical-align: 1px;
}
.msg-row-who--guest { background: var(--accent-wash); color: var(--accent-text); }
.msg-flag { font-size: 11.5px; color: var(--accent-text); }

.msg-loose { display: flex; flex-direction: column; gap: 6px; }
.msg-loose-row {
  padding: 8px 10px; min-width: 0;
  border: 1px dashed var(--line);
  border-radius: var(--r-sm);
  background: var(--surface);
}

/* ── เธรด ──────────────────────────────────────────────────── */

.msg-back { align-self: flex-start; min-height: var(--tap); margin-bottom: 6px; flex: none; }
.msg-who { flex: none; padding-bottom: 8px; border-bottom: 1px solid var(--line); margin-bottom: 8px; }
.msg--thread .msg-note { flex: none; }

/* ═══ ช่องพิมพ์ต้องอยู่ในสายตาเสมอ ไม่ใช่อยู่ใต้เธรดที่ยาวไม่มีที่สิ้นสุด ═══

   #app เป็นกริด `auto 1fr auto` สูง 100dvh และ main คือแถว 1fr ที่เลื่อนได้
   main จึงมีความสูงที่แน่นอน · หน้าเธรดยืดเต็ม main แล้วให้ "กล่องข้อความ" เป็นตัวเลื่อน
   ส่วนช่องพิมพ์ติดอยู่ท้ายคอลัมน์ — วัดจริงที่ 390×844 แล้วช่องพิมพ์อยู่เหนือขอบจอ

   ทำเฉพาะหน้าเธรด (.msg--thread) ไม่ใช่ทุกหน้าในไฟล์นี้:
   ถาดเข้าต้องเลื่อนทั้งหน้าตามปกติ ไม่ใช่มีตัวเลื่อนซ้อนสองชั้น */
/* ไม่มี overflow:hidden โดยตั้งใจ — ถ้ากล่องข้างในรวมกันสูงเกิน main
   สิ่งที่ถูกคือ "ให้ทั้งหน้าเลื่อน" ไม่ใช่ "ตัดช่องพิมพ์ทิ้ง" */
.msg--thread { display: flex; flex-direction: column; height: 100%; }

.msg-thread {
  display: flex; flex-direction: column; gap: 8px;
  overflow-y: auto; overflow-x: hidden;
  padding: 2px 0 8px;
}
/* flex-basis 0 + min-height 0 คือสองบรรทัดที่ทำให้กล่องย่อลงต่ำกว่าเนื้อในได้จริง
   ขาดตัวใดตัวหนึ่ง กล่องจะโตตามเนื้อในแล้วดันช่องพิมพ์หลุดจอ (ซึ่งเป็นสิ่งที่เกิดขึ้นตอนวัดครั้งแรก) */
.msg--thread .msg-thread { flex: 1 1 0; min-height: 140px; }
.msg--thread .msg-compose { flex: 0 0 auto; }

.msg-b {
  max-width: 88%; min-width: 0;
  align-self: flex-start;
  padding: 9px 12px;
  border: 1px solid var(--line);
  border-radius: var(--r);
  border-bottom-left-radius: var(--r-sm);
  background: var(--surface);
}
.msg-b--mine {
  align-self: flex-end;
  border-bottom-left-radius: var(--r);
  border-bottom-right-radius: var(--r-sm);
  background: var(--accent-wash);
  border-color: var(--st-booked);
}
/* คำที่ยาวมาก (อีเมล · ลิงก์) ต้องตัดบรรทัด ไม่ใช่ดันกล่องให้ล้นจอ */
.msg-b-body { font-size: 15px; line-height: 1.75; white-space: pre-wrap; overflow-wrap: anywhere; }
.msg-b-meta {
  display: flex; gap: 10px; justify-content: space-between;
  font-size: 11.5px; color: var(--ink-mute); margin-top: 4px;
}
.msg-b-state { color: var(--ink-dim); }
.msg-b-state--bad { color: var(--danger-text); }

/* แถวของระบบ — เส้นเวลาบาง ๆ ไม่ใช่กล่องข้อความ */
.msg-sys { text-align: center; font-size: 11.5px; color: var(--ink-mute); padding: 2px 0; }

/* ── ช่องพิมพ์ ─────────────────────────────────────────────── */

.msg-compose { padding-top: 10px; border-top: 1px solid var(--line); }
.msg-box {
  width: 100%;
  min-height: 76px;
  resize: vertical;
  font-size: 16px;          /* ต่ำกว่า 16px แล้ว iOS ซูมหน้าเข้าตอนโฟกัส */
  line-height: 1.75;
  font-family: var(--font);
}
.msg-acts { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; align-items: stretch; }
.msg-acts .btn { min-height: var(--tap); }
.msg-wand { flex: 1 1 auto; min-width: 0; }
.msg-send { flex: 0 0 auto; min-width: 96px; }
/* ปุ่มที่ใช้ไม่ได้ต้อง "ไม่ใช่ปุ่ม" — ข้อความที่บอกว่าทำไม ดีกว่าปุ่มเทาที่กดแล้วเงียบ */
.msg-wand-off {
  flex: 1 1 auto; min-width: 0;
  display: flex; align-items: center;
  font-size: 12.5px; color: var(--ink-mute); line-height: 1.6;
}
/* .seg ของ app.css เป็นกริดสองคอลัมน์ · คำลงท้ายมีสามตัวเลือก ถ้าไม่ตั้งใหม่
   ตัวที่สามจะตกไปอยู่แถวที่สองแล้วกิน 48px ของจออีกแถวหนึ่งฟรี ๆ */
.msg-particle { margin-top: 8px; grid-template-columns: repeat(3, 1fr); }
.msg-particle button { min-height: var(--tap); min-width: 0; padding: 0 6px; }

/* ── จอเตี้ย (โทรศัพท์เครื่องเล็ก · แนวนอน) ────────────────────────────────
   บีบเธรดให้เหลือไม่กี่บรรทัดเพื่อให้ช่องพิมพ์อยู่ในจอ คือการแลกที่แย่กว่า
   การให้ทั้งหน้าเลื่อนตามปกติ — พนักงานเลื่อนลงไปพิมพ์ได้ แต่อ่านบทสนทนา
   ที่เหลือสามบรรทัดไม่ได้ · ต่ำกว่า 700px จึงกลับไปเป็นหน้าเลื่อนธรรมดา */
@media (max-height: 700px) {
  .msg--thread { height: auto; min-height: 100%; overflow: visible; }
  .msg--thread .msg-thread { flex: 0 0 auto; }
}
/* โทรศัพท์ทุกขนาด (เจ้าของ 20 ต.ค. ภาพ iPhone ใน Safari "อ่านยาก · ข้อความแสดงไม่ครบ")
   แถบหัวของแอป + แถบ Safari กินจอไปเกินครึ่ง กล่องข้อความถูกบีบเหลือ 140px = อีเมลยาวเห็นแค่สองบรรทัด
   และปุ่มส่งตกใต้แถบสถานะ ⇒ บนจอแคบให้ทั้งหน้าเลื่อน · ข้อความแสดงเต็ม · เปิดมาที่ข้อความล่าสุด (after() ใน messages.js) */
@media (max-width: 699px) {
  .msg--thread { height: auto; min-height: 100%; overflow: visible; }
  .msg--thread .msg-thread { flex: 0 0 auto; overflow: visible; }
  .msg-b { max-width: 94%; }
  .msg-box { min-height: 64px; }
  .msg-compose { padding-bottom: 8px; }
}

/* ── การ์ดของถาด (เจ้าของ 20 ต.ค. ภาพออกแบบ) ─────────────────────────────
   อักษรย่อบนวงสีที่คงที่ต่อคน · ป้ายช่องทางมุมขวาล่าง · แถวปุ่มงานใต้ข้อความ
   สีวงมาจากโทเคนพาเลตเท่านั้น (color-mix กับพื้น) ทั้งสองธีมจึงตามเอง */
.msg-head--cards { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 12px; }
.msg-head--cards .msg-title { font-size: 21px; }
.msg-filters { display: flex; gap: 4px; flex-wrap: wrap; }
.msg-filter {
  min-height: var(--tap); padding: 0 12px; border-radius: 999px;
  border: 1px solid transparent; background: transparent;
  font-family: var(--font); font-size: 13.5px; color: var(--ink-dim);
}
.msg-filter[aria-pressed="true"] { background: var(--accent-wash); color: var(--sel-text); font-weight: 600; }

.msg-list { gap: 10px; }
.msg-card {
  border: 1px solid var(--line-soft, var(--line));
  border-radius: var(--r-lg, var(--r));
  background: var(--surface);
  box-shadow: 0 1px 2px color-mix(in srgb, var(--ink) 6%, transparent);
  overflow: hidden;
}
.msg-card--wait { border-color: color-mix(in srgb, var(--bronze) 55%, var(--line)); }
.msg-card-main {
  display: flex; gap: 12px; align-items: flex-start;
  width: 100%; min-width: 0; padding: 14px 14px 8px;
  border: 0; background: transparent; text-align: left;
  color: var(--ink); font-family: var(--font); font-size: 15px; line-height: 1.75;
}
.msg-card-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1 1 auto; }
.msg-card .msg-row-name { font-size: 16.5px; }

.msg-av {
  position: relative; flex: none;
  width: 48px; height: 48px; border-radius: 50%;
  display: grid; place-items: center;
  font-size: 17px; font-weight: 600;
  color: var(--ink);
  background: color-mix(in srgb, var(--bronze) 28%, var(--surface));
}
.msg-av--1 { background: color-mix(in srgb, var(--sage) 34%, var(--surface)); }
.msg-av--2 { background: color-mix(in srgb, var(--sand) 70%, var(--surface)); }
.msg-av--3 { background: color-mix(in srgb, var(--olive) 26%, var(--surface)); }
.msg-av--4 { background: color-mix(in srgb, var(--gray) 40%, var(--surface)); }
.msg-av--5 { background: color-mix(in srgb, var(--bronze) 45%, var(--surface)); }
.msg-av-ch {
  position: absolute; right: -3px; bottom: -3px;
  width: 22px; height: 22px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--surface); border: 1px solid var(--line);
  color: var(--accent-text);
}
.msg-av-ch .ico { width: 13px; height: 13px; }

.msg-card-acts {
  display: flex; gap: 8px; flex-wrap: wrap;
  padding: 2px 14px 14px 74px;   /* ตรงกับขอบข้อความ (48 + 12 + 14) */
}
.msg-act {
  display: inline-flex; align-items: center; gap: 5px;
  min-height: var(--tap); padding: 0 12px; border-radius: 999px;
  border: 1px solid var(--line); background: var(--surface);
  font-family: var(--font); font-size: 13.5px; color: var(--ink);
}
.msg-act .ico { width: 17px; height: 17px; }
.msg-act:active { background: var(--surface-2); }
/* โทรศัพท์ทั่วไป (≤ 400px) — ปุ่มสามตัวต้องอยู่แถวเดียว: เริ่มที่ขอบการ์ดแทนขอบข้อความ */
@media (max-width: 400px) {
  .msg-card-acts { padding-left: 14px; gap: 6px; }
}

/* หน้าแรก "คืนนี้ · ต้องรู้ก่อนแขกมา" (20 ต.ค.) */
.cl-night { display: grid; gap: 8px; margin-bottom: 18px; }
.cl-night-head { margin: 4px 0 0; font-size: 13px; font-weight: 600; letter-spacing: .02em; color: var(--ink-dim); }
.cl-filters { display: flex; flex-wrap: wrap; gap: 6px; }

/* วันเกิด (0079 · 23 ต.ค.) — วัน + เดือน ไม่ถามปี */
.cl-bday { font-size: 14px; color: var(--ink); margin-top: 6px; }
.cl-bday-row { display: flex; gap: 8px; margin-top: 6px; }
.cl-bday-row select { flex: 1; min-height: 44px; }