/* ARISE PWA-mode adjustments. Loaded after style.css; affects only standalone display. */

/* ──────────────────────────────────────────────────────────────────────
   COLLAPSE Safe-Exit + SOS into a single small bubble — ALWAYS (both
   browser mode and PWA mode). Tap the bubble to expand. Lives on the
   LEFT EDGE, vertically centred, so it never blocks bottom-right thumb
   activity or the install banner at the bottom of the screen.
   ──────────────────────────────────────────────────────────────────────*/
.float-btns {
  position: fixed !important;
  top: 50% !important;
  bottom: auto !important;
  left: 8px !important;
  right: auto !important;
  transform: translateY(-50%);
  z-index: 9999;
  display: flex;
  flex-direction: column;
  gap: 8px;
  align-items: flex-start;
}
.float-btns::before {
  content: '🛡';
  display: flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  background: #e53935;
  color: #fff;
  border-radius: 50%;
  box-shadow: 0 4px 14px rgba(229,57,53,.5);
  font-size: 1.2rem;
  cursor: pointer;
  opacity: .82;
}
.float-btns:hover::before, .float-btns:focus-within::before { opacity: 1; }

.float-btns .safe-exit-btn,
.float-btns > div { display: none; }
.float-btns.expanded::before { display: none; }
.float-btns.expanded .safe-exit-btn,
.float-btns.expanded > div { display: block; }
.float-btns.expanded {
  background: #fff;
  padding: 10px;
  border-radius: 12px;
  box-shadow: 0 8px 30px rgba(0,0,0,.25);
  max-width: 260px;
}

.sos-panel {
  max-height: calc(100vh - 240px);
  overflow-y: auto;
}

/* Honour device safe area in PWA mode */
@media (display-mode: standalone), (display-mode: minimal-ui), (display-mode: fullscreen) {
  .navbar { padding-top: env(safe-area-inset-top, 0px); }
  /* Hide the in-browser install banner when running as installed PWA */
  #pwaBanner, .install-help-overlay { display: none !important; }
}

/* Full-screen overlay shown when one-tap install isn't available (Chrome
   throttled beforeinstallprompt). Points at the ⋮ menu and shows the steps. */
.install-help-overlay {
  position: fixed; inset: 0;
  background: rgba(0,0,0,.7);
  z-index: 10005;
  display: flex; align-items: center; justify-content: center;
  padding: 20px;
}
.install-help-overlay .card {
  background: #fff; color: #1A2E08;
  border-radius: 16px;
  padding: 26px 24px 20px;
  max-width: 420px; width: 100%;
  box-shadow: 0 16px 60px rgba(0,0,0,.4);
  font-size: 1rem;
  line-height: 1.55;
}
.install-help-overlay h3 {
  margin: 0 0 14px;
  color: #3D6318;
  font-size: 1.25rem;
  line-height: 1.3;
}
.install-help-overlay ol { padding-left: 24px; line-height: 1.75; margin: 0 0 18px; font-size: 1rem; }
.install-help-overlay ol li { margin-bottom: 8px; }
.install-help-overlay p { margin: 0 0 12px; line-height: 1.55; }
.install-help-overlay .arrow {
  position: fixed; top: 8px; right: 14px;
  font-size: 3rem; color: #FF9700;
  text-shadow: 0 2px 8px rgba(0,0,0,.4);
  animation: arrowBounce 1s ease-in-out infinite;
}
@keyframes arrowBounce {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-8px); }
}
.install-help-overlay .close {
  background: #FF9700; color: #fff; border: none; border-radius: 10px;
  padding: 14px 18px; font-weight: 800; cursor: pointer; width: 100%;
  font-size: 1.05rem; margin-top: 6px;
  box-shadow: 0 4px 12px rgba(255,151,0,.35);
}

/* In-browser install hint — shows in regular browser mode so users see how
   to install. Hidden in PWA mode by the rule above. */
.install-hint {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  background: linear-gradient(135deg,#3D6318,#FF9700);
  color: #fff;
  padding: 10px 14px;
  text-align: center;
  font-size: .85rem;
  font-weight: 700;
  z-index: 10001;
  box-shadow: 0 4px 14px rgba(0,0,0,.25);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
}
.install-hint button {
  background: rgba(0,0,0,.18);
  color: #fff;
  border: none;
  border-radius: 6px;
  padding: 6px 10px;
  font-size: .78rem;
  font-weight: 700;
  cursor: pointer;
}
.install-hint .dismiss {
  background: transparent;
  font-size: 1.1rem;
  padding: 2px 8px;
  line-height: 1;
}

/* Sync banner — TOP of screen so it never fights the floating SOS/SafeExit
   buttons at the bottom-right. z-index above the floating buttons (9999)
   so taps always reach it. */
.sync-banner {
  position: fixed;
  top: calc(env(safe-area-inset-top, 0px) + 0px);
  left: 0;
  right: 0;
  z-index: 10000;
  background: linear-gradient(135deg, #1E3209, #3D6318);
  color: #fff;
  border-radius: 0 0 14px 14px;
  padding: 12px 14px calc(12px + env(safe-area-inset-top, 0px));
  box-shadow: 0 8px 32px rgba(0,0,0,.35);
  display: none;
  flex-direction: column;
  gap: 8px;
  font-size: .88rem;
}
.sync-banner.show { display: flex; }

/* When the banner is visible, push the rest of the page down so content
   never hides behind it. JS toggles .arise-sync-active on <body>. */
body.arise-sync-active { padding-top: 86px; }
@media (max-width: 480px) {
  body.arise-sync-active { padding-top: 110px; }
}
.sync-banner .row { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.sync-banner .text { flex: 1; line-height: 1.35; }
.sync-banner button,
.sync-banner a.go,
.sync-banner a.later {
  border: none; border-radius: 8px; padding: 9px 14px; font-size: .82rem;
  font-weight: 700; cursor: pointer; white-space: nowrap;
  display: inline-block; text-decoration: none; margin-left: 6px;
}
.sync-banner .go    { background: #FF9700; color: #fff; }
.sync-banner .later { background: rgba(255,255,255,.15); color: #fff; }
.sync-banner.done   { background: linear-gradient(135deg, #2D4A12, #3D6318); }
.sync-banner .bar {
  height: 6px; background: rgba(255,255,255,.2); border-radius: 3px; overflow: hidden; display: none;
}
.sync-banner.syncing .bar { display: block; }
.sync-banner.syncing .row .go,
.sync-banner.syncing .row .later { display: none; }
.sync-banner .bar > span {
  display: block; height: 100%; background: #FF9700; width: 0%; transition: width .2s;
}
.sync-banner .status { font-size: .76rem; opacity: .9; }