/* Windy の天文台 PWA／App 樣式（2026-09-15）
 * 1) 加到主畫面後（standalone）嘅 App 化：安全區、禁上下拉、禁選字、App 感底部提示
 * 2) 安裝提示條（Android beforeinstallprompt／iOS 手動指示）
 * 3) Toast（更新提示／已安裝）
 */
:root { --pwa-blue: #2f6bff; --pwa-navy: #050816; }

/* ===== standalone 修正 ===== */
html.windy-standalone {
  overscroll-behavior-y: none;
  -webkit-tap-highlight-color: transparent;
}
html.windy-standalone body {
  overscroll-behavior-y: none;
}
/* 頂部安全區（劉海／動態島）——只加 padding，唔改原有排版 */
html.windy-standalone .navbar { padding-top: calc(env(safe-area-inset-top, 0px)); }
html.windy-standalone footer { padding-bottom: calc(env(safe-area-inset-bottom, 0px)); }
/* iOS 獨立模式下連結唔會有 :hover，用 :active 補觸感 */
html.windy-standalone a:active,
html.windy-standalone button:active { opacity: .82; transition: opacity .08s; }
/* 影片全屏觀感：獨立模式冇瀏覽器 UI，MV 區塊可拉高少少 */
html.windy-standalone video { max-height: 88vh; }

/* ===== 安裝提示條 ===== */
#windy-install {
  position: fixed; left: 12px; right: 12px;
  bottom: calc(12px + env(safe-area-inset-bottom, 0px));
  z-index: 9999;
  display: flex; align-items: center; gap: 12px;
  padding: 12px 13px;
  border-radius: 18px;
  background: linear-gradient(135deg, rgba(18,35,77,.97), rgba(5,8,22,.97));
  border: 1px solid rgba(120,160,255,.28);
  box-shadow: 0 14px 40px rgba(0,0,0,.5);
  color: #e8eeff;
  font-family: -apple-system, BlinkMacSystemFont, "PingFang HK", "Noto Sans CJK TC", "Microsoft JhengHei", sans-serif;
  transform: translateY(140%);
  opacity: 0;
  transition: transform .32s cubic-bezier(.2,.9,.25,1), opacity .32s;
  max-width: 520px; margin: 0 auto;
}
#windy-install.windy-show { transform: translateY(0); opacity: 1; }

/* 安裝條出現時，把 mascot（客服公仔）同對話窗升起，避免疊住 */
html.windy-install-open #mascot-wrap { bottom: calc(10px + 124px); }
html.windy-install-open #mascot-chat { bottom: calc(16px + 124px); }
@media (max-width: 520px) {
  html.windy-install-open #mascot-chat { bottom: calc(8px + 124px); }
}
#windy-install img { width: 46px; height: 46px; border-radius: 12px; flex: 0 0 auto; }
#windy-install .txt { flex: 1 1 auto; min-width: 0; }
#windy-install .t1 { font-size: .94rem; font-weight: 700; line-height: 1.3; }
#windy-install .t2 { font-size: .78rem; color: #a9bce6; line-height: 1.35; margin-top: 2px; }
#windy-install .btn {
  flex: 0 0 auto; appearance: none; border: 0; cursor: pointer; font: inherit; font-weight: 700;
  background: linear-gradient(135deg, #2f6bff, #1b3fbf); color: #fff;
  padding: 9px 16px; border-radius: 999px; font-size: .86rem; white-space: nowrap;
}
#windy-install .x {
  flex: 0 0 auto; appearance: none; background: transparent; border: 0; cursor: pointer;
  color: #7d8fb8; font-size: 1.25rem; line-height: 1; padding: 4px 2px;
}

/* ===== Toast ===== */
#windy-toast {
  position: fixed; left: 50%; transform: translate(-50%, 200%);
  bottom: calc(16px + env(safe-area-inset-bottom, 0px));
  z-index: 10000;
  background: rgba(15,26,54,.97); color: #e8eeff;
  border: 1px solid rgba(120,160,255,.3);
  padding: 11px 18px; border-radius: 999px; font-size: .86rem;
  box-shadow: 0 12px 30px rgba(0,0,0,.45);
  transition: transform .3s ease; max-width: 90vw; text-align: center;
  font-family: -apple-system, BlinkMacSystemFont, "PingFang HK", "Noto Sans CJK TC", sans-serif;
}
#windy-toast.windy-show { transform: translate(-50%, 0); }

@media (prefers-reduced-motion: reduce) {
  #windy-install, #windy-toast { transition: none; }
}