/* ===== มือถือ: ปุ่มใหญ่ แตะง่าย ไม่ชนขอบจอ ===== */

/* พื้นที่ปลอดภัยของเครื่อง (เจาะรู/ท่าปุ่ม/มือถือรุ่นเก่า)
   - ต้อง padding: max(...) ไม่ใช่ค่าตายตัว ไม่งั้น iPhone จะถูกทับ */
:root{
  --safe-t: env(safe-area-inset-top, 0px);
  --safe-b: env(safe-area-inset-bottom, 0px);
  --safe-l: env(safe-area-inset-left, 0px);
  --safe-r: env(safe-area-inset-right, 0px);
  --tap: 48px;          /* ขั้นต่ำที่ยอมรับได้สำหรับนิ้ว (แนะนำ 48) */
}

/* ทุกจุดที่แตะได้ต้องกันการเลือกข้อความตอนกดค้าง
   และกันการเรียกเมนูคลิกขวาตอนกดค้าง (บนมือถือทำให้เมนูโผล่เอง) */
button, .chip, .suggestion, .fab-item, [data-q]{
  -webkit-tap-highlight-color: transparent;
  -webkit-touch-callout: none;
  user-select: none; -webkit-user-select: none;
}

.is-mobile button, .is-mobile .chip{ touch-action: manipulation; }

/* กันการซูมนิ้วสองนิ้วทั้งหน้า (ไม่กรน ผู้ใช้ซูมดูตัวอักษรไม่ได้)
   แผนที่ (Leaflet) จัดการ pinch เองอยู่แล้ว */
.is-mobile{ touch-action: pan-x pan-y; }
.is-mobile #map, .is-mobile .leaflet-container{ touch-action: auto; }

/* ---------- ช่องค้นหา ---------- */
.is-mobile .search-box{ gap:10px; }
.is-mobile .search-box input{
  min-height:var(--tap);          /* 48px แทนที่จะเล็กกว่านั้น */
  font-size:16px;                 /* กัน iOS ซูมอัตโนมัติตอนพิมพ์ */
  padding:14px 16px;
}
.is-mobile .search-box button{
  min-height:var(--tap);
  min-width:var(--tap);
  padding:0 20px;
  font-size:16px;
}

/* ---------- ปุ่มบนหัวเว็บ ---------- */
.is-mobile .top-actions button{
  min-width:var(--tap); min-height:var(--tap);
  font-size:16px; padding:10px 14px;
}

/* ---------- ชิป (รายการเมืองที่จำไว้) ---------- */
.is-mobile .chip{
  min-height:40px;
  padding:10px 16px;
  font-size:15px;
  display:inline-flex; align-items:center;
}
.is-mobile .chip-row{ gap:8px; flex-wrap:wrap; padding:2px; }

/* ---------- รายการคำแนะนำตอนพิมพ์ ---------- */
.is-mobile .suggestion{
  min-height:var(--tap);
  padding:13px 14px;
  font-size:15px;
}

/* ---------- ปุ่มลอยเรดาร์ ---------- */
.mobile-fab{
  position:fixed;
  right:calc(14px + var(--safe-r));
  bottom:calc(16px + var(--safe-b));
  z-index:9999;
  display:flex; align-items:center; gap:8px;
  min-height:52px; padding:0 20px;
  border:0; border-radius:26px;
  background:linear-gradient(135deg,#1e3c72,#4f46e5);
  color:#fff; font-family:inherit; font-size:15px; font-weight:700;
  box-shadow:0 8px 24px rgba(0,0,0,.42);
  touch-action:manipulation;
  animation:fabIn .35s ease;
}
.mobile-fab.secondary{
  min-height:46px; width:46px; padding:0;
  right:auto; bottom:calc(16px + var(--safe-b));
  left:calc(14px + var(--safe-l));
  font-size:18px;
}
@keyframes fabIn{from{opacity:0;transform:translateY(18px) scale(.9)}to{opacity:1;transform:none}}

/* ตอนกด: ยุบลงเล็กน้อยให้รู้ว่าแตะโดนแล้ว (เบราว์เซอร์มือถือไม่มี :hover) */
.is-mobile .mobile-fab:active{ transform:scale(.94); }
.mobile-fab .fab-ico{ font-size:20px; }

/* ---------- ปุ่มหลักทุกอันเต้นเต็มความกว้างเมื่อจอแคบ ---------- */
@media (max-width:420px){
  .is-mobile .fab-txt{ display:none; }
  .is-mobile .mobile-fab{ padding:0; width:56px; justify-content:center; }
  .is-mobile .search-box button{ flex:1 1 100%; }
}

/* ---------- การ์ด ---------- */
@media (max-width:600px){
  .is-mobile .app{ padding-left:calc(12px + var(--safe-l)); padding-right:calc(12px + var(--safe-r)); }
  .is-mobile .card{ padding:16px; border-radius:16px; }
  /* ปุ่มลบรายการโปรดต้องกดยากพอสมควร */
  .is-mobile .fav-item button, .is-mobile .chip .x{ min-width:36px; min-height:36px; }
}

/* ---------- กันข้อความถูกขยายอัตโนมัติตอนหมุนเครื่อง ---------- */
@media (max-width:600px) and (orientation:landscape){
  .is-mobile .app{ padding-top:calc(8px + var(--safe-t)); }
  .is-mobile header{ padding:8px 0; }
  .is-mobile h1{ font-size:22px; }
  .is-mobile .weather-icon{ font-size:52px; }
}

/* ---------- ลดการเคลื่อนไหวตอนโหลด (คนใช้เน็ตช้า) ---------- */
@media (prefers-reduced-motion:reduce){
  .is-mobile .mobile-fab{ animation:none; }
  .is-mobile *{ transition-duration:.01ms !important; }
}