/* Android-like PWA shell. Desktop remains intentionally unchanged. */
.mobile-app-context,.pwa-install-button,.pwa-ios-install-button{display:none}

@media(max-width:900px){
  :root{--mobile-shortcut-h:70px}
  html{min-height:100%;background:#0d1a1f;overscroll-behavior-y:none}
  body{min-height:100dvh;background:var(--bg);overscroll-behavior-y:none;-webkit-tap-highlight-color:transparent}
  body.is-pwa-mobile{padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px)}
  .app-shell{min-height:100dvh}

  /* A compact app bar rather than a browser-style header. */
  .topbar{height:62px;min-height:62px;padding:7px 12px;background:rgba(13,26,31,.98);border-bottom:1px solid rgba(255,255,255,.075);box-shadow:0 5px 18px rgba(5,12,15,.12);backdrop-filter:blur(16px)}
  .mobile-app-context{min-width:0;display:flex;align-items:center;gap:8px;padding:0;color:#f5f8f7;background:transparent;border:0;text-align:left}.mobile-app-context>span:last-child{display:grid;gap:1px;min-width:0}.mobile-app-context small{color:#98aaa9;font-size:.56rem;font-weight:700;line-height:1}.mobile-app-context strong{overflow:hidden;color:#f6f9f8;font-size:.78rem;font-weight:800;line-height:1.2;text-overflow:ellipsis;white-space:nowrap}.mobile-app-mark{display:block;width:34px;height:34px;overflow:hidden;border-radius:10px}.mobile-app-mark img{display:block;width:100%;height:100%}
  .top-actions{margin-left:auto}.topbar .profile-chip{box-shadow:none}.pwa-install-button,.pwa-ios-install-button{min-height:34px;display:inline-flex;align-items:center;gap:4px;padding:0 9px;color:#d9fff5;background:rgba(30,169,145,.16);border:1px solid rgba(81,223,197,.26);border-radius:10px;font-size:.66rem;font-weight:800}.pwa-install-button[hidden],.pwa-ios-install-button[hidden]{display:none!important}.pwa-install-button>span,.pwa-ios-install-button>span{font-size:1rem;line-height:1}

  /* Bottom navigation is deliberately app-like: stable height, active pill and safe gesture space. */
  .mobile-shortcut-bar{min-height:calc(var(--mobile-shortcut-h) + env(safe-area-inset-bottom,0px));padding-bottom:env(safe-area-inset-bottom,0px);background:rgba(10,22,26,.99);border-top:1px solid rgba(255,255,255,.09);box-shadow:0 -10px 24px rgba(4,10,12,.18);backdrop-filter:blur(18px)}
  .mobile-shortcut,.mobile-shortcut-menu-button{min-height:var(--mobile-shortcut-h);gap:4px;color:#95a9a7;transition:color .16s ease,background .16s ease,transform .16s ease}.mobile-shortcut:active,.mobile-shortcut-menu-button:active{transform:scale(.94)}.mobile-shortcut.is-active{color:#eafff8;background:transparent}.mobile-shortcut.is-active .mobile-shortcut-icon{color:#09211e;background:#55d8c1;box-shadow:0 4px 12px rgba(30,190,162,.2)}.mobile-shortcut-icon{width:30px;height:30px;border-radius:10px;transition:background .16s ease,color .16s ease}.mobile-shortcut > span:last-child,.mobile-shortcut-menu-button > span:last-child{font-size:.58rem}.mobile-shortcut.is-active > span:last-child{font-size:.61rem}.mobile-shortcut-menu-button{border-left-color:rgba(255,255,255,.08)}
  .main-area{padding-bottom:calc(var(--mobile-shortcut-h) + env(safe-area-inset-bottom,0px) + 24px)}

  /* Consistent touch targets and app-like motion for normal Hub screens. */
  button:not(:disabled),a[href]{touch-action:manipulation}.view{animation:pwa-view-in .18s var(--ease) both}@keyframes pwa-view-in{from{opacity:.72;transform:translateY(5px)}to{opacity:1;transform:translateY(0)}}
  body.is-pwa-standalone .topbar{padding-left:max(12px,env(safe-area-inset-left,0px));padding-right:max(12px,env(safe-area-inset-right,0px))}
}

@media(max-width:420px){.pwa-install-button b,.pwa-ios-install-button b{display:none}.pwa-install-button,.pwa-ios-install-button{width:34px;justify-content:center;padding:0}.mobile-app-context strong{max-width:145px}}

/* iOS does not expose the Android install prompt. Explain the native Safari path in-app. */
.pwa-ios-guide-backdrop{position:fixed;z-index:10000;inset:0;display:grid;align-items:end;padding:16px max(16px,env(safe-area-inset-right,0px)) max(16px,env(safe-area-inset-bottom,0px)) max(16px,env(safe-area-inset-left,0px));background:rgba(6,15,18,.58);backdrop-filter:blur(7px)}.pwa-ios-guide-backdrop[hidden]{display:none!important}.pwa-ios-guide{position:relative;max-width:460px;margin:0 auto;width:100%;padding:23px 22px 19px;color:#edf8f5;background:linear-gradient(145deg,#12282b,#0c1a1e);border:1px solid rgba(109,230,207,.22);border-radius:22px;box-shadow:0 20px 56px rgba(0,0,0,.38);animation:pwa-ios-guide-in .22s ease-out both}.pwa-ios-guide-close{position:absolute;top:12px;right:13px;width:32px;height:32px;color:#b8cac6;background:transparent;border:0;border-radius:50%;font-size:1.45rem;line-height:1}.pwa-ios-guide-mark{display:grid;place-items:center;width:36px;height:36px;margin-bottom:14px;color:#08211f;background:#55d8c1;border-radius:11px;font-size:.78rem;font-weight:900}.pwa-ios-guide-kicker{color:#69e8cf;font-size:.64rem;font-weight:900;letter-spacing:.12em}.pwa-ios-guide h2{margin:5px 36px 7px 0;font-size:1.36rem;line-height:1.15}.pwa-ios-guide p{margin:0;color:#b6c9c5;font-size:.88rem;line-height:1.45}.pwa-ios-guide ol{display:grid;gap:10px;margin:18px 0;padding:0;list-style:none}.pwa-ios-guide li{display:flex;align-items:center;gap:10px;color:#e9f4f1;font-size:.86rem;line-height:1.3}.pwa-ios-guide li>span{display:grid;place-items:center;flex:0 0 24px;width:24px;height:24px;color:#74e8d1;background:rgba(85,216,193,.13);border:1px solid rgba(85,216,193,.2);border-radius:8px;font-size:.7rem;font-weight:900}.pwa-ios-guide li b{display:inline-block;margin-left:4px;color:#70e9d0;font-size:1.1rem;vertical-align:-1px}.pwa-ios-guide-done{width:100%;min-height:44px;color:#08211f;background:#55d8c1;border:0;border-radius:12px;font-weight:900}@keyframes pwa-ios-guide-in{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:translateY(0)}}

@media(prefers-reduced-motion:reduce){.view,.mobile-shortcut,.mobile-shortcut-menu-button{animation:none!important;transition:none!important}}
