/* หน้าต่างสังคม — ผู้เล่น · ปาร์ตี้ · ห้องแชท (social-window.js · ออกแบบใหม่ 3 ต.ค.)
   สี: ครีม #fffaf0/#f3e6c8 · ทีล #2f6f73 (ปาร์ตี้/ปุ่มหลัก) · ทอง #e8b64a (ห้องแชท/ปุ่มสร้าง) · น้ำตาล #342c26
   ปาร์ตี้ = ⚔️ แถบทีล · ห้องแชท = 💬 แถบทอง — สองระบบหน้าตาต่างกันชัด (บรีฟ: ห้ามเหมือนกัน)
   ⚠️ ตัวหนังสือไม่ต่ำกว่า 13px · สถานะไม่ใช้สีอย่างเดียว (ไอคอน + ข้อความ) · ปุ่มบนจอสัมผัสสูง ≥ 44px */

#windows .win[data-win="social"] { box-sizing: border-box; width: min(94vw, 780px); height: min(88vh, 640px); max-height: none; display: flex; flex-direction: column; }
html[data-skin="wood"] body .win[data-win="social"] > .body { max-height: none; }
#windows .win[data-win="social"] > .body { padding: 0; overflow: hidden; flex: 1; min-height: 0; display: flex; position: relative; }

.sx { position: relative; flex: 1; min-width: 0; display: flex; flex-direction: column; color: #342c26; font-size: 14px; }
.sx-stats { display: flex; flex-wrap: wrap; gap: 4px 16px; padding: 7px 16px; background: linear-gradient(90deg, #f6ead0, #fbf4e2); border-bottom: 1px solid #e3d2a8; font-size: 13px; color: #6b5a44; }
.sx-stats b { color: #2f6f73; margin-left: 2px; }
.sx-tabs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; padding: 10px 12px 8px; background: #fbf5e7; }
.sx-tabs button { position: relative; min-height: 46px; display: flex; align-items: center; justify-content: center; gap: 7px; border-radius: 12px; cursor: pointer;
  border: 2px solid #e0cda0; background: #fffdf7; color: #6b5a44; font: 700 16px/1 var(--font-head); }
.sx-tabs button i { font-style: normal; font-size: 18px; }
.sx-tabs button:hover { background: #fff8e6; }
.sx-tabs button.on { background: linear-gradient(#3f8a8e, #2f6f73); border-color: #2f6f73; color: #fffdf6; box-shadow: 0 2px 0 #1f4f52; }
.sx-tabs button[data-t="chat"].on { background: linear-gradient(#f2cb6a, #e8b64a); border-color: #b9954a; color: #4a3512; box-shadow: 0 2px 0 #9a7a2e; }
.sx-tabs button:focus-visible { outline: 3px solid #e8b64a; outline-offset: 2px; }
.sx-mark { position: absolute; top: 6px; right: 9px; width: 9px; height: 9px; border-radius: 50%; background: #5cb86a; box-shadow: 0 0 0 2px #fffdf6; }   /* มีปาร์ตี้/ห้องอยู่ (ไม่ใช่ป้ายแดงแจ้งเตือน) */

.sx-body { flex: 1; min-height: 0; overflow-y: auto; padding: 8px 14px 16px; display: flex; flex-direction: column; gap: 10px; background: #fffaf0; }
.sx-h { margin: 6px 0 0; font: 800 17px/1.2 var(--font-head); color: #2f6f73; }
.sx-h small { display: block; margin-top: 2px; font: 500 13px/1.3 var(--font); color: #8a7a5a; }
.sx-note { margin: 0; text-align: center; font-size: 13px; color: #8a7a5a; }
.sx-hint { margin: 0; font-size: 13px; line-height: 1.45; color: #6b5a44; }

/* ── ชิปกรอง / ค้นหา ─────────────────────────── */
.sx-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.sx-chip { min-height: 36px; padding: 0 14px; border-radius: 999px; cursor: pointer; border: 1px solid #d8c69a; background: #f6efdd; color: #6b5a3a; font: 700 14px/1 var(--font-head); }
.sx-chip i { font-style: normal; opacity: .75; margin-left: 2px; }
.sx-chip.on { background: #2f6f73; border-color: #2f6f73; color: #fffdf6; }
.sx-body:has(.sx-mine.room) .sx-chip.on, .sx .sx-chip.on[data-cf] { background: #e8b64a; border-color: #b9954a; color: #4a3512; }
.sx-chip:focus-visible { outline: 3px solid #e8b64a; outline-offset: 2px; }
.sx-find { display: flex; gap: 8px; }
.sx-find input, .sx-find select { min-height: 40px; padding: 0 12px; border-radius: 10px; border: 1px solid #d8c69a; background: #fffdf7; color: #4a3512; font: 500 14px var(--font); }
.sx-find input { flex: 1; min-width: 0; }
.sx-find input:focus, .sx-find select:focus { outline: none; border-color: #2f6f73; box-shadow: 0 0 0 3px #2f6f7333; }

/* ── การ์ด ─────────────────────────── */
.sx-cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.sx-card { position: relative; display: grid; grid-template-columns: 46px minmax(0, 1fr); gap: 8px 10px; align-items: start; padding: 10px; border-radius: 14px; background: #fffdf7; border: 1px solid #e6dabb; box-shadow: 0 1px 0 #e7d8b4; }
.sx-card.fit { border-color: #2f6f73; background: #f4fbf8; box-shadow: inset 4px 0 0 #2f6f73; }
.sx-card .sx-acts { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 6px; justify-content: flex-end; }
.sx-card.pt { border-left: 5px solid #2f6f73; }
.sx-card.rm { border-left: 5px solid #e8b64a; background: #fffbea; }
.sx-main { display: grid; gap: 2px; min-width: 0; }
.sx-main b { font: 700 16px/1.25 var(--font-head); color: #342c26; overflow-wrap: anywhere; }
.sx-main small { font-size: 13px; color: #7a6a4a; }
.sx-topic2 { color: #5b4a36 !important; font-style: italic; }
.sx-where.near { color: #2c7a3c; font-weight: 700; }
.sx-av { width: 46px; height: 46px; display: grid; place-items: center; border-radius: 50%; border: 2px solid #e8b64a; background: var(--lc, #9a8c70); color: #fff; font: 800 20px/1 var(--font-head); text-shadow: 0 1px 2px #0005; box-shadow: inset 0 -6px 10px #0002; }
.sx-ic { width: 46px; height: 46px; display: grid; place-items: center; border-radius: 12px; font-size: 24px; }
.sx-ic.party { background: #e1f0ee; border: 2px solid #2f6f73; }
.sx-ic.room { background: #fbebb9; border: 2px solid #e8b64a; }
/* ภาพ Astra ใบ 30 (4 ต.ค.) — ไอคอนห้อง/แท็บ · อวาตาร์สายอาชีพ (ครอปวงกลม ขอบทองจาก .sx-av) · ภาพหน้าว่าง */
.sx-img { width: 1.35em; height: 1.35em; object-fit: contain; vertical-align: -.32em; flex: none; }
.sx-tabs button i .sx-img { width: 30px; height: 30px; vertical-align: middle; display: block; }
.sx-ic .sx-img { width: 36px; height: 36px; }
.sx-chip .sx-img, .tagpick .sx-img { width: 20px; height: 20px; vertical-align: -5px; }
.sx-av { overflow: hidden; }
.sx-av .sx-avimg { width: 100%; height: 100%; object-fit: cover; }
.sx-empty-art { width: min(240px, 70%); height: auto; aspect-ratio: 3 / 2; object-fit: contain; }
html.touch-ui.land .sx-empty-art { width: auto; height: 92px; }
.sx-card.blocked { opacity: .8; }
.sx-tags { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 3px; }
.sx-tag { display: inline-flex; align-items: center; gap: 4px; padding: 2px 9px; border-radius: 999px; font-size: 13px; font-weight: 600; background: #efe3c4; color: #5b4a36; }
.sx-tag.party { background: #dcefec; color: #1f5558; }
.sx-tag.room { background: #fbe9b0; color: #6b5320; }
.sx-tag.where { background: #ece6d6; color: #6b5a44; }
.sx-far { font-size: 13px; color: #8a8070; font-weight: 600; padding: 0 6px; }

/* ปาร์ตี้: ที่ไป · สายอาชีพที่หา · สมาชิก */
.l-swordsman { --lc: #c0583f; } .l-mage { --lc: #7a58a8; } .l-archer { --lc: #5a8f3c; }
.l-acolyte { --lc: #c7962e; } .l-thief { --lc: #4f5872; } .l-merchant { --lc: #a8743a; } .l-novice { --lc: #9a8c70; }
.sx-goalrow, .sx-wants, .sx-topic, .sx-members { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; margin-top: 4px; }
.sx-goal { font: 700 14px/1.3 var(--font-head); color: #3a2f20; }
.sx-goal.idle { color: #8a7a5a; font-weight: 500; }
.sx-goal i { font-style: normal; font-weight: 600; color: #7a6a4a; }
.sx-goal i.hard { color: #b0432c; }
.sx-wants small { font-size: 13px; color: #8a7a5a; }
.sx-want { display: inline-flex; align-items: center; padding: 2px 9px; border-radius: 999px; font: 700 13px/1.4 var(--font-head); white-space: nowrap;
  border: 1px solid color-mix(in srgb, var(--lc) 55%, #fff); background: color-mix(in srgb, var(--lc) 12%, #fffdf6); color: color-mix(in srgb, var(--lc) 80%, #2b200f); }
.sx-want.me { background: var(--lc); border-color: var(--lc); color: #fffdf6; }
.sx-want.have { opacity: .55; }
.sx-topic { font-size: 13px; color: #6b5a3a; overflow-wrap: anywhere; }
.sx-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--lc); box-shadow: 0 0 0 1px #fffdf6, 0 0 0 2px color-mix(in srgb, var(--lc) 40%, transparent); }
.sx-fit { display: inline-block; width: fit-content; margin-top: 2px; padding: 1px 9px; border-radius: 999px; background: #2f6f73; color: #fffdf6; font: 700 13px/1.6 var(--font-head); font-style: normal; }

/* ── ปุ่ม ─────────────────────────── */
.sx-btn { min-height: 40px; padding: 0 14px; border-radius: 10px; cursor: pointer; white-space: nowrap; border: 1px solid #c9b88e; background: #f6efdd; color: #6b5a3a; font: 700 14px/1 var(--font-head); }
.sx-btn:hover:not(:disabled):not(.main):not(.go):not(.heart) { background: #fdf7e8; }   /* ปุ่มหลัก/สร้าง/หัวใจ: เดิม hover ทับพื้นเป็นครีม ตัวหนังสือขาวหายไป (4 ต.ค.) */
.sx-btn.main:hover:not(:disabled), .sx-btn.go:hover:not(:disabled), .sx-btn.heart:hover:not(:disabled) { filter: brightness(1.07); }
.sx-btn.main { border-color: #1f5558; background: linear-gradient(#3f8a8e, #2f6f73); color: #fffdf6; box-shadow: 0 2px 0 #1f4f52; }
.sx-btn.go { border-color: #b9954a; background: linear-gradient(#f2cb6a, #e8b64a); color: #4a3512; box-shadow: 0 2px 0 #9a7a2e; }
.sx-btn.warn { border-color: #d8b0a4; background: #fdf1ed; color: #a04a36; }
.sx-btn.more { min-width: 40px; padding: 0; font-size: 20px; }
.sx-btn:disabled { opacity: .5; cursor: default; box-shadow: none; }
.sx-btn:focus-visible { outline: 3px solid #e8b64a; outline-offset: 2px; }

/* ปุ่มสร้างต้องเด่น — ถ้าไม่มีใครสร้าง ระบบนี้ก็ไม่เกิด */
.sx-create { display: grid; gap: 2px; justify-items: center; min-height: 58px; padding: 8px 14px; border-radius: 14px; cursor: pointer; font: 800 17px/1.2 var(--font-head); }
.sx-create small { font: 500 13px/1.3 var(--font); opacity: .85; }
.sx-create.party { border: 2px dashed #2f6f73; background: #eef6f5; color: #1f5558; }
.sx-create.room { border: 2px dashed #b9954a; background: #fff6d8; color: #6b5320; }
.sx-create:hover { background: #fff; border-style: solid; }

/* ── ปาร์ตี้/ห้องของฉัน (อยู่บนสุดเสมอ) ─────────────────────────── */
.sx-mine { padding: 12px 14px; border-radius: 14px; display: grid; gap: 8px; }
.sx-mine.party { background: linear-gradient(#e9f4ef, #dcece4); border: 2px solid #8fc0ac; }
.sx-mine.room { background: linear-gradient(#fff4cf, #fbe6a0); border: 2px solid #e8b64a; }
.sx-mine header { display: flex; justify-content: space-between; gap: 10px; align-items: baseline; }
.sx-mine header b { font: 800 16px var(--font-head); }
.sx-mine.party header b { color: #1f5558; } .sx-mine.room header b { color: #6b5320; }
.sx-mine header span { font-size: 14px; font-weight: 700; color: #5b4a36; }
.sx-mine-n { font: 800 18px/1.2 var(--font-head); color: #342c26; overflow-wrap: anywhere; }
.sx-mine-n small { display: block; margin-top: 2px; font: 500 13px/1.3 var(--font); color: #6b5a44; }
.sx-mine-a { display: flex; flex-wrap: wrap; gap: 6px; }
.sx-mem { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
.sx-mem li { display: flex; align-items: center; gap: 8px; padding: 6px 8px; border-radius: 10px; background: #fffdf7cc; }
.sx-mem li .sx-av { width: 34px; height: 34px; font-size: 15px; flex: none; }
.sx-mem li > span:nth-child(2) { display: grid; min-width: 0; flex: 1; }
.sx-mem li b { font: 700 14px var(--font-head); overflow-wrap: anywhere; } .sx-mem li small { font-size: 13px; color: #7a6a4a; }

/* ── ว่าง ─────────────────────────── */
.sx-empty { display: grid; justify-items: center; gap: 6px; padding: 26px 14px; text-align: center; color: #7a6a4a; border-radius: 14px; border: 2px dashed #e0cda0; background: #fffdf7; }
.sx-empty b { font: 700 16px var(--font-head); color: #5b4a36; } .sx-empty small { font-size: 14px; }

/* ── ฟอร์ม (ชั้นทับในหน้าต่างเดียวกัน ไม่ใช่หน้าต่างใหม่) ─────────────────────────── */
.sx-modal { position: absolute; inset: 0; z-index: 5; display: grid; place-items: center; overflow-y: auto; padding: 12px; background: #3a2c1c66; }
.sx-modal-in { width: min(100%, 420px); max-height: 100%; overflow-y: auto; display: grid; gap: 10px; padding: 16px 18px; border-radius: 16px; background: #fffaf0; box-shadow: 0 10px 30px #0005, 0 0 0 2px #e8b64a inset; }
.sx-modal-in > b { font: 800 18px var(--font-head); color: #2f6f73; }
.sx-modal-in label, .sx-field > span { display: grid; gap: 4px; font: 700 14px/1.2 var(--font-head); color: #6b5320; }
.sx-modal-in i.opt, .sx-field > span i { font-style: normal; font-weight: 400; font-size: 13px; color: #8a7a5a; }
.sx-modal-in input[type="text"], .sx-modal-in input:not([type]), .sx-modal-in select { min-height: 42px; padding: 0 10px; border-radius: 10px; border: 1px solid #d8c69a; background: #fffdf7; color: #4a3512; font: 500 15px var(--font); }
.sx-modal-in input.bad { border-color: #c0503a; box-shadow: 0 0 0 3px #c0503a22; }
.sx-modal-in input:focus, .sx-modal-in select:focus { outline: none; border-color: #2f6f73; box-shadow: 0 0 0 3px #2f6f7333; }
.sx-chk { display: flex !important; align-items: flex-start; gap: 8px; cursor: pointer; }
.sx-chk input { width: 18px; height: 18px; margin-top: 1px; accent-color: #2f6f73; }
.sx-chk i { display: block; font-style: normal; font-size: 13px; font-weight: 400; color: #8a7a5a; }
.sx-field { display: grid; gap: 5px; }
.sx-pick { display: flex; flex-wrap: wrap; gap: 6px; }
.sx-pick .sx-want { min-height: 38px; padding: 0 13px; cursor: pointer; font-size: 14px; }
.sx-pick .sx-want.on { background: var(--lc, #e8b64a); border-color: var(--lc, #b9954a); color: #fffdf6; }
.sx-pick .sx-want.tagpick { --lc: #e8b64a; } .sx-pick .sx-want.tagpick.on { color: #4a3512; }
.sx-pick .sx-want.on::before { content: '✓ '; white-space: pre; }
.sx-modal-a { display: flex; justify-content: flex-end; gap: 8px; }
.sx-modal-a .sx-btn { min-height: 46px; padding: 0 20px; }

/* เมนู ⋯ */
.sx-menu { position: fixed; z-index: var(--z-popup, 300); display: grid; min-width: 180px; padding: 6px; border-radius: 12px; background: #fffaf0; box-shadow: 0 8px 24px #0004, 0 0 0 1px #e0cda0; }
.sx-menu button { min-height: 44px; padding: 0 12px; border: 0; border-radius: 8px; background: transparent; text-align: left; font: 600 15px var(--font); color: #342c26; cursor: pointer; }
.sx-menu button:hover { background: #f3e6c8; } .sx-menu .warn { color: #a04a36; }

/* ── จอแคบ / มือถือ: การ์ดแนวตั้ง 1 คอลัมน์ · ปุ่มใหญ่ · แท็บติดบน ─────────────────────────── */
@media (max-width: 640px), (pointer: coarse) {
  html:not(.touch-ui) #windows .win[data-win="social"] { width: 100vw; height: 100vh; }
  .sx-cards, .sx-mem { grid-template-columns: minmax(0, 1fr); }
  .sx-tabs button { min-height: 52px; } .sx-btn { min-height: 46px; } .sx-chip { min-height: 42px; }
  .sx-find input, .sx-find select { min-height: 46px; }
  .sx-tabs { position: sticky; top: 0; z-index: 2; }
}
/* จอสัมผัสแนวนอนเตี้ย (~390px): ย่อหัว/สถิติให้เห็นการ์ดมากขึ้น */
html.touch-ui.land .sx-stats { display: none; }
html.touch-ui.land .sx-tabs { padding: 6px 10px; } html.touch-ui.land .sx-tabs button { min-height: 42px; }
html.touch-ui.land .sx-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
html.touch-ui.land .sx-body { padding-top: 6px; }
@media (prefers-reduced-motion: reduce) { .sx-tabs button, .sx-btn { transition: none; } }
html.touch-ui.land .sx-create { min-height: 46px; padding: 4px 12px; font-size: 16px; } html.touch-ui.land .sx-create small { display: none; }
html.touch-ui.land .sx-h { margin-top: 2px; font-size: 16px; } html.touch-ui.land .sx-h small { display: none; }
html.touch-ui.land .sx-empty { padding: 12px; } html.touch-ui.land .sx-mine { padding: 8px 12px; gap: 5px; } html.touch-ui.land .sx-modal-in { gap: 7px; padding: 12px 16px; }

/* ── แท็บแชทมีข้อความใหม่ (ui.js log/chatUnread · 3 ต.ค.) — จุดนับบนแท็บกระซิบ/ปาร์ตี้/ห้องที่ถูกซ่อนอยู่ ───────────────────────── */
.chat-tabs button.new { position: relative; }
.chat-tabs button.new::after { content: attr(data-n); position: absolute; top: -7px; right: -5px; min-width: 16px; height: 16px; padding: 0 4px; box-sizing: border-box;
  border-radius: 999px; background: #e8b64a; color: #4a3512; font: 800 11px/16px var(--font-head, sans-serif); text-align: center; box-shadow: 0 0 0 2px #fffdf6; }
.chat-tabs button.new[data-ch="pm"]::after { background: #d9534f; color: #fff; }   /* กระซิบ = ถึงตัวเรา เด่นสุด */

/* ── ตัวเลือกผู้รับกระซิบ (ui.js initChat · 3 ต.ค.) + ปุ่มกระซิบบนป้ายเป้าหมาย ───────────────────────── */
.chat-bar { position: relative; }
#pm-to { font: 600 11px/1 inherit; max-width: 150px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; padding: 3px 8px; margin-right: 4px;
  border: 1px solid #8a3fa8; border-radius: 4px; background: linear-gradient(#f3e0fa, #dcb8ec); color: #4a1d62; cursor: pointer; }
#pm-to.none { background: linear-gradient(#fff3b8, #f0cf6a); border-color: #b9954a; color: #4a3512; animation: pmNudge 1.6s ease-in-out 2; }
@keyframes pmNudge { 50% { box-shadow: 0 0 0 3px #e8b64a88; } }
#pm-pick { position: absolute; left: 6px; bottom: 100%; margin-bottom: 4px; z-index: 7; width: min(280px, calc(100vw - 20px)); max-height: 300px; display: flex; flex-direction: column; gap: 6px; padding: 8px;
  border-radius: 12px; background: #fffaf0; box-shadow: 0 8px 24px #0006, 0 0 0 2px #e8b64a inset; pointer-events: auto; }
#pm-pick[hidden] { display: none; }
#pm-pick #pm-q { min-height: 36px; padding: 0 10px; border-radius: 9px; border: 1px solid #d8c69a; background: #fffdf7; color: #4a3512; font: 500 14px var(--font, sans-serif); }
#pm-pick #pm-q:focus { outline: none; border-color: #2f6f73; box-shadow: 0 0 0 3px #2f6f7333; }
#pm-pick .pk-list { overflow-y: auto; display: grid; gap: 3px; }
#pm-pick h5 { margin: 4px 2px 0; font: 700 12px var(--font-head, sans-serif); color: #8a7a5a; }
#pm-pick .pk { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 0 8px; min-height: 40px; padding: 4px 10px; border: 0; border-radius: 9px; background: #fffdf7; text-align: left; cursor: pointer; color: #342c26; }
#pm-pick .pk:hover, #pm-pick .pk:focus-visible { background: #f3e6c8; outline: none; }
#pm-pick .pk b { font: 700 14px var(--font-head, sans-serif); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#pm-pick .pk small { font-size: 12px; color: #7a6a4a; }
#pm-pick p { margin: 6px; text-align: center; font-size: 13px; color: #8a7a5a; }
#target .t-pm { margin-left: 4px; background: #a558c4; color: #fff; }
html.touch-ui #pm-to { min-height: 32px; font-size: 13px; } html.touch-ui #pm-pick .pk { min-height: 46px; }

/* ── เมนูกดชื่อ (ui.js nameMenu) · บล็อก/รายงาน 3 ต.ค. — ชั้น Popup: ต้องอยู่เหนือหน้าต่าง (Screen) เช่นหน้าวงสนทนา ───── */
#name-menu { z-index: var(--z-popup, 300); }
#name-menu .warn { color: #a04a36; }
#name-menu .nm-rep { display: grid; gap: 6px; padding: 4px 6px 6px; }
#name-menu .nm-rep[hidden] { display: none; }
#name-menu .nm-rep label { display: grid; gap: 4px; font-size: 13px; color: #6b5a44; }
#name-menu .nm-rep input { min-height: 36px; padding: 0 10px; border-radius: 8px; border: 1px solid #d8c69a; font: 500 14px var(--font, inherit); }
#name-menu .nm-rep button { text-align: center; font-weight: 700; background: #fbe4dc; }
html.touch-ui #name-menu button { min-height: 44px; font-size: 15px; }
html.touch-ui #name-menu .nm-rep input { min-height: 44px; }