/* AITradePro Mobile App CSS - V70 Mobile PWA Sprint
   Additive only. Does not override existing component/business styles;
   only adds app-shell chrome (nav, splash, safe-area, touch/gesture polish). */

:root{
  --aitp-safe-top: env(safe-area-inset-top, 0px);
  --aitp-safe-bottom: env(safe-area-inset-bottom, 0px);
  --aitp-safe-left: env(safe-area-inset-left, 0px);
  --aitp-safe-right: env(safe-area-inset-right, 0px);
  --aitp-bg: #0b0e11;
  --aitp-surface: #151a1f;
  --aitp-accent: #f5a623;
  --aitp-text: #e9edf1;
  --aitp-text-dim: #9aa4ae;
  --aitp-nav-height: 60px;
  --aitp-tradebar-h: 0px;
  --aitp-signal-h: 0px;
  --bottom-safe-area: calc(var(--aitp-nav-height) + var(--aitp-tradebar-h) + var(--aitp-signal-h) + var(--aitp-safe-bottom));

  /* ---------- V73: documented z-index hierarchy (values unchanged, now named) ---------- */
  --z-header: 100;
  --z-fs-btn: 500;
  --z-trade-bar: 99400;
  --z-float-signal: 99500;
  --z-sheet: 99600;
  --z-ptr: 99996;
  --z-offline-banner: 99997;
  --z-bottom-nav: 99998;
  --z-splash: 999999;
}

html{
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  overscroll-behavior-y: none; /* kill browser bounce/rubber-band */
}

body.aitp-mobile{
  touch-action: pan-x pan-y; /* block pinch-zoom at page level, allow charts to opt back in */
  -webkit-user-select: none;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  overscroll-behavior-y: contain;
  padding-bottom: calc(var(--aitp-nav-height) + var(--aitp-safe-bottom));
}

body.aitp-mobile input,
body.aitp-mobile textarea,
body.aitp-mobile [contenteditable="true"]{
  -webkit-user-select: text;
  user-select: text;
}

/* Allow charts / canvases to handle their own pinch & pan gestures */
body.aitp-mobile canvas,
body.aitp-mobile .chart-container,
body.aitp-mobile [data-chart]{
  touch-action: none;
}

/* Minimum touch target size */
body.aitp-mobile button,
body.aitp-mobile a,
body.aitp-mobile [role="button"]{
  min-height: 44px;
}

/* ---------- Splash Screen ---------- */
#aitp-splash{
  position: fixed; inset: 0; z-index: 999999;
  background: var(--aitp-bg);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  transition: opacity .35s ease, visibility .35s ease;
}
#aitp-splash img{ width: 88px; height: 88px; animation: aitp-pulse 1.1s ease-in-out infinite; }
#aitp-splash .aitp-spin{
  margin-top: 22px; width: 28px; height: 28px; border-radius: 50%;
  border: 3px solid #232a31; border-top-color: var(--aitp-accent);
  animation: aitp-spin .8s linear infinite;
}
#aitp-splash .aitp-ver{ margin-top: 14px; color: var(--aitp-text-dim); font-size: 12px; font-family: -apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif; }
#aitp-splash.aitp-hide{ opacity: 0; visibility: hidden; pointer-events: none; }
@keyframes aitp-pulse{ 0%,100%{transform:scale(1)} 50%{transform:scale(1.06)} }
@keyframes aitp-spin{ to{ transform: rotate(360deg) } }

/* ---------- Bottom Navigation ---------- */
#aitp-bottom-nav{
  position: fixed; left: 0; right: 0; bottom: 0; z-index: var(--z-bottom-nav, 99998);
  height: calc(var(--aitp-nav-height) + var(--aitp-safe-bottom));
  padding-bottom: var(--aitp-safe-bottom);
  padding-left: var(--aitp-safe-left); padding-right: var(--aitp-safe-right);
  background: rgba(11,14,17,0.96);
  backdrop-filter: blur(10px);
  border-top: 1px solid #1f262d;
  display: flex; align-items: stretch; justify-content: space-around;
  font-family: -apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
}
#aitp-bottom-nav a{
  flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 2px; text-decoration: none; color: var(--aitp-text-dim); font-size: 10.5px;
  -webkit-tap-highlight-color: transparent; position: relative; min-height: var(--aitp-nav-height);
}
#aitp-bottom-nav a .aitp-ic{ font-size: 20px; line-height: 1; }
#aitp-bottom-nav a.aitp-active{ color: var(--aitp-accent); }
#aitp-bottom-nav a:active .aitp-ic{ transform: scale(0.88); }
#aitp-bottom-nav a .aitp-ic, #aitp-bottom-nav a{ transition: transform .12s ease, color .15s ease; }

/* Offline banner */
#aitp-offline-banner{
  position: fixed; top: 0; left: 0; right: 0; z-index: 99997;
  top: var(--aitp-safe-top);
  background: #3a2a05; color: #ffcf7a; font-size: 12.5px;
  padding: 8px 14px; text-align: center; display: none;
  font-family: -apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
}
#aitp-offline-banner.aitp-show{ display: block; }

/* Pull to refresh indicator */
#aitp-ptr{
  position: fixed; left: 50%; top: calc(var(--aitp-safe-top) + 8px); transform: translate(-50%,-60px);
  z-index: 99996; width: 34px; height: 34px; border-radius: 50%;
  background: var(--aitp-surface); box-shadow: 0 2px 10px rgba(0,0,0,.4);
  display: flex; align-items: center; justify-content: center;
  transition: transform .2s ease;
}
#aitp-ptr .aitp-spin{ width: 18px; height: 18px; border-radius: 50%; border: 2px solid #2a323a; border-top-color: var(--aitp-accent); animation: aitp-spin .7s linear infinite; }
#aitp-ptr.aitp-visible{ transform: translate(-50%, 0); }

/* Live value flash animation for widget updates without full reload */
.aitp-flash-up{ animation: aitp-flash-green .6s ease; }
.aitp-flash-down{ animation: aitp-flash-red .6s ease; }
@keyframes aitp-flash-green{ 0%{ background-color: rgba(46,204,113,.35);} 100%{ background-color: transparent; } }
@keyframes aitp-flash-red{ 0%{ background-color: rgba(231,76,60,.35);} 100%{ background-color: transparent; } }

/* Skeleton loading */
.aitp-skeleton{
  background: linear-gradient(90deg, #171d23 25%, #1e252c 37%, #171d23 63%);
  background-size: 400% 100%; animation: aitp-shimmer 1.4s ease infinite; border-radius: 6px;
}
@keyframes aitp-shimmer{ 0%{ background-position: 100% 50%;} 100%{ background-position: 0 50%; } }

@media (max-width: 480px){
  body.aitp-mobile{ overflow-x: hidden; }
}

/* Reposition known pre-existing fixed widgets so they sit above the new bottom nav instead of overlapping it */
body.aitp-mobile #mdHealthBadge{ bottom: calc(var(--aitp-nav-height) + var(--aitp-safe-bottom) + 14px) !important; }