/* ==========================================================================
   AXIONMESK MOBILE v2 — Padrão iybroker
   Abas do topo removidas no mobile -> menu hambúrguer + bottom nav
   ========================================================================== */

@media (max-width: 900px) {

  /* ------------------------------------------------------------------------
     1) HEADER — logo + ações, SEM a faixa de 8 abas
     ------------------------------------------------------------------------ */
  .app-header {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    padding: 10px 14px !important;
    min-height: 60px !important;
    position: sticky !important;
    top: 0 !important;
    z-index: 900 !important;
    background: rgba(11,13,18,.94) !important;
    backdrop-filter: blur(16px) !important;
    -webkit-backdrop-filter: blur(16px) !important;
    border-bottom: 1px solid rgba(255,255,255,.06) !important;
    overflow: visible !important;
  }

  /* A barra rolável com as 8 abas: ESCONDE (era a causa dos toques errados) */
  .app-header__right {
    display: none !important;
  }

  .app-header > .logo {
    flex: 0 0 auto !important;
    display: flex;
    align-items: center;
    gap: 9px;
    min-height: 44px;
  }
  .app-header .logo__mark { width: 30px !important; height: 30px !important; }
  .app-header .logo__text { font-size: 19px !important; font-weight: 800 !important; }

  /* Ações do header (Entrar / Cadastre-se) */
  .app-header__actions {
    display: flex !important;
    align-items: center;
    gap: 8px !important;
    flex: 0 0 auto;
  }

  /* ------------------------------------------------------------------------
     2) BOTÃO HAMBÚRGUER — abre o menu completo
     ------------------------------------------------------------------------ */
  .cm-burger {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border: 0;
    background: rgba(255,255,255,.06);
    border-radius: 12px;
    color: #F5F7FA;
    cursor: pointer;
    flex: 0 0 44px;
    touch-action: manipulation;
  }
  .cm-burger:active { transform: scale(.94); background: rgba(255,255,255,.12); }
  .cm-burger svg { width: 22px; height: 22px; }

  /* ------------------------------------------------------------------------
     3) DRAWER — menu lateral deslizante
     ------------------------------------------------------------------------ */
  .cm-drawer-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,.62);
    backdrop-filter: blur(3px);
    -webkit-backdrop-filter: blur(3px);
    opacity: 0;
    pointer-events: none;
    transition: opacity .25s ease;
    z-index: 998;
  }
  .cm-drawer-backdrop.open { opacity: 1; pointer-events: auto; }

  .cm-drawer {
    position: fixed;
    top: 0; left: 0; bottom: 0;
    width: min(84vw, 340px);
    background: #12151C;
    border-right: 1px solid rgba(255,255,255,.08);
    transform: translateX(-102%);
    transition: transform .28s cubic-bezier(.32,.72,0,1);
    z-index: 999;
    display: flex;
    flex-direction: column;
    padding: calc(env(safe-area-inset-top, 0px) + 14px) 0 calc(env(safe-area-inset-bottom, 0px) + 14px);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
  }
  .cm-drawer.open { transform: translateX(0); }

  .cm-drawer__head {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 6px 16px 16px;
    border-bottom: 1px solid rgba(255,255,255,.07);
    margin-bottom: 8px;
  }
  .cm-drawer__head img { width: 34px; height: 34px; }
  .cm-drawer__head span { font-size: 19px; font-weight: 800; color: #F5F7FA; }
  .cm-drawer__close {
    margin-left: auto;
    width: 40px; height: 40px;
    display: grid; place-items: center;
    border: 0; border-radius: 10px;
    background: rgba(255,255,255,.06);
    color: #F5F7FA; font-size: 22px; line-height: 1;
    cursor: pointer;
  }

  .cm-drawer__link {
    display: flex !important;
    align-items: center;
    gap: 13px;
    padding: 13px 18px !important;
    min-height: 52px;
    color: #C9CED6 !important;
    font-size: 15.5px !important;
    font-weight: 600 !important;
    text-decoration: none !important;
    border-left: 3px solid transparent;
    transition: background .15s ease;
    touch-action: manipulation;
  }
  .cm-drawer__link:active { background: rgba(255,255,255,.07); }
  .cm-drawer__link.active {
    color: #386BFF !important;
    background: rgba(56,107,255,.10);
    border-left-color: #386BFF;
  }
  .cm-drawer__link svg { width: 21px; height: 21px; flex: 0 0 21px; opacity: .85; }

  .cm-drawer__sep {
    height: 1px;
    background: rgba(255,255,255,.07);
    margin: 8px 16px;
  }

  /* ------------------------------------------------------------------------
     4) BOTÕES — altura 56px (padrão iybroker)
     ------------------------------------------------------------------------ */
  .btn--primary,
  .hero__form .btn,
  .hero__card .btn,
  button[type="submit"],
  .auth-submit {
    min-height: 56px !important;
    height: 56px !important;
    font-size: 16px !important;
    font-weight: 700 !important;
    border-radius: 14px !important;
    width: 100%;
    box-shadow: none !important;
  }

  /* ------------------------------------------------------------------------
     5) TIPOGRAFIA — base 13-14px, títulos grandes
     ------------------------------------------------------------------------ */
  body { font-size: 14px; }
  .hero__title { font-size: 30px !important; line-height: 1.15 !important; }
  .hero__terms { font-size: 13.5px !important; }
  .news-masthead h1 { font-size: 28px !important; }

  /* ------------------------------------------------------------------------
     6) ESPAÇAMENTO — respiro vertical generoso
     ------------------------------------------------------------------------ */
  .hero { padding: 18px 0 26px !important; }
  .hero__inner { gap: 22px !important; }
  .hero__form { display: flex; flex-direction: column; gap: 14px; }
  .hero .field { height: 56px !important; border-radius: 14px !important; }

  /* ------------------------------------------------------------------------
     7) BOTTOM NAV — sempre acima de tudo
     ------------------------------------------------------------------------ */
  .bottom-nav {
    z-index: 850 !important;
    padding-bottom: calc(env(safe-area-inset-bottom, 0px) + 4px) !important;
  }
}

/* --------------------------------------------------------------------------
   8) Esconde a faixa de abas em qualquer toque/navegador mobile
   -------------------------------------------------------------------------- */
@media (hover: none) and (pointer: coarse) {
  .app-header__right { display: none !important; }
}

/* ==========================================================================
   v2.1 CORREÇÃO — header do index usa .header/.header__inner
   ========================================================================== */
@media (max-width: 900px) {

  .header {
    position: sticky !important;
    top: 0;
    z-index: 900;
    background: rgba(11,13,18,.95) !important;
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border-bottom: 1px solid rgba(255,255,255,.06);
    padding: 0 !important;
  }

  .header__inner {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 8px !important;
    min-height: 60px !important;
    height: auto !important;
    padding: 10px 12px !important;
    margin: 0 !important;
    flex-wrap: nowrap !important;
    max-width: 100% !important;
  }

  /* Menu desktop escondido no mobile */
  .header .nav { display: none !important; }

  /* Logo compacta */
  .header .logo {
    display: flex !important;
    align-items: center;
    gap: 8px !important;
    flex: 0 0 auto;
    min-width: 0;
  }
  .header .logo__mark { width: 28px !important; height: 28px !important; }
  .header .logo__text { font-size: 18px !important; font-weight: 800 !important; }

  /* Ações: tudo numa linha, sem quebrar */
  .header__actions {
    display: flex !important;
    align-items: center !important;
    gap: 7px !important;
    flex: 0 1 auto;
    margin-left: auto !important;
    flex-wrap: nowrap !important;
    min-width: 0;
  }

  /* Esconde busca no mobile (economiza espaço) */
  .header__actions .icon-btn { display: none !important; }

  /* Botões compactos que cabem */
  .header__actions .btn {
    height: 40px !important;
    min-height: 40px !important;
    padding: 0 13px !important;
    font-size: 13.5px !important;
    border-radius: 10px !important;
    white-space: nowrap;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    width: auto !important;
  }
  .header__actions .btn--primary { font-weight: 700; }

  /* Hambúrguer: 44x44, não quebra linha */
  .cm-burger {
    width: 42px !important;
    height: 42px !important;
    min-width: 42px !important;
    flex: 0 0 42px !important;
    border-radius: 11px !important;
    background: rgba(255,255,255,.07) !important;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
  }

  .header__user { display: none; }
}

/* Telas muito estreitas: esconde o texto "Entrar", mantém só Cadastre-se */
@media (max-width: 380px) {
  .header__actions .btn--link { display: none !important; }
  .header .logo__text { font-size: 16px !important; }
  .header__actions .btn { padding: 0 11px !important; font-size: 13px !important; }
}

/* ==========================================================================
   v2.2 — Ticker, espaços e barra PWA (correção)
   ========================================================================== */
@media (max-width: 900px) {

  /* --- TICKER: fade nas bordas + nunca corta --- */
  .ticker {
    position: relative;
    overflow: hidden !important;
    height: 44px !important;
    padding: 0 !important;
    background: #12151C;
    border-bottom: 1px solid rgba(255,255,255,.06);
  }
  .ticker::before,
  .ticker::after {
    content: "";
    position: absolute;
    top: 0; bottom: 0;
    width: 24px;
    z-index: 2;
    pointer-events: none;
  }
  .ticker::before { left: 0;  background: linear-gradient(to right,  #12151C, transparent); }
  .ticker::after  { right: 0; background: linear-gradient(to left,   #12151C, transparent); }

  .ticker__track {
    display: flex !important;
    align-items: center;
    height: 44px !important;
    animation: cmtick 36s linear infinite !important;
  }
  .ticker__item {
    height: 44px !important;
    display: inline-flex !important;
    align-items: center;
    white-space: nowrap;
    padding: 0 20px !important;
    font-size: 13.5px !important;
  }

  /* --- ESPAÇO entre "Conta Apple" e o card --- */
  .hero__terms {
    margin: 18px 0 0 !important;
  }
  .hero__right {
    margin-top: 10px !important;
  }
  .hero__card { margin-top: 0 !important; }

  /* --- BARRA PWA: espaço garantido no fim (funciona em qualquer layout) --- */
  body.has-install-bar {
    padding-bottom: 0 !important;
  }
  body.has-install-bar::after {
    content: "";
    display: block;
    height: calc(108px + env(safe-area-inset-bottom, 0px));
    width: 100%;
  }

  /* Seções finais ganham respiro para não ficarem sob a barra */
  body.has-install-bar section:last-of-type,
  body.has-install-bar .markets,
  body.has-install-bar .markets-grid {
    padding-bottom: 12px !important;
  }
}

@keyframes cmtick {
  0%   { transform: translate3d(0,0,0); }
  100% { transform: translate3d(-50%,0,0); }
}
@media (prefers-reduced-motion: reduce) {
  .ticker__track { animation: none !important; }
}

/* ==========================================================================
   v2.3 — Correção final de espaços e barra PWA
   ========================================================================== */
@media (max-width: 900px) {

  /* ---------- A. HERO: elimina o vazio entre "Conta Apple" e o card ---------- */
  .hero__inner {
    display: flex !important;
    flex-direction: column !important;
    gap: 0 !important;
  }

  .hero__left {
    margin: 0 !important;
    padding: 0 !important;
  }
  .hero__right {
    margin: 14px 0 0 !important;
    padding: 0 !important;
  }

  .hero__form {
    margin: 0 !important;
    padding: 0 !important;
  }
  .hero__terms {
    margin: 14px 0 0 !important;
    padding: 0 !important;
  }
  .hero__card {
    margin: 0 !important;
  }

  /* Remove qualquer margem residual no último elemento do hero */
  .hero__left > *:last-child { margin-bottom: 0 !important; }
  .hero { padding-bottom: 22px !important; }

  /* ---------- B. BARRA PWA: espaço REAL no documento ---------- */
  body.has-install-bar::after {
    content: "";
    display: block;
    height: calc(112px + env(safe-area-inset-bottom, 0px));
    width: 100%;
    flex: 0 0 auto;
  }

  /* "Mercados em alta" e qualquer section final sempre visíveis */
  body.has-install-bar .markets,
  body.has-install-bar .market-grid,
  body.has-install-bar section,
  body.has-install-bar .section {
    padding-bottom: 20px !important;
    margin-bottom: 0 !important;
  }

  /* O container pai precisa permitir o ::after aparecer */
  body { display: flex; flex-direction: column; min-height: 100dvh; }
  body > main, body > .main { flex: 1 0 auto; }

  /* ---------- C. Seção "Mercados em alta": respiro e sem corte ---------- */
  .section-head,
  .markets .section-head {
    margin-bottom: 14px !important;
    padding-bottom: 0 !important;
    display: flex !important;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    flex-wrap: nowrap;
  }
  .section-title {
    font-size: 19px !important;
    margin: 0 !important;
    white-space: nowrap;
  }
  .see-all {
    font-size: 12.5px !important;
    white-space: nowrap;
    min-height: 40px;
    display: inline-flex;
    align-items: center;
  }

  /* Espaço mínimo antes da barra */
  .markets { padding-top: 18px !important; }
}

/* Para telas com safe-area (iPhone com notch) */
@supports (padding: env(safe-area-inset-bottom)) {
  @media (max-width: 900px) {
    body.has-install-bar::after {
      height: calc(116px + env(safe-area-inset-bottom));
    }
  }
}

/* ==========================================================================
   v3.0 — LOGIN sem corte + transições suaves + toque confiável
   ========================================================================== */

/* ---------- 1) LOGIN: página cabe exatamente na tela ---------- */
@media (max-width: 900px) {
  body.auth-page,
  body[class*="auth"] {
    min-height: 100dvh;
    overflow-y: auto;
  }

  .auth-main {
    min-height: 100dvh !important;
    padding: calc(env(safe-area-inset-top, 0px) + 22px) 16px calc(env(safe-area-inset-bottom, 0px) + 22px) !important;
    justify-content: flex-start !important;
    display: flex !important;
    flex-direction: column !important;
  }

  /* Remove o padding de 120px da barra PWA (login nao tem barra inferior) */
  body.has-install-bar .auth-main {
    padding-bottom: calc(env(safe-area-inset-bottom, 0px) + 104px) !important;
  }

  .auth-card {
    margin: 0 auto !important;
    padding: 0 !important;
    width: 100% !important;
    max-width: 430px !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
  }

  /* Logo compacto no topo */
  .auth-card > .logo {
    margin: 0 auto 18px !important;
    min-height: 44px;
  }
  .auth-card > .logo img { width: 38px !important; height: 38px !important; }
  .auth-card > .logo .logo__text { font-size: 21px !important; }

  /* Abas Entrar/Cadastrar */
  .auth-tabs, .tabs {
    display: flex !important;
    width: 100% !important;
    margin: 0 0 20px !important;
    border-radius: 12px;
    overflow: hidden;
  }
  .auth-tabs > *, .tabs > * {
    flex: 1 1 0 !important;
    min-height: 48px !important;
    display: flex !important;
    align-items: center;
    justify-content: center;
    font-size: 15px !important;
    font-weight: 600 !important;
    transition: none !important;
  }

  /* Campos */
  .auth-field {
    height: 54px !important;
    min-height: 54px !important;
    border-radius: 13px !important;
    margin-bottom: 12px !important;
  }

  /* Botao Entrar / Cadastrar */
  .auth-submit,
  .auth-card button[type="submit"] {
    height: 56px !important;
    min-height: 56px !important;
    border-radius: 14px !important;
    font-size: 16px !important;
    font-weight: 700 !important;
    margin-top: 6px;
  }

  .auth-link { min-height: 44px !important; }
}

/* ---------- 2) TRANSIÇÃO SUAVE ENTRE PÁGINAS (sem "piscar") ---------- */
@media (max-width: 900px) {
  html { scroll-behavior: auto; }

  body {
    opacity: 1;
    transition: opacity .18s ease;
    -webkit-font-smoothing: antialiased;
  }
  body.cm-leaving { opacity: 0; }

  /* Evita o "flash" branco/preto ao navegar */
  body, html { background-color: #0B1220; }
}

/* ---------- 3) TOQUE CONFIÁVEL: nada de sobreposição ---------- */
@media (max-width: 900px) {
  .bottom-nav {
    transition: none !important;
    transform: none !important;
    will-change: auto !important;
    contain: layout paint;
  }
  .bottom-nav__item,
  .bottom-nav a,
  .bottom-nav button {
    transition: color .12s ease, background-color .12s ease !important;
    transform: none !important;
    will-change: auto !important;
    position: relative;
    isolation: isolate;
  }
  .bottom-nav__item:active {
    background: rgba(255,255,255,.08) !important;
    transform: none !important;
  }

  /* Painel "Mais": sem animação pesada */
  .mais-fundo, .mais-panel {
    transition: opacity .16s ease !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }

  /* Sombra de navegação */
  .bottom-nav { box-shadow: 0 -1px 0 rgba(255,255,255,.07) !important; }
}

/* ==========================================================================
   v3.1 — LOGIN: conteúdo centralizado e barra PWA sem sobrepor
   ========================================================================== */
@media (max-width: 900px) {
  /* Centraliza o card verticalmente para nao sobrar metade da tela vazia */
  .auth-main {
    justify-content: center !important;
    padding-top: calc(env(safe-area-inset-top, 0px) + 16px) !important;
    padding-bottom: calc(env(safe-area-inset-bottom, 0px) + 16px) !important;
    min-height: 100dvh !important;
  }

  /* Quando a barra de instalar aparece, reserva o espaco dela */
  body.has-install-bar .auth-main {
    padding-bottom: calc(env(safe-area-inset-bottom, 0px) + 100px) !important;
  }

  .auth-card { max-width: 430px !important; }

  /* Bloco Google: se aparecer, mantem espacamento */
  #googleBlock { display: block; margin-top: 4px; }
  .auth-sep { margin: 16px 0 12px !important; }
  .btn-google {
    width: 100% !important;
    min-height: 50px !important;
    display: flex !important;
    align-items: center;
    justify-content: center;
    gap: 10px;
  }

  /* Rodape do login (termos) */
  .auth-foot, .auth-terms {
    font-size: 12.5px !important;
    line-height: 1.6 !important;
    margin-top: 18px !important;
    text-align: center;
  }
}

/* ==========================================================================
   v3.2 — REMOVE conflito de animações (causava travamento e cliques duplos)
   ========================================================================== */

/* Minha transição de saída conflitava com .pagina-entrando do mobile.css.
   Desativada: a fluidez vem apenas da entrada nativa. */
@media (max-width: 900px) {
  body.cm-leaving { opacity: 1 !important; }
  body { transition: none !important; }
}

/* Entrada nativa: só um fade curto, sem transform */
@media (max-width: 900px) {
  body.pagina-entrando {
    animation: cmFadeIn .22s ease-out both !important;
  }
}

@keyframes cmFadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  body.pagina-entrando { animation: none !important; }
}

/* ==========================================================================
   v3.3 — LOGIN sem scroll e PWA bar apenas quando relevante
   ========================================================================== */
@media (max-width: 900px) {
  /* Remove o spacer global no login (nao ha bottom nav nem conteudo longo) */
  body.has-install-bar::after { height: 0 !important; }

  /* No login: barra de instalar convive com o card, sem gerar scroll */
  body.has-install-bar .auth-main {
    padding-bottom: calc(env(safe-area-inset-bottom, 0px) + 92px) !important;
    min-height: 100dvh !important;
    justify-content: flex-start !important;
    padding-top: calc(env(safe-area-inset-top, 0px) + 20px) !important;
  }

  /* Cards e formularios no login cabem na tela */
  .auth-card { gap: 0 !important; }
  .auth-field { margin-bottom: 11px !important; }

  html, body { height: auto !important; }
  .auth-wrap { min-height: 100dvh; }
}

/* Spacer do PWA apenas nas paginas com conteudo longo (nao no auth) */
@media (max-width: 900px) {
  body:not(.auth-page).has-install-bar::after {
    height: calc(112px + env(safe-area-inset-bottom, 0px));
    content: "";
    display: block;
  }
}

/* ==========================================================================
   v4.0 — HIERARQUIA DE CAMADAS (causa dos cliques errados)
   Problema: pwa-install-bar (z:9999) cobria a bottom-nav (z:850).
   ========================================================================== */
@media (max-width: 900px) {

  /* ---------- ORDEM DAS CAMADAS ---------- */
  .bottom-nav,
  #bottomNav {
    z-index: 900 !important;
  }

  /* Barra de instalar FICA ACIMA da bottom nav, mas NAO sobre ela */
  .pwa-install-bar {
    z-index: 950 !important;
    /* posiciona ACIMA da bottom nav, nunca em cima dela */
    bottom: calc(72px + env(safe-area-inset-bottom, 0px) + 10px) !important;
    left: 12px !important;
    right: 12px !important;
  }

  /* Painel "Mais" abaixo de ambos */
  .mais-fundo { z-index: 960 !important; }
  .mais-panel { z-index: 961 !important; }

  /* Quando o painel "Mais" abrir, some com a barra de instalar */
  body.mais-aberto .pwa-install-bar { display: none !important; }

  /* Drawer acima de tudo (mas abaixo de modais críticos) */
  .cm-drawer, .cm-drawer-backdrop { z-index: 980 !important; }

  /* Nada de blur/backdrop pesado na barra */
  .bottom-nav { backdrop-filter: blur(14px) !important; -webkit-backdrop-filter: blur(14px) !important; }
}

/* ---------- Se a barra de instalar estiver visivel, sobe a bottom nav ---------- */
@media (max-width: 900px) {
  body.has-install-bar .bottom-nav,
  body.has-install-bar #bottomNav {
    bottom: 0 !important;
  }
}

/* ==========================================================================
   v4.1 — Header: logo a esquerda, hamburguer a direita
   ========================================================================== */
@media (max-width: 900px) {
  .header__inner {
    justify-content: flex-start !important;
  }
  .header .logo {
    order: 1 !important;
    margin-right: auto !important;
  }
  .header__actions {
    order: 2 !important;
    margin-left: 0 !important;
    justify-content: flex-end;
  }
  /* Hamburger sempre por ultimo (direita) */
  .cm-burger { order: 99 !important; }
}

/* ==========================================================================
   v4.2 — Barra de instalar nao cobre conteudo (espaco real)
   ========================================================================== */
@media (max-width: 900px) {
  body.has-install-bar::after {
    content: "" !important;
    display: block !important;
    height: calc(116px + env(safe-area-inset-bottom, 0px)) !important;
    width: 100%;
    flex: 0 0 auto;
  }
}

/* ==========================================================================
   v4.3 — Barra PWA: sobe e reserva espaco real (fim de sobreposicao)
   ========================================================================== */
@media (max-width: 900px) {
  /* Barra fica acima da bottom nav, sem cobrir conteudo do meio */
  .pwa-install-bar {
    bottom: calc(84px + env(safe-area-inset-bottom, 0px)) !important;
    left: 10px !important;
    right: 10px !important;
    max-height: 76px !important;
    padding: 9px 11px !important;
    border-radius: 14px !important;
  }
  .pwa-install-bar .pwa-install-btn {
    height: 40px !important;
    min-height: 40px !important;
    padding: 0 16px !important;
    font-size: 13.5px !important;
  }
  .pwa-install-icon { width: 40px !important; height: 40px !important; flex-basis: 40px !important; }
  .pwa-install-text strong { font-size: 13.5px !important; }
  .pwa-install-text span { font-size: 11.5px !important; }

  /* Espaco no documento para nada ficar sob a barra */
  body.has-install-bar::after {
    height: calc(168px + env(safe-area-inset-bottom, 0px)) !important;
  }
}

/* Telas baixas (iPhone SE): mais compacto */
@media (max-width: 900px) and (max-height: 700px) {
  .pwa-install-bar { bottom: calc(78px + env(safe-area-inset-bottom, 0px)) !important; max-height: 68px !important; }
  body.has-install-bar::after { height: calc(150px + env(safe-area-inset-bottom, 0px)) !important; }
}

/* v4.4 — Barra PWA acima de qualquer texto (margem de segurança 10px) */
@media (max-width: 900px) {
  .pwa-install-bar {
    bottom: calc(96px + env(safe-area-inset-bottom, 0px)) !important;
  }
  body.has-install-bar::after {
    height: calc(180px + env(safe-area-inset-bottom, 0px)) !important;
  }
}

@media (max-width: 900px) {
  .pwa-install-bar { bottom: calc(96px + env(safe-area-inset-bottom, 0px)) !important; }
  body.has-install-bar::after { height: calc(186px + env(safe-area-inset-bottom, 0px)) !important; }
  /* Botao final com margem extra de seguranca */
  body.has-install-bar .btn--primary:last-of-type,
  body.has-install-bar .cta:last-of-type { margin-bottom: 8px !important; }
}

@media (max-width: 900px) {
  .pwa-install-bar { bottom: calc(104px + env(safe-area-inset-bottom, 0px)) !important; }
  body.has-install-bar::after { height: calc(200px + env(safe-area-inset-bottom, 0px)) !important; }
}

/* v8.1 — PWA bar acima de tudo, sem cobrir conteudo */
@media (max-width: 900px) {
  .pwa-install-bar { bottom: calc(112px + env(safe-area-inset-bottom, 0px)) !important; }
  body.has-install-bar::after { height: calc(210px + env(safe-area-inset-bottom, 0px)) !important; }
  body.has-install-bar .btn--primary:last-of-type { margin-bottom: 10px !important; }
}

/* v9.1 — PWA bar acima dos botoes de recarga */
@media (max-width: 900px) {
  .pwa-install-bar { bottom: calc(120px + env(safe-area-inset-bottom, 0px)) !important; }
  body.has-install-bar::after { height: calc(230px + env(safe-area-inset-bottom, 0px)) !important; }
  body.has-install-bar .btn--primary { margin-bottom: 6px !important; }
  body.has-install-bar .chips, body.has-install-bar .quick-values { margin-bottom: 8px !important; }
}

@media (max-width: 900px) {
  .pwa-install-bar { bottom: calc(128px + env(safe-area-inset-bottom, 0px)) !important; }
  body.has-install-bar::after { height: calc(260px + env(safe-area-inset-bottom, 0px)) !important; }
}

@media (max-width: 900px) {
  .pwa-install-bar { bottom: calc(150px + env(safe-area-inset-bottom, 0px)) !important; }
  body.has-install-bar::after { height: calc(290px + env(safe-area-inset-bottom, 0px)) !important; }
}

/* v12.0 — Espaco real reservado (nao empurra, reserva) */
@media (max-width: 900px) {
  body.has-install-bar { padding-bottom: 0 !important; }
  body.has-install-bar::after { height: calc(96px + env(safe-area-inset-bottom, 0px)) !important; }
  .pwa-install-bar { bottom: calc(10px + env(safe-area-inset-bottom, 0px)) !important; }
}