/* แถบชวนติดตั้งเป็นแอป — ใช้ร่วมทุกหน้า (คู่กับ /installprompt.js)
 *
 * ⚠️ หน้าในเว็บนี้มีทั้งโหมดสว่างอย่างเดียว (/trend/ /ir/ /issue/) และมีปุ่มสลับ (index.html, sd.html)
 *    แถบนี้จึงกำหนดสีของตัวเองครบทั้ง 2 โหมด ไม่ยืมตัวแปรของหน้าไหน
 *    (ยืมแล้วจะเพี้ยนทันทีที่หน้าไหนตั้งชื่อตัวแปรไม่เหมือนกัน — /social/ ใช้ --plane/--ink)
 *
 * ⚠️ ต้องไม่บังเนื้อหา — วางลอยล่างจอ กว้างจำกัด และเว้นขอบล่างเผื่อ safe-area ของ iPhone
 */
#installbar {
  position: fixed;
  left: 50%;
  bottom: calc(16px + env(safe-area-inset-bottom, 0px));
  transform: translateX(-50%);
  z-index: 9998;                 /* ต่ำกว่าแถบ "มีเวอร์ชันใหม่" (9999) โดยตั้งใจ */
  width: min(560px, calc(100vw - 24px));
  box-sizing: border-box;
  border-radius: 14px;
  background: #ffffff;
  color: #1f2937;
  border: 1px solid #e4e8f0;
  box-shadow: 0 10px 30px rgba(16, 24, 40, .18);
  font: 14px/1.45 system-ui, -apple-system, "Segoe UI", sans-serif;
  animation: ib-in .22s ease-out;
}
@keyframes ib-in { from { opacity: 0; transform: translate(-50%, 12px); } to { opacity: 1; transform: translate(-50%, 0); } }
#installbar.ib-out { opacity: 0; transition: opacity .18s ease-in; }

.ib-in { display: flex; align-items: center; gap: 12px; padding: 12px 40px 12px 14px; flex-wrap: wrap; }
.ib-txt { flex: 1 1 240px; min-width: 0; }
.ib-txt b { display: block; font-size: 14px; margin-bottom: 2px; }
.ib-txt span { display: block; font-size: 12.5px; color: #6b7280; }
.ib-txt span b { display: inline; color: inherit; font-size: inherit; margin: 0; }

/* ข้อความบรรทัดเดียว (ไม่มีหัวข้อ) — ใช้กับฝั่งแอปแชต · ต้องอ่านชัดเท่าหัวข้อ ไม่ใช่ตัวเล็กสีจาง */
.ib-txt span.ib-one { font-size: 14px; color: inherit; line-height: 1.5; }

.ib-act { display: flex; gap: 8px; flex: 0 0 auto; margin-left: auto; }
.ib-act button {
  border-radius: 999px; padding: 8px 15px; font: inherit; font-size: 13px;
  font-weight: 600; cursor: pointer; white-space: nowrap;
}
.ib-yes { border: 0; background: #2563eb; color: #fff; }
.ib-yes:hover { background: #1d4ed8; }

/* ✕ ปิด — เผื่อคนที่อยากปิดเดี๋ยวนี้ ไม่ใช่ทางเดียวที่จะทำให้แถบหายไป
   (แถบหายเองเมื่อครบเวลา — เจ้าของสั่ง 25 ส.ค. 2026 ว่าห้ามบังคับให้กด)
   ⚠️ วางลอยมุมขวาบน ไม่กินที่ในแถว และ .ib-in เผื่อ padding-right ไว้ให้แล้ว
      พื้นที่กดต้องไม่เล็กกว่า 32px ไม่งั้นนิ้วโป้งกดพลาด */
.ib-x {
  position: absolute; top: 6px; right: 6px;
  width: 32px; height: 32px; line-height: 1;
  display: flex; align-items: center; justify-content: center;
  border: 0; border-radius: 999px; background: transparent;
  color: #9aa2b1; font-size: 15px; cursor: pointer; padding: 0;
}
.ib-x:hover { background: rgba(120, 130, 150, .12); color: #1f2937; }

/* จอแคบ: ปุ่มติดตั้งลงมาอยู่แถวล่าง เต็มความกว้าง กดง่ายด้วยนิ้วโป้ง */
@media (max-width: 460px) {
  .ib-act { width: 100%; margin-left: 0; }
  .ib-act button { flex: 1; padding: 10px 12px; }
}

@media (prefers-color-scheme: dark) {
  #installbar { background: #1b1e24; color: #e8eaf0; border-color: rgba(150, 150, 150, .22); }
  .ib-txt span { color: #9aa2b1; }
  .ib-x:hover { background: rgba(200, 210, 230, .14); color: #e8eaf0; }
}