/* ============================================================
   MARINHOPORAI — MOBILE APP SHELL (camada 1)
   Bottom navigation + top app bar + polish estilo app nativo.
   Só ativa em telas <= 768px. Não afeta o desktop.
   Carregar DEPOIS de mobile.css / mobile-whatsapp.css.
   ============================================================ */
/* por padrão (desktop) o shell de app fica escondido */
.mob-topbar, .mob-bottom-nav{ display:none; }

@media (max-width: 768px){
  :root{ --mob-top-h: 54px; --mob-bn-h: 62px; }
  .mob-bottom-nav{ display:flex; }
  .mob-topbar{ display:flex; }

  /* esconde a faixa flutuante do sino (vai pra barra de topo) */
  #app-topbar{ display:none !important; }
  /* esconde o botão hamburguer antigo e o "instalar" flutuante padrão */
  .mob-menu-btn{ display:none !important; }

  /* conteúdo ocupa a tela toda, com folga pra barra de topo e bottom nav */
  .main{
    margin-left:0 !important;
    padding: calc(var(--mob-top-h) + env(safe-area-inset-top) + 12px) 14px
             calc(var(--mob-bn-h) + env(safe-area-inset-bottom) + 14px) 14px !important;
    min-height:100vh; box-sizing:border-box;
  }

  /* ====== BARRA DE TOPO ====== */
  .mob-topbar{
    position:fixed; top:0; left:0; right:0;
    height: calc(var(--mob-top-h) + env(safe-area-inset-top));
    padding: env(safe-area-inset-top) 12px 0 12px;
    background: linear-gradient(180deg,#0F1825 0%,#15243A 100%);
    color:#fff; display:flex; align-items:center; gap:10px;
    z-index:1500; box-shadow:0 2px 10px rgba(15,24,37,0.18);
  }
  .mob-tb-title{ font-size:17px; font-weight:700; flex:1; letter-spacing:-0.2px;
    white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
  .mob-tb-btn{
    width:38px; height:38px; border-radius:50%; flex-shrink:0;
    background:rgba(255,255,255,0.12); border:none; color:#fff;
    display:flex; align-items:center; justify-content:center; cursor:pointer;
    font-size:19px; -webkit-tap-highlight-color:transparent; transition:background .15s;
  }
  .mob-tb-btn:active{ background:rgba(255,255,255,0.25); }
  .mob-tb-notif-dot{
    position:absolute; top:9px; right:9px; min-width:8px; height:8px; border-radius:5px;
    background:#FF4D4F; border:1.5px solid #15243A; display:none;
  }
  .mob-tb-btn{ position:relative; }

  /* ====== BOTTOM NAVIGATION ====== */
  .mob-bottom-nav{
    position:fixed; left:0; right:0; bottom:0;
    height: calc(var(--mob-bn-h) + env(safe-area-inset-bottom));
    padding-bottom: env(safe-area-inset-bottom);
    background:#fff; border-top:1px solid #ECEEF1;
    display:flex; z-index:1500;
    box-shadow:0 -3px 18px rgba(15,24,37,0.07);
  }
  .mob-bn-item{
    flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center;
    gap:3px; background:none; border:none; cursor:pointer;
    color:#8A95A3; font-family:inherit; font-size:10.5px; font-weight:600;
    -webkit-tap-highlight-color:transparent; transition:color .15s; padding-top:6px;
  }
  .mob-bn-item i{ font-size:23px; transition:transform .18s ease, color .15s; }
  .mob-bn-item span{ line-height:1; }
  .mob-bn-item.active{ color:#1A4FA0; }
  .mob-bn-item:active i{ transform:scale(0.88); }

  /* item central elevado (Nova cotação) */
  .mob-bn-item.center{ color:#1A4FA0; }
  .mob-bn-item.center i{
    width:50px; height:50px; border-radius:17px; margin-top:-20px; font-size:25px;
    background:linear-gradient(135deg,#1A4FA0,#2563B7); color:#fff;
    display:flex; align-items:center; justify-content:center;
    box-shadow:0 8px 18px rgba(37,99,183,0.42);
  }
  .mob-bn-item.center:active i{ transform:scale(0.94); }

  /* ====== transição suave ao trocar de tela ====== */
  .page.active{ animation: mobPageIn .24s cubic-bezier(.22,.61,.36,1); }
  @keyframes mobPageIn{ from{ opacity:0; transform:translateY(8px); } to{ opacity:1; transform:none; } }

  /* ====== touch targets / inputs mais confortáveis ====== */
  .btn{ min-height:44px; }
  .btn-sm{ min-height:36px; }
  .form-inp, input, select, textarea{ font-size:16px !important; } /* evita zoom no iOS */

  /* ====== WhatsApp em tela cheia (entre as duas barras) ====== */
  #wa-chat-wrap{
    position:fixed !important;
    left:0 !important; right:0 !important;
    top: calc(var(--mob-top-h) + env(safe-area-inset-top)) !important;
    bottom: calc(var(--mob-bn-h) + env(safe-area-inset-bottom)) !important;
    z-index:5 !important;
  }
  /* coluna ÚNICA no celular (#app eleva a especificidade pra vencer o wa-layout-fix) */
  #app #wa-chat-wrap > div{ grid-template-columns: 1fr !important; height: 100% !important; }
  /* single column: mostra a LISTA por padrão; quando há conversa aberta, mostra o CHAT */
  #app #wa-chat-wrap > div > div:first-child{ display:flex !important; }
  #app #wa-chat-wrap > div > div:last-child{ display:none !important; }
  body.wae-chat-aberto #app #wa-chat-wrap > div > div:first-child{ display:none !important; }
  body.wae-chat-aberto #app #wa-chat-wrap > div > div:last-child{ display:flex !important; }

  /* ====== ESTRUTURA TRAVADA DO CHAT (sem balanço, sem horizontal) ======
     a coluna do chat é SEMPRE vertical: cabeçalho em cima, mensagens no meio (rola),
     barra de digitar embaixo (sempre visível). Nada lado a lado, nada vazando. */
  body.wae-chat-aberto #app #wa-chat-wrap > div > div:last-child{
    flex-direction:column !important; height:100% !important; min-height:0 !important;
    overflow:hidden !important; max-width:100% !important;
  }
  #app #wa-chat-header{ flex-shrink:0 !important; }
  #app #wa-msgs{
    flex:1 1 auto !important; min-height:0 !important;
    overflow-y:auto !important; overflow-x:hidden !important;
    overscroll-behavior:contain !important; -webkit-overflow-scrolling:touch !important;
  }
  #app div:has(> #wa-input){ flex-shrink:0 !important; }
  /* trava a página: nada de rolagem horizontal nem "balanço" (bounce) */
  html, body{ overscroll-behavior:none !important; overflow-x:hidden !important; max-width:100vw !important; }
  body.wae-chat-aberto{ overscroll-behavior:none !important; }
  #app #wa-chat-wrap, #app #wa-chat-wrap > div,
  body.wae-chat-aberto #app #wa-chat-wrap > div > div:last-child{ overflow-x:hidden !important; max-width:100vw !important; }
  /* balão nunca empurra a largura (texto longo/link quebra em vez de criar rolagem lateral) */
  #app #wa-msgs > div{ word-break:break-word !important; overflow-wrap:anywhere !important; }
  /* o cabeçalho do chat ganha botão "voltar" (injetado via JS) */
  .mob-wa-voltar{
    width:36px;height:36px;border-radius:50%;border:none;background:#F0F2F5;color:#1A4FA0;
    display:flex;align-items:center;justify-content:center;font-size:20px;cursor:pointer;flex-shrink:0;margin-right:4px;
  }
  /* esconde os 6 botões de ação do chat no mobile (pouco espaço) — ficam no "Mais" depois */
  #wa-chat-actions{ display:none !important; }
  /* foto/nome do chat com folga (sem o padding-top gigante do desktop) */
  #wa-chat-header{ padding:8px 12px !important; }

  /* cabeçalho "WhatsApp/Conectado/Atualizar" duplicado: some no mobile (já tem na barra de topo) */
  #wa-topo-movido{ display:none !important; }
  /* botão "← Conversas" flutuante antigo: some (usamos o circular no cabeçalho) */
  #mob-wa-back{ display:none !important; }

  /* cabeçalho do chat: limpo (voltar + foto + nome + ações + ⋮) TUDO numa linha só */
  #wa-chat-header{ padding:6px 10px !important; gap:8px !important; border-bottom:1px solid #ECEEF1 !important;
    flex-wrap:nowrap !important; align-items:center !important; }
  #wa-chat-av{ width:38px !important; height:38px !important; font-size:15px !important; }
  /* a div do nome (min-width:0) encolhe e o texto corta com "..." */
  #wa-chat-header > div[style*="min-width:0"]{ flex:1 1 auto !important; min-width:0 !important; }
  #wa-chat-nome{ font-size:15px !important; white-space:nowrap !important; overflow:hidden !important; text-overflow:ellipsis !important; }
  #wa-chat-fone{ white-space:nowrap !important; overflow:hidden !important; text-overflow:ellipsis !important; }

  /* barra "Atendendo desde / Transferir / Encerrar": compacta e discreta no celular */
  #wae-chat-state-card{ margin:0 !important; padding:6px 12px !important; font-size:11px !important; gap:6px !important; }
  #wae-chat-state-card strong{ font-size:11px !important; }
  #wae-chat-state-card button{ padding:5px 11px !important; font-size:11px !important; border-radius:8px !important; }

  /* ====== barra de digitar (composer) usável no celular ====== */
  div:has(> #wa-input){ padding:8px 10px !important; gap:6px !important; }
  #wa-input{ flex:1 1 0 !important; min-width:0 !important; width:auto !important; padding:11px 16px !important; }
  #wae-quick-btn{ display:none !important; } /* atalhos: tira no mobile pra caber */
  #wae-emoji-btn, #wae-anexo-btn, #wae-mic-btn{
    flex-shrink:0 !important; width:38px !important; height:38px !important; min-width:38px !important;
    padding:0 !important; font-size:18px !important;
    display:flex !important; align-items:center; justify-content:center;
  }
  div:has(> #wa-input) > button.btn-p{
    width:44px !important; height:44px !important; min-width:44px !important; flex-shrink:0 !important;
  }

  /* ====== BALÕES: leves e fluidos, estilo WhatsApp ====== */
  #wa-msgs{ gap:3px !important; padding:12px 12px !important; }
  #app #wa-msgs > div{
    max-width:80% !important; padding:6px 10px !important; border-radius:12px !important;
    margin:0 !important; font-size:14px !important; line-height:1.4 !important;
  }
  /* desfaz o hack do horário flutuante (causava sobreposição) — hora fica embaixo à direita */
  #app #wa-msgs > div > div:last-child{
    float:none !important; position:static !important; top:0 !important;
    text-align:right !important; margin:1px 0 0 0 !important; font-size:10.5px !important;
  }
  #wa-msgs > div::after{ display:none !important; }

  /* ====== COMPOSER: barra fina que cresce com as linhas ====== */
  div:has(> #wa-input){ padding:6px 8px !important; gap:6px !important; align-items:flex-end !important; }
  #wa-input{
    flex:1 1 0 !important; min-width:0 !important; width:auto !important;
    min-height:40px !important; max-height:120px !important;
    padding:9px 15px !important; border-radius:21px !important; line-height:1.35 !important;
    background:#F0F2F5 !important; border:1px solid transparent !important;
  }
  /* botões do composer menores/leves */
  #wae-emoji-btn, #wae-anexo-btn, #wae-mic-btn{
    width:36px !important; height:36px !important; min-width:36px !important;
    background:transparent !important; color:#54656F !important; font-size:20px !important; box-shadow:none !important;
  }
  div:has(> #wa-input) > button.btn-p{ width:42px !important; height:42px !important; min-width:42px !important; }

  /* ====== MENU "⋮" do chat (dropdown com os 6 botões de ação) ====== */
  #wa-chat-header{ position:relative !important; }
  .mob-wa-menu-btn{
    margin-left:4px !important; width:32px; height:32px; border-radius:50%; border:none;
    background:#F0F2F5; color:#54656F; display:flex; align-items:center; justify-content:center;
    font-size:18px; flex-shrink:0; cursor:pointer;
  }
  /* grupo de ações (Encerrar/Transferir/Aceitar/Reabrir) no cabeçalho do chat */
  #mob-wa-acoes{ margin-left:auto !important; display:flex; align-items:center; gap:6px; flex-shrink:0; flex-wrap:nowrap !important; }
  .mob-wa-acao{
    border:1px solid transparent; background:#F0F2F5; cursor:pointer; flex-shrink:0;
    padding:6px 10px; border-radius:9px; font-size:11.5px; font-weight:600; font-family:inherit;
    white-space:nowrap; line-height:1;
  }
  .mob-wa-acao.encerrar{ background:#FFE9E6 !important; color:#C0341A !important; }
  .mob-wa-acao.transferir{ background:#E6F1FB !important; color:#1A4FA0 !important; }
  .mob-wa-acao.aceitar{ background:#2BA94A !important; color:#fff !important; }
  .mob-wa-acao.reabrir{ background:#E6F1FB !important; color:#1A4FA0 !important; }
  body.wae-acoes-abertas #app #wa-chat-actions{
    display:flex !important; flex-direction:column !important; gap:2px !important;
    position:absolute !important; top:52px; right:10px; z-index:60;
    background:#fff; border:1px solid #E7EAEE; border-radius:12px; padding:6px;
    box-shadow:0 10px 28px rgba(15,24,37,0.18); min-width:180px; grid-template-columns:none !important;
  }
  body.wae-acoes-abertas #wa-chat-actions .btn{
    width:100% !important; justify-content:flex-start !important; border:none !important;
    background:transparent !important; padding:10px 12px !important;
  }
  body.wae-acoes-abertas #wa-chat-actions .btn:active{ background:#F0F4FA !important; }

  /* barra "Atendendo desde" some no celular: ocupa muito espaço.
     Os botões Encerrar/Transferir vão pro cabeçalho (ao lado do nome) via JS. */
  #wae-chat-state-card{ display:none !important; }

  /* quando a conversa está aberta no celular: esconde a bottom nav (tela cheia do chat) */
  body.wae-chat-aberto .mob-bottom-nav{ display:none !important; }
  body.wae-chat-aberto{ overflow:hidden !important; }
  body.wae-chat-aberto #app #wa-chat-wrap{ bottom: 0 !important; }
  /* a barra de digitar encosta no rodapé, com folga só do notch (home indicator) */
  div:has(> #wa-input){ padding-bottom: calc(6px + env(safe-area-inset-bottom)) !important; }
  /* com o teclado aberto não há home indicator: tira a folga (mata o "gap" feio) */
  body.wae-teclado div:has(> #wa-input){ padding-bottom: 6px !important; }

  /* botão home flutuante (casinha) do mobile-ux: some — já temos "Início" na bottom nav */
  .mob-home-fab, #mob-home-fab{ display:none !important; }

  /* botão voltar: setinha azul limpa */
  .mob-wa-voltar{ background:transparent !important; color:#1A4FA0 !important; font-size:23px !important; }

  /* reforço: emoji/anexo só ícone (sem caixa pesada) */
  #wae-emoji-btn, #wae-anexo-btn, #wae-mic-btn{
    border:none !important; border-radius:50% !important; box-shadow:none !important; background:transparent !important;
  }

  /* balãozinho do chat interno acima da bottom nav (não sobrepor) */
  #chat-interno-wrap{
    bottom: calc(var(--mob-bn-h) + env(safe-area-inset-bottom) + 12px) !important;
    right: 14px !important;
    z-index: 1400 !important;
  }
  body.ci-modo-wa #chat-interno-wrap{ top:auto !important;
    bottom: calc(var(--mob-bn-h) + env(safe-area-inset-bottom) + 12px) !important; }
}

/* PWA standalone (app instalado): respeita o notch sem depender de @media largura */
@media all and (display-mode: standalone){
  .mob-topbar{ }
}