/* Oriente CRM embutido no portal (docs/crm-casca-f1-projeto.md §3.2; crm-embed-ui.js).
   Um scroll só, dentro do iframe (regra "um scroll só no miolo"): o anfitrião #crmHost ocupa
   exatamente o que sobra sob o topo e as abas do portal, e o miolo fica sem padding enquanto
   uma tela crm-* está ativa. O JS mede a altura real e grava em style; o calc() é a reserva. */
:root { --crm-abas-altura: 38px; }

body.crm-ativo .main .content { padding: 0 !important; }
body.crm-ativo .page.page-crm { padding: 0 !important; margin: 0; min-height: 0; }

#crmHost {
  position: relative; width: 100%; overflow: hidden;
  height: calc(100dvh - var(--topbar-height, 71px) - var(--crm-abas-altura));
  background: var(--bg, #f7f8f7);
}
#crmHost[hidden] { display: none !important; }
#crmFrame { display: block; width: 100%; height: 100%; border: 0; background: var(--bg, #f7f8f7); }

/* Espera e avisos do portal, por cima do iframe; somem quando o CRM está na ponte ou pronto. */
#crmHost .crm-espera {
  position: absolute; inset: 0; z-index: 1;
  display: grid; place-content: center; justify-items: center; gap: 14px;
  padding: 24px 16px; text-align: center;
  color: var(--ink-2, #5b6b65); font-size: 13px; line-height: 1.5;
  background: var(--bg, #f7f8f7);
}
#crmHost .crm-espera p { margin: 0; max-width: 440px; }
#crmHost .crm-espera .anel {
  width: 44px; height: 44px; border-radius: 50%;
  background: conic-gradient(var(--accent, #0a9492) 0 25%, transparent 25% 100%);
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 4px), #000 0);
          mask: radial-gradient(farthest-side, transparent calc(100% - 4px), #000 0);
  animation: crm-gira 1s linear infinite;
}
@keyframes crm-gira { to { transform: rotate(1turn); } }
#crmHost.pronto .crm-espera, #crmHost.ponte .crm-espera { display: none; }
#crmHost.com-erro .crm-espera .anel { animation: none; background: var(--line-2, #d3dcd9); }
#crmHost.com-erro .crm-espera p { color: var(--ink, #17221e); }
/* "Ainda não respondeu" e "erro" NÃO cobrem o iframe: viram uma faixa no rodapé e o documento que
   estiver lá (cadastro de MFA, onboarding, um cold start demorado) continua clicável. O overlay
   inteiro fica só para carregando / sem-permissao / nao-configurado. */
#crmHost.sem-resposta .crm-espera, #crmHost.erro .crm-espera {
  inset: auto 0 0 0; height: auto;
  grid-auto-flow: column; align-items: center; gap: 10px;
  padding: 8px 14px; font-size: 12px;
  border-top: 1px solid var(--line-2, #d3dcd9);
}
#crmHost.sem-resposta .crm-espera .anel, #crmHost.erro .crm-espera .anel { width: 14px; height: 14px; }

/* Contadores no menu (fila do Inbox, casos da IA), no mesmo molde do badge do WhatsApp. */
.crm-nav-cnt {
  margin-left: auto; font-size: 10px; font-weight: 800; line-height: 1.5;
  padding: 1px 7px; border-radius: 10px;
  background: var(--accent, #0a9492); color: #fff;
}
.crm-nav-cnt[hidden] { display: none !important; }

/* Sem crm_url em /auth/me (CRM_BASE_URL ausente no portal) o grupo some, mesmo com permissão. */
.nav-module.crm-indisponivel, .nav-module-items.crm-indisponivel { display: none !important; }

/* tabs-ui não desenha a barra de abas abaixo de 768 px. */
@media (max-width: 767px) { :root { --crm-abas-altura: 0px; } }

/* Celular: .main tem padding 12px (styles.css); o anfitrião sangra até a borda para o CRM usar a
   largura toda (ele já tem o próprio respiro interno). Nada de scroll horizontal: a largura final
   é a do .main. */
@media (max-width: 900px) {
  #crmHost { height: calc(100dvh - var(--topbar-height, 64px)); margin-left: -12px; margin-right: -12px; width: auto; }
  body.crm-ativo .main { padding-bottom: 0 !important; }
}