/* iOS-specific fixes for Capacitor WKWebView and mobile Safari rendering
   This file is referenced by index.html and copied to dist/spa at build time. */

/* Native iOS (Capacitor) override: disable glow layers that can cause top-edge seams */
.native-ios .glow-card::before,
.native-ios .glow-card::after,
.native-ios .orbital,
.native-ios .glow-spot {
  display: none !important;
}

/* Neutralize top caps/fades specifically on native iOS to avoid over-masking */
/* Keep ::after disabled; we'll repurpose ::before as the new inner green layer */
.native-ios .ios-card-edge-fix::after {
  display: none !important;
}

/* Keep a clean, crisp inner stroke on the card for iOS */
.native-ios .ios-card-edge-fix {
  box-shadow: inset 0 0 0 1px hsla(210, 24%, 16%, 0.8) !important;
}

/* Reintroduce a safe inner green layer on iOS without touching the top edge */
.native-ios .ios-card-edge-fix::before {
  content: "";
  position: absolute;
  left: 8px;
  right: 8px;
  top: 8px; /* keep away from the top edge to avoid seams */
  height: 140px;
  border-top-left-radius: 20px;
  border-top-right-radius: 20px;
  pointer-events: none;
  z-index: 0; /* behind content */
  background:
    radial-gradient(600px 200px at 20% 0%, rgba(17, 200, 182, 0.22), rgba(17, 200, 182, 0) 70%),
    linear-gradient(90deg, rgba(17, 200, 182, 0.12), rgba(17, 200, 182, 0.04));
}

/* iOS-only: make login surface opaque and remove blur so background cannot bleed through */
.native-ios .qe-login-ios-surface {
  background: hsl(var(--card)) !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
}

/* iOS-only: remove radial login background to avoid green halo behind card */
.native-ios .qe-login-bg {
  display: none !important;
}

/* Ensure app fills the dynamic viewport height on iOS */
html, body, #root {
  height: 100%;
}

@supports (height: 100dvh) {
  #root {
    min-height: 100dvh;
  }
}

/* Safe area padding helpers to avoid content under status/home bars */
.ios-safe-area {
  padding-top: env(safe-area-inset-top);
  padding-bottom: env(safe-area-inset-bottom);
  padding-left: env(safe-area-inset-left);
  padding-right: env(safe-area-inset-right);
}

/* iOS Safe Area Support - Trading Platform Optimizations */
:root {
  --safe-area-inset-top: env(safe-area-inset-top, 0px);
  --safe-area-inset-right: env(safe-area-inset-right, 0px);
  --safe-area-inset-bottom: env(safe-area-inset-bottom, 0px);
  --safe-area-inset-left: env(safe-area-inset-left, 0px);
}

/* Trading header with safe area support - ultra compact */
.trading-header {
  padding-top: var(--safe-area-inset-top) !important;
  padding-left: var(--safe-area-inset-left) !important;
  padding-right: var(--safe-area-inset-right) !important;
}

/* Apply safe area to all fixed headers */
header[class*="fixed"] {
  padding-top: var(--safe-area-inset-top) !important;
  padding-left: var(--safe-area-inset-left) !important;
  padding-right: var(--safe-area-inset-right) !important;
}

/* Ensure body starts below safe areas */
body {
  padding-top: var(--safe-area-inset-top);
}

/* Improve touch interactions */
* {
  -webkit-tap-highlight-color: transparent;
}

button, [role="button"], .clickable {
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  user-select: none;
  touch-action: manipulation;
}

/* Momentum scrolling and bounce behavior */
.scroll, .overflow-auto, .overflow-y-auto, .ios-scroll {
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
}

/* Prevent font size zoom on focus */
input, textarea, select {
  font-size: 16px !important;
  -webkit-appearance: none;
}

/* Subtle background enhancements used by the iOS Login upgrade */
.qe-login-ios-surface {
  background: linear-gradient(180deg, rgba(17, 24, 39, 0.75) 0%, rgba(17, 24, 39, 0.55) 100%);
  backdrop-filter: blur(10px) saturate(1.4);
  -webkit-backdrop-filter: blur(10px) saturate(1.4);
}

/* Compact top ticker bar on mobile */
.qe-ticker-mobile {
  height: 40px;
  background: rgba(12, 12, 15, 0.92);
  border: 1px solid rgba(60, 60, 70, 0.6);
}

/* Box-shadow based border - iOS handles shadows better than borders on blurred elements */
.ios-mask-border {
  /* Use inset box-shadow instead of border - no iOS rendering artifacts */
  box-shadow: 
    inset 0 0 0 1px hsla(210, 24%, 16%, 0.8),
    0 30px 80px -30px hsl(0 0% 0% / 0.6);
  /* Force GPU compositing for smooth rendering */
  -webkit-transform: translate3d(0, 0, 0.001px);
  transform: translate3d(0, 0, 0.001px);
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  /* Ensure background clips properly */
  -webkit-background-clip: padding-box;
  background-clip: padding-box;
}

/* iOS top-edge seam fix for blurred gradient cards */
.ios-card-edge-fix {
  position: relative;
  isolation: isolate; /* ensure pseudo-element blends only within card */
  -webkit-transform: translateZ(0.001px);
  transform: translateZ(0.001px);
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}
.ios-card-edge-fix::before {
  /* Subtle top overlay to hide 1px hairline seams on iOS */
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 10px; /* fade height */
  border-radius: inherit;
  pointer-events: none;
  /* Match the top of the card's gradient background */
  background: linear-gradient(to bottom, rgba(17, 24, 39, 0.88), rgba(17, 24, 39, 0) 100%);
  /* Ensure overlay is rendered within the card and not clipped weirdly */
  -webkit-mask-image: -webkit-linear-gradient(top, rgba(0,0,0,1), rgba(0,0,0,0));
  mask-image: linear-gradient(to bottom, rgba(0,0,0,1), rgba(0,0,0,0));
  z-index: 2; /* above glow */
}

/* Additional parent overlay to mask any glow bleed at the very top edge on iOS */
.glow-card { position: relative; }
.glow-card::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: -1px; /* cover any fractional gap */
  height: 12px; /* soft fade */
  border-top-left-radius: 1.5rem;
  border-top-right-radius: 1.5rem;
  pointer-events: none;
  background: linear-gradient(to bottom, rgba(17, 24, 39, 0.95), rgba(17, 24, 39, 0) 100%);
  z-index: 1; /* above glow-card::before, below card content */
}
/* Ensure the main card sits above the mask */
.glow-card > .ios-card-edge-fix { position: relative; z-index: 2; }

/* iOS: Trim the top of the rotating glow so it can’t peek above rounded corner */
.glow-card::before {
  /* Cut off the top 12px inside the rounded rect */
  clip-path: inset(12px 0 0 0 round 1.5rem) !important;
}

/* iOS: Add a crisp inset top line inside the card to hide any subpixel bleed */
.ios-card-edge-fix {
  box-shadow: inset 0 1px 0 rgba(11, 14, 17, 0.95);
  position: relative;
}
/* iOS: Add an opaque top cap inside the card to ensure nothing underneath can ever show */
.ios-card-edge-fix::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: -1px; /* cover fractional rounding */
  height: 10px;
  background: hsl(var(--card)); /* fully opaque card color */
  border-top-left-radius: inherit;
  border-top-right-radius: inherit;
  pointer-events: none;
  z-index: 3; /* above any glow and card content below the top cap */
}

/* marquee animation (duplicate to ensure availability even before app CSS loads) */
@keyframes marquee {
  0% { transform: translateX(0%); }
  100% { transform: translateX(-50%); }
}
.animate-marquee-slow { animation: marquee 30s linear infinite; }