/* ============================================================
   INVESTRA as a phone app (R23b) - assets/js/webapp.js adds html.is-app when the site is opened from the home screen
   (standalone). Then phones get a bottom tab bar (Home, Banks, ASTRA, NBFCs, Menu), the floating buttons move above
   it, the menu button and the ASTRA button step aside (they are in the bar) and pages cross-fade like an app.
   In the browser nothing changes except the one-time install hint (.app-hint).
   ============================================================ */
.app-tabs, .app-hint { display: none; }

@media (max-width: 1023.98px) {
  html.is-app { --tabbar-h: 62px; }
  html.is-app body { padding-bottom: calc(var(--tabbar-h) + var(--safe-b, env(safe-area-inset-bottom, 0px)) + 8px); }
  html.is-app .app-tabs { position: fixed; left: 0; right: 0; bottom: 0; z-index: 200; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); align-items: end;
    height: calc(var(--tabbar-h) + env(safe-area-inset-bottom, 0px)); padding: 0 calc(6px + env(safe-area-inset-right, 0px)) env(safe-area-inset-bottom, 0px) calc(6px + env(safe-area-inset-left, 0px));
    background: var(--bg-base); background: color-mix(in srgb, var(--bg-base) 92%, transparent); border-top: 1px solid var(--border);
    box-shadow: 0 -10px 30px rgba(0, 0, 0, .28); -webkit-user-select: none; user-select: none; transition: transform .3s cubic-bezier(.2, .9, .2, 1); }
  @supports (-webkit-touch-callout: none) { html.is-app .app-tabs { -webkit-backdrop-filter: blur(18px) saturate(1.5); backdrop-filter: blur(18px) saturate(1.5); } }
  html.is-app.gx-imm-on .app-tabs { transform: translateY(110%); }
  .app-tab { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; height: var(--tabbar-h); min-width: 0; padding: 0; border: 0; background: none; cursor: pointer;
    font: inherit; font-size: 10.5px; font-weight: 600; letter-spacing: .02em; color: var(--text-muted); text-decoration: none; -webkit-tap-highlight-color: transparent; }
  .app-tab svg { width: 23px; height: 23px; transition: transform .25s cubic-bezier(.2, .9, .2, 1); }
  .app-tab:active svg { transform: scale(.88); }
  .app-tab.on { color: var(--gold); }
  .app-tab.on::before { content: ""; position: absolute; top: 4px; width: 22px; height: 3px; border-radius: 3px; background: var(--gold); box-shadow: 0 0 10px var(--gold); }
  .app-tab-astra { justify-content: flex-end; padding-bottom: 6px; }
  .app-tab-astra .app-astra-orb { position: absolute; top: -20px; left: 50%; width: 58px; height: 58px; margin-left: -29px; border-radius: 50%; display: grid; place-items: center;
    background: radial-gradient(circle at 50% 40%, #2a1d0c, #0b0a08 70%); box-shadow: 0 0 0 2px rgba(240, 200, 110, .55), 0 0 22px rgba(255, 150, 50, .45), 0 8px 18px rgba(0, 0, 0, .45); }
  .app-tab-astra .app-astra-orb img { width: 52px; height: 52px; object-fit: contain; }
  .app-tab-astra .app-astra-orb::after { content: ""; position: absolute; inset: -5px; border-radius: 50%; border: 1.5px solid rgba(255, 170, 70, .5); animation: appOrb 2.6s ease-in-out infinite; }
  .app-tab-astra.on .app-astra-orb { box-shadow: 0 0 0 2px #f1d27e, 0 0 30px rgba(255, 160, 60, .7), 0 8px 18px rgba(0, 0, 0, .45); }
  .app-tab-astra.on::before { display: none; }
  @keyframes appOrb { 0%, 100% { transform: scale(1); opacity: .55; } 50% { transform: scale(1.08); opacity: 1; } }
  .app-tab:focus-visible { outline: 2px solid var(--gold); outline-offset: -4px; border-radius: 12px; }
  /* the floating buttons step up, and the ones the bar replaces step aside */
  html.is-app .astra-fab, html.is-app .fab-fire-canvas, html.is-app .hamburger { display: none !important; }
  html.is-app .dr-launch { bottom: calc(var(--tabbar-h) + 14px + env(safe-area-inset-bottom, 0px)) !important; right: calc(14px + env(safe-area-inset-right, 0px)) !important; }
  html.is-app .guide-fab { bottom: calc(var(--tabbar-h) + 14px + env(safe-area-inset-bottom, 0px)) !important; }
  html.is-app #inv-guide .g-dock, html.is-app #inv-guide .g-float { bottom: calc(var(--tabbar-h) + 10px + env(safe-area-inset-bottom, 0px)); }
}
@media (prefers-reduced-motion: reduce) { .app-tab-astra .app-astra-orb::after { animation: none; } .app-tabs { transition: none; } }

/* pages cross-fade inside the app (browsers without view transitions simply switch) */
@media (display-mode: standalone) {
  @view-transition { navigation: auto; }
  ::view-transition-old(root), ::view-transition-new(root) { animation-duration: .22s; }
  html { overscroll-behavior-y: none; }
}

/* ---------- the one-time install hint (phones, in the browser) ---------- */
.app-hint.show { position: fixed; z-index: 320; left: calc(10px + env(safe-area-inset-left, 0px)); right: calc(10px + env(safe-area-inset-right, 0px)); bottom: calc(10px + env(safe-area-inset-bottom, 0px));
  display: grid; grid-template-columns: 48px minmax(0, 1fr); gap: 4px 12px; align-items: center; padding: 14px 14px 12px; border-radius: 20px; color: var(--text);
  background: var(--bg-card); border: 1px solid var(--border-gold, rgba(239, 211, 149, .35)); box-shadow: 0 20px 50px rgba(0, 0, 0, .5); animation: appHintIn .45s cubic-bezier(.2, .9, .2, 1) both; }
@keyframes appHintIn { from { transform: translateY(120%); opacity: 0; } to { transform: none; opacity: 1; } }
.app-hint img { width: 48px; height: 48px; border-radius: 12px; }
.app-hint-b { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.app-hint-b b { font-size: 14.5px; }
.app-hint-b span { font-size: 12.5px; line-height: 1.45; color: var(--text-sub); }
.app-hint-b svg { width: 15px; height: 15px; vertical-align: -3px; color: var(--gold); }
.app-hint-a { grid-column: 1 / -1; display: flex; justify-content: flex-end; gap: 8px; margin-top: 8px; }
.app-hint-a button { min-height: 44px; padding: 0 18px; border-radius: 999px; font: inherit; font-size: 13.5px; font-weight: 700; cursor: pointer; }
.app-hint-go { border: 0; color: #1a1408; background: linear-gradient(100deg, #fdefc4, #e6bf5e 55%, #f8dd92); }
.app-hint-x { border: 1px solid var(--border); background: transparent; color: var(--text-sub); }
@media (prefers-reduced-motion: reduce) { .app-hint.show { animation: none; } }
@media print { .app-tabs, .app-hint { display: none !important; } }