/* PWA — ปุ่มติดตั้งแอป, toast เวอร์ชันใหม่, คำแนะนำ iOS, ขอบจอเมื่อเปิดแบบแอป (public/js/pwa.js) */

/* ---------- ปุ่ม "ติดตั้งแอป" ต่อท้ายแถวปุ่มลัด (หน้าตาเดียวกับ .chip-btn, ปิดได้ จำไว้) ---------- */
.pwa-chip {
  position: relative;
  display: flex;
  min-width: 0;
  animation: pwa-fade 0.3s var(--ease);
}

.pwa-chip .chip-btn {
  flex: 1;
  padding: 0 40px 0 10px;
  border-color: color-mix(in srgb, var(--accent) 40%, var(--line));
}

.pwa-chip .chip-btn > span {
  overflow: hidden;
  text-overflow: ellipsis;
}

.pwa-chip-x {
  --i: 14px;

  position: absolute;
  top: 4px;
  right: 4px;
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  color: var(--muted);
  border-radius: 9px;
}

.pwa-chip-x:hover {
  color: var(--text);
  background: var(--card-hover);
}

/* ---------- มีเวอร์ชันใหม่ แตะเพื่อโหลดใหม่ ---------- */
.pwa-update {
  --i: 18px;

  position: fixed;
  top: calc(14px + env(safe-area-inset-top));
  left: 50%;
  z-index: 1350;
  display: inline-flex;
  gap: 8px;
  align-items: center;
  width: max-content;
  max-width: min(92vw, 440px);
  min-height: 44px;
  padding: 8px 18px 8px 14px;
  font-size: 14px;
  font-weight: 600;
  color: var(--accent-ink);
  background: var(--accent);
  border-radius: 999px;
  box-shadow: var(--shadow);
  opacity: 0;
  transform: translate(-50%, -12px);
  transition: opacity 0.25s, transform 0.25s var(--ease);
}

.pwa-update.show {
  opacity: 1;
  transform: translate(-50%, 0);
}

/* มือถือ: คำอธิบายหมุดอยู่บนสุด → ลงมาใต้แถบนั้น */
@media (max-width: 899px) {
  .pwa-update {
    top: calc(64px + env(safe-area-inset-top));
  }
}

.pwa-update:disabled {
  cursor: progress;
  opacity: 0.8;
}

/* ---------- คำแนะนำ iOS: แชร์ → เพิ่มไปยังหน้าจอโฮม ---------- */
.pwa-ios {
  position: fixed;
  bottom: calc(12px + env(safe-area-inset-bottom));
  left: 50%;
  z-index: 1400;
  width: min(calc(100vw - 20px), 400px);
  padding: 16px 16px 14px;
  color: var(--text);
  background: var(--panel-solid);
  border: 1px solid var(--line);
  border-radius: 20px;
  box-shadow: var(--shadow);
  opacity: 0;
  transform: translate(-50%, 24px);
  transition: opacity 0.3s, transform 0.3s var(--ease);
}

.pwa-ios.show {
  opacity: 1;
  transform: translate(-50%, 0);
}

.pwa-ios-x {
  --i: 16px;

  position: absolute;
  top: 8px;
  right: 8px;
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  color: var(--muted);
  border-radius: 12px;
}

.pwa-ios-head {
  display: flex;
  gap: 12px;
  align-items: center;
  padding-right: 34px;
}

.pwa-ios-head img {
  flex: none;
  border-radius: 12px;
}

.pwa-ios-head b {
  display: block;
  font-size: 15.5px;
  line-height: 1.35;
}

.pwa-ios-head small {
  display: block;
  margin-top: 2px;
  font-size: 12.5px;
  line-height: 1.45;
  color: var(--muted);
}

.pwa-ios-steps {
  display: grid;
  gap: 8px;
  padding: 0;
  margin: 14px 0 12px;
  list-style: none;
  counter-reset: pwa;
}

.pwa-ios-steps li {
  display: flex;
  gap: 12px;
  align-items: center;
  padding: 8px 10px;
  font-size: 14px;
  line-height: 1.4;
  background: var(--card);
  border-radius: 12px;
  counter-increment: pwa;
}

.pwa-ios-steps li::before {
  flex: none;
  width: 20px;
  font: 600 13px/1 var(--mono);
  color: var(--muted);
  text-align: center;
  content: counter(pwa);
}

.pwa-ios-steps i {
  --i: 22px;

  display: grid;
  flex: none;
  place-items: center;
  width: 50px;
  height: 36px;
  font-style: normal;
  color: #0a84ff;
  background: var(--panel-solid);
  border: 1px solid var(--line);
  border-radius: 10px;
}

.pwa-ios-steps .pwa-ios-add {
  font-size: 13px;
  font-weight: 700;
}

.pwa-ios-steps small {
  display: block;
  font-size: 12px;
  color: var(--muted);
}

.pwa-ios-ok {
  width: 100%;
  min-height: 44px;
  font-weight: 600;
  color: var(--accent-ink);
  background: var(--accent);
  border-radius: 12px;
}

@keyframes pwa-fade {
  from {
    opacity: 0;
  }
}

/* ---------- เปิดแบบแอป (standalone): ขอบจอ/รอยบาก/แถบโฮม ---------- */

/* แถบสถานะของ iOS (black-translucent) ลอยอยู่บนแผนที่ → ฉากทึบบางๆ ให้ตัวอักษรขาวอ่านได้ทั้งธีมมืด/สว่าง */
.is-standalone body::before {
  position: fixed;
  inset: 0 0 auto;
  z-index: 1500;
  height: env(safe-area-inset-top);
  pointer-events: none;
  content: "";
  background: rgb(11 18 32 / 55%);
}

.is-standalone .toast {
  top: calc(20px + env(safe-area-inset-top));
}

/* มือถือแนวตั้ง (แนวนอนเป็นแผงด้านข้าง สูงตามเนื้อหา — app.css จัดขอบซ้ายตามรอยบากแล้ว) */
@media (max-width: 899px) and (min-height: 501px), (max-width: 899px) and (max-aspect-ratio: 4/3) {
  /* แผ่นเลื่อนเต็มความสูงไม่ขึ้นไปอยู่ใต้รอยบาก/แถบสถานะ */
  .is-standalone .panel,
  .is-standalone .detail {
    height: calc(100dvh - 48px - env(safe-area-inset-top));
  }

  /* เนื้อหาแผงรายละเอียดตอนเต็มจอไม่จมใต้แถบโฮม */
  .is-standalone .detail[data-snap="full"] {
    padding-bottom: env(safe-area-inset-bottom);
  }
}

@media (prefers-reduced-motion: reduce) {
  .pwa-chip,
  .pwa-update,
  .pwa-ios {
    transition: none;
    animation: none;
  }
}