/* หาช่าง — ธีมน้ำเงินสว่าง + เหลือง (ดู docs + mockup v2) */
:root{
  --primary:#2D3DC8; --primary-deep:#1E2A99; --accent:#F0C63D;
  --bg:#F5F6FB; --card:#FFFFFF; --ink:#1C2140; --muted:#686F8C;
  --line:#E2E5F1; --star:#EFAE1D; --good:#2E9E5B; --bad:#D64545;
  --chip:#E9EBFA; --navy:#1A2153;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{background:#E6E8F2; color:var(--ink); line-height:1.5; font-size:14px;
  font-family:-apple-system,BlinkMacSystemFont,"Noto Sans Thai","Sukhumvit Set","Segoe UI",sans-serif}
.shell{max-width:430px; margin:0 auto; min-height:100vh; background:var(--bg);
  display:flex; flex-direction:column; box-shadow:0 0 30px rgba(28,33,64,.12)}
.content{flex:1; padding:14px 16px 90px; display:flex; flex-direction:column; gap:12px}
.content.notabs{padding-bottom:24px}

/* แถบหัว */
.appbar{background:var(--primary); color:#fff; padding:16px 16px 18px}
.appbar.navy{background:var(--navy)}
.appbar.plain{background:var(--card); color:var(--ink); border-bottom:1px solid var(--line); padding:12px 16px}
.appbar h1{margin:0; font-size:19px; font-weight:800}
.appbar .sub{font-size:12.5px; opacity:.85; margin-top:2px}
.appbar a{color:inherit; text-decoration:none}
.back{display:inline-block; margin-bottom:6px; font-size:13px; opacity:.85; text-decoration:none; color:inherit}

/* การ์ด/ชิป/ปุ่ม */
.card{background:var(--card); border:1px solid var(--line); border-radius:14px; padding:13px}
.card.hl-accent{border-color:var(--accent)} .card.hl-bad{border-color:var(--bad)}
.card.hl-primary{border-color:var(--primary)}
.stack{display:flex; flex-direction:column; gap:10px}
.hrow{display:flex; align-items:center; gap:10px}
.sp{justify-content:space-between}
.chip{display:inline-flex; align-items:center; gap:4px; background:var(--chip); color:var(--primary-deep);
  border-radius:99px; padding:3px 10px; font-size:11.5px; font-weight:700; border:0; text-decoration:none}
.chip.warn{background:#FBF3D9; color:#856A0C}
.chip.grey{background:#EEF0F5; color:#626987}
.chip.good{background:#E5F4EA; color:#1F7A44}
.chip.link{background:#EAF0FA; color:#3A5FA8}
.chip.bad{background:#FBEAEA; color:#B02B2B}
/* ชิปแบบกดได้ (suggestion chips) — เป้ากดใหญ่ขึ้น ตัวอักษรเข้มอ่านง่าย */
.chip.tap{padding:9px 14px; font-size:13px; min-height:38px; cursor:pointer}
.btn{display:flex; align-items:center; justify-content:center; gap:6px; border-radius:12px; font-weight:800;
  padding:12px; font-size:14px; border:0; cursor:pointer; text-decoration:none; width:100%;
  font-family:inherit}
.btn.primary{background:var(--primary); color:#fff}
.btn.accent{background:var(--accent); color:var(--primary-deep)}
.btn.ghost{background:var(--card); border:1.5px solid var(--line); color:var(--ink)}
.btn.danger{background:transparent; border:1.5px solid #EAC7C7; color:#B02B2B}
.btn.sm{padding:9px 12px; font-size:12.5px; border-radius:10px; min-height:36px}
.btnrow{display:flex; gap:8px} .btnrow .btn{flex:1}

.avatar{border-radius:50%; background:linear-gradient(135deg,#BCC4EE,#8290D8); flex:none;
  display:flex; align-items:center; justify-content:center; color:#fff; font-weight:800}
.av40{width:40px;height:40px;font-size:15px} .av52{width:52px;height:52px;font-size:19px}
.av60{width:60px;height:60px;font-size:22px}

.star{color:var(--star); letter-spacing:1px}
.muted{color:var(--muted)} .small{font-size:12px} .xs{font-size:11.5px}
.b{font-weight:700} .xb{font-weight:800}
.seclabel{font-size:11.5px; font-weight:800; color:var(--muted); letter-spacing:.08em; text-transform:uppercase}
.divline{height:1px; background:var(--line)}

/* หมวดบริการ */
.catgrid{display:grid; grid-template-columns:repeat(3,1fr); gap:10px}
.cat{background:var(--card); border:1px solid var(--line); border-radius:14px; padding:14px 6px 12px;
  text-align:center; font-size:12px; font-weight:700; text-decoration:none; color:var(--ink)}
.cat .ic{display:flex; justify-content:center; margin-bottom:7px; font-size:25px; line-height:1}
.cat:active{border-color:var(--primary)}
/* badge จำนวนช่างในพื้นที่ — สไตล์ iOS: วงแดงเกาะมุมขวาบนของไอคอน, 0 คน = ไม่มี badge */
.cat .ic{position:relative; width:fit-content; margin-left:auto; margin-right:auto}
.cat .cnt{position:absolute; top:-7px; right:-14px; min-width:19px; height:19px; border-radius:99px;
  background:linear-gradient(180deg,#FF5147,#E8281B); color:#fff; font-size:10.5px; font-weight:800;
  display:flex; align-items:center; justify-content:center; padding:0 5px;
  border:2px solid var(--card); box-shadow:0 1px 3px rgba(28,33,64,.25);
  font-variant-numeric:tabular-nums; line-height:1}
.cat.none{opacity:.62}
.btn svg{width:20px; height:20px; flex:none}

/* แถบเมนูล่าง */
.tabbar{position:fixed; bottom:0; left:50%; transform:translateX(-50%); width:100%; max-width:430px;
  background:var(--card); border-top:1px solid var(--line); display:flex; padding:8px 6px 16px; z-index:50}
.tabbar a{flex:1; text-align:center; font-size:10px; color:var(--muted); font-weight:600; text-decoration:none}
.tabbar a.on{color:var(--primary)}
.tabbar a svg{width:23px; height:23px; display:block; margin:0 auto 3px}
.tabbar a.on svg{stroke-width:2.1}
.tabbar .brand{display:none}
/* แถบเมนูล่างแบบเลื่อนแนวนอน (แอดมิน 13 เมนูบนจอ 360px) — เฉพาะโหมดมือถือ */
.tabbar.scroll{overflow-x:auto; -webkit-overflow-scrolling:touch}
.tabbar.scroll a{flex:none; min-width:62px}

/* แชท */
.bubble{max-width:80%; padding:9px 12px; border-radius:14px; font-size:13px}
.bubble.me{background:var(--primary); color:#fff; align-self:flex-end; border-bottom-right-radius:4px}
.bubble.them{background:var(--card); border:1px solid var(--line); align-self:flex-start; border-bottom-left-radius:4px}
.bubble img{max-width:210px; max-height:230px; width:auto; height:auto; border-radius:11px; display:block} /* กันรูปแนวตั้งดันบับเบิลใหญ่เกิน */

/* รูปงาน (เดโมใช้ไทล์ไล่สี) */
.photo{border-radius:10px; background:linear-gradient(135deg,#DDE2F6,#AFBAE8); height:78px; flex:1;
  display:flex; align-items:center; justify-content:center; font-size:26px}

/* ฟอร์ม */
.field{background:var(--card); border:1.5px solid var(--line); border-radius:12px; padding:11px 12px;
  font-size:16px; width:100%; font-family:inherit; color:var(--ink)}
.field:focus{outline:none; border-color:var(--primary)}
textarea.field{resize:vertical; min-height:70px}
/* ช่องเลือกไฟล์ — แต่งปุ่ม native ("เลือกไฟล์") เป็นปุ่มแบรนด์ ทันสมัยทุกจุดในแอป */
input.field[type=file]{padding:8px 10px; font-size:13.5px; color:var(--muted)}
input[type=file]::file-selector-button{background:var(--primary); color:#fff; border:0;
  border-radius:10px; padding:9px 15px; font-weight:800; font-size:13px; font-family:inherit;
  margin-right:11px; cursor:pointer}
input[type=file]::file-selector-button:active{opacity:.85}
.stars-input{display:flex; justify-content:center; gap:8px; font-size:34px; color:#CDD2E5}
.stars-input label{cursor:pointer}
.stars-input input{display:none}
.notice{background:#FBF3D9; color:#856A0C; border-radius:12px; padding:10px 13px; font-size:12.5px}
.notice.blue{background:var(--chip); color:var(--primary-deep)}
.notice.green{background:#E5F4EA; color:#1F7A44}
.notice.bad{background:#FBEAEA; color:#B02B2B}

/* จุดยึดปุ่มลอยล่าง (โปรไฟล์ช่าง/แชท) */
.dock{position:fixed; bottom:74px; left:50%; transform:translateX(-50%);
  width:100%; max-width:430px; padding:0 16px; z-index:40}

/* ---------- โหมด Desktop: เต็มจอ ---------- */
@media (min-width: 700px){
  body{background:var(--bg)}
  .shell{max-width:none; box-shadow:none}
  /* จัดเนื้อหาแนวเดียวกันทั้งแถบหัวและตัวหน้า (คอลัมน์กลาง 1100px) */
  .appbar{padding:22px max(32px, calc((100% - 1100px)/2 + 32px)) 24px}
  .content{max-width:1164px; width:100%; margin:0 auto; padding:22px 32px 110px}
  .catgrid{grid-template-columns:repeat(6,1fr)}
  .cat{padding:20px 8px 16px}
  .cat .ic{font-size:31px}
  /* แถบเมนูย้ายไปเป็น sidebar ด้านซ้าย (เฉพาะหน้าที่มี tabbar) */
  .shell:has(.tabbar){padding-left:92px}
  .tabbar{top:0; bottom:0; left:0; right:auto; transform:none; width:92px; max-width:none;
    flex-direction:column; justify-content:flex-start; align-items:stretch; gap:8px;
    border-top:0; border-right:1px solid var(--line); padding:18px 10px}
  .tabbar .brand{display:flex; align-items:center; justify-content:center; width:46px; height:46px;
    margin:0 auto 14px; background:var(--primary); color:#fff; border-radius:13px;
    font-weight:800; font-size:21px; text-decoration:none; flex:none}
  .tabbar a{flex:none; max-width:none; padding:10px 4px; border-radius:12px; font-size:10.5px}
  .tabbar a.on{background:var(--chip)}
  /* บนเดสก์ท็อป .tabbar.scroll เป็น sidebar แนวตั้งปกติ — ไม่ต้องเลื่อนแนวนอน */
  .tabbar.scroll{overflow-x:visible}
  .tabbar.scroll a{min-width:0}
  .content{padding-bottom:40px}
  .dock{max-width:1164px; padding:0 32px; bottom:24px; left:calc(50% + 46px)}
  .bubble{max-width:60%}
}

/* สถิติหลังบ้าน */
.statrow{display:flex; gap:8px}
.stat{flex:1; background:var(--card); border:1px solid var(--line); border-radius:14px;
  text-align:center; padding:12px 6px}
.stat .n{font-size:22px; font-weight:800; font-variant-numeric:tabular-nums}
.stat .l{font-size:11px; color:var(--muted)}

/* Empty state มาสคอตแพะชนแกะ (mascot_empty ใน inc/ui.php + สำเนาฝั่งช่าง) */
.empty-mascot{text-align:center; padding:24px 16px 22px}
.empty-mascot img{display:block; margin:0 auto 2px; max-height:140px; max-width:100%; opacity:.92}
.empty-mascot .t{font-weight:700; color:var(--muted)}
.empty-mascot .s{font-size:11.5px; color:#626987; margin-top:3px}

/* รูปโปรไฟล์จริงในวงกลม avatar (avatar_html) — ไม่มีรูปยังเป็นตัวอักษรแรกแบบเดิม */
.avatar img{width:100%; height:100%; object-fit:cover; border-radius:50%; display:block}