:root {
  --oliver-native-safe-top: 0px;
  --oliver-native-safe-right: 0px;
  --oliver-native-safe-bottom: 0px;
  --oliver-native-safe-left: 0px;
  --oliver-native-ime-bottom: 0px;
  --oliver-safe-top: max(env(safe-area-inset-top, 0px), var(--oliver-native-safe-top));
  --oliver-safe-right: max(env(safe-area-inset-right, 0px), var(--oliver-native-safe-right));
  --oliver-safe-bottom: max(env(safe-area-inset-bottom, 0px), var(--oliver-native-safe-bottom));
  --oliver-safe-left: max(env(safe-area-inset-left, 0px), var(--oliver-native-safe-left));
}

/* Keep the scrollable plan surface outside Android status/navigation bars,
   including the mandatory paywall, whose base style allows 100dvh. */
html.cap-native #planUpgradeModal.sheet-bg {
  box-sizing: border-box;
  padding-top: calc(12px + var(--oliver-safe-top)) !important;
  padding-bottom: var(--oliver-safe-bottom) !important;
  padding-left: var(--oliver-safe-left) !important;
  padding-right: var(--oliver-safe-right) !important;
}
html.cap-native body #planUpgradeModal .plan-sheet {
  box-sizing: border-box;
  max-height: calc(100dvh - 12px - var(--oliver-safe-top) - var(--oliver-safe-bottom)) !important;
  padding-bottom: 22px;
}

@media (max-width: 899px) {
  /* No Assistente a navegacao inferior fica visualmente oculta. No Chrome
     Android, quando a viewport encolhia com o teclado, seus botoes fixos ainda
     participavam do hit-test por cima do composer. */
  body.ol-assistant-active .bottom-tabs {
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
    transform: translateY(120%) !important;
  }

  html.cap-native .app-header {
    padding-top: calc(8px + var(--oliver-safe-top)) !important;
    padding-left: calc(14px + var(--oliver-safe-left)) !important;
    padding-right: calc(14px + var(--oliver-safe-right)) !important;
  }

  html.cap-native .app {
    padding-bottom: calc(66px + var(--oliver-safe-bottom)) !important;
  }

  /* A superficie do menu ocupa tambem a area dos botoes do sistema. Os
     controles continuam no trecho util, mas o fundo deixa de parecer uma
     barra flutuante separada do Android. */
  html.cap-native .bottom-tabs {
    bottom: 0 !important;
    height: calc(66px + var(--oliver-safe-bottom)) !important;
    padding-bottom: var(--oliver-safe-bottom) !important;
    box-sizing: border-box !important;
    border-radius: 20px 20px 0 0 !important;
  }

  html.cap-native .fab-menu {
    bottom: calc(76px + var(--oliver-safe-bottom)) !important;
  }

  html.cap-native body.ol-assistant-active .app {
    padding-bottom: 0 !important;
  }

  /* O painel cresce ate o limite do WebView. A safe area e consumida uma
     unica vez pelo compositor; antes pagina e compositor reservavam 48px cada. */
  html.cap-native body.ol-assistant-active #page-assistant:not(.hidden),
  html.cap-native body.ol-assistant-active.assistant-keyboard-open #page-assistant:not(.hidden) {
    padding-bottom: 4px !important;
  }

  html.cap-native body.ol-assistant-active #page-assistant .chat-composer,
  html.cap-native body.ol-assistant-active.assistant-keyboard-open #page-assistant .chat-composer {
    padding: 6px calc(8px + var(--oliver-safe-right)) max(6px, calc(var(--oliver-safe-bottom) - 7px)) calc(8px + var(--oliver-safe-left)) !important;
  }

  html.cap-native.oliver-native-ime-visible body.ol-assistant-active #page-assistant .chat-composer {
    padding-bottom: 6px !important;
  }

  html.cap-native body.ol-assistant-active #page-assistant .chat-input-row,
  html.cap-native body.ol-assistant-active #page-assistant .chat-input-row textarea#chatInput,
  html.cap-native body.ol-assistant-active.assistant-keyboard-open #page-assistant .chat-input-row,
  html.cap-native body.ol-assistant-active.assistant-keyboard-open #page-assistant .chat-input-row textarea#chatInput {
    animation: none !important;
    transform: none !important;
    transition: border-color 120ms ease, background-color 120ms ease !important;
  }
}