/* instalar-app.css — botão flutuante (moeda) + popup "Baixar o app" (PWA) */

.fab-instalar {
  position: fixed;
  right: 16px;
  bottom: calc(18px + env(safe-area-inset-bottom, 0px));
  z-index: 45; /* abaixo do header (50), dos painéis e dos overlays (chat, mapa, câmera) */
  width: 56px; height: 56px;
  display: none; /* só aparece em aparelhos de toque (ver @media no fim) e se o app ainda não estiver instalado */
  align-items: center; justify-content: center;
  border: 0; border-radius: 50%; padding: 0; cursor: pointer;
  text-decoration: none;
  background: var(--accent, #235048);
  color: var(--on-accent, #fff);
  box-shadow: 0 8px 22px rgba(46, 31, 23, .30), 0 0 0 4px var(--accent-light, rgba(35, 80, 72, .10));
  -webkit-tap-highlight-color: transparent;
  transition: transform .15s ease, box-shadow .15s ease;
}
.fab-instalar.visivel { display: none; }
@media (hover: none) and (pointer: coarse) {
  .fab-instalar.visivel { display: flex; animation: fabInstalarEntrar .4s ease-out both; }
}
.fab-instalar:active { transform: scale(.94); }
.fab-instalar svg { width: 28px; height: 28px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
@keyframes fabInstalarEntrar { from { opacity: 0; transform: translateY(12px) scale(.9); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .fab-instalar.visivel { animation: none; } }

/* Some quando a tela está ocupada por outra coisa (chat da IA, mapa, câmera, popups, votação) */
body.popup-aberto .fab-instalar,
body.swipe-aberto .fab-instalar,
body:has(#tela-resultado.active) .fab-instalar,
body:has(#mapa-intro.ativo) .fab-instalar,
body:has(#swipe-overlay.aberto) .fab-instalar { display: none !important; }

/* Popup: reaproveita .nav-int / .nav-int-card (mapa.css); só ajusta o que é específico daqui */
#modal-instalar-app { z-index: 10020; }
.instalar-logo { width: 64px; height: 64px; margin: 0 auto 14px; border-radius: 16px; display: block;
  box-shadow: 0 6px 16px rgba(46, 31, 23, .18); }
.instalar-passos { display: none; }
#modal-instalar-app.modo-manual .instalar-passos { display: grid; }
#modal-instalar-app.modo-manual #btn-instalar-app { display: none; }
#modal-instalar-app .instalar-passos-ios { display: none; }
#modal-instalar-app.ios .instalar-passos-ios { display: flex; }
#modal-instalar-app.ios .instalar-passos-android { display: none; }

/* Botões do popup: arredondados (pílula) e em cores diferentes */
#modal-instalar-app .nav-int-primario,
#modal-instalar-app .nav-int-secundario {
  border-radius: 999px;
  padding: 14px 20px;
  font: 600 15px 'Inter', sans-serif;
}
/* "Baixar o app": verde (destaque) */
#modal-instalar-app .nav-int-primario {
  background: var(--emerald, #235048);
  color: #fff;
  box-shadow: 0 6px 16px rgba(107, 142, 78, .35);
}
:root[data-theme="dark"] #modal-instalar-app .nav-int-primario { color: #1E1510; }
/* "Agora não": preenchido em tom neutro, sem competir com o verde */
#modal-instalar-app .nav-int-secundario {
  margin-top: 10px;
  background: var(--card-alt, #F1E7DA);
  color: var(--ink-mute, #6B5B4E);
  font-weight: 500;
  font-size: 14px;
}
#modal-instalar-app .nav-int-primario:active,
#modal-instalar-app .nav-int-secundario:active { transform: scale(.98); }

/* Botão "Baixar app" no header — SÓ NO CELULAR (aparelhos de toque).
   No computador ele fica escondido. Fica fora do #header-auth-area porque o JS
   reescreve o conteúdo dele ao entrar/sair da conta. */
#btn-baixar-app-header { display: none; }

@media (hover: none) and (pointer: coarse) {
  /* O botão "Identificar minha pedra agora" é o único CTA da home: mais estreito que o card
     de cima e centralizado (não precisa alinhar com as bordas dele) */
  button.upload-hint.btn { width: fit-content; max-width: 88%; white-space: nowrap; font-size: 14px; padding: 13px 22px; margin-left: auto; margin-right: auto; }

  #btn-baixar-app-header {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    flex-shrink: 0;
    min-height: 40px;
    padding: 0 12px;
    font: 700 13px 'Inter', sans-serif;
    white-space: nowrap;
    border-radius: 999px;
    cursor: pointer;
  }
}

/* Contorno marrom (cor de destaque do tema), sem preenchimento, em formato pílula:
   o "Entrar / Registrar" continua sendo o único botão cheio do header.
   O index.css tem uma regra global "button { background: var(--accent) !important }" que pinta todo botão
   de marrom — por isso aqui precisa de !important + seletor por ID. */
#btn-baixar-app-header,
#btn-baixar-app-header:hover,
#btn-baixar-app-header:focus {
  background-color: transparent !important;
  border: 1.5px solid var(--accent) !important;
  color: var(--accent) !important;
  border-radius: 999px !important;
}
#btn-baixar-app-header:active { background-color: var(--accent-light) !important; }
#btn-baixar-app-header:focus:not(:focus-visible) { outline: none; }
#btn-baixar-app-header svg { width: 16px; height: 16px; flex: 0 0 auto; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }

/* Telas muito estreitas: a pessoa já logada (saldo/avatar no header) vê só o ícone, pra não apertar o logo.
   Visitante (botão "Entrar") sempre vê o texto "Baixar APP". */
@media (max-width: 420px) {
  html:not(.visitante) #btn-baixar-app-header { width: 40px; padding: 0; }
  html:not(.visitante) #btn-baixar-app-header .btn-baixar-header-txt { display: none; }
  #btn-baixar-app-header { padding: 0 11px; font-size: 12.5px; }
  /* menos folga entre os itens da direita */
  header .nav-right { gap: 8px; }
}

/* Botão "Baixar o app" dentro do popup: também verde (a regra global de button o deixava marrom) */
#modal-instalar-app .nav-int-primario,
#btn-abrir-chrome {
  background-color: var(--emerald, #235048) !important;
  border-color: var(--emerald, #235048) !important;
  color: #fff !important;
}
:root[data-theme="dark"] #modal-instalar-app .nav-int-primario { color: #1E1510 !important; }

/* Aviso + botão "Abrir no Chrome" (navegadores que não instalam sozinhos: Opera, Instagram, Facebook, TikTok...) */
/* precisa de #modal-instalar-app na frente: senão o "display:block" lá embaixo (#modal-instalar-app .nav-int-primario) ganha e o botão aparece sempre */
#modal-instalar-app #btn-abrir-chrome { display: none; }
#modal-instalar-app.modo-abrir-chrome #btn-abrir-chrome { display: block; }
#modal-instalar-app.modo-abrir-chrome #btn-abrir-chrome ~ #btn-instalar-app { display: none; }
/* dentro de rede social no Android o ⋮ não instala nada: esconde o passo a passo */
#modal-instalar-app.modo-interno:not(.ios) .instalar-passos { display: none; }
#btn-abrir-chrome {
  width: 100%;
  border-radius: 999px;
  padding: 14px 20px;
  font: 600 15px 'Inter', sans-serif;
  box-shadow: 0 6px 16px rgba(107, 142, 78, .35);
}
/* "Agora não": a regra global de button no index.css pintava de marrom */
#modal-instalar-app .nav-int-secundario {
  background-color: var(--card-alt, #F1E7DA) !important;
  border-color: transparent !important;
  color: var(--ink-mute, #6B5B4E) !important;
}

/* ---------- Ajustes de layout do popup (sem quebra de linha estranha) ---------- */
#modal-instalar-app .nav-int-card { max-width: 360px; padding: 28px 22px 18px; }
#modal-instalar-app .nav-int-card h3 { line-height: 1.25; text-wrap: balance; }
#modal-instalar-app .nav-int-card > p { margin: 0 0 16px; text-wrap: pretty; }

/* Aviso (Opera / navegador de rede social): caixinha destacada, texto corrido e centralizado */
#modal-instalar-app .instalar-aviso {
  margin: 0 0 16px; padding: 12px 14px; border-radius: 12px;
  background: var(--card-alt, #F1E7DA); color: var(--ink, #2E1F17);
  font-size: 13.5px; line-height: 1.5; text-align: left; text-wrap: pretty;
}
#modal-instalar-app .instalar-aviso:empty { display: none; }

/* Passo a passo: número à esquerda e a frase INTEIRA numa coluna só */
#modal-instalar-app .instalar-passos { margin: 0 0 18px; gap: 12px; }
#modal-instalar-app .instalar-passos li { align-items: flex-start; }
#modal-instalar-app .instalar-passos li > span { margin-top: 1px; }
.instalar-passo-txt { flex: 1; min-width: 0; font-size: 14px; line-height: 1.45; color: var(--ink, #2E1F17); text-align: left; }
.instalar-passo-txt strong { font-weight: 700; white-space: nowrap; }

/* Botões: texto numa linha só e empilhados */
#modal-instalar-app .nav-int-primario,
#modal-instalar-app .nav-int-secundario { display: block; white-space: nowrap; }

/* Item "Baixar aplicativo" do menu do perfil: só aparece quando dá pra instalar (celular, app ainda não instalado) */
#btn-dropdown-baixar-app { display: none; }
html.app-instalavel #btn-dropdown-baixar-app { display: flex; }
/* Logado: o "Baixar app" passa a ficar dentro do menu do perfil, então some da barra do topo */
html.usuario-logado #btn-baixar-app-header { display: none !important; }
/* "Recarregar" em destaque no menu */
.nav-dropdown-recarregar { font-weight: 700; color: var(--accent-dark, var(--accent)) !important; }