/* แท็บเพื่อน + หัวใจขอบคุณ (friends-tab.js · 4 ต.ค.) — ต่อจาก ui-social.css (โทนเดียวกัน: ครีม · ทีล #2f6f73 · ทอง #e8b64a)
   หัวใจ = ชมพูนุ่ม #e2668f (คำขอบคุณ ไม่ใช่สีแจ้งเตือนแดง) · ไม่มีอันดับ/ตัวเลขเทียบกับคนอื่น
   ⚠️ ตัวหนังสือ ≥ 13px · สถานะออนไลน์ = ไอคอน + คำ (ไม่ใช่สีอย่างเดียว) · ปุ่มจอสัมผัสสูง ≥ 44px (กฎเดิมของ ui-social.css) */

.sx-tabs { grid-template-columns: repeat(4, 1fr); }
.sx-num { position: absolute; top: 4px; right: 6px; min-width: 18px; height: 18px; padding: 0 5px; box-sizing: border-box; border-radius: 999px;
  background: #e2668f; color: #fff; font: 800 12px/18px var(--font-head, sans-serif); font-style: normal; text-align: center; box-shadow: 0 0 0 2px #fffdf6; }
.sx-tabs button[data-t="friends"].on { background: linear-gradient(#ee8fae, #e2668f); border-color: #c24f76; color: #fffdf6; box-shadow: 0 2px 0 #9e3a5c; }
.sx-tabs button[data-t="friends"].on .sx-num { background: #fffdf6; color: #c24f76; }

/* ── หัวใจของฉัน ─────────────────────────── */
.fr-me { display: grid; gap: 6px; padding: 10px 14px; border-radius: 14px; background: linear-gradient(#fff1f5, #fde3ea); border: 2px solid #f2b6c8; }
.fr-me-h { display: flex; align-items: center; gap: 10px; }
.fr-heart-big { font-size: 30px; line-height: 1; filter: drop-shadow(0 1px 0 #fff); }
.fr-me-h > span:last-child { display: grid; gap: 2px; min-width: 0; }
.fr-me-h b { font: 800 16px/1.2 var(--font-head); color: #7a2f4a; }
.fr-me-h b em { font-style: normal; color: #c24f76; font-size: 18px; margin-left: 2px; }
.fr-me-h small { font-size: 13px; color: #7a5a62; }
.fr-me-r { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 4px 14px; font-size: 14px; color: #5b4a36; }
.fr-left b { color: #c24f76; font-size: 15px; }
.fr-chk { display: inline-flex; align-items: center; gap: 6px; cursor: pointer; font-size: 14px; }
.fr-chk input { width: 18px; height: 18px; accent-color: #2f6f73; }
.fr-note { margin: 0; font-size: 13px; line-height: 1.4; color: #8a6a72; }

/* ── การ์ดเพื่อน ─────────────────────────── */
.fr-n { font: 700 14px var(--font-head); color: #8a7a5a; margin-left: 4px; }
.fr-card { border-left: 5px solid #e2668f; }
.fr-card.off { background: #faf6ee; border-left-color: #cdbfa4; }
.fr-card.req { border-left-color: #e8b64a; background: #fffbea; }
.fr-face { width: 46px; height: 46px; border-radius: 50%; overflow: hidden; display: grid; place-items: center; border: 2px solid #e2668f; background: #f6e9d6; }
.fr-face img { width: 100%; height: 100%; object-fit: cover; }
.fr-face img:not(.real) { width: 70%; height: 70%; object-fit: contain; }
.fr-face.off { border-color: #cdbfa4; filter: grayscale(.55); opacity: .85; }
.fr-on { color: #2c7a3c !important; font-weight: 700; }
.fr-off { color: #8a8070 !important; }
.sx-btn.heart { border-color: #c24f76; background: linear-gradient(#f6a8c1, #e2668f); color: #fff; box-shadow: 0 2px 0 #9e3a5c; min-width: 46px; }
.sx-btn.heart:disabled { background: #f4e3e9; color: #b07a8c; border-color: #e8c2cf; box-shadow: none; opacity: 1; }
.fr-outs { display: flex; flex-wrap: wrap; gap: 6px; }
.fr-out { display: inline-flex; align-items: center; gap: 8px; padding: 4px 4px 4px 12px; border-radius: 999px; background: #f3ecdc; border: 1px solid #e0cda0; }
.fr-out b { font: 700 14px var(--font-head); color: #5b4a36; }
.fr-out .sx-btn { min-height: 34px; padding: 0 10px; font-size: 13px; }
.fr-add .sx-btn { flex: none; }
.sx-menu .fr-q { padding: 8px 12px 4px; font: 700 14px var(--font-head); color: #5b4a36; max-width: 220px; }

/* ตราหัวใจ: ข้างชื่อในการ์ดเพื่อน · ป้ายเป้าหมาย (ui.js renderTarget) */
.fr-badge { display: inline-flex; align-items: center; gap: 3px; font-size: 15px; line-height: 1; vertical-align: middle; }
.fr-badge i { font: 700 12px var(--font-head, sans-serif); font-style: normal; color: #c24f76; padding: 2px 7px; border-radius: 999px; background: #fde3ea; }
#target .fr-badge { margin-left: 2px; }

/* หัวใจลอยเหนือหัว (main.js floatText 'heart') — อีโมจิทึบ + ขอบครีม อ่านออกบนหญ้า */
.dmg.heart { font-size: 26px; filter: drop-shadow(0 0 2px #fffdf6) drop-shadow(0 1px 1px #9e3a5c88); }

/* จอสัมผัสแนวนอนเตี้ย (~390px): กล่องหัวใจเหลือแถวเดียว (ซ้าย = ยอด/ตรา · ขวา = โควตาวันนี้/แจ้งเตือน) ให้คำขอ/รายชื่อเพื่อนขึ้นมาในจอแรก */
html.touch-ui.land .fr-me { grid-template-columns: minmax(0, 1fr) auto; align-items: center; padding: 6px 12px; gap: 4px 12px; }
html.touch-ui.land .fr-heart-big { font-size: 22px; }
html.touch-ui.land .fr-me-r { flex-direction: column; align-items: flex-end; gap: 2px; font-size: 13px; }
html.touch-ui.land .fr-note { display: none; }
html.touch-ui.land .sx-tabs button { font-size: 15px; gap: 5px; }
@media (max-width: 640px) { .sx-tabs button { font-size: 14px; gap: 4px; } .sx-tabs button i { font-size: 16px; } }

/* 💗 บนการ์ดสมาชิกวงสนทนา (circle.js) — กดส่งหัวใจได้ทันที · ส่วนอื่นของการ์ดยังเปิดเมนูชื่อเดิม */
.cc-mem li:has(.cc-heart) { padding-right: 58px; }
.cc-heart { position: absolute; right: 20px; top: 50%; transform: translateY(-50%); width: 34px; height: 34px; padding: 0; border-radius: 50%; cursor: pointer;
  border: 1px solid #e8b2c4; background: #fff1f5; font-size: 16px; line-height: 1; }
.cc-heart:hover { background: #fde3ea; } .cc-heart:focus-visible { outline: 3px solid #e8b64a; outline-offset: 1px; }
html.touch-ui .cc-heart { width: 44px; height: 44px; right: 18px; } html.touch-ui .cc-mem li:has(.cc-heart) { padding-right: 66px; }