/* OrcAgent shared UX/performance layer.
   Keeps every server-rendered page on one mobile canvas and prevents fixed UI
   from covering content. Page-specific redesigns remain authoritative. */
html,body{background:#080d12}
a,button,[role="button"]{-webkit-tap-highlight-color:transparent}
img{max-width:100%}

/* When the tab/PWA is not visible, don't spend battery/GPU time repainting
   decorative animations. Data/live-feed lifecycles remain page-owned. */
html.oa-page-hidden *,html.oa-page-hidden *::before,html.oa-page-hidden *::after{animation-play-state:paused!important}

@media(max-width:768px){
  html,body{max-width:100%;overflow-x:hidden;background:#080d12!important;-webkit-text-size-adjust:100%}
  body{min-height:100dvh}
  a,button,[role="button"]{touch-action:manipulation}

  /* The shared bottom nav itself occupies about 98px including its inner
     padding. Older rules reserved 118-132px, leaving a visible dead strip at
     the bottom of many pages. Keep only the space the fixed control needs. */
  html body.oa-shared-ux{padding-bottom:calc(102px + env(safe-area-inset-bottom,0px))!important}
  html body.oa-shared-ux.oa-portfolio .wlt-center{padding-bottom:calc(108px + env(safe-area-inset-bottom,0px))!important}

  /* iOS zooms the viewport when a focused form control is below 16px. That
     creates the apparent page jump seen in in-app browsers, so text controls
     use a native-app-safe minimum without changing toggles/ranges. */
  input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]),textarea,select{font-size:16px!important;max-width:100%}

  /* One X/Instagram-style solid app chrome. Blur on fixed/sticky layers is
     expensive in iOS/Phantom and causes visible repaint/jank while scrolling. */
  .pt-nb-topbar,.oa-bottom-nav{background:#080d12!important;background-image:none!important;-webkit-backdrop-filter:none!important;backdrop-filter:none!important}

  /* Shared modal behaviour: all old and new modal shells stay above the
     persistent bottom nav, with scrolling contained inside the modal. */
  .s-modal,.modal-backdrop,.gd-modal-backdrop,.modal-back,.w-modal-back,
  [class*="modal-backdrop"]{
    z-index:1500!important;
    -webkit-backdrop-filter:none!important;
    backdrop-filter:none!important;
    overscroll-behavior:contain
  }
  .s-card,.modal,.gd-modal,.modal-box,.w-modal-box{
    max-height:calc(100dvh - 32px);
    overflow-y:auto;
    overscroll-behavior:contain;
    -webkit-overflow-scrolling:touch
  }
  html.oa-modal-open,html.oa-modal-open body{overflow:hidden!important;overscroll-behavior:none!important}

  /* Ordinary document pages need a safe zone above the fixed nav, but not a
     second oversized safe zone. Fullscreen/workspace pages opt out below. */
  body:not(.oa-home-mobile):not(.oa-portfolio):not(.oa-live-v2) .page,
  body:not(.oa-home-mobile):not(.oa-portfolio):not(.oa-live-v2) .page-wrap,
  body:not(.oa-home-mobile):not(.oa-portfolio):not(.oa-live-v2) .pr-wrap,
  body:not(.oa-home-mobile):not(.oa-portfolio):not(.oa-live-v2) .content{
    padding-bottom:calc(108px + env(safe-area-inset-bottom,0px))!important
  }

  /* Messages is a fullscreen workspace. Once a thread is open its composer
     must own the bottom edge; the global nav must not cover it. */
  body.oa-thread-open{padding-bottom:0!important;overflow:hidden!important}
  body.oa-thread-open .oa-bottom-nav{display:none!important}
  body.oa-thread-open .pt-nb-topbar{display:none!important}

  /* Prevent generic horizontal clipping caused by desktop-width children. */
  #app,.main,.page,.page-wrap{max-width:100vw}
}

@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{scroll-behavior:auto!important;animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
}

/* Keep the outgoing document visible until the next route can paint.
   This is a progressive enhancement: unsupported browsers use normal links.
   Do NOT swap server-rendered trading/wallet HTML into an SPA: each route
   owns its API subscriptions, authentication checks and teardown lifecycle.

   Desktop keeps the original subtle cross-fade below. On mobile widths this
   becomes a full directional slide instead -- forward navigation pushes the
   new screen in from the right, a back navigation (the edge swipe-back
   gesture in swipe-back.js, the browser's own back control, or a plain
   history.back()) pulls the previous screen back in from the left, the way
   Instagram/X's own apps move between screens rather than just fading.
   Direction is set on <html> by the external pagereveal listener script
   (page-transition-direction.js, injected by app_performance.py), before
   each transition starts -- it has to run earlier than this deferred
   file's own script can, so it is loaded eagerly, not deferred. */
@view-transition {
  navigation: auto;
}
::view-transition-old(root) {
  animation: 115ms ease-in both oa-route-out;
}
::view-transition-new(root) {
  animation: 115ms ease-out both oa-route-in;
}
@keyframes oa-route-out {
  from { opacity: 1 }
  to { opacity: 1 }
}
@keyframes oa-route-in {
  from { opacity: .90 }
  to { opacity: 1 }
}
@media (max-width: 768px) {
  ::view-transition-group(root) {
    animation-duration: .32s;
  }
  ::view-transition-old(root),
  ::view-transition-new(root) {
    animation-duration: .32s;
    animation-timing-function: cubic-bezier(.22, 1, .36, 1);
    animation-fill-mode: both;
    mix-blend-mode: normal; /* two solid slides now, not the desktop cross-fade */
  }
  ::view-transition-old(root) { animation-name: oa-route-hold-left; }
  ::view-transition-new(root) { animation-name: oa-route-in-right; }
  html[data-vt-direction="back"]::view-transition-old(root) { animation-name: oa-route-hold-right; }
  html[data-vt-direction="back"]::view-transition-new(root) { animation-name: oa-route-in-left; }

  @keyframes oa-route-in-right   { from { transform: translateX(100%) } to { transform: translateX(0) } }
  @keyframes oa-route-in-left    { from { transform: translateX(-100%) } to { transform: translateX(0) } }
  @keyframes oa-route-hold-left  { from { transform: translateX(0) } to { transform: translateX(-22%) } }
  @keyframes oa-route-hold-right { from { transform: translateX(0) } to { transform: translateX(22%) } }
}
@media (prefers-reduced-motion: reduce) {
  ::view-transition-old(root),::view-transition-new(root) {
    animation-duration: .01ms !important;
  }
}