/* O atributo `hidden` tem que valer mais que a classe do bloco.
 *
 * O navegador esconde `[hidden]` com `display:none`, mas essa e uma regra de
 * user-agent: QUALQUER classe de autor que declare `display` a vence. Neste
 * projeto `.field` declara `display:flex`, entao o formulario condicional do
 * cadastro de produto marcava `bloco.hidden = true`, o DOM concordava, e o
 * campo continuava na tela ocupando 57 pixels -- medido em producao, no ramo
 * Eventos, com PACOTE escolhido e "Controla estoque" ainda visivel.
 *
 * O `!important` e o ponto da regra, nao um atalho: sem ele qualquer classe
 * futura que declare `display` reabre o mesmo buraco, e o defeito volta calado.
 * A regra pontual `.zplanos__email[hidden]` mais abaixo nasceu do mesmo
 * tropeco e ficou onde esta -- redundante agora, mas inofensiva.
 */
[hidden] {
  display: none !important;
}

:root {
  --bg: #eef2f7;
  --card: #ffffff;
  --card-soft: #ffffff;
  --text: #0f172a;
  --muted: #6b7280;
  --line: #e5e7eb;
  --brand: #2563eb;
  --accent: #2563eb;
  --ok: #16a34a;
  --shadow: 0 10px 30px rgba(15, 23, 42, 0.08);
  --radius: 18px;
}
* {
  box-sizing: border-box;
}
html,
body {
  height: 100%;
}
body {
  margin: 0;
  font-family:
    system-ui,
    -apple-system,
    Segoe UI,
    Roboto,
    Arial,
    sans-serif;
  background: linear-gradient(180deg, #f8fbff, var(--bg));
  color: var(--text);
}
.topbar {
  position: sticky;
  top: 0;
  z-index: 10;
  background: rgba(255, 255, 255, 0.85);
  /* Compatibilidade Safari/iOS */
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line);
}
.offline-banner {
  display: none;
  padding: 8px 14px;
  background: #fef3c7;
  color: #92400e;
  font-size: 13px;
  text-align: center;
  border-bottom: 1px solid #f59e0b;
}
.offline-banner[aria-hidden="false"] {
  display: block;
}
.topbar-inner {
  max-width: min(1440px, calc(100vw - 24px));
  margin: 0 auto;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
}
/*
 * A marca agora e a imagem do cerebro Zizi, nao a letra "Z". O fundo em
 * degrade azul e a sombra azul do placeholder sairam porque brigavam com o
 * azul/verde do proprio logo, que ja tem cor e forma propria.
 */
.logo {
  width: 40px;
  height: 40px;
  display: block;
  object-fit: contain;
  flex: 0 0 auto;
}
.brand {
  display: flex;
  flex-direction: column;
  line-height: 1.05;
  margin-right: 6px;
  cursor: pointer;
  border-radius: 8px;
}
.brand:focus-visible {
  outline: 3px solid rgba(37, 99, 235, 0.42);
  outline-offset: 1px;
}
.brand b {
  font-size: 16px;
}
.chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: #fff;
  font-size: 13px;
  color: var(--muted);
  white-space: nowrap;
}
.dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--ok);
}
.spacer {
  flex: 1;
}
.btn {
  border: 1px solid var(--line);
  background: #fff;
  color: var(--text);
  border-radius: 12px;
  padding: 10px 12px;
  font-weight: 650;
  cursor: pointer;
}
.btn.primary {
  background: var(--brand);
  border-color: transparent;
  color: #fff;
  padding: 10px 14px;
  border-radius: 14px;
  box-shadow: 0 14px 28px rgba(37, 99, 235, 0.25);
}
.btn.icon {
  width: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/*
 * Botao bloqueado precisa PARECER bloqueado.
 * Item ZIZI-CORRECAO-BOTAO-DESABILITADO-COM-CARA-DE-ATIVO-20260905.
 *
 * O DEFEITO: `.btn.primary` acima nao tinha nenhuma regra `:disabled`. Um botao
 * corretamente `disabled` ficava com opacidade 1, azul cheio e com a sombra de
 * elevacao — identico a um botao que funciona. O dono clicou em "Ativar BOT"
 * achando que estava ativo, nada aconteceu e nenhuma mensagem apareceu. As duas
 * instancias vivas eram "Ativar BOT" e "Comprar creditos" (creditos de IA).
 *
 * POR QUE UMA REGRA GLOBAL, E NAO UMA CLASSE EM CADA BOTAO: medido em
 * 2026-09-05 em `/assets/js/app-src`, sao 23 elementos que ja nascem com o
 * atributo `disabled` no markup e 66 atribuicoes de `.disabled = ...` em JS.
 * Quatro deles tinham tratamento proprio (`.bubble-feedback-btn:disabled`,
 * `.import-options-buttons button:disabled`, `.launch-card-actions
 * button:disabled` e `#chatInput:disabled`); todos os outros mentiam. Marcar
 * um a um exigiria reescrever cada ponto de render; a regra alcanca todos.
 *
 * ESCOPO: esta folha e carregada somente por `index.html` (app do lojista) e
 * por `app/pdv-venda.html` (PDV do mesmo lojista) — o proprio arquivo e o
 * escopo, entao nao ha marcador de raiz no seletor.
 *
 * ESPECIFICIDADE DE PROPOSITO BAIXA (0,1,1), e SEM `!important`: as excecoes
 * que ja acertam sao mais especificas e continuam ganhando sozinhas pela
 * cascata, entao as opacidades nunca se multiplicam. Medido em jsdom com as
 * duas folhas na ordem real do `index.html`:
 *   - `.bubble-feedback-btn:disabled` (0,2,0) segue em `.5` e com o
 *     `cursor: default` que ela escolheu de proposito;
 *   - `.import-options-buttons button:disabled` (0,2,1) segue em `.5`;
 *   - `.launch-card-actions button:disabled` (0,2,1) segue em `.5`;
 *   - a escolha de modulo, que ja manda `opacity:.58` INLINE, segue em `.58`,
 *     porque estilo inline vence folha sem `!important`.
 *
 * O `cursor` repete aqui o valor que `/assets/css/global-form-focus.css` ja
 * pede. La ele vale por um empate de especificidade desempatado pela ordem das
 * tags `<link>` (`:where(...):disabled` tambem da (0,1,0), igual a `.btn`);
 * aqui ele passa a vencer `.btn` por especificidade, e nao por ordem de
 * carregamento. Nenhum valor computado muda com isso — so para de depender da
 * ordem dos links. Sem `!important` de proposito: se algum dia um botao mostrar
 * `cursor: wait` enquanto salva, esse sinal continua funcionando.
 *
 * O QUE ELA NAO TOCA: botao HABILITADO. `:disabled` nao casa com ele, e nenhuma
 * cor, tamanho ou sombra e declarada aqui — o fundo continua exatamente o
 * mesmo, so translucido. O valor `.7` e o mesmo que o Master (React) adotou
 * hoje para o mesmo defeito, para os dois lados se parecerem.
 */
button:disabled {
  opacity: 0.7;
  cursor: not-allowed;
}

.layout {
  max-width: min(1440px, calc(100vw - 24px));
  margin: 0 auto;
  padding: 14px;
}
.stories {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  padding: 10px 4px 16px 4px;
  overflow: auto;
}
.story {
  min-width: 92px;
  text-align: center;
  cursor: pointer;
  /* Compatibilidade Safari/iOS */
  -webkit-user-select: none;
  user-select: none;
}
.story .ring {
  width: 62px;
  height: 62px;
  border-radius: 999px;
  margin: 0 auto 6px auto;
  background: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  box-shadow: 0 10px 20px rgba(15, 23, 42, 0.06);
  border: 3px solid #e0e7ff;
}
.story[data-kind="module"] .ring {
  border-color: #93c5fd;
}
.story[data-kind="clientes"] .ring {
  border-color: #1d4ed8;
}
.story[data-kind="produtos"] .ring {
  border-color: #0ea5e9;
}
.story[data-kind="orcamentos"] .ring {
  border-color: #22c55e;
}
.story[data-kind="pedidos"] .ring {
  border-color: #16a34a;
}
.story .ico {
  width: 34px;
  height: 34px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #f1f5ff;
  font-size: 18px;
}
/*
 * Atalho que mostra a marca do Zizi em vez de um emoji (o "Modulo", que
 * aparece dentro de todo modulo, e o "Zizi BOT"). O chip de 34px ja tem fundo
 * e cantos proprios; a imagem so precisa caber sem esticar.
 */
.story .ico-img {
  width: 26px;
  height: 26px;
  display: block;
  object-fit: contain;
}
.story b {
  display: block;
  font-size: 14px;
}
.story small {
  color: var(--muted);
}
/*
 * ZIZI-COM-STORY-DE-MODULO-NAO-CONTRATADO-LEVA-PARA-ASSINATURAS-20260915
 * A pastilha continua visivel (mostrar o que o lojista ganharia e venda),
 * so ganha um sinal visual de que o modulo nao esta na licenca. O clique
 * leva para assinaturas em vez de abrir o painel; ver applyModuleVisibility
 * e ensureDrawerLicenseOrWarn em 01-core-drawer-tenant-config.js.
 */
.story--nao-contratada .ring {
  opacity: 0.55;
  border-style: dashed;
  border-color: #cbd5e1;
}
.story--nao-contratada small {
  color: #b45309;
}
.grid {
  display: grid;
  grid-template-columns: 1.2fr 0.8fr;
  gap: 14px;
  align-items: start;
}
.card {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}
.card.pad {
  padding: 14px;
}
.section-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 8px;
}
.section-title h2 {
  margin: 0;
  font-size: 18px;
  letter-spacing: -0.01em;
}
.kpis {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  margin-top: 10px;
}
.kpi {
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 12px;
  background: #fff;
}
.kpi .k {
  color: var(--muted);
  font-size: 13px;
  margin-bottom: 6px;
}
.kpi .v {
  font-size: 22px;
  font-weight: 800;
}
.chat-area {
  min-height: clamp(420px, calc(100vh - 250px), 760px);
  height: auto;
  background:
    radial-gradient(
        circle at 12px 12px,
        rgba(148, 163, 184, 0.18) 2px,
        transparent 2px
      )
      0 0/26px 26px,
    #f3efe7;
  border-top: 1px solid var(--line);
  border-radius: 0 0 var(--radius) var(--radius);
  overflow: hidden;
  position: relative;
  display: flex;
  flex-direction: column;
}
.chat-scroll {
  min-height: 0;
  min-width: 0;
  flex: 1 1 auto;
  overflow: auto;
  padding-bottom: 8px;
}
.chat-scroll::-webkit-scrollbar {
  width: 10px;
}
.chat-scroll::-webkit-scrollbar-thumb {
  background: rgba(148, 163, 184, 0.35);
  border-radius: 999px;
}
.chat-scroll::-webkit-scrollbar-track {
  background: transparent;
}

.bubble {
  margin: 12px 14px;
  max-width: min(760px, 92%);
  width: 100%;
  box-sizing: border-box;
  background: #fff;
  border-radius: 16px;
  padding: 12px 12px 10px 12px;
  box-shadow: 0 12px 20px rgba(15, 23, 42, 0.07);
  border: 1px solid #eef2ff;
}
.bubble .chat-table-wrap {
  width: 100%;
}
.bubble small {
  display: block;
  text-align: right;
  color: var(--muted);
  margin-top: 6px;
}
.bubble.me {
  margin-left: auto;
  background: #0b1220;
  color: #fff;
  border-color: #0b1220;
}
.bubble.me small {
  color: rgba(255, 255, 255, 0.7);
}
/* Barra de feedback (copiar, gostei, não gostei) nas respostas do bot */
.bubble-feedback-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  margin-top: 8px;
  padding-top: 6px;
  border-top: 1px solid rgba(15, 23, 42, 0.08);
}
.bubble-feedback-btn {
  background: transparent;
  border: none;
  cursor: pointer;
  padding: 4px 6px;
  font-size: 1rem;
  opacity: 0.75;
  border-radius: 6px;
}
.bubble-feedback-btn:hover {
  opacity: 1;
  background: rgba(15, 23, 42, 0.06);
}
.bubble-feedback-btn:disabled {
  opacity: 0.5;
  cursor: default;
}
/*
 * O motivo do "Nao gostei" desce para uma linha so dele. Na mesma linha dos
 * tres botoes, o campo (16px no celular) empurrava o Enviar para fora da bolha
 * e o feedback nunca saia. ZIZI-CORRECAO-NAO-GOSTEI-ESCONDE-O-BOTAO-ENVIAR-NO-CELULAR-20260919
 */
.bubble-feedback-motivo {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 6px 0 0;
  flex: 1 1 100%;
  min-width: 0;
  width: 100%;
}
.bubble-feedback-motivo-texto {
  flex: 1;
  min-width: 0;
  padding: 4px 8px;
  font-size: 0.85rem;
  border: 1px solid rgba(15, 23, 42, 0.15);
  border-radius: 6px;
  background: #fff;
  color: #0f172a;
}
.bubble-feedback-motivo-enviar {
  flex: 0 0 auto;
  background: #0b1220;
  color: #fff;
  border: none;
  border-radius: 6px;
  padding: 4px 10px;
  font-size: 0.85rem;
  cursor: pointer;
}
.bubble-feedback-motivo-enviar:hover {
  opacity: 0.9;
}

.welcome-quick-header {
  display: flex;
  justify-content: flex-end;
  margin: -4px 0 6px;
}

.welcome-quick-toggle {
  border: 1px solid rgba(15, 23, 42, 0.16);
  background: #f8fafc;
  color: #0f172a;
  border-radius: 999px;
  width: 24px;
  height: 24px;
  line-height: 1;
  cursor: pointer;
  font-size: 12px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.welcome-quick-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 8px;
}

.welcome-quick-actions.hidden {
  display: none;
}

.welcome-quick-cads {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px dashed rgba(37, 99, 235, 0.22);
}

.welcome-quick-cads.hidden {
  display: none;
}

.welcome-quick-action-btn {
  border: 1px solid rgba(37, 99, 235, 0.25);
  background: #eff6ff;
  color: #1e3a8a;
  border-radius: 999px;
  padding: 4px 10px;
  font-size: 12px;
  cursor: pointer;
}

.welcome-quick-cad-btn {
  background: #eef2ff;
  border-color: rgba(79, 70, 229, 0.28);
  color: #312e81;
}

/* Indicador "pensando" (três pontinhos) no chat */
.bubble.chat-thinking {
  padding: 14px 18px;
  min-height: 44px;
  display: flex;
  align-items: center;
}
.chat-thinking-dots {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}
.chat-thinking-dots span {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--text-muted, #64748b);
  animation: chat-thinking-bounce 1.2s ease-in-out infinite both;
}
.chat-thinking-dots span:nth-child(1) {
  animation-delay: 0s;
}
.chat-thinking-dots span:nth-child(2) {
  animation-delay: 0.15s;
}
.chat-thinking-dots span:nth-child(3) {
  animation-delay: 0.3s;
}
@keyframes chat-thinking-bounce {
  0%,
  80%,
  100% {
    transform: scale(0.75);
    opacity: 0.5;
  }
  40% {
    transform: scale(1);
    opacity: 1;
  }
}

/* ZIZI-009: ações sugeridas abaixo da bolha do bot */
.suggested-actions-wrap {
  margin: 4px 14px 12px;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.suggested-action-btn {
  font-size: 0.9rem;
  padding: 6px 12px;
  border-radius: 12px;
  border: 1px solid var(--border, #e2e8f0);
  background: #fff;
  color: var(--text, #0f172a);
  cursor: pointer;
}
.suggested-action-btn:hover {
  background: #f1f5f9;
  border-color: #cbd5e1;
}
.finance-report-period-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  margin: 6px 0 10px;
  gap: 6px;
}
.finance-report-period-actions .suggested-action-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.78rem;
  padding: 4px 10px;
  border-radius: 10px;
  border: 1px solid #b6c4da;
  background: linear-gradient(180deg, #ffffff 0%, #eaf1fb 100%);
  color: #0f172a;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.9),
    0 2px 0 #d4dceb,
    0 4px 10px rgba(15, 23, 42, 0.08);
  transform: translateY(0);
  transition:
    transform 0.14s ease,
    box-shadow 0.14s ease,
    background 0.14s ease,
    border-color 0.14s ease;
}
.finance-report-period-actions .suggested-action-btn:hover {
  background: linear-gradient(180deg, #ffffff 0%, #dbe8f8 100%);
  border-color: #93b4e7;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.95),
    0 3px 0 #c5d4ea,
    0 6px 12px rgba(15, 23, 42, 0.1);
  transform: translateY(-1px);
}
.finance-report-period-actions .suggested-action-btn:active {
  transform: translateY(1px);
  box-shadow:
    inset 0 1px 1px rgba(15, 23, 42, 0.1),
    0 1px 0 #c5d4ea,
    0 2px 6px rgba(15, 23, 42, 0.08);
}
.chat-period-hint {
  margin-top: 10px;
  margin-bottom: 6px;
  font-size: 0.9rem;
  color: var(--text-muted, #64748b);
}
/* Tabela no chat (contas a pagar/receber) — largura do chat e redimensionamento automático */
.chat-table-wrap {
  width: 100%;
  max-width: 100%;
  min-width: 0;
  overflow-x: auto;
  margin: 8px 0;
  box-sizing: border-box;
}
.chat-table {
  width: 100%;
  min-width: 100%;
  border-collapse: collapse;
  font-size: 0.8rem;
  table-layout: auto;
}
.chat-table th,
.chat-table td {
  border: 1px solid var(--border, #e2e8f0);
  padding: 6px 8px;
  text-align: left;
}
.finance-cell-link {
  display: inline-block;
  max-width: 100%;
  padding: 0;
  border: 0;
  background: transparent;
  color: #1d4ed8;
  text-decoration: underline;
  text-decoration-thickness: 1.5px;
  text-underline-offset: 2px;
  cursor: pointer;
  font: inherit;
  text-align: left;
}
.finance-cell-link:hover {
  color: #1e40af;
  text-decoration-thickness: 2px;
}
.finance-cell-link:focus-visible {
  outline: 2px solid rgba(29, 78, 216, 0.35);
  outline-offset: 2px;
  border-radius: 4px;
}
.chat-table th {
  background: #f1f5f9;
  font-weight: 600;
  white-space: nowrap;
}
.chat-table tfoot td {
  background: #e2e8f0;
  font-weight: 600;
}
.chat-table tbody tr:nth-child(even) {
  background: #f8fafc;
}

/* Tabela contas a pagar — estilo 3D tipo planilha Excel */
.chat-table-excel3d.chat-table-wrap {
  border-radius: 4px;
  box-shadow:
    0 2px 4px rgba(0, 0, 0, 0.06),
    0 4px 12px rgba(0, 0, 0, 0.08),
    inset 0 1px 0 rgba(255, 255, 255, 0.6);
  border: 1px solid #c5d0de;
  background: #f4f6f9;
  padding: 2px;
}
.chat-table-excel3d.chat-table {
  border-collapse: separate;
  border-spacing: 0;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
  border-radius: 3px;
  overflow: hidden;
}
.chat-table-excel3d.chat-table th {
  background: linear-gradient(180deg, #e8eef4 0%, #d4dce6 100%);
  border: 1px solid #b0bcc8;
  border-bottom: 2px solid #9ca8b8;
  color: #1e293b;
  font-weight: 700;
  padding: 8px 10px;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.8);
}
.chat-table-excel3d.chat-table td {
  border: 1px solid #d1d9e2;
  padding: 6px 10px;
  background: #fff;
}
.chat-table-excel3d.chat-table tbody tr:nth-child(even) td {
  background: #f8fafc;
}
.chat-table-excel3d.chat-table tbody tr:hover td {
  background: #eef2f7;
}
.chat-table-excel3d.chat-table tfoot td {
  background: linear-gradient(180deg, #e2e8f0 0%, #cbd5e1 100%);
  border: 1px solid #94a3b8;
  border-top: 2px solid #94a3b8;
  font-weight: 700;
  padding: 8px 10px;
}
.composer {
  position: sticky;
  bottom: 0;
  z-index: 2;
  background: linear-gradient(
    180deg,
    rgba(243, 239, 231, 0),
    rgba(243, 239, 231, 0.92) 28%,
    rgba(243, 239, 231, 1)
  );
  padding: 12px;
  border-top: 1px solid rgba(229, 231, 235, 0.6);
  display: flex;
  gap: 10px;
  align-items: center;
}
.composer.dragover {
  outline: 2px dashed #0f172a;
  outline-offset: -4px;
}
.composer-attachments {
  display: none;
  gap: 8px;
  flex-wrap: wrap;
  padding: 0 12px 8px;
}
.composer-attachments.show {
  display: flex;
}
.composer-attachment-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  max-width: 100%;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 6px 10px;
  font-size: 12px;
  color: #0f172a;
}
.composer-attachment-chip button {
  border: none;
  background: transparent;
  cursor: pointer;
  color: #334155;
  padding: 0;
  font-size: 12px;
  line-height: 1;
}
/*
  ZIZI-FEATURE-FOTO-ANEXADA-APARECE-EM-MINIATURA-NO-COMPOSER-E-NO-CHAT-20260918.
  A faixa de anexos mora DENTRO da caixa de texto (.composer .input), acima da
  linha de digitar. Com anexo a caixa quebra em duas linhas: a faixa ocupa a
  primeira inteira. A especificidade (0,3,0) vence o `flex-wrap: nowrap` do
  telefone. Foto vira miniatura de 96px, raio 12, borda #e2e8f0 (padrao do
  lojista); o resto continua etiqueta com nome.
*/
.composer .input.has-attachments {
  flex-wrap: wrap;
  row-gap: 10px;
  border-radius: 22px;
}
.composer .input > .composer-attachments {
  flex: 0 0 100%;
  order: -1;
  padding: 0;
}
.composer-attachment-thumb {
  position: relative;
  flex: 0 0 auto;
  width: 96px;
  height: 96px;
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid #e2e8f0;
  background: #ffffff;
  color: #0f172a;
}
.composer-attachment-thumb img,
.chat-attachment-thumb img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.composer-attachment-thumb button {
  position: absolute;
  top: 4px;
  right: 4px;
  width: 22px;
  height: 22px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  border-radius: 999px;
  background: rgba(15, 23, 42, 0.75);
  color: #ffffff;
  cursor: pointer;
  padding: 0;
  font-size: 15px;
  line-height: 1;
}
.chat-attachment-thumb {
  width: 96px;
  height: 96px;
  margin: 0 0 8px;
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid #e2e8f0;
  background: #ffffff;
  color: #0f172a;
}
/* ZIZI-CORRECAO-BOLHA-DO-ANEXO-JUNTA-TEXTO-E-FOTOS-E-A-FOTO-NAO-SOME-DEPOIS-DA-LEITURA-20261015:
   bolha de quem enviou com os anexos lado a lado e o texto embaixo; a foto
   abre grande ao clicar. */
.bubble .chat-attachment-thumb {
  display: inline-block;
  vertical-align: top;
  margin: 0 6px 8px 0;
  cursor: zoom-in;
}
.chat-attachment-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  max-width: 100%;
  margin: 0 6px 8px 0;
  padding: 6px 10px;
  border-radius: 10px;
  border: 1px solid #e2e8f0;
  background: #ffffff;
  color: #0f172a;
  vertical-align: top;
  font-size: 13px;
}
.chat-attachment-chip-icone {
  flex: 0 0 auto;
  padding: 2px 6px;
  border-radius: 6px;
  background: #fee2e2;
  color: #b91c1c;
  font-size: 11px;
  font-weight: 800;
}
.chat-attachment-chip-nome {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.chat-attachment-texto {
  display: block;
  white-space: normal;
  overflow-wrap: anywhere;
}
.chat-attachment-viewer {
  position: fixed;
  inset: 0;
  z-index: 10000;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: auto;
  background: rgba(15, 23, 42, 0.88);
}
.chat-attachment-viewer img {
  max-width: 92vw;
  max-height: 92vh;
  max-height: 92dvh;
  border-radius: 8px;
  cursor: zoom-in;
}
.chat-attachment-viewer.is-zoomed {
  align-items: flex-start;
  justify-content: flex-start;
}
.chat-attachment-viewer.is-zoomed img {
  max-width: none;
  max-height: none;
  width: 200vw;
  cursor: zoom-out;
}
.chat-attachment-viewer-close {
  position: fixed;
  top: 12px;
  right: 12px;
  width: 40px;
  height: 40px;
  border: none;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.92);
  color: #0f172a;
  font-size: 24px;
  line-height: 1;
  cursor: pointer;
}

.doc-progress-card {
  border: 1px solid #dbe4f0;
  border-radius: 12px;
  background: #ffffff;
  padding: 10px;
  min-width: 260px;
}
.doc-progress-head {
  display: flex;
  align-items: center;
  gap: 8px;
}
.doc-progress-loader {
  display: inline-flex;
  gap: 4px;
}
.doc-progress-loader span {
  width: 6px;
  height: 6px;
  border-radius: 999px;
  background: #64748b;
  animation: docDot 1s infinite ease-in-out;
}
.doc-progress-loader span:nth-child(2) {
  animation-delay: 0.16s;
}
.doc-progress-loader span:nth-child(3) {
  animation-delay: 0.32s;
}
@keyframes docDot {
  0%,
  100% {
    opacity: 0.35;
    transform: scale(0.75);
  }
  50% {
    opacity: 1;
    transform: scale(1.1);
  }
}
.doc-progress-title {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-weight: 700;
  color: #0f172a;
}
.doc-progress-percent {
  font-size: 12px;
  color: #334155;
  font-weight: 700;
}
.doc-progress-status {
  margin-top: 6px;
  font-size: 12px;
  color: #475569;
}
.doc-progress-bar {
  margin-top: 8px;
  height: 7px;
  border-radius: 999px;
  background: #e2e8f0;
  overflow: hidden;
}
.doc-progress-bar i {
  display: block;
  height: 100%;
  background: linear-gradient(90deg, #2563eb, #38bdf8);
  transition: width 0.25s ease;
}
.doc-progress-hint {
  margin-top: 8px;
  font-size: 12px;
  color: #475569;
}
.doc-progress-final {
  margin-top: 6px;
  font-size: 11px;
  color: #64748b;
}
.doc-status-failed .doc-progress-bar i {
  background: #dc2626;
}
.doc-status-partial_error .doc-progress-bar i {
  background: #f59e0b;
}
.doc-status-completed .doc-progress-bar i {
  background: #16a34a;
}
.doc-progress-retry {
  margin-top: 8px;
  border: 1px solid #cbd5e1;
  background: #f8fafc;
  color: #0f172a;
  border-radius: 10px;
  padding: 6px 8px;
  cursor: pointer;
  font-size: 12px;
  font-weight: 700;
}
.doc-result-card {
  white-space: normal;
  line-height: 1.35;
}

/* Barra de porcentagem de créditos de IA */
.credit-bar-wrap {
  padding: 10px 12px;
  background: linear-gradient(135deg, #f0f9ff 0%, #e0f2fe 100%);
  border-radius: 12px;
  border: 1px solid #bae6fd;
}
.credit-bar-label {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
  font-size: 0.9rem;
}
.credit-bar-pct {
  font-weight: 700;
  color: var(--brand, #2563eb);
}
.credit-bar-track {
  height: 10px;
  border-radius: 999px;
  background: #e2e8f0;
  overflow: hidden;
}
.credit-bar-fill {
  height: 100%;
  border-radius: 999px;
  background: linear-gradient(90deg, #0ea5e9, #38bdf8);
  transition: width 0.4s ease;
}
.credit-bar-hint {
  margin-top: 6px;
  font-size: 0.8rem;
}

/*
 * O "+" mora DENTRO da caixa de digitar, antes do texto. Como o fundo ali e
 * escuro, ele deixou de ser um circulo branco (que virava um segundo botao
 * solto ao lado da caixa) e passou a ser um botao discreto do mesmo tom, com a
 * cor do texto declarada junto do fundo.
 */
.composer .plus {
  flex: 0 0 auto;
  width: 32px;
  height: 32px;
  border-radius: 999px;
  border: 1px solid rgba(148, 163, 184, 0.35);
  background: rgba(255, 255, 255, 0.08);
  color: #e2e8f0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
}
.composer .plus:hover {
  background: rgba(255, 255, 255, 0.16);
}

/* Menu do botão + (Anexar, Tirar foto, Gravar vídeo) - ZIZI-021 */
.composer-plus-menu {
  position: fixed;
  z-index: 10002;
  min-width: 180px;
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.2);
  padding: 8px 0;
  border: 1px solid var(--line, #e2e8f0);
}
.composer-plus-menu.hidden {
  display: none !important;
}
.composer-plus-menu:not(.hidden) {
  display: block;
}
.composer-plus-menu-item {
  display: block;
  width: 100%;
  padding: 10px 16px;
  text-align: left;
  border: none;
  background: none;
  cursor: pointer;
  font-size: 14px;
  color: #1e293b;
}
.composer-plus-menu-item:hover {
  background: #f1f5f9;
}

/* Overlay gravar vídeo - ZIZI-021 */
.composer-video-overlay {
  position: fixed;
  inset: 0;
  z-index: 10003;
  background: rgba(0, 0, 0, 0.6);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}
.composer-video-overlay.hidden {
  display: none !important;
}
.composer-video-overlay-card {
  background: #fff;
  border-radius: 12px;
  padding: 20px;
  max-width: 90vw;
  max-height: 90vh;
  max-height: 90dvh;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.composer-video-overlay-title {
  font-weight: 600;
  font-size: 16px;
}
.composer-video-overlay-actions {
  display: flex;
  gap: 12px;
  justify-content: flex-end;
}

.composer .input {
  flex: 1;
  background: #111827;
  color: #fff;
  border-radius: 999px;
  padding: 12px 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  box-shadow: 0 16px 30px rgba(15, 23, 42, 0.12);
}
.composer input {
  width: 100%;
  border: none;
  outline: none;
  background: transparent;
  color: #fff;
  font-size: 15px;
}
.assistant-mode-wrap {
  flex: 0 0 auto;
}
.assistant-mode-toggle {
  display: inline-grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  gap: 4px;
  border: 1px solid rgba(148, 163, 184, 0.3);
  background: #111827;
  border-radius: 999px;
  padding: 3px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
}
.assistant-mode-option {
  border: 0;
  background: transparent;
  color: #cbd5e1;
  border-radius: 999px;
  padding: 7px 12px;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
}
.assistant-mode-option:hover {
  color: #e5e7eb;
}
.assistant-mode-option.active {
  background: #334155;
  color: #f8fafc;
}
.composer .send {
  width: 40px;
  height: 40px;
  border-radius: 999px;
  background: #374151;
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  cursor: pointer;
  color: #fff;
  font-size: 18px;
  line-height: 1;
}
.composer .send:hover {
  background: #4b5563;
}
.mic {
  width: 40px;
  height: 40px;
  border-radius: 999px;
  background: #374151;
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
}
.right-card {
  min-height: 520px;
}
.drawer-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(2, 6, 23, 0.45);
  display: none;
  z-index: 30;
}
.drawer {
  position: fixed;
  top: 0;
  right: 0;
  height: 100%;
  width: min(420px, 42vw);
  background: #fff;
  border-left: 1px solid var(--line);
  box-shadow: -18px 0 40px rgba(2, 6, 23, 0.18);
  transform: translateX(102%);
  transition: transform 0.22s ease;
  z-index: 40;
  display: flex;
  flex-direction: column;
}
.drawer.open {
  transform: translateX(0);
}
.drawer-backdrop.open {
  display: block;
}
.drawer-header {
  padding: 14px 14px 10px 14px;
  border-bottom: 1px solid var(--line);
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
}
.drawer-header h3 {
  margin: 0;
  font-size: 18px;
}
.drawer-header .meta {
  color: var(--muted);
  font-size: 13px;
}
.tabs {
  display: flex;
  gap: 8px;
  padding: 10px 14px;
  border-bottom: 1px solid var(--line);
}
.tab {
  min-height: 44px;
  border: 1px solid var(--line);
  background: #fff;
  border-radius: 999px;
  padding: 8px 12px;
  font-weight: 700;
  cursor: pointer;
  color: #111827;
}
.tab.active {
  background: #eef2ff;
  border-color: #c7d2fe;
}
.tabs.produtos-compact-tabs {
  gap: 8px;
  flex-wrap: nowrap;
  overflow-x: auto;
  overflow-y: hidden;
}
.tabs.produtos-compact-tabs .tab {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  min-width: 74px;
  min-height: 54px;
  padding: 8px 8px;
  flex-shrink: 0;
  border-radius: 12px;
}
.tabs.produtos-compact-tabs .tab .tab-icon {
  font-size: 20px;
  line-height: 1;
}
.tabs.produtos-compact-tabs .tab .tab-label {
  display: block;
  font-size: 10px;
  line-height: 1.1;
  text-align: center;
}
.tabs.produtos-compact-tabs .tab.active {
  background: #eef2ff;
  border-color: #c7d2fe;
}
.drawer-body {
  padding: 14px;
  overflow: auto;
}
.composer-finance-btn { width: 40px; height: 40px; flex: 0 0 auto; border: 0; border-radius: 999px; background: #dcfce7; color: #166534; cursor: pointer; font-size: 17px; }
.composer-finance-btn:hover { background: #bbf7d0; }
.financeiro-movel { position: fixed; top: 92px; right: 24px; z-index: 41; display: grid; gap: 14px; width: min(420px, calc(100vw - 32px)); padding: 14px; border: 1px solid #bbf7d0; border-radius: 14px; background: #fff; box-shadow: 0 14px 34px rgba(15,23,42,.2); }
.financeiro-movel.is-expanded { width: min(620px, calc(100vw - 32px)); }
.financeiro-movel.is-minimized { gap: 0; }
.financeiro-movel.is-minimized > :not(.financeiro-movel-header) { display: none; }
.financeiro-movel-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; cursor: grab; touch-action: none; }
.financeiro-movel-header h4 { margin: 2px 0 0; font-size: 22px; }
.financeiro-movel-eyebrow { color: #15803d; font-size: 12px; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; }
.financeiro-movel-note { margin: -6px 0 0; font-size: 13px; }
.financeiro-movel-add-wrap { position: relative; }
.financeiro-movel-corpo { display: contents; }
.financeiro-movel-controls { display: flex; gap: 4px; }
.financeiro-movel-controls .btn { display: inline-flex; align-items: center; justify-content: center; min-width: 44px; min-height: 44px; padding: 0; font-size: 18px; }
.financeiro-movel-add-menu { position: absolute; top: calc(100% + 6px); right: 0; z-index: 2; display: grid; gap: 6px; min-width: 150px; padding: 8px; border: 1px solid var(--line); border-radius: 12px; background: #fff; box-shadow: 0 10px 28px rgba(15,23,42,.16); }
.financeiro-movel-add-menu[hidden] { display: none; }
.financeiro-movel-cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.financeiro-movel-card { display: grid; gap: 5px; padding: 16px; border: 1px solid var(--line); border-radius: 14px; background: #fff; color: #0f172a; text-align: left; cursor: pointer; }
.financeiro-movel-card span, .financeiro-movel-card small { color: #64748b; font-size: 12px; }
.financeiro-movel-card strong { font-size: 20px; }
.financeiro-movel-card.receita { border-left: 4px solid #16a34a; }
.financeiro-movel-card.despesa { border-left: 4px solid #dc2626; }
.financeiro-complementares { border: 1px solid var(--line); border-radius: 12px; padding: 10px; }
.financeiro-complementares summary { cursor: pointer; color: #334155; font-weight: 700; }
.financeiro-complementares-grid { margin-top: 12px; }
.finance-cadastro-heading { display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:10px; color:#0f172a; }
.finance-cadastro-heading > span { display:flex; flex-wrap:wrap; gap:6px; }
.finance-draft-hint { margin:0 0 10px; color:#475569; font-size:13px; }
.finance-summary-title { color:#0f172a; font-weight:700; font-size:16px; }
.finance-series-panel { border:1px solid var(--line); border-radius:12px; padding:10px; margin:0 0 12px; }
.finance-series-panel summary { cursor:pointer; color:#334155; font-weight:700; }
.finance-series-panel [data-finance-series-list] { margin-top:12px; }
.financeiro-series-row { display:flex; align-items:center; justify-content:space-between; gap:10px; flex-wrap:wrap; padding:10px 0; border-top:1px solid #e2e8f0; }
.financeiro-series-row .btn { min-height:44px; }
#financeForm,
#financeForm .field,
#financeForm [data-finance-parcel-config] { min-width: 0; }
#financeForm input:not([type="checkbox"]),
#financeForm select { box-sizing: border-box; min-width: 0; width: 100%; }
#financeForm [data-finance-parcel-config] > .form { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.form {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
.digital-kit-form { grid-template-columns: minmax(0, 1fr); max-width: 100%; }
.digital-kit-form .field { min-width: 0; }
.digital-kit-quadro {
  width: 160px; height: 160px; box-sizing: border-box;
  display: flex; align-items: center; justify-content: center; text-align: center;
  border: 2px dashed var(--line, #cbd5e1); border-radius: 12px; padding: 8px;
  cursor: pointer; overflow: hidden; font-size: 13px;
}
.digital-kit-quadro.is-arrastando { border-color: #028052; }
.digital-kit-quadro img { width: 100%; height: 100%; object-fit: contain; }
.digital-estudio-form { grid-template-columns: minmax(0, 1fr); max-width: 100%; }
.digital-passo { display: grid; gap: 8px; min-width: 0; padding-top: 6px; }
.digital-passo-titulo { margin: 0; font-size: 15px; display: flex; align-items: center; gap: 8px; }
.digital-passo-num { display: inline-flex; width: 24px; height: 24px; border-radius: 50%; background: #7c3aed; color: #fff; align-items: center; justify-content: center; font-size: 13px; }
.digital-estudio-foto {
  box-sizing: border-box; width: 100%; min-height: 200px; display: flex; align-items: center; justify-content: center;
  text-align: center; border: 2px dashed var(--line, #cbd5e1); border-radius: 12px; padding: 8px; cursor: pointer; overflow: hidden;
}
.digital-estudio-foto img { max-width: 100%; max-height: 320px; object-fit: contain; }
/*
  Formularios dentro da gaveta (.drawer-body). .form e "1fr 1fr" e 1fr tem minimo =
  conteudo: o input/select (largura intrinseca ~170px) impedia a coluna de encolher,
  o formulario passava de 420px e a coluna da direita e o campo Motivo saiam pela borda
  (Caixa > Sangria e suprimento, cadastro de Clientes). Aqui a trilha aceita encolher
  (minmax(0,..)), quebra em coluna quando nao cabem duas de 160px e o campo nunca passa
  da propria celula. So vale dentro da gaveta; .form fora dela nao muda.
*/
.drawer-body .form {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 160px), 1fr));
}
.drawer-body .form > * {
  min-width: 0;
}
.drawer-body .form input:not([type="checkbox"]):not([type="radio"]),
.drawer-body .form select,
.drawer-body .form textarea {
  box-sizing: border-box;
  min-width: 0;
  max-width: 100%;
  width: 100%;
}
.drawer-body .form.pedido-compra-form {
  grid-template-columns: minmax(0, 1fr);
}
.drawer-body .form.digital-kit-form,
.drawer-body .form.digital-estudio-form {
  grid-template-columns: minmax(0, 1fr);
}
.produtos-layout {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(280px, 0.9fr);
  gap: 12px;
  align-items: start;
}
.produtos-card-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.produtos-layout > *,
.produtos-layout .produtos-section-card {
  min-width: 0;
}
.produtos-card-grid .field.full {
  grid-column: 1 / -1;
}
.produtos-side-stack {
  display: grid;
  gap: 12px;
}
.field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.field.full {
  grid-column: 1 / -1;
}
label {
  font-size: 13px;
  color: var(--muted);
}
input,
select,
textarea {
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 10px 12px;
  font-size: 14px;
  background: #fff;
  outline: none;
  transition:
    background-color 0.15s ease,
    color 0.15s ease;
}
/* Campo com foco: fundo suave para o usuário saber onde está o cursor */
input:focus,
select:focus,
textarea:focus {
  background-color: #e8eef5;
  color: #1e3a5f;
}
.composer input:focus {
  background-color: transparent;
  color: #fff;
}
textarea {
  min-height: 80px;
  resize: vertical;
}
.actions {
  display: flex;
  gap: 10px;
  justify-content: flex-end;
  margin-top: 12px;
}
.muted {
  color: var(--muted);
}
.list {
  margin-top: 14px;
  border-top: 1px dashed var(--line);
  padding-top: 12px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: #fff;
}
.row b {
  display: block;
}
.row small {
  color: var(--muted);
  /* RN-FIN-011 (ZIZI-CORRECAO-LISTA-FINANCEIRA-AINDA-MOSTRA-MANUAL-E-ABAS-CORTADAS-20260926):
     contas a receber/pagar mandam varios <small>, um por linha; sem
     display:block eles ficariam lado a lado (inline), quebrando o pedido do
     dono de "cada informacao em uma linha so". Nao afeta os outros
     cadastros, que so tem um <small>. */
  display: block;
}
.row .row-actions {
  display: flex;
  gap: 8px;
}
.row .row-actions button {
  padding: 8px 10px;
  border-radius: 12px;
}
.hint {
  padding: 10px 12px;
  border: 1px solid #e0e7ff;
  background: #f8fafc;
  border-radius: 14px;
  color: #334155;
  font-size: 13px;
}
.produtos-section-card {
  margin-top: 8px;
  padding: 14px;
  border: 1px solid #dbe4f0;
  border-radius: 18px;
  background: linear-gradient(180deg, #ffffff 0%, #f8fbff 100%);
  box-shadow: 0 10px 26px rgba(15, 23, 42, 0.05);
}
.produtos-section-head {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 10px;
  padding-bottom: 10px;
  border-bottom: 1px solid #e2e8f0;
}
.produtos-section-head b {
  font-size: 14px;
  color: #0f172a;
}
.produtos-section-head span {
  display: block;
  margin-top: 4px;
  color: #475569;
  font-size: 13px;
  line-height: 1.35;
}
.produtos-colors-panel {
  display: grid;
  gap: 10px;
}
.produtos-inline-row {
  display: flex;
  gap: 10px;
  align-items: center;
}
.produtos-inline-row .produtos-input {
  flex: 1;
  min-width: 0;
}
.produtos-secondary-button {
  border: 1px solid #cbd5e1;
  background: #fff;
  color: #0f172a;
  border-radius: 12px;
  padding: 10px 14px;
  font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
  transition:
    transform 0.12s ease,
    box-shadow 0.12s ease,
    border-color 0.12s ease;
}
.produtos-secondary-button:hover {
  border-color: #93c5fd;
  box-shadow: 0 6px 16px rgba(37, 99, 235, 0.12);
  transform: translateY(-1px);
}
.produtos-color-chip-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 10px;
  border: 1px dashed #dbe4f0;
  border-radius: 14px;
  background: #f8fafc;
  min-height: 52px;
}
.produtos-color-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border: 1px solid #c7d2fe;
  background: #eff6ff;
  color: #1d4ed8;
  border-radius: 999px;
  padding: 8px 12px;
  font-weight: 700;
  cursor: pointer;
  box-shadow: 0 4px 10px rgba(37, 99, 235, 0.08);
}
.produtos-color-chip span {
  font-size: 15px;
  line-height: 1;
}
.produtos-empty-ranges {
  color: #64748b;
  font-size: 13px;
  padding: 8px 2px;
}
@media (max-width: 980px) {
  .grid {
    grid-template-columns: 1fr;
  }
  .right-card {
    display: none;
  }
  .kpis {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .produtos-inline-row {
    flex-direction: column;
    align-items: stretch;
  }
}

/* não deixar overlay invisível bloquear clique */
/* não deixar overlay invisível bloquear clique */
.backdrop,
.overlay,
.sheetBackdrop,
#attachSheet {
  pointer-events: none;
}
.backdrop.show,
.overlay.show,
.sheetBackdrop.show,
#attachSheet.show {
  pointer-events: auto;
}
.drawer-backdrop.open {
  pointer-events: auto;
}

/* Voice modal */
.vmodal {
  position: fixed;
  inset: 0;
  display: none;
  align-items: center;
  justify-content: center;
  background: rgba(11, 18, 32, 0.45);
  z-index: 9999;
  padding: 16px;
}
.vmodal.open {
  display: flex;
}
.vmodal-card {
  width: min(520px, 100%);
  background: var(--card);
  /* O card do modal e claro em qualquer tema, porque --card e branco. Sem
     declarar a cor do texto, o titulo herda o claro do tema escuro e some. */
  color: var(--text);
  border-radius: 18px;
  box-shadow: 0 18px 60px rgba(0, 0, 0, 0.25);
  padding: 18px;
}
.operational-alert-card--question {
  width: min(760px, 100%);
}
.operational-alert-shell {
  display: grid;
  grid-template-columns: 72px 1fr;
  gap: 16px;
  align-items: flex-start;
}
.operational-alert-icon {
  width: 72px;
  height: 72px;
  border-radius: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 42px;
  font-weight: 800;
  line-height: 1;
}
.operational-alert-shell--question .operational-alert-icon {
  background: #eff6ff;
  color: #1d4ed8;
}
.operational-alert-shell--info .operational-alert-icon {
  background: #fff7ed;
  color: #c2410c;
}
.operational-alert-shell--success .operational-alert-icon {
  background: #ecfdf5;
  color: #15803d;
}
.operational-alert-copy {
  min-width: 0;
}
.finance-empty-state {
  display: grid;
  gap: 6px;
  padding: 18px 14px;
  text-align: center;
  color: #475569;
}
.finance-empty-state strong {
  color: #0f172a;
}
.z-top-10000 {
  z-index: 10000;
}
.z-top-30001 {
  z-index: 30001;
}
.z-top-30002 {
  z-index: 30002;
}
.modal-card-700 {
  max-width: 700px;
  max-height: 85vh;
  max-height: 85dvh;
  overflow-y: auto;
}
.modal-card-900 {
  max-width: 900px;
  max-height: 90vh;
  max-height: 90dvh;
  overflow-y: auto;
}
.modal-card-800 {
  max-width: 800px;
  max-height: 85vh;
  max-height: 85dvh;
  overflow-y: auto;
}
.modal-card-600 {
  max-width: 600px;
  max-height: 70vh;
  max-height: 70dvh;
  overflow-y: auto;
}
.modal-card-720 {
  max-width: 720px;
  max-height: 90vh;
  max-height: 90dvh;
  overflow-y: auto;
}
.modal-card-820 {
  max-width: 820px;
  max-height: 90vh;
  max-height: 90dvh;
  overflow-y: auto;
}
.modal-note-manual-text {
  font-size: 13px;
  color: #64748b;
  margin-bottom: 12px;
}
.vmodal-title {
  font-weight: 800;
  font-size: 18px;
  margin-bottom: 6px;
}
.vmodal-text {
  color: var(--muted);
  font-size: 14px;
  line-height: 1.35;
  margin-bottom: 14px;
}
.vmodal-actions {
  display: flex;
  gap: 10px;
  justify-content: flex-end;
}
.btn {
  border: 1px solid var(--line);
  background: #fff;
  color: var(--text);
  border-radius: 12px;
  padding: 10px 12px;
  font-weight: 700;
  cursor: pointer;
}
.btn.primary {
  background: var(--accent);
  border-color: transparent;
  color: #fff;
}
.btn.ghost {
  background: transparent;
}
.vstatus {
  position: fixed;
  left: 12px;
  bottom: 12px;
  background: rgba(11, 18, 32, 0.88);
  color: #fff;
  padding: 8px 10px;
  border-radius: 12px;
  font-size: 12px;
  z-index: 9998;
  display: none;
  max-width: min(520px, calc(100% - 24px));
}
.vstatus.show {
  display: block;
}

.vbar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 18px;
  display: none;
  justify-content: center;
  z-index: 9999;
}
.vbar.show {
  display: flex;
}
.vbar-inner {
  background: #0b1220;
  color: #e5e7eb;
  border: 1px solid #1f2937;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35);
  border-radius: 16px;
  padding: 10px 12px;
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 320px;
  max-width: 720px;
  width: calc(100% - 24px);
}
.vbar-dot {
  width: 10px;
  height: 10px;
  border-radius: 999px;
  background: #22c55e;
  opacity: 0.9;
  animation: vbarPulse 1s infinite ease-in-out;
}
.vbar-dot:nth-child(2) {
  animation-delay: 0.15s;
}
.vbar-dot:nth-child(3) {
  animation-delay: 0.3s;
}
@keyframes vbarPulse {
  0%,
  100% {
    transform: scale(0.7);
    opacity: 0.5;
  }
  50% {
    transform: scale(1.15);
    opacity: 1;
  }
}
.vbar-text {
  flex: 1;
  font-size: 13px;
  font-weight: 600;
  color: #cbd5e1;
}
.vbar-stop {
  border: 0;
  background: #111827;
  color: #e5e7eb;
  border-radius: 10px;
  padding: 6px 10px;
  cursor: pointer;
}
.vbar-stop:hover {
  filter: brightness(1.08);
}

/* Produto: drawers operacionais */
.product-drawer {
  position: fixed;
  top: 0;
  height: 100vh;
  height: 100dvh;
  transition: right 0.3s ease;
  overflow-y: auto;
}
.product-drawer-note {
  right: -520px;
  width: 520px;
  max-width: 95vw;
  background: #f4f6f9;
  box-shadow: -4px 0 20px rgba(0, 0, 0, 0.25);
  z-index: 19999;
  padding: 16px;
}
.product-drawer-search {
  right: -500px;
  width: 500px;
  max-width: 90vw;
  background: #fff;
  box-shadow: -4px 0 15px rgba(0, 0, 0, 0.3);
  z-index: 20000;
}
.product-drawer-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
}
.product-drawer-title {
  margin: 0;
  font-size: 18px;
  font-weight: 700;
  color: #1e293b;
}
.product-drawer-close-btn {
  background: none;
  border: none;
  font-size: 24px;
  cursor: pointer;
  color: #64748b;
}
.product-drawer-description {
  font-size: 13px;
  color: #64748b;
  margin-bottom: 12px;
}
.product-drawer-actions {
  margin-top: 16px;
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
/*
  Gaveta de Pedidos de compra (renderPedidoCadastro). A linha de item tinha
  grade fixa de ~600px e o select de produto crescia ate o nome mais longo;
  como .form usa 1fr (minimo = conteudo), a gaveta de ~420px virava 953px e
  os botoes, esticados pelo .field em coluna, iam junto. Aqui a grade aceita
  encolher (minmax(0,...)), a linha de item quebra e os botoes ficam em
  linha que quebra, cada um do tamanho do proprio rotulo.
*/
.pedido-compra-form {
  grid-template-columns: minmax(0, 1fr);
}
.pedido-compra-form > .field {
  min-width: 0;
}
.pedido-compra-form select,
.pedido-compra-form input {
  min-width: 0;
  max-width: 100%;
  width: 100%;
}
.pedido-compra-form .actions {
  flex-wrap: wrap;
}
.pedido-compra-botoes {
  margin-top: 8px;
}
.pedido-compra-botoes .btn {
  white-space: normal;
}
.pedido-item-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(110px, 1fr));
  gap: 8px;
  align-items: end;
  min-width: 0;
}
.pedido-item-row > div:first-child {
  grid-column: 1 / -1;
}
.pedido-item-row > * {
  min-width: 0;
}
.product-search-header {
  padding: 20px;
  border-bottom: 1px solid #e2e8f0;
}
.product-search-header-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
}
.product-search-title {
  margin: 0;
  font-size: 18px;
  font-weight: 600;
}
.product-search-item-info-wrap {
  background: #f1f5f9;
  padding: 12px;
  border-radius: 6px;
  margin-bottom: 12px;
  font-size: 13px;
}
.product-search-input {
  width: 100%;
  padding: 10px;
  border: 1px solid #cbd5e1;
  border-radius: 6px;
  font-size: 14px;
}
.product-search-results {
  padding: 20px;
}
.product-search-placeholder {
  color: #64748b;
  text-align: center;
  margin: 0;
}
.selected-products-area {
  display: none;
  padding: 20px;
  border-top: 2px solid #e2e8f0;
  background: #f8fafc;
}
.selected-products-title {
  margin: 0 0 12px 0;
  font-size: 14px;
  font-weight: 600;
}
.selected-products-actions {
  margin-top: 16px;
  display: flex;
  gap: 8px;
}
.product-confirm-btn {
  flex: 1;
}
.product-drawer-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  height: 100dvh;
  background: rgba(0, 0, 0, 0.5);
  z-index: 19999;
  display: none;
}

/* Top menu (☰) */
.topmenu {
  position: absolute;
  top: 56px;
  right: 16px;
  width: 240px;
  background: #ffffff;
  border: 1px solid rgba(15, 23, 42, 0.08);
  border-radius: 18px;
  box-shadow: 0 18px 50px rgba(2, 6, 23, 0.18);
  padding: 10px;
  display: none;
  z-index: 9999;
  max-height: calc(100vh - 76px);
  max-height: calc(100dvh - 76px);
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-gutter: stable;
}
.topmenu.open {
  display: block;
}
.topmenu-item {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 10px;
  border: 0;
  background: transparent;
  padding: 12px 10px;
  border-radius: 14px;
  cursor: pointer;
  font-weight: 650;
  color: #0f172a;
  font-size: 16px;
}
.topmenu-item:hover {
  background: rgba(15, 23, 42, 0.05);
}
.topmenu-item:focus-visible {
  outline: 3px solid rgba(37, 99, 235, 0.42);
  outline-offset: 1px;
}
.topmenu-item span {
  flex: 1;
  text-align: left;
}
.topmenu-sep {
  height: 1px;
  background: rgba(15, 23, 42, 0.08);
  margin: 8px 4px;
}
/*
 * Rodape de suporte do menu: versao, tenant e API. No telefone esses tres
 * valores saem da barra e passam a viver aqui — continuam a um toque, sem
 * comer a tela do lojista.
 */
.topmenu-support {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 10px;
  padding: 4px 10px 2px 10px;
  color: #64748b;
  font-size: 11px;
  font-weight: 600;
  line-height: 1.5;
  word-break: break-all;
}
/*
 * Nome da empresa ao lado do menu. O atributo `hidden` precisa vencer o
 * `display:flex` declarado aqui: sem o !important o chip vazio continuaria na
 * tela quando nao ha empresa conhecida.
 */
.company-chip {
  display: flex;
  align-items: center;
  min-width: 0;
  padding: 6px 12px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: #fff;
  color: var(--text);
}
.company-chip[hidden] {
  display: none !important;
}
.company-name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: #0f172a;
  font-size: 13px;
  font-weight: 700;
}

/* 4.1.26-base shell estável */
.app-shell {
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
}
.chat-shell {
  overflow: hidden;
}
.home-chat-head {
  border-bottom: 1px solid var(--line);
  border-radius: var(--radius) var(--radius) 0 0;
}
.module-summary-sink {
  display: none !important;
}
.sr-only {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
.mode-chip {
  cursor: pointer;
}
.version-badge {
  margin-left: 10px;
  color: #64748b;
  font-weight: 600;
  font-size: 12px;
}
.chip-value {
  color: #1d4ed8;
  margin-left: 4px;
}
.speak-toggle-btn {
  margin-left: 8px;
  background: #1f2937;
}
.topbar {
  position: sticky;
}
.topbar .topmenu {
  right: max(16px, calc((100vw - 1200px) / 2 + 16px));
}
.drawer-backdrop,
.drawer,
.vmodal,
.vbar {
  pointer-events: none;
}
.drawer.open,
.drawer-backdrop.open,
.vmodal.open,
.vbar.show {
  pointer-events: auto;
}
@media (max-width: 768px) {
  /*
   * A barra do telefone e do LOJISTA, nao do suporte. Medido em 360x780 antes
   * desta correcao: a barra ocupava 133px de altura em TRES faixas (marca+menu,
   * versao+tenant, API) — 17% da tela vendida ao cliente gasta com dado que so
   * o suporte le. Agora e uma faixa so: marca do modulo a esquerda, nome da
   * empresa e menu a direita.
   *
   * Versao, tenant e API NAO sumiram do produto: saem da barra e aparecem no
   * rodape do menu ☰ (.topmenu-support), espelhados destes mesmos elementos,
   * que continuam no DOM como fonte. Suporte continua tendo os tres a um toque.
   */
  .topbar-inner {
    flex-wrap: nowrap;
    column-gap: 8px;
    padding: 8px 12px;
  }
  .topbar-inner .chip {
    display: none;
  }
  .topbar-inner .logo {
    width: 32px;
    height: 32px;
  }
  .topbar-inner .brand {
    flex: 1 1 auto;
    min-width: 0;
    margin-right: 0;
  }
  .topbar-inner .brand b,
  .topbar-inner .brand span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .topbar-inner .brand b {
    font-size: 15px;
  }
  .topbar-inner .brand span {
    font-size: 11px;
  }
  /*
   * O espacador continua empurrando empresa e menu para a direita, mas sem
   * virar quebra de linha: com uma faixa so, quebrar linha e o defeito.
   */
  .topbar-inner .spacer {
    flex: 1 1 auto;
    min-width: 0;
  }
  .topbar-inner .company-chip {
    flex: 0 1 auto;
    max-width: 38vw;
    padding: 5px 10px;
  }
  .topbar-inner .company-name {
    font-size: 12px;
  }
  .topbar-inner #menuBtn {
    flex: 0 0 auto;
    padding: 8px 11px;
  }
  /*
   * A caixa de digitar volta a ser UMA LINHA. O historico importa: ela quebrava
   * em duas porque Zizi/GPT, enviar, microfone e voz somavam 229px de uma caixa
   * de 331px e sobravam 24px para escrever. A quebra resolvia o sintoma. O que
   * resolve a causa e o que foi feito agora: a escolha Zizi/GPT saiu do composer
   * e virou preferencia em Meu cadastro, e o "+" entrou para dentro da caixa.
   * Sobram quatro pecas — anexar, escrever, enviar e falar — e elas cabem.
   */
  .composer .input {
    flex-wrap: nowrap;
    column-gap: 8px;
    border-radius: 999px;
    padding: 8px 10px;
  }
  .composer .input #chatInput {
    flex: 1 1 auto;
    min-width: 0;
  }
  .composer .input .send,
  .composer .input .mic,
  .composer .input .speak-toggle-btn {
    flex: 0 0 auto;
    width: 36px;
    height: 36px;
  }
  .composer .plus {
    width: 30px;
    height: 30px;
  }
  /*
   * Molduras aninhadas comiam 52px dos 375 do telefone — 14% da largura — so
   * em margem e recheio, antes de qualquer conteudo. No computador a moldura
   * faz sentido; no celular ela rouba justamente a linha da mensagem e a
   * largura da caixa de digitar.
   */
  .layout.app-shell {
    margin: 0;
    padding: 8px;
    gap: 8px;
  }
  .topbar .topmenu {
    right: 12px;
    left: 12px;
    width: auto;
  }
}

@media (max-width: 1180px) {
  .drawer {
    width: min(520px, 92vw);
  }
  .produtos-layout {
    grid-template-columns: 1fr;
  }
  .produtos-side-stack {
    gap: 10px;
  }
}
@media (max-width: 900px) {
  .bubble {
    max-width: min(92%, calc(100% - 24px));
  }
  .chat-scroll {
    min-height: 52vh;
  }
  .produtos-card-grid {
    grid-template-columns: 1fr;
  }
}

/* 4.1.38-base chat viewport fix */
:root {
  --topbar-h: 76px;
  --stories-h: 112px;
  --app-gap: 28px;
  --composer-h: 78px;
}
body {
  min-height: 100dvh;
}
.standalone-mode body {
  padding-bottom: env(safe-area-inset-bottom, 0px);
}
.standalone-mode .topbar {
  padding-top: env(safe-area-inset-top, 0px);
}
.standalone-mode .chat-scroll {
  padding-bottom: calc(
    var(--composer-h) + env(safe-area-inset-bottom, 0px) + 18px
  );
}
.standalone-mode .composer {
  padding-bottom: max(8px, env(safe-area-inset-bottom, 0px));
}
.layout.app-shell {
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-height: calc(100dvh - var(--topbar-h) - 12px);
}
.stories {
  flex: 0 0 auto;
  min-height: 92px;
}
.chat-shell {
  width: 100%;
  flex: 1 1 auto;
  min-height: 0;
}
.chat-shell.card {
  width: 100%;
  height: calc(100dvh - var(--topbar-h) - var(--stories-h) - var(--app-gap));
  min-height: 560px;
  max-height: none;
  display: flex;
  flex-direction: column;
}
.chat-area {
  flex: 1 1 auto;
  min-height: 0;
  height: 100%;
}
.chat-scroll {
  flex: 1 1 auto;
  min-height: 0;
  min-width: 0;
  overflow-y: auto;
  overflow-x: hidden;
  padding-right: 6px;
  padding-bottom: calc(var(--composer-h) + 18px);
  overscroll-behavior: contain;
}
.bubble {
  width: fit-content;
  max-width: 100%;
}
.bubble.zizi-flow-grid-bubble {
  display: block;
  width: min(1400px, 98%);
  max-width: min(1400px, 98%);
  box-sizing: border-box;
}

/* Onboarding V2: a apresentacao pertence ao historico central do chat. */
.bubble.zizi-onboarding-bubble {
  display: block;
  width: min(980px, calc(100% - 28px));
  max-width: min(980px, calc(100% - 28px));
}
.zizi-onboarding-chat { color: #172033; }
.zizi-onboarding-hero { display: flex; gap: 16px; align-items: center; padding: 8px 2px; }
.zizi-onboarding-mascot { display: grid; width: 58px; height: 58px; place-items: center; border-radius: 18px; background: #e0e7ff; font-size: 32px; }
.zizi-onboarding-eyebrow { color: #4f46e5; font-size: 11px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.zizi-onboarding-chat h2, .zizi-onboarding-chat h3 { margin: 3px 0 7px; }
.zizi-onboarding-chat p { line-height: 1.5; }
.zizi-onboarding-progress { margin: 16px 0; font-size: 12px; font-weight: 700; }
.zizi-onboarding-progress > div { height: 8px; margin-top: 6px; overflow: hidden; border-radius: 999px; background: #dbeafe; }
.zizi-onboarding-progress i { display: block; height: 100%; border-radius: inherit; background: #4f46e5; }
.zizi-onboarding-module-grid { display: grid; grid-template-columns: repeat(7, minmax(90px, 1fr)); gap: 8px; }
.zizi-onboarding-module-card { display: grid; gap: 3px; min-height: 96px; padding: 12px; border: 1px solid #dbeafe; border-radius: 13px; background: #f8fbff; color: inherit; font: inherit; text-align: left; cursor: pointer; appearance: none; transition: transform .15s ease, border-color .15s ease, box-shadow .15s ease; }
.zizi-onboarding-module-card:hover, .zizi-onboarding-module-card:focus-visible { border-color: #4f46e5; box-shadow: 0 8px 20px rgba(79,70,229,.14); outline: none; transform: translateY(-2px); }
.zizi-onboarding-module-grid span { font-size: 21px; }
.zizi-onboarding-module-grid small { color: #64748b; }
.zizi-onboarding-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
.zizi-onboarding-seller { margin-top: 18px; padding: 16px; border: 1px solid #a7f3d0; border-radius: 14px; background: #ecfdf5; }
.zizi-onboarding-seller [data-zizi-seller-wizard] { margin-top: 10px; }
.zizi-onboarding-flow { display: flex; align-items: stretch; gap: 3px; margin: 18px 0; overflow-x: auto; padding: 4px 2px 12px; scrollbar-width: thin; }
.zizi-onboarding-flow-node { display: grid; flex: 1 1 100px; gap: 5px; min-width: 100px; min-height: 132px; padding: 12px 9px; border: 1px solid #bfdbfe; border-radius: 14px; background: linear-gradient(180deg, #f8fbff, #eff6ff); color: #172033; cursor: pointer; font: inherit; text-align: left; transition: transform .15s ease, border-color .15s ease, box-shadow .15s ease; }
.zizi-onboarding-flow-node:hover, .zizi-onboarding-flow-node:focus-visible { border-color: #4f46e5; box-shadow: 0 8px 20px rgba(79,70,229,.14); outline: none; transform: translateY(-2px); }
.zizi-onboarding-flow-node > span { font-size: 25px; }
.zizi-onboarding-flow-node > b { font-size: 13px; line-height: 1.25; }
.zizi-onboarding-flow-node > small { color: #64748b; font-size: 11px; line-height: 1.35; }
.zizi-onboarding-flow-arrow { display: grid; flex: 0 0 8px; place-items: center; color: #4f46e5; font-size: 16px; font-weight: 900; }
.zizi-onboarding-flow-ia { display: flex; gap: 12px; align-items: center; margin: -2px 0 16px; padding: 12px 14px; border: 1px dashed #818cf8; border-radius: 12px; background: #eef2ff; }
.zizi-onboarding-flow-ia > span { font-size: 26px; }
.zizi-onboarding-flow-ia div { display: grid; gap: 2px; }
.zizi-onboarding-flow-ia small { color: #64748b; }
.zizi-onboarding-lesson-title { display: flex; gap: 12px; align-items: center; }
.zizi-onboarding-lesson-title > span { font-size: 32px; }
.zizi-onboarding-back { margin-top: 14px; border: 0; background: transparent; color: #4f46e5; cursor: pointer; font-weight: 700; }
.zizi-onboarding-help-steps { display: grid; gap: 7px; margin: 12px 0; }
.zizi-onboarding-help-steps .btn { text-align: left; }
@media (max-width: 760px) {
  .bubble.zizi-onboarding-bubble { width: calc(100% - 20px); max-width: calc(100% - 20px); margin: 10px; }
  .zizi-onboarding-module-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .zizi-onboarding-module-card { min-height: 76px; }
  .zizi-onboarding-flow { display: grid; grid-template-columns: minmax(0, 1fr); overflow: visible; }
  .zizi-onboarding-flow-node { display: grid; grid-template-columns: auto 1fr; width: 100%; min-height: 0; }
  .zizi-onboarding-flow-node > span { grid-row: 1 / 3; }
  .zizi-onboarding-flow-arrow { min-height: 18px; transform: rotate(90deg); }
  .zizi-onboarding-actions { align-items: stretch; flex-direction: column; }
  .zizi-onboarding-actions .btn { width: 100%; }
}
.bubble.zizi-flow-grid-bubble .chat-table th {
  white-space: nowrap;
}
.bubble.zizi-flow-grid-bubble .chat-table td {
  vertical-align: top;
}
.bubble.zizi-flow-grid-bubble input,
.bubble.zizi-flow-grid-bubble select {
  min-height: 30px;
  font-size: 12px;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
}
.chat-embedded-official-form {
  display: block;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
}
/*
  ZIZI-FEATURE-NOVA-CAMPANHA-DO-MSG-ABRE-NO-CHAT-20260918
  #campanhaMsgForm reaproveita .form, que e "grid-template-columns: 1fr 1fr"
  (sem minmax(0,...)): cada trilha cresce ate o conteudo, exatamente o mesmo
  defeito ja corrigido para .pedido-compra-form. Na gaveta lateral (~420px)
  isso estoura o formulario para a direita. Dentro do cartao do chat a
  largura disponivel e a do balao (bem menor ainda em 360px), entao aqui o
  formulario vira uma coluna so; a gaveta lateral nao e afetada porque a
  regra e escopada a `.chat-cadastro-card`.
*/
.chat-cadastro-card #campanhaMsgForm {
  grid-template-columns: minmax(0, 1fr);
}
.composer {
  position: sticky;
  bottom: 0;
  left: 0;
  right: 0;
  flex: 0 0 auto;
  margin-top: auto;
}
@media (max-width: 1180px) {
  .chat-shell.card {
    height: calc(100dvh - var(--topbar-h) - var(--stories-h) - 22px - var(--zizi-faixa-h, 0px));
  }
}
@media (max-width: 980px) {
  .layout.app-shell {
    min-height: calc(100dvh - var(--topbar-h) - 8px);
  }
  .chat-shell.card {
    min-height: 500px;
    height: calc(100dvh - var(--topbar-h) - var(--stories-h) - 18px - var(--zizi-faixa-h, 0px));
  }
}
@media (max-height: 860px) {
  .chat-shell.card {
    min-height: 460px;
  }
}

/*
 * Chat do telefone. Este bloco vem DEPOIS das alturas acima de proposito: sao
 * elas que precisam ser vencidas, e vencer por ordem de cascata e mais honesto
 * do que espalhar !important.
 *
 * O defeito medido em 360x780 (aparelho do dono, 2026-09-14): o cartao do chat
 * carregava `min-height: 460px` enquanto sobravam 445px reais de tela. Nao
 * cabia — a pagina inteira passava a rolar e a caixa de digitar terminava
 * 120px ABAIXO da dobra, atras da barra do Android. O lojista abria o Zizi e
 * nao via onde escrever.
 *
 * Correcao: no telefone o chat nao tem altura minima nenhuma, ele ocupa o que
 * sobra da tela — e o que sobra agora e muito mais, porque a barra caiu de
 * 133px para uma faixa e as historias ficaram compactas. O cartao tambem perde
 * a margem lateral: chat de telefone e de borda a borda, como todo aplicativo
 * de conversa.
 */
@media (max-width: 768px) {
  /*
   * A altura do chat parava de ser calculo e virava sobra: o corpo empilha
   * barra, historias e chat, e o chat fica com o que sobrar da tela. Antes isso
   * dependia de `calc(100dvh - var(--topbar-h) - var(--stories-h))`, com as
   * duas variaveis escritas por JavaScript — e quando o JS demorava, ou a barra
   * mudava de altura, o calculo mentia por dezenas de pixels. Sobra nao mente.
   */
  body {
    display: flex;
    flex-direction: column;
    min-height: 100dvh;
    /* faixa fixa do rodape (assinatura): o JS so escreve --zizi-faixa-h; vale 0px sem faixa */
    padding-bottom: var(--zizi-faixa-h, 0px);
  }
  .topbar {
    flex: 0 0 auto;
  }
  .layout.app-shell {
    padding: 0;
    gap: 0;
    min-height: 0;
    height: auto;
    flex: 1 1 auto;
    max-width: 100vw;
  }
  /*
   * Historias compactas: o anel de 62px mais duas linhas de legenda custavam
   * 174px de altura. O aro menor e a legenda de baixo escondida devolvem ~90px
   * para a conversa, sem tirar nenhum atalho do lojista.
   */
  .stories {
    gap: 10px;
    padding: 10px 12px 8px 12px;
    min-height: 0;
    scrollbar-width: none;
  }
  .stories::-webkit-scrollbar {
    display: none;
  }
  .story {
    min-width: 64px;
  }
  .story .ring {
    width: 46px;
    height: 46px;
    margin-bottom: 4px;
    border-width: 2px;
  }
  .story b {
    font-size: 11px;
  }
  .story small {
    display: none;
  }
  .chat-shell.card {
    flex: 1 1 auto;
    height: auto;
    min-height: 0;
    border-radius: 0;
    border-left: 0;
    border-right: 0;
  }
  .chat-area {
    border-radius: 0;
  }
  .bubble {
    margin: 10px 12px;
    max-width: calc(100% - 24px);
  }
  /*
   * Com o composer em uma linha so, os itens voltam a ser centralizados. O
   * recheio de baixo respeita a faixa do sistema (barra de gestos do telefone),
   * senao a caixa encosta nela.
   */
  .composer {
    align-items: center;
    padding: 10px 12px max(10px, env(safe-area-inset-bottom, 0px)) 12px;
  }
}

.ingest-review-modal {
  position: fixed;
  inset: 0;
  display: none;
  align-items: center;
  justify-content: center;
  background: rgba(11, 18, 32, 0.45);
  z-index: 10020;
  padding: 16px;
}
.ingest-review-modal.open {
  display: flex;
}
.ingest-review-card {
  width: min(860px, 100%);
  max-height: min(88dvh, 900px);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  background: var(--card, #fff);
  border-radius: 18px;
  box-shadow: 0 18px 60px rgba(0, 0, 0, 0.25);
}
.ingest-review-head,
.ingest-review-actions {
  padding: 16px 18px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.ingest-review-title {
  font-weight: 800;
  font-size: 18px;
}
.ingest-review-sub {
  color: var(--muted, #64748b);
  font-size: 13px;
}
.ingest-review-body {
  padding: 0 18px 18px;
  overflow: auto;
}
.ingest-review-summary pre,
.ingest-review-section pre {
  white-space: pre-wrap;
  background: #f8fafc;
  border: 1px solid rgba(15, 23, 42, 0.08);
  border-radius: 12px;
  padding: 12px;
  font-size: 13px;
}
.ingest-review-section {
  margin-top: 14px;
}
.ingest-review-section-title {
  font-weight: 800;
  margin-bottom: 8px;
}
.ingest-review-section ul {
  margin: 0;
  padding-left: 18px;
}
.ingest-review-section li {
  margin: 6px 0;
}

/* ===== FASE 1: Confirmação Sequencial de Lançamentos ===== */

/* Card de opções de importação */
.import-options-card {
  border: 2px solid var(--brand);
  border-radius: 12px;
  padding: 16px;
  background: linear-gradient(135deg, #f0f9ff, #eff6ff);
  margin: 0;
}

.import-options-header {
  font-size: 15px;
  font-weight: 700;
  color: var(--text);
  margin-bottom: 12px;
}

.import-options-body {
  font-size: 14px;
  color: var(--text);
  margin-bottom: 14px;
}

.import-options-buttons {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.import-options-buttons button {
  padding: 10px 14px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: white;
  color: var(--text);
  cursor: pointer;
  font-size: 14px;
  font-weight: 600;
  transition: all 0.2s ease;
}

.import-options-buttons button:hover:not(:disabled) {
  background: var(--brand);
  color: white;
  border-color: var(--brand);
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(37, 99, 235, 0.3);
}

.import-options-buttons button:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* Card de confirmação de lançamento */
.launch-confirmation-card {
  border: 2px solid #f59e0b;
  border-radius: 12px;
  padding: 14px;
  background: linear-gradient(135deg, #fffbf0, #fef3c7);
  margin: 0;
}

.launch-card-header {
  font-size: 15px;
  font-weight: 700;
  color: var(--text);
  margin-bottom: 10px;
  padding-bottom: 8px;
  border-bottom: 1px solid rgba(245, 158, 11, 0.3);
}

.launch-card-body {
  font-size: 13px;
  color: var(--text);
  margin-bottom: 12px;
  line-height: 1.5;
}

.launch-card-body p {
  margin: 6px 0;
}

.launch-card-body code {
  background: rgba(0, 0, 0, 0.05);
  padding: 2px 6px;
  border-radius: 4px;
  font-family: monospace;
  font-size: 12px;
}

.launch-card-actions {
  display: flex;
  gap: 8px;
}

.launch-card-actions button {
  flex: 1;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: white;
  color: var(--text);
  cursor: pointer;
  font-size: 13px;
  font-weight: 600;
  transition: all 0.2s ease;
}

.btn-confirm-launch {
  background: var(--ok);
  color: white;
  border-color: var(--ok);
}

.btn-confirm-launch:hover:not(:disabled) {
  opacity: 0.9;
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(22, 163, 74, 0.3);
}

.btn-cancel-launch {
  background: #ef4444;
  color: white;
  border-color: #ef4444;
}

.btn-cancel-launch:hover:not(:disabled) {
  opacity: 0.9;
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(239, 68, 68, 0.3);
}

.launch-card-actions button:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* NOVO: Padrão de abas com estilo de stories (padronização visual) — uma linha rolante, igual stories do Instagram */
.tabs.story-tabs {
  display: flex;
  flex-wrap: nowrap;
  gap: 10px;
  padding: 12px 14px;
  border-bottom: 1px solid var(--line);
  background: #f8f9fb;
  overflow-x: auto;
  /* RN-FIN-011 (ZIZI-CORRECAO-LISTA-FINANCEIRA-AINDA-MOSTRA-MANUAL-E-ABAS-CORTADAS-20260926):
     "overflow-y: hidden" cortava o topo do icone no celular assim que o
     rotulo/subrotulo passou a quebrar linha (regra abaixo, @media
     max-width:700px) e a aba ficou mais alta que antes. So o eixo X precisa
     de overflow para a rolagem tipo stories; o Y fica visivel. */
  overflow-y: visible;
  /* RN-FIN-011 (ZIZI-CORRECAO-LISTA-FINANCEIRA-AINDA-MOSTRA-MANUAL-E-ABAS-CORTADAS, 23/10/2026):
     a gaveta (.drawer) e uma coluna flex e a faixa de abas e filha dela. Como a
     faixa tem overflow-x:auto, o minimo automatico dela vira 0 e o flex a
     ENCOLHE quando o corpo da gaveta e alto: no celular de 375 px a faixa de
     68 px ficava com 45 px (Receber 51, Pagar 61 em producao) e cortava o icone
     das abas. Medido com o CSS real na gaveta de 375x812. A faixa nao encolhe. */
  flex-shrink: 0;
  /* -webkit-overflow-scrolling: touch;  Não suportado por Chrome, Edge, Firefox. Mantido apenas para iOS Safari. */
  /* -webkit-overflow-scrolling já está aplicado para iOS. Não há alternativa para outros browsers. */
}
.tabs.story-tabs::-webkit-scrollbar {
  height: 6px;
}
.tabs.story-tabs::-webkit-scrollbar-thumb {
  background: #c7d2fe;
  border-radius: 3px;
}

.tabs.story-tabs .tab {
  border: none;
  background: #fff;
  border-radius: 14px;
  padding: 8px 10px;
  font-weight: 650;
  cursor: pointer;
  color: var(--muted);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  min-width: 70px;
  flex-shrink: 0;
  text-align: center;
  transition: all 0.2s ease;
  border: 1px solid #e0e7ff;
  box-shadow: 0 4px 8px rgba(15, 23, 42, 0.04);
}

.tabs.story-tabs .tab:hover {
  border-color: #c7d2fe;
  box-shadow: 0 6px 12px rgba(15, 23, 42, 0.08);
}

.tabs.story-tabs .tab.active {
  background: #eef2ff;
  border-color: #2563eb;
  color: #1d4ed8;
  box-shadow: 0 6px 16px rgba(37, 99, 235, 0.15);
}

.tabs.story-tabs .tab .tab-icon {
  font-size: 20px;
  display: block;
}

.tabs.story-tabs .tab .tab-label {
  font-size: 11px;
  font-weight: 700;
  display: block;
}

.tabs.story-tabs .tab .tab-sublabel {
  font-size: 9px;
  color: #94a3b8;
  display: block;
  font-weight: 500;
}

/* Chat bloqueado durante fluxo sequencial */
.chat-input-wrapper.blocked {
  opacity: 0.6;
  pointer-events: none;
}

.chat-input-wrapper.blocked::after {
  content: "Confirmação de lançamentos em andamento...";
  position: absolute;
  bottom: -24px;
  left: 0;
  font-size: 12px;
  color: #f59e0b;
  font-weight: 600;
}

#chatInput:disabled {
  background: #f3f4f6;
  cursor: not-allowed;
}

.launch-bubble {
  animation: slideIn 0.3s ease-out;
}

@keyframes slideIn {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.finance-report-shell {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin: 8px 0 2px;
}

/*
 * Ordem do dono em 2026-09-16: a pagar em vermelho claro, a receber em azul
 * claro, para diferenciar um do outro de relance.
 *
 * As duas regras declaram `color` junto do `background`. Superficie que troca o
 * fundo e nao troca a cor do texto some quando o tema muda -- ja aconteceu tres
 * vezes neste projeto na mesma noite. Aqui o texto e fixado escuro porque as
 * duas cores sao claras de proposito: o relatorio continua sendo uma planilha
 * para ler, nao um aviso.
 */
.finance-report-shell.finance-report-pagar,
.finance-report-shell.finance-report-receber {
  padding: 10px;
  border-radius: 12px;
  color: #0f172a;
}
.finance-report-shell.finance-report-pagar {
  background: #fef2f2;
  border: 1px solid #fecaca;
}
.finance-report-shell.finance-report-receber {
  background: #eff6ff;
  border: 1px solid #bfdbfe;
}
.finance-report-toolbar-card {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-start;
  gap: 12px;
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px solid #dbe5f0;
  background: linear-gradient(180deg, #ffffff 0%, #f8fbff 100%);
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.05);
}
.finance-report-sentido {
  width: 100%;
  display: flex;
  gap: 8px;
}
.finance-report-sentido-btn {
  flex: 1 1 0;
  min-width: 0;
  padding-left: 6px;
  padding-right: 6px;
  min-height: 44px;
}
.finance-report-sentido-btn:focus-visible,
.finance-empty-shortcuts .finance-report-action-btn:focus-visible {
  outline: 3px solid #1d4ed8;
  outline-offset: 2px;
}
.finance-fluxo { margin-top: 8px; }
.finance-fluxo-table th[scope="row"] { text-align: left; }
/* celular (375px): os rotulos quebram linha em vez de empurrar os valores para fora da tela */
.finance-fluxo-table th,
.finance-fluxo-table td { white-space: normal; overflow-wrap: anywhere; }
.finance-fluxo-table th[scope="row"] { width: 40%; }
.finance-empty-shortcuts {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 8px;
}
/* DEC-20261013-04-e32b: botao de quitar aguardando o sinal pode_quitar do
   servidor fica escondido (falha segura); aparece quando o servidor diz que pode. */
[data-precisa-pode-quitar] {
  display: none !important;
}
.finance-report-para-quitar {
  width: 100%;
  display: grid;
  gap: 8px;
  justify-items: start;
}
.finance-report-batch-actions {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: flex-end;
}

.finance-report-batch-select-wrap,
.finance-report-select-all-wrap {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: #334155;
}

.finance-report-batch-select {
  min-height: 28px;
  border: 1px solid #cbd5e1;
  border-radius: 8px;
  background: #fff;
  color: #0f172a;
  padding: 0 8px;
}
.finance-report-action-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 10px;
  border-radius: 10px;
  border: 1px solid #cbd5e1;
  background: #fff;
  color: #0f172a;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.7);
}
.finance-report-action-btn:hover {
  background: #f8fafc;
}
.finance-report-action-btn:focus-visible {
  outline: 2px solid rgba(29, 78, 216, 0.35);
  outline-offset: 2px;
}
.finance-report-action-primary {
  border-color: #c7d2fe;
  background: linear-gradient(180deg, #ffffff 0%, #eef4ff 100%);
}
.finance-report-action-danger {
  border-color: #fecaca;
  background: linear-gradient(180deg, #ffffff 0%, #fff1f2 100%);
}
/* ZIZI-FEATURE-TELA-DO-ESTORNO-E-DA-ORIGEM-DO-DINHEIRO-20260916
   Estornar pagamento: ambar, para nao se confundir com Excluir (vermelho).
   Declara fundo, entao declara a cor do texto. */
.finance-report-action-estorno {
  border-color: #fcd34d;
  background: linear-gradient(180deg, #ffffff 0%, #fffbeb 100%);
  color: #92400e;
}
.finance-row-actions {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  justify-content: center;
}

.finance-row-select-cell {
  text-align: center;
  vertical-align: middle;
}

.finance-row-select {
  width: 16px;
  height: 16px;
  accent-color: #2563eb;
}

.finance-action-password-overlay {
  position: fixed;
  inset: 0;
  z-index: 4000;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(15, 23, 42, 0.45);
  backdrop-filter: blur(4px);
  padding: 16px;
}

.finance-action-password-modal {
  width: min(100%, 420px);
  background: #fff;
  /* O modal e branco em qualquer tema, entao a cor do texto tambem tem de ser
     declarada aqui: sem isso o titulo herda o claro do tema escuro e some
     justamente na confirmacao de uma acao destrutiva. */
  color: #0f172a;
  border: 1px solid #cbd5e1;
  border-radius: 18px;
  box-shadow: 0 24px 80px rgba(15, 23, 42, 0.25);
  padding: 18px;
  display: grid;
  gap: 10px;
}

.finance-action-password-modal p {
  margin: 0;
  color: #475569;
  font-size: 13px;
  line-height: 1.5;
}

/* ZIZI-CORRECAO-A-SENHA-DE-PRECO-ABAIXO-E-PEDIDA-NUM-AVISO-NO-PE-DA-TELA-20260922:
   `tel` e `text` entraram porque a autorizacao de preco abaixo pede o CELULAR
   de quem autoriza junto da senha. Com o seletor so em `password`, os dois
   campos da MESMA caixa saiam com desenhos diferentes. */
.finance-action-password-modal input[type="password"],
.finance-action-password-modal input[type="tel"],
.finance-action-password-modal input[type="text"] {
  width: 100%;
  min-height: 38px;
  border: 1px solid #cbd5e1;
  border-radius: 10px;
  padding: 0 12px;
  font-size: 14px;
  color: #0f172a;
  /* Caixa branca em qualquer tema, entao o fundo do campo tambem se declara:
     herdar o escuro do tema apagaria o que o lojista digita. */
  background: #fff;
}

/* Os dois botoes da caixa, alinhados a direita como no dialogo do Painel. */
.finance-action-password-acoes {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 4px;
}

/* Campos de origem do dinheiro e motivo do estorno no modal de senha. */
.finance-action-password-modal form {
  display: grid;
  gap: 10px;
}
.finance-action-field {
  display: grid;
  gap: 4px;
  font-size: 13px;
  font-weight: 600;
  color: #0f172a;
}
.finance-action-field select,
.finance-action-field input,
.finance-action-password-modal input[data-finance-password-input] {
  width: 100%;
  min-height: 38px;
  border: 1px solid #cbd5e1;
  border-radius: 10px;
  padding: 0 12px;
  font-size: 14px;
  background: #ffffff;
  color: #0f172a;
}
.finance-action-password-modal .finance-action-origem-aviso {
  background: #fffbeb;
  color: #92400e;
  border-radius: 10px;
  padding: 8px 10px;
}

.finance-action-password-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  flex-wrap: wrap;
}
.finance-report-toolbar-copy {
  min-width: 0;
}
.finance-report-toolbar-copy strong {
  display: block;
  font-size: 0.93rem;
  color: #0f172a;
}
.finance-report-toolbar-copy span {
  display: block;
  margin-top: 2px;
  font-size: 0.8rem;
  color: #64748b;
}
.finance-report-search-grid {
  display: grid;
  grid-template-columns: minmax(240px, 1.6fr) minmax(260px, 1fr) auto;
  gap: 10px;
  align-items: end;
  width: 100%;
}
.finance-report-search-main,
.finance-report-search-range,
.finance-report-search-actions {
  min-width: 0;
}
.finance-report-search-main input,
.finance-report-search-range input {
  width: 100%;
  box-sizing: border-box;
}
.finance-report-search-range {
  display: flex;
  gap: 8px;
}
.finance-report-search-range input {
  min-width: 140px;
}
.finance-report-search-actions {
  display: flex;
  justify-content: flex-end;
}
.finance-report-toggle {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  white-space: nowrap;
  font-size: 0.88rem;
  font-weight: 600;
  color: #0f172a;
  user-select: none;
}
.finance-report-toggle input {
  width: 16px;
  height: 16px;
  accent-color: #1d4ed8;
}
.finance-report-print-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 12px;
  border-radius: 10px;
  border: 1px solid #cbd5e1;
  background: #fff;
  color: #0f172a;
  font-weight: 700;
  cursor: pointer;
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.7);
}
.finance-report-print-btn:hover {
  background: #f8fafc;
}
.finance-report-print-btn:focus-visible {
  outline: 2px solid rgba(29, 78, 216, 0.35);
  outline-offset: 2px;
}
.finance-batch-select-cell {
  text-align: center;
  vertical-align: middle;
}
.finance-batch-select-cell input[type="checkbox"] {
  width: 16px;
  height: 16px;
  accent-color: #1d4ed8;
}
.finance-batch-row-unselected {
  opacity: 0.62;
}
.finance-batch-row-selected {
  background: rgba(29, 78, 216, 0.03);
}
@media (max-width: 900px) {
  .finance-report-search-grid {
    grid-template-columns: 1fr;
  }
  .finance-report-search-range {
    flex-direction: column;
  }
  .finance-report-search-actions {
    justify-content: flex-start;
  }
}
.chat-table-excel3d.chat-table tbody tr.finance-vencimento-total td {
  background: linear-gradient(180deg, #eef4fb 0%, #dfe8f3 100%);
  border-top: 2px solid #9fb2c8;
  font-weight: 700;
  color: #0f172a;
}
.chat-table-excel3d.chat-table tbody tr.finance-vencimento-total td:last-child {
  text-align: right;
}
.chat-table-excel3d.chat-table tbody tr.finance-vencimento-row td {
  border-top-color: #cbd5e1;
}
.cadastro-locator-controls {
  position: sticky;
  top: 0;
  z-index: 4;
  padding: 10px;
  border: 1px solid var(--line, #dbe3ef);
  border-radius: 12px;
  background: var(--panel, #fff);
  box-shadow: 0 6px 16px rgba(15, 23, 42, 0.06);
}

.cadastro-locator-heading {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  color: var(--text, #0f172a);
}

.cadastro-locator-heading small {
  color: var(--muted, #64748b);
  font-size: 11px;
  text-align: right;
}

.cadastro-locator-input {
  min-height: 38px;
  border: 1px solid #93b4f8 !important;
  border-radius: 10px;
  background: var(--panel, #fff);
}

.cadastro-locator-input:focus {
  outline: 3px solid rgba(37, 99, 235, 0.18);
  border-color: #2563eb !important;
}

.cadastro-locator-empty {
  padding: 8px 2px;
}

.chat-cadastro-locator,
.cadastro-custom-locator {
  display: grid;
  gap: 8px;
  margin: 10px 0 12px;
}

.chat-cadastro-card .chat-cadastro-locator [data-act="del"] {
  display: none !important;
}

.cadastro-entity-form {
  align-items: start;
}

.cadastro-form-section {
  display: flex;
  flex-direction: row;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin-top: 8px;
  padding: 10px 12px;
  border: 1px solid #dbeafe;
  border-left: 4px solid #2563eb;
  border-radius: 10px;
  background: #f8fbff;
  color: #1e3a5f;
}

.cadastro-form-section span {
  font-size: 14px;
  font-weight: 750;
}

.cadastro-form-section small {
  color: var(--muted, #64748b);
  font-size: 11px;
  text-align: right;
}

.chat-cadastro-card .cadastro-entity-form {
  width: 100%;
  min-width: 0;
}

@media (max-width: 700px) {
  /* RN-FIN-011: no celular a busca "Localizar conta a receber/pagar" ficava
     sticky sem espaco depois dela e sobrepunha visualmente o primeiro titulo
     da lista. Sem position que cubra: fluxo normal, com margem propria. */
  .cadastro-locator-controls {
    position: static;
    margin-bottom: 10px;
  }

  .cadastro-locator-heading {
    align-items: flex-start;
    flex-direction: column;
  }

  .cadastro-locator-heading small {
    text-align: left;
  }

  .cadastro-entity-form {
    grid-template-columns: minmax(0, 1fr);
  }

  .cadastro-entity-form > .field,
  .cadastro-entity-form > .actions {
    grid-column: 1 / -1;
    min-width: 0;
  }

  .cadastro-form-section {
    align-items: flex-start;
    flex-direction: column;
    gap: 3px;
  }

  .cadastro-form-section small {
    text-align: left;
  }

  /* RN-FIN-011: abas Resumo/Cadastro/Plano de Contas cortavam o subtitulo
     (visao geral, lancamentos, classificacao) na largura de celular; deixa
     quebrar linha em vez de cortar. */
  .tabs.story-tabs .tab {
    min-width: 84px;
  }

  .tabs.story-tabs .tab .tab-label,
  .tabs.story-tabs .tab .tab-sublabel {
    white-space: normal;
    overflow: visible;
    text-overflow: clip;
  }
}

/* ZIZI-BUSCA-F2: a tela de busca unica, aberta por F2 de qualquer lugar. */
.zizi-busca-f2 {
  position: fixed;
  inset: 0;
  z-index: 30050;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 8vh 16px 16px;
  padding: 8dvh 16px 16px;
  background: rgba(15, 23, 42, 0.45);
}

.zizi-busca-f2-card {
  width: min(720px, 100%);
  max-height: 76vh;
  max-height: 76dvh;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 14px;
  background: var(--card, #fff);
  color: var(--text, #0f172a);
  border: 1px solid var(--line, #e5e7eb);
  border-radius: var(--radius, 18px);
  box-shadow: var(--shadow, 0 10px 30px rgba(15, 23, 42, 0.08));
}

.zizi-busca-f2-topo {
  display: flex;
  gap: 8px;
  align-items: center;
}

.zizi-busca-f2-combo {
  flex: 0 0 auto;
  padding: 8px 10px;
  border: 1px solid var(--line, #e5e7eb);
  border-radius: 10px;
  background: var(--card, #fff);
  color: inherit;
  font-weight: 700;
}

.zizi-busca-f2-input {
  flex: 1 1 auto;
  min-width: 0;
  padding: 9px 12px;
  border: 1px solid var(--line, #e5e7eb);
  border-radius: 10px;
  background: var(--card, #fff);
  color: inherit;
  font-size: 15px;
}

.zizi-busca-f2-input:focus {
  outline: 2px solid var(--brand, #2563eb);
  outline-offset: 1px;
}

.zizi-busca-f2-lista {
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-height: 96px;
}

.zizi-busca-f2-item {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 8px;
  border: 1px solid transparent;
  border-radius: 12px;
  background: transparent;
  color: inherit;
  text-align: left;
  cursor: pointer;
}

.zizi-busca-f2-item.is-selected {
  border-color: var(--brand, #2563eb);
  background: rgba(37, 99, 235, 0.08);
}

.zizi-busca-f2-foto {
  flex: 0 0 auto;
  width: 44px;
  height: 44px;
  border-radius: 10px;
  object-fit: cover;
  border: 1px solid var(--line, #e5e7eb);
  background: var(--bg, #eef2f7);
}

.zizi-busca-f2-foto-vazia {
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  color: var(--muted, #6b7280);
}

.zizi-busca-f2-textos {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.zizi-busca-f2-textos b,
.zizi-busca-f2-textos small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.zizi-busca-f2-vazio,
.zizi-busca-f2-rodape {
  padding: 8px 4px;
  font-size: 12px;
}

/*
  O zoom do iPhone no campo de digitar.

  Medido em 2026-09-05, a 320px: a tela `/com` NAO rola na horizontal, mas tem
  seis campos digitaveis abaixo de 16px — `#chatInput` (15px), a busca de
  produto (14px) e os quatro filtros de classificacao (14px). O Safari do iOS da
  zoom sozinho ao focar qualquer campo abaixo de 16px, e o lojista perde a tela
  inteira no meio de uma conversa ou de uma busca. Nao ha jeito de desligar esse
  zoom sem quebrar a acessibilidade: o unico conserto e o campo ter 16px.

  Vale so no celular de proposito. No desktop a fonte menor cabe mais texto na
  mesma caixa, e la o zoom nao existe.
*/
@media (max-width: 640px) {
  #financeForm,
  #financeForm [data-finance-parcel-config] > .form { grid-template-columns: minmax(0, 1fr); }
  .financeiro-movel-header { align-items: stretch; flex-direction: column; }
  .financeiro-movel-header > .financeiro-movel-add-wrap > .btn { width: 100%; }
  .financeiro-movel-add-menu { left: 0; right: auto; width: 100%; box-sizing: border-box; }
  .financeiro-movel-cards { grid-template-columns: 1fr; }
  .financeiro-movel { top: 72px; right: 12px; width: min(420px, calc(100vw - 24px)); box-sizing: border-box; display: flex; flex-direction: column; max-height: calc(100vh - 84px); max-height: calc(100dvh - 84px); }
  .financeiro-movel-corpo { display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; min-height: 0; overflow-y: auto; overscroll-behavior: contain; }
  .financeiro-movel.is-expanded { width: calc(100vw - 24px); }
  .zizi-app input,
  .zizi-app select,
  .zizi-app textarea,
  body input[type="text"],
  body input[type="search"],
  body input[type="number"],
  body input[type="tel"],
  body input[type="email"],
  body input[type="password"],
  body input:not([type]),
  body select,
  body textarea {
    font-size: 16px;
  }
}

/*
  Os botoes de periodo do chat (`/com`).

  ZIZI-CHAT-BOTOES-DE-PERIODO-20260906. O dono perguntou "algum lancamento", a
  resposta veio sobre hoje sem dizer que era hoje, e ele escreveu: "entao vc
  deveria mostrar os botoes". A barra fica acima do composer, sempre visivel.

  **Cor fixa, e de proposito.** A `.chat-area` NAO troca de cor no tema escuro:
  o tema so repinta `.chat-area` no `claro`, entao o fundo creme `#f3efe7` vale
  nos dois. Chip que puxasse `--zizi-legacy-grid-bg` ficaria escuro sobre creme.
  A cor aqui e a do app legado, a mesma de `.suggested-action-btn` e de
  `.composer-attachment-chip`, que vivem nesta mesma superficie. Cada regra
  declara FUNDO E COR juntos: superficie que declara so o fundo some no tema
  oposto, e isso ja custou tres consertos numa noite so neste projeto.
*/
.chat-period-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  flex: 0 0 auto;
  padding: 8px 12px 0;
  background: transparent;
  color: #0f172a;
}
.chat-period-chip {
  border: 1px solid var(--line, #e5e7eb);
  background: #ffffff;
  color: #0f172a;
  border-radius: 999px;
  padding: 8px 14px;
  min-height: 38px;
  font-size: 13px;
  font-weight: 700;
  line-height: 1.2;
  cursor: pointer;
  white-space: nowrap;
}
.chat-period-chip:hover {
  background: #f1f5f9;
  border-color: #cbd5e1;
  color: #0f172a;
}
.chat-period-chip:active {
  background: #e2e8f0;
  color: #0f172a;
}
.chat-period-chip:focus-visible {
  outline: 2px solid var(--brand, #2563eb);
  outline-offset: 2px;
}
@media (max-width: 640px) {
  .chat-period-bar {
    padding: 8px 10px 0;
  }
  /* 44px e o alvo de toque usado no resto do projeto para tela de celular. */
  .chat-period-chip {
    min-height: 44px;
    font-size: 14px;
  }
}

/*
 * ZIZI-FEATURE-TELA-DE-PLANOS-SEPARADA-POR-MODULO-20260906
 *
 * A tela cheia de planos e renovacao. Ela nasceu em 2026-09-06 porque o dono
 * olhou a gaveta de 420px com os 27 planos empilhados e disse que estava
 * "embolado"; o que ele pediu foi a tela separada por produto.
 *
 * Toda cor sai dos tokens `--zizi-legacy-grid-*`, que o app ja troca entre
 * claro e escuro. O fallback de cada `var()` e o valor do TEMA CLARO, porque e
 * ele que o `index.css` assume no resto do arquivo: superficie sem cor de texto
 * declarada na mesma regra some no tema oposto, e isso ja custou tres consertos
 * neste projeto.
 */
.zplanos {
  position: fixed;
  inset: 0;
  z-index: 30080;
  display: flex;
  flex-direction: column;
  background: var(--zizi-legacy-grid-bg, #ffffff);
  color: var(--zizi-legacy-grid-text, #0f172a);
  overflow: hidden;
}
.zplanos__topo {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  padding: 20px 24px;
  border-bottom: 1px solid var(--zizi-legacy-grid-border, #cbd5e1);
  background: var(--zizi-legacy-grid-head-bg, #dbeafe);
  color: var(--zizi-legacy-grid-head-fg, #0f172a);
}
.zplanos__titulo {
  margin: 0;
  font-size: 22px;
  font-weight: 800;
  letter-spacing: -0.01em;
}
.zplanos__linhafina {
  margin: 6px 0 0;
  max-width: 70ch;
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--zizi-legacy-grid-muted, #475569);
}
.zplanos__fechar {
  flex: 0 0 auto;
  border: 1px solid var(--zizi-legacy-grid-border, #cbd5e1);
  background: var(--zizi-legacy-grid-surface, #f8fafc);
  color: var(--zizi-legacy-grid-text, #0f172a);
  border-radius: 12px;
  padding: 10px 18px;
  font-weight: 700;
  cursor: pointer;
}
.zplanos__fechar:hover {
  background: var(--zizi-legacy-grid-row-soft, #eef4ff);
}
.zplanos__fechar:focus-visible {
  outline: 2px solid var(--zizi-legacy-grid-accent, #1d4ed8);
  outline-offset: 2px;
}
.zplanos__corpo {
  flex: 1 1 auto;
  overflow: auto;
  padding: 22px 24px 40px;
  display: flex;
  flex-direction: column;
  gap: 26px;
}
.zplanos__vazio {
  margin: 0;
  color: var(--zizi-legacy-grid-muted, #475569);
}

/* ---- Plano Full ---- */
.zplanos__full {
  border: 1px solid var(--zizi-legacy-grid-border, #cbd5e1);
  border-radius: 18px;
  padding: 20px;
  background: var(--zizi-legacy-grid-row-soft, #eef4ff);
  color: var(--zizi-legacy-grid-text, #0f172a);
}
.zplanos__selo {
  display: inline-block;
  padding: 3px 10px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  background: var(--zizi-legacy-grid-chip-bg, #eff6ff);
  color: var(--zizi-legacy-grid-chip-fg, #1e3a8a);
}
.zplanos__fulltitulo {
  margin: 10px 0 4px;
  font-size: 18px;
  font-weight: 800;
}
.zplanos__fulltexto {
  margin: 0;
  max-width: 78ch;
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--zizi-legacy-grid-muted, #475569);
}
.zplanos__fullgrade,
.zplanos__grade {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 14px;
  margin-top: 16px;
}

/* ---- Seletor de modulo ---- */
.zplanos__secaotitulo {
  margin: 0 0 12px;
  font-size: 16px;
  font-weight: 800;
}
.zplanos__abas {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.zplanos__aba {
  border: 1px solid var(--zizi-legacy-grid-border, #cbd5e1);
  background: var(--zizi-legacy-grid-surface, #f8fafc);
  color: var(--zizi-legacy-grid-text, #0f172a);
  border-radius: 999px;
  padding: 9px 16px;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
}
.zplanos__aba:hover {
  border-color: var(--zizi-legacy-grid-accent, #1d4ed8);
}
.zplanos__aba:focus-visible {
  outline: 2px solid var(--zizi-legacy-grid-accent, #1d4ed8);
  outline-offset: 2px;
}
.zplanos__aba--ativa {
  background: var(--zizi-legacy-grid-chip-bg, #eff6ff);
  color: var(--zizi-legacy-grid-chip-fg, #1e3a8a);
  border-color: var(--zizi-legacy-grid-accent, #1d4ed8);
}
.zplanos__abamarca {
  margin-left: 6px;
  color: var(--zizi-legacy-grid-accent, #1d4ed8);
  font-weight: 900;
}
.zplanos__painel {
  margin-top: 18px;
}
.zplanos__chamada h4 {
  margin: 0;
  font-size: 17px;
  font-weight: 800;
}
.zplanos__chamada p {
  margin: 5px 0 0;
  max-width: 78ch;
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--zizi-legacy-grid-muted, #475569);
}
.zplanos__voltei {
  margin-top: 8px !important;
  display: inline-block;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 700;
  background: var(--zizi-legacy-grid-chip-bg, #eff6ff);
  color: var(--zizi-legacy-grid-chip-fg, #1e3a8a) !important;
}

/* ---- Cartao de nivel ---- */
.zplanos__cartao {
  display: flex;
  flex-direction: column;
  gap: 8px;
  border: 1px solid var(--zizi-legacy-grid-border, #cbd5e1);
  border-radius: 16px;
  padding: 18px;
  background: var(--zizi-legacy-grid-surface, #f8fafc);
  color: var(--zizi-legacy-grid-text, #0f172a);
}
.zplanos__cartao--full {
  background: var(--zizi-legacy-grid-bg, #ffffff);
}
.zplanos__nivel {
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--zizi-legacy-grid-muted, #475569);
}
.zplanos__preco {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 6px;
}
.zplanos__preco strong {
  font-size: 27px;
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -0.02em;
}
.zplanos__periodo,
.zplanos__negociado {
  font-size: 13px;
  font-weight: 600;
  color: var(--zizi-legacy-grid-muted, #475569);
}
.zplanos__negociado {
  font-size: 22px;
  font-weight: 800;
  color: var(--zizi-legacy-grid-text, #0f172a);
}
.zplanos__capacidade {
  font-size: 13.5px;
  font-weight: 700;
  color: var(--zizi-legacy-grid-accent, #1d4ed8);
}
.zplanos__economia {
  font-size: 13px;
  font-weight: 700;
  padding: 6px 10px;
  border-radius: 10px;
  background: var(--zizi-legacy-grid-chip-bg, #eff6ff);
  color: var(--zizi-legacy-grid-chip-fg, #1e3a8a);
}
.zplanos__descricao {
  margin: 0;
  font-size: 13px;
  line-height: 1.5;
  color: var(--zizi-legacy-grid-muted, #475569);
}
.zplanos__acao {
  margin-top: auto;
  padding-top: 8px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.zplanos__assinar {
  border: 0;
  border-radius: 12px;
  padding: 11px 18px;
  font-size: 14px;
  font-weight: 800;
  cursor: pointer;
  background: var(--zizi-legacy-grid-accent, #1d4ed8);
  color: #ffffff;
}
.zplanos__assinar:hover:not(:disabled) {
  filter: brightness(1.06);
}
.zplanos__assinar:disabled {
  cursor: not-allowed;
  opacity: 0.6;
}
.zplanos__assinar:focus-visible {
  outline: 2px solid var(--zizi-legacy-grid-text, #0f172a);
  outline-offset: 2px;
}
.zplanos__semacao,
.zplanos__recado {
  font-size: 12.5px;
  font-weight: 700;
  color: var(--zizi-legacy-grid-muted, #475569);
}

/* ---- Proposta ---- */
.zplanos__proposta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  border: 1px dashed var(--zizi-legacy-grid-border, #cbd5e1);
  border-radius: 16px;
  padding: 18px;
  color: var(--zizi-legacy-grid-text, #0f172a);
}
.zplanos__proposta p {
  margin: 5px 0 0;
  max-width: 68ch;
  font-size: 13px;
  line-height: 1.5;
  color: var(--zizi-legacy-grid-muted, #475569);
}
.zplanos__propostaacao {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

@media (max-width: 640px) {
  .zplanos__topo {
    padding: 16px;
  }
  .zplanos__corpo {
    padding: 16px 16px 32px;
    gap: 20px;
  }
  .zplanos__fullgrade,
  .zplanos__grade {
    grid-template-columns: 1fr;
  }
  /* 44px e o alvo de toque usado no resto do projeto para tela de celular. */
  .zplanos__aba,
  .zplanos__assinar,
  .zplanos__fechar {
    min-height: 44px;
  }
}

/*
 * ZIZI-FEATURE-A-ASSINATURA-ATUAL-APARECE-NA-TELA-DE-PLANOS-20260906
 *
 * A faixa "sua assinatura hoje", no topo da tela de planos.
 *
 * Os dois tons de estado nao existem na paleta `--zizi-legacy-grid-*`, que so
 * tem superficie, texto e acento. Entao nascem aqui, e nascem NOS DOIS TEMAS:
 * verde de tema claro sobre fundo escuro fica ilegivel, e foi assim que este
 * projeto ja perdeu texto tres vezes. O valor no `:root` e o do tema claro,
 * que e o que vale quando o atributo de tema ainda nao foi escrito.
 */
:root {
  --zplanos-ok-bg: #dcfce7;
  --zplanos-ok-fg: #166534;
  --zplanos-alerta-bg: #fee2e2;
  --zplanos-alerta-fg: #991b1b;
}
html[data-zizi-user-theme="escuro"] {
  --zplanos-ok-bg: #14532d;
  --zplanos-ok-fg: #bbf7d0;
  --zplanos-alerta-bg: #7f1d1d;
  --zplanos-alerta-fg: #fecaca;
}
.zplanos__atual {
  border: 1px solid var(--zizi-legacy-grid-border, #cbd5e1);
  border-radius: 16px;
  padding: 16px 18px;
  background: var(--zizi-legacy-grid-surface, #f8fafc);
  color: var(--zizi-legacy-grid-text, #0f172a);
}
.zplanos__atualcabeca {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
}
.zplanos__chip {
  display: inline-block;
  padding: 4px 11px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.02em;
}
.zplanos__chip--ok {
  background: var(--zplanos-ok-bg);
  color: var(--zplanos-ok-fg);
}
.zplanos__chip--alerta {
  background: var(--zplanos-alerta-bg);
  color: var(--zplanos-alerta-fg);
}
.zplanos__atuallinha,
.zplanos__atualvazio {
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--zizi-legacy-grid-muted, #475569);
}
.zplanos__atualvazio {
  margin: 10px 0 0;
}
.zplanos__atualtitulo {
  margin-top: 14px;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--zizi-legacy-grid-muted, #475569);
}
.zplanos__meus {
  list-style: none;
  margin: 8px 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.zplanos__meuitem {
  display: flex;
  align-items: baseline;
  gap: 8px;
  padding: 8px 12px;
  border: 1px solid var(--zizi-legacy-grid-border, #cbd5e1);
  border-radius: 12px;
  background: var(--zizi-legacy-grid-row-soft, #eef4ff);
  color: var(--zizi-legacy-grid-text, #0f172a);
  font-size: 13px;
}
.zplanos__meuitem--vencido {
  border-style: dashed;
  opacity: 0.75;
}
.zplanos__meunivel {
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 800;
  background: var(--zizi-legacy-grid-chip-bg, #eff6ff);
  color: var(--zizi-legacy-grid-chip-fg, #1e3a8a);
}
.zplanos__meudata {
  font-size: 12px;
  color: var(--zizi-legacy-grid-muted, #475569);
}
/* O cartao do plano que ele ja tem: destacado sem virar outro produto. */
.zplanos__cartao--meu {
  border-color: var(--zizi-legacy-grid-accent, #1d4ed8);
  box-shadow: 0 0 0 1px var(--zizi-legacy-grid-accent, #1d4ed8) inset;
}

/*
 * ZIZI-FEATURE-ASSINATURA-MENSAL-AUTOMATICA-20260906
 *
 * O e-mail da cobranca e o botao de desligar o debito automatico.
 *
 * O campo nasce escondido e so aparece no clique em Assinar: pedir e-mail antes
 * de o lojista escolher o plano e cobrar dado por uma decisao que ele ainda nao
 * tomou, e um formulario visivel em cada um dos tres cartoes destruiria a
 * comparacao lado a lado, que e o motivo de esta tela existir.
 */
.zplanos__email {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
/*
 * Sem esta linha o campo aparece nos tres cartoes antes de qualquer clique.
 * `display: flex` numa classe VENCE a regra `[hidden] { display: none }` que o
 * navegador aplica, entao `el.hidden = true` deixa de esconder. Medido em
 * 2026-09-06, na primeira vez que a tela subiu com o campo de e-mail.
 */
.zplanos__email[hidden] {
  display: none;
}
.zplanos__emailrotulo {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 12px;
  font-weight: 700;
  color: var(--zizi-legacy-grid-muted, #475569);
}
.zplanos__emailcampo {
  border: 1px solid var(--zizi-legacy-grid-border, #cbd5e1);
  border-radius: 10px;
  padding: 10px 12px;
  font-size: 14px;
  font-weight: 500;
  background: var(--zizi-legacy-grid-bg, #ffffff);
  color: var(--zizi-legacy-grid-text, #0f172a);
}
.zplanos__emailcampo:focus-visible {
  outline: 2px solid var(--zizi-legacy-grid-accent, #1d4ed8);
  outline-offset: 1px;
}
.zplanos__confirmar {
  border: 0;
  border-radius: 12px;
  padding: 11px 18px;
  font-size: 14px;
  font-weight: 800;
  cursor: pointer;
  background: var(--zizi-legacy-grid-accent, #1d4ed8);
  color: #ffffff;
}
.zplanos__confirmar:disabled {
  cursor: not-allowed;
  opacity: 0.6;
}
/*
 * Cancelar nao e um botao vermelho gritando: RN-COBRANCA-006 manda que cancelar
 * seja tao facil quanto assinar, e nao que seja assustador. Ele fica discreto e
 * visivel, que e o oposto tanto de escondido quanto de alarmante.
 */
.zplanos__cancelar {
  align-self: flex-start;
  border: 1px solid var(--zizi-legacy-grid-border, #cbd5e1);
  background: transparent;
  color: var(--zizi-legacy-grid-muted, #475569);
  border-radius: 10px;
  padding: 8px 12px;
  font-size: 12.5px;
  font-weight: 700;
  cursor: pointer;
}
.zplanos__cancelar:hover:not(:disabled) {
  color: var(--zizi-legacy-grid-text, #0f172a);
  border-color: var(--zizi-legacy-grid-accent, #1d4ed8);
}
.zplanos__cancelar:disabled {
  cursor: not-allowed;
  opacity: 0.6;
}
@media (max-width: 640px) {
  /* 44px e o alvo de toque usado no resto do projeto para tela de celular. */
  .zplanos__confirmar,
  .zplanos__cancelar,
  .zplanos__emailcampo {
    min-height: 44px;
  }
}

/* topbar: menu "Ambiente" recolhe tenant/usuario/ramo/API numa terceira zona */
.env-menu {
  position: relative;
}
.env-chip {
  cursor: pointer;
  list-style: none;
  user-select: none;
}
.env-chip::-webkit-details-marker {
  display: none;
}
.env-chip::after {
  content: "▾";
  margin-left: 2px;
  color: var(--muted);
  font-size: 11px;
}
.env-menu[open] .env-chip::after {
  content: "▴";
}
.env-sep {
  color: var(--line);
}
.env-panel {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  z-index: 20;
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 220px;
  max-width: calc(100vw - 24px);
  padding: 10px 12px;
  background: #fff;
  color: var(--text);
  border: 1px solid var(--line);
  border-radius: 12px;
  box-shadow: var(--shadow);
}
.env-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  font-size: 13px;
  color: var(--muted);
}
.env-row .chip-value {
  color: #1d4ed8;
  text-align: right;
  word-break: break-word;
}
@media (max-width: 480px) {
  .env-panel {
    left: auto;
    right: 0;
  }
}

/* RN-BOT-033: cartao de pedidos de clientes no topo do chat do lojista. */
.pendencias-do-cliente-cartao {
  flex: 0 0 auto;
  max-height: 40vh;
  max-height: 40dvh;
  overflow: auto;
  margin: 0 0 8px;
  padding: 8px 10px;
  border: 1px solid #f0b429;
  border-radius: 10px;
  background: #fff8e6;
  color: #3d2c00;
  font-size: 14px;
}
.pendencias-do-cliente-cartao[hidden] { display: none; }
.pendencias-faixa { margin-bottom: 6px; }
.pendencias-lista { list-style: none; margin: 0; padding: 0; }
.pendencia-do-cliente { padding: 6px 0; border-top: 1px solid #f3d27a; }
.pendencia-do-cliente.pendencia-lembrete { background: #ffe3e3; border-radius: 6px; padding: 6px; }
.pendencia-trecho { margin: 2px 0; overflow-wrap: anywhere; }
.pendencia-acoes { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 4px; }
.pendencia-acoes button { padding: 4px 10px; border-radius: 8px; border: 1px solid #c99a1e; background: #fff; cursor: pointer; }
.pendencia-conversa { margin-top: 6px; padding: 6px; background: #fff; border-radius: 6px; }
.pendencia-msg { margin: 4px 0; }
.pendencia-msg-loja { color: #555; }

/*
 * DEC-20261004-02-03b5: troca de empresa sem novo login. O nome da loja vira
 * botao so para quem tem 2+ empresas; a entrada do menu usa o mesmo desenho de
 * .topmenu-item com classe propria (o filtro de modulo nao a esconde).
 */
.company-chip--troca {
  cursor: pointer;
}
.company-chip--troca::after {
  content: "▾";
  margin-left: 6px;
  font-size: 11px;
  color: #64748b;
}
.company-chip--troca:focus-visible {
  outline: 3px solid rgba(37, 99, 235, 0.42);
  outline-offset: 1px;
}
.topmenu-troca-empresa {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 10px;
  border: 0;
  background: transparent;
  padding: 12px 10px;
  border-radius: 14px;
  cursor: pointer;
  font-weight: 650;
  color: #0f172a;
  font-size: 16px;
}
.topmenu-troca-empresa:hover {
  background: rgba(15, 23, 42, 0.05);
}
.topmenu-troca-empresa span {
  flex: 1;
  text-align: left;
}
.troca-empresa-painel {
  position: fixed;
  top: 64px;
  right: 12px;
  z-index: 1200;
  width: min(360px, calc(100vw - 24px));
  max-height: 70vh;
  max-height: 70dvh;
  overflow: auto;
  padding: 8px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: #fff;
  box-shadow: 0 12px 32px rgba(15, 23, 42, 0.18);
}
.troca-empresa-painel[hidden] {
  display: none !important;
}
.troca-empresa-titulo {
  padding: 6px 10px 8px;
  color: #64748b;
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
}
.troca-empresa-item {
  display: block;
  width: 100%;
  border: 0;
  background: transparent;
  padding: 11px 10px;
  border-radius: 12px;
  text-align: left;
  cursor: pointer;
  color: #0f172a;
  font-size: 15px;
  font-weight: 600;
}
.troca-empresa-item:hover:not([disabled]) {
  background: rgba(15, 23, 42, 0.05);
}
.troca-empresa-item[disabled] {
  cursor: default;
  color: #2563eb;
}
.troca-empresa-aviso {
  padding: 4px 10px;
  color: #64748b;
  font-size: 13px;
}
.troca-empresa-aviso:empty {
  display: none;
}

.financeiro-movel-resumo { margin-top: 12px; }
.financeiro-movel-resumo h5 { margin: 0 0 6px; font-size: 14px; }
.financeiro-movel-resumo table { width: 100%; border-collapse: collapse; table-layout: fixed; font-size: 12px; }
.financeiro-movel-resumo th, .financeiro-movel-resumo td { padding: 5px 4px; border-bottom: 1px solid var(--line); text-align: left; overflow-wrap: anywhere; }
.financeiro-movel-resumo .num { text-align: right; font-variant-numeric: tabular-nums; }
.financeiro-movel-resumo .neg { color: #b91c1c; }
.financeiro-movel-resumo .pos { color: #15803d; }
.financeiro-movel-resumo tr.atrasadas td { color: #b91c1c; font-weight: 600; }
.financeiro-movel-resumo tfoot td { font-weight: 700; border-top: 2px solid var(--line); }
@media (max-width: 640px) { .financeiro-movel-resumo table { font-size: 11px; } .financeiro-movel-resumo th, .financeiro-movel-resumo td { padding: 4px 2px; } }
/* FINANCEIRO MOVEL POR MES (22/10/2026): barra do mes, seletor de meses, atrasados, dia a dia. Alvos de toque >= 44px. */
.financeiro-movel-add-wrap > [data-finance-mobile-add] { min-height: 48px; min-width: 168px; padding: 10px 18px; font-size: 16px; font-weight: 700; }
.financeiro-movel-mes { display: flex; align-items: center; gap: 6px; min-width: 0; padding: 2px 0; background: #fff; }
.financeiro-movel-mes .btn { min-height: 44px; }
.financeiro-movel-mes-seta { min-width: 44px; min-height: 44px; padding: 0; font-size: 22px; line-height: 1; }
.financeiro-movel-mes-seta[disabled] { opacity: .35; cursor: not-allowed; }
.financeiro-movel-mes-nome { flex: 1 1 auto; min-width: 0; padding: 0 8px; font-size: 16px; font-weight: 800; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.financeiro-movel-mes-hoje { flex: 0 0 auto; min-height: 44px; padding: 0 12px; color: #15803d; font-weight: 700; }
.financeiro-movel-mes-seletor { display: grid; gap: 8px; padding: 10px; border: 1px solid var(--line); border-radius: 12px; background: #f8fafc; }
.financeiro-movel-mes-ano { display: flex; align-items: center; justify-content: space-between; }
.financeiro-movel-mes-ano strong { font-size: 18px; }
.financeiro-movel-mes-grade { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
.financeiro-movel-mes-opcao { min-height: 44px; padding: 0; font-size: 15px; }
.financeiro-movel-mes-opcao.is-escolhido { background: #15803d; border-color: #15803d; color: #fff; font-weight: 800; }
.financeiro-movel-mes-opcao.is-hoje { box-shadow: inset 0 0 0 2px #16a34a; }
.financeiro-movel-mes-estado { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 8px; min-width: 0; margin: -6px 0 0; color: #64748b; font-size: 13px; }
.financeiro-movel-mes-atualizar { min-height: 44px; padding: 0 12px; font-size: 13px; }
.financeiro-movel-mes-estado-acoes { display: flex; flex-wrap: wrap; gap: 6px; margin-left: auto; }
.financeiro-movel-mes-erro { display: grid; gap: 8px; padding: 12px; border: 1px solid #fecaca; border-radius: 12px; background: #fef2f2; color: #991b1b; }
.financeiro-movel-mes-erro p { margin: 0; }
.financeiro-movel-mes-erro .btn { min-height: 44px; justify-self: start; }
.financeiro-movel-mes-vazio { margin: 0; padding: 14px; border: 1px dashed var(--line); border-radius: 12px; color: #475569; text-align: center; }
.financeiro-movel-card strong { overflow-wrap: anywhere; font-variant-numeric: tabular-nums; }
.financeiro-movel-card strong.neg, .financeiro-movel-card.saldo.neg strong { color: #b91c1c; }
.financeiro-movel-card.saldo { border-left: 4px solid #0f766e; cursor: default; }
.financeiro-movel-atrasados { grid-column: 1 / -1; border-left: 4px solid #dc2626; background: #fff7f7; cursor: default; }
.financeiro-movel-atrasados > span { color: #b91c1c; font-weight: 800; }
.financeiro-movel-atrasados.is-zero { border-left-color: #94a3b8; background: #fff; }
.financeiro-movel-atrasados.is-zero > span { color: #64748b; }
.financeiro-movel-atrasados.is-zero strong { color: #475569; font-size: 15px; font-weight: 600; }
.financeiro-movel-atrasados-lados { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.financeiro-movel-atrasados-lado { display: grid; gap: 2px; min-height: 44px; padding: 8px 10px; border: 1px solid #fecaca; border-radius: 10px; background: #fff; color: #991b1b; font: inherit; text-align: left; cursor: pointer; }
.financeiro-movel-atrasados-lado span, .financeiro-movel-atrasados-lado small { color: #991b1b; font-size: 12px; }
.financeiro-movel-atrasados-lado strong { font-size: 17px; }
/* Computador (revisor 22/10): com seletor e dia a dia abertos o quadro passava da tela. Mesmo teto e rolagem SO no corpo do celular. */
@media (min-width: 641px) {
  .financeiro-movel { display: flex; flex-direction: column; max-height: calc(100vh - 108px); max-height: calc(100dvh - 108px); }
  .financeiro-movel-corpo { display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; min-height: 0; overflow-y: auto; overscroll-behavior: contain; }
  .financeiro-movel-mes { position: sticky; top: 0; z-index: 1; }
}
.financeiro-movel-sem-vencimento { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; margin-top: -4px; color: #475569; font-size: 13px; }
.financeiro-movel-sem-vencimento-lado { min-height: 44px; padding: 0 8px; border: 1px solid var(--line); border-radius: 10px; background: #fff; color: #334155; font: inherit; cursor: pointer; }
.financeiro-movel-card-dias { width: 100%; border-left: 4px solid #0f766e; }
.financeiro-movel-dias tr.financeiro-movel-dia { cursor: pointer; }
.financeiro-movel-dias tr.financeiro-movel-dia td { height: 44px; }
.financeiro-movel-dias tr.financeiro-movel-dia:focus-visible { outline: 2px solid #15803d; outline-offset: -2px; }
.financeiro-movel-dias tr.financeiro-movel-dia[aria-expanded="true"] td { background: #f0fdf4; }
.financeiro-movel-dias tr.is-hoje td:first-child { font-weight: 800; }
.financeiro-movel-dia-hoje { display: inline-block; padding: 0 6px; border-radius: 999px; background: #dcfce7; color: #166534; font-size: 10px; font-weight: 700; }
.financeiro-movel-dia-titulos td { background: #f8fafc; }
.financeiro-movel-dia-lista { display: grid; gap: 4px; margin: 0; padding: 0; list-style: none; }
.financeiro-movel-dia-item { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; grid-template-areas: "tipo quem valor" "tipo quem selo"; gap: 2px 8px; align-items: center; padding: 6px 2px; border-bottom: 1px solid var(--line); }
.financeiro-movel-dia-tipo { grid-area: tipo; font-size: 11px; font-weight: 700; }
.financeiro-movel-dia-item.recebe .financeiro-movel-dia-tipo { color: #15803d; }
.financeiro-movel-dia-item.paga .financeiro-movel-dia-tipo { color: #b91c1c; }
.financeiro-movel-dia-quem { grid-area: quem; display: grid; overflow-wrap: anywhere; }
.financeiro-movel-dia-quem small, .financeiro-movel-dia-valor small { color: #64748b; font-size: 11px; }
.financeiro-movel-dia-valor { grid-area: valor; display: grid; text-align: right; font-variant-numeric: tabular-nums; }
.financeiro-movel-selo { grid-area: selo; justify-self: end; padding: 1px 8px; border-radius: 999px; font-size: 11px; font-weight: 700; }
.financeiro-movel-selo.pago { background: #dcfce7; color: #166534; }
.financeiro-movel-selo.aberto { background: #e2e8f0; color: #334155; }
.financeiro-movel-selo.atrasado { background: #fee2e2; color: #991b1b; }
.financeiro-movel-dia-erro { margin: 0; color: #b91c1c; }
@media (max-width: 640px) {
  .financeiro-movel-mes { position: sticky; top: 0; z-index: 1; }
  .financeiro-movel-add-wrap > [data-finance-mobile-add] { width: 100%; }
}

/* Etiquetas de grupo na lista de Contatos: ate 2 + "+N", quebram a linha no celular sem estourar. */
.zz-etiquetas-grupo { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 4px; min-width: 0; }
.zz-etiqueta-grupo { display: inline-block; max-width: 160px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 11px; line-height: 1.6; padding: 0 8px; border-radius: 999px; background: #eef2ff; color: #3730a3; border: 1px solid #c7d2fe; }
.zz-etiqueta-mais { background: #f1f5f9; color: var(--muted); border-color: var(--line); }

/* ZIZI-CORRECAO-CHAT-NAO-SABE-RESPONDER-QUE-TEM-CONTRATO-GRAVADO-20261013: cartao de contratos gravados no chat */
.contratos-cartao { display: block; max-width: 100%; }
.contratos-titulo { font-weight: 700; margin-bottom: 8px; display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.contratos-lista { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.contrato-linha-botao { width: 100%; text-align: left; display: grid; gap: 2px; padding: 10px 12px; border: 1px solid rgba(128,128,128,.35); border-radius: 10px; background: transparent; color: inherit; font: inherit; cursor: pointer; min-height: 44px; }
.contrato-linha-botao:hover, .contrato-linha-botao:focus-visible { border-color: #2f6fed; outline: 2px solid transparent; }
.contrato-imovel { font-weight: 600; }
.contrato-inquilino, .contrato-vigencia, .contrato-reajuste { font-size: .88em; opacity: .85; }
.contrato-situacao { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; font-size: .88em; }
.contrato-situacao i { flex: none; width: 10px; height: 10px; border-radius: 50%; background: currentColor; display: inline-block; }
.contrato-verde { color: #1a7f45; }
.contrato-amarelo { color: #9a6700; }
.contrato-vermelho { color: #c62828; }
.contrato-cinza { color: #5f6368; }
.contrato-ver-mais, .contrato-acao { margin-top: 8px; margin-right: 6px; padding: 8px 12px; min-height: 40px; border-radius: 8px; border: 1px solid rgba(128,128,128,.5); background: transparent; color: inherit; font: inherit; cursor: pointer; }
.contrato-acao[disabled] { opacity: .55; cursor: not-allowed; }
.contrato-campos { margin: 0; display: grid; gap: 4px; }
.contrato-campo { display: flex; flex-wrap: wrap; gap: 6px; }
.contrato-campo dt { font-weight: 600; } .contrato-campo dd { margin: 0; }
.contratos-cartao, .contratos-lista, .contrato-linha, .contrato-linha-botao { box-sizing: border-box; min-width: 0; max-width: 100%; overflow-wrap: anywhere; }
/* ZIZI-FEATURE-CONTRATO-ORIGINAL-IMUTAVEL-ABRIR-IMPRIMIR-BAIXAR-20261013: visualizador do original (o aviso fica na tela, nunca no arquivo). */
.contrato-visualizador { position: fixed; inset: 0; z-index: 10000; background: rgba(0,0,0,.6); display: flex; align-items: center; justify-content: center; padding: 12px; box-sizing: border-box; }
.contrato-visualizador-caixa { background: var(--bg, #fff); color: var(--text, #111); width: 100%; max-width: 960px; height: 100%; max-height: 100%; border-radius: 12px; display: flex; flex-direction: column; overflow: hidden; box-sizing: border-box; }
.contrato-visualizador-topo { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px; padding: 8px 12px; border-bottom: 1px solid rgba(128,128,128,.35); }
.contrato-visualizador-botoes .contrato-acao { margin-top: 0; }
.contrato-visualizador-corpo { flex: 1; min-height: 0; display: flex; background: #525659; }
.contrato-visualizador-quadro { flex: 1; width: 100%; height: 100%; border: 0; background: #fff; }
.contrato-visualizador-aviso { margin: auto; padding: 16px; color: #fff; text-align: center; }
.contrato-visualizador-rodape { padding: 8px 12px; font-size: 13px; border-top: 1px solid rgba(128,128,128,.35); }
@media (max-width: 480px) { .contrato-visualizador { padding: 0; } .contrato-visualizador-caixa { border-radius: 0; } }
.contrato-encerramento-form { display: grid; gap: 6px; margin-top: 8px; min-width: 0; max-width: 100%; box-sizing: border-box; } .contrato-encerramento-form label { display: grid; gap: 2px; font-size: 14px; } .contrato-encerramento-form input { width: 100%; min-width: 0; box-sizing: border-box; min-height: 36px; padding: 4px 8px; border-radius: 6px; border: 1px solid rgba(128,128,128,.5); font: inherit; }

/* Banner de urgentes no chat (feat-banner-urgentes-final 328892d9c) */
/* Banner de urgentes: entrega em vermelho, dinheiro em laranja; botoes com area de toque no celular. */
.avisos-urgentes-faixa .aviso-urgente-entrega { border-left: 4px solid #c0392b; padding-left: 8px; background: #ffe3e3; }
.avisos-urgentes-faixa .aviso-urgente-dinheiro { border-left: 4px solid #e67e22; padding-left: 8px; }
.aviso-urgente-atraso { font-size: 12px; opacity: 0.8; white-space: nowrap; }
@media (max-width: 480px) { .avisos-urgentes-faixa .pendencia-acoes button { min-height: 40px; } }

/* Entregas: varias corridas vivas, uma por pedido (cada cartao com seus botoes). */
.entregas-corridas { display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.entregas-corrida-acoes { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.entregas-corrida-acoes button { min-height: 44px; min-width: 44px; }
@media (max-width: 480px) { .entregas-corridas { grid-template-columns: 1fr; } .entregas-corrida-acoes button { flex: 1 1 100%; } }
/* Contas a pagar/receber no chat no celular (<=640px): a tabela de 9 a 12
   colunas so rolava para o lado e deixava Quitar/Excluir fora da tela. Aqui
   cada titulo vira um cartao "rotulo: valor" (data-label de cada celula) com
   as acoes visiveis e alvos de toque de 44px. So apresentacao: calculo,
   filtros, ordem, totais e as funcoes de quitar/excluir nao mudam; no
   computador (>640px) a tabela fica identica. */
@media (max-width: 640px) {
  .finance-report-shell .chat-table-wrap { overflow: visible !important; padding: 0; border: 0; background: transparent; box-shadow: none; }
  table.finance-contas-tabela { display: block; width: 100% !important; min-width: 0 !important; table-layout: auto !important; border: 0; box-shadow: none; font-size: 14px; }
  table.finance-contas-tabela thead { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
  table.finance-contas-tabela tbody, table.finance-contas-tabela tfoot { display: block; }
  table.finance-contas-tabela tbody tr:not(.finance-vencimento-total):not(.finance-empty-row) { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 6px 10px; margin: 0 0 12px; padding: 12px; border: 1px solid #c5d0de; border-radius: 12px; background: #fff; box-shadow: 0 1px 2px rgba(15, 23, 42, 0.06); }
  table.finance-contas-tabela tbody tr.finance-overdue-row { background: #fff1f2 !important; border-color: #fecaca; }
  table.finance-contas-tabela tbody tr:not(.finance-vencimento-total):not(.finance-empty-row) td { display: block; min-width: 0; max-width: none; padding: 0 !important; border: 0 !important; background: transparent !important; overflow-wrap: anywhere; white-space: normal; }
  table.finance-contas-tabela tbody tr:not(.finance-vencimento-total):not(.finance-empty-row) td::before { content: attr(data-label); display: block; margin-bottom: 2px; color: #64748b; font-size: 11px; font-weight: 700; letter-spacing: 0.02em; text-transform: uppercase; }
  table.finance-contas-tabela td[data-label="N"],
  table.finance-contas-tabela td.finance-cell-nome,
  table.finance-contas-tabela td.finance-row-actions,
  table.finance-contas-tabela td.finance-row-select-cell { grid-column: 1 / -1; }
  table.finance-contas-tabela td[data-label="N"] { display: flex !important; align-items: center; gap: 6px; padding-bottom: 6px !important; border-bottom: 1px solid #e2e8f0 !important; font-weight: 700; }
  table.finance-contas-tabela td[data-label="N"]::before { margin: 0 6px 0 0; }
  table.finance-contas-tabela td.finance-cell-nome { font-weight: 600; }
  /* nome e caixa nao levam data-label no HTML (provas antigas travam a tag literal): titulo do cartao e rotulo fixo. */
  table.finance-contas-tabela tbody tr td.finance-cell-nome::before { content: none; }
  table.finance-contas-tabela tbody tr td.finance-cell-caixa::before { content: "Caixa"; }
  table.finance-contas-tabela td.finance-row-select-cell { display: flex !important; align-items: center; gap: 10px; text-align: left; }
  table.finance-contas-tabela td.finance-row-select-cell::before { margin: 0; }
  table.finance-contas-tabela .finance-row-select { width: 28px; height: 28px; margin: 8px; }
  table.finance-contas-tabela .finance-detail-btn { min-width: 44px; min-height: 44px; font-size: 22px !important; padding: 0 !important; }
  table.finance-contas-tabela td.finance-row-actions { display: flex !important; flex-wrap: wrap; justify-content: flex-start; gap: 8px; padding-top: 4px !important; }
  table.finance-contas-tabela td.finance-row-actions::before { content: none !important; }
  table.finance-contas-tabela td.finance-row-actions .finance-report-action-btn { flex: 1 1 0; justify-content: center; min-width: 44px; min-height: 44px; padding: 8px 12px; font-size: 14px; }
  table.finance-contas-tabela tr.finance-vencimento-total, table.finance-contas-tabela tfoot tr { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin: 0 0 12px; padding: 10px 12px; border-radius: 10px; background: #e2e8f0; }
  table.finance-contas-tabela tr.finance-vencimento-total td, table.finance-contas-tabela tfoot td { display: block; width: auto; padding: 0 !important; border: 0 !important; background: transparent !important; }
  table.finance-contas-tabela tr.finance-empty-row, table.finance-contas-tabela tr.finance-empty-row td { display: block; width: 100%; box-sizing: border-box; }
}
/* Produtos da Nota no celular (<=640px): a grade de 13 colunas com
   table-layout:fixed espremia cada coluna em ~27px (cabecalhos sobrepostos,
   numeros um sobre o outro, campos sem rotulo). Aqui cada item vira um cartao
   com "rotulo: valor" (data-label de cada celula). So apresentacao: ids,
   valores e acoes da grade nao mudam; no computador a tabela fica identica. */
@media (max-width: 640px) {
  .produtos-nota-grade.chat-table-wrap { overflow: visible !important; padding: 0; border: 0; background: transparent; box-shadow: none; }
  table.produtos-nota-grade { display: block; width: 100% !important; min-width: 0 !important; table-layout: auto !important; border-spacing: 0; box-shadow: none; overflow: visible; font-size: 14px !important; }
  table.produtos-nota-grade thead { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
  table.produtos-nota-grade tbody { display: block; }
  table.produtos-nota-grade tbody tr { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 6px 10px; margin: 0 0 12px; padding: 12px; border: 1px solid #c5d0de; border-radius: 12px; background: #fff; box-shadow: 0 1px 3px rgba(15, 23, 42, 0.08); }
  table.produtos-nota-grade tbody tr td,
  table.produtos-nota-grade tbody tr:nth-child(even) td,
  table.produtos-nota-grade tbody tr:hover td { display: block !important; min-width: 0; max-width: none !important; padding: 0 !important; border: 0 !important; background: transparent !important; white-space: normal !important; overflow: visible !important; text-overflow: clip !important; overflow-wrap: anywhere; line-height: 1.35; color: #0f172a; }
  table.produtos-nota-grade td::before { content: attr(data-label); display: block; margin-bottom: 2px; color: #64748b; font-size: 11px; font-weight: 700; letter-spacing: 0.02em; text-transform: uppercase; }
  table.produtos-nota-grade td[data-label="Item"],
  table.produtos-nota-grade td[data-label="Cod. fornecedor"],
  table.produtos-nota-grade td[data-label="Descricao"],
  table.produtos-nota-grade td[data-label="Cod. interno"],
  table.produtos-nota-grade td[data-label="Acao"] { grid-column: 1 / -1; }
  table.produtos-nota-grade td[data-label="Item"] { padding-bottom: 6px !important; border-bottom: 1px solid #e2e8f0 !important; font-weight: 700; }
  table.produtos-nota-grade td[data-label="Item"]::before { display: inline; margin: 0 6px 0 0; font-size: 12px; }
  table.produtos-nota-grade td[data-label="Descricao"] { font-weight: 600; }
  table.produtos-nota-grade td[data-label="Valor total"] { font-weight: 700; }
  table.produtos-nota-grade td input { display: block; width: 100%; min-height: 44px !important; padding: 8px 10px; font-size: 16px !important; border: 1px solid #cbd5e1; border-radius: 8px; box-sizing: border-box; }
  table.produtos-nota-grade td[data-label="Acao"] { display: flex !important; flex-wrap: wrap; gap: 8px; padding-top: 4px !important; }
  table.produtos-nota-grade td[data-label="Acao"]::before { content: none; }
  table.produtos-nota-grade td[data-label="Acao"] .btn { flex: 1 1 0 !important; width: auto !important; min-width: 0; min-height: 44px; padding: 8px 12px !important; font-size: 14px !important; }
}
/* Importacao de nota e boleto no celular (<=640px): as duas grades do chat
   ("Contas a Pagar - titulos do documento", min-width 1120px, e "Boletos
   detectados em lista unica", 12 colunas e min-width 1500px) rolavam de lado
   e as acoes (Quitar, Doc. chegou, Confirmar) ficavam fora da tela; os campos
   a 12px faziam o iPhone dar zoom. Aqui cada titulo/boleto vira um cartao
   "rotulo: valor" (data-label de cada celula), com o essencial primeiro
   (fornecedor, valor, vencimento, situacao) e as acoes no proprio cartao.
   So apresentacao: ids, valores, campos e acoes nao mudam; no computador as
   tabelas ficam identicas (nada aqui vale acima de 640px). */
@media (max-width: 640px) {
  div.importacao-titulos-grade, div.importacao-boletos-grade { overflow: visible !important; max-height: none !important; padding: 0 !important; border: 0 !important; background: transparent !important; box-shadow: none !important; }
  table.importacao-titulos-grade, table.importacao-boletos-grade { display: block; width: 100% !important; min-width: 0 !important; table-layout: auto !important; border-spacing: 0; box-shadow: none; overflow: visible; font-size: 14px !important; }
  table.importacao-titulos-grade thead, table.importacao-boletos-grade thead { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
  table.importacao-titulos-grade tbody, table.importacao-boletos-grade tbody { display: block; }
  table.importacao-titulos-grade tbody tr, table.importacao-boletos-grade tbody tr { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 8px 12px; margin: 0 0 12px; padding: 12px; border: 1px solid var(--zizi-legacy-grid-border, #c5d0de); border-radius: 12px; background: var(--zizi-legacy-grid-bg, #ffffff); box-shadow: 0 1px 3px rgba(15, 23, 42, 0.08); }
  table.importacao-titulos-grade tbody tr td, table.importacao-boletos-grade tbody tr td,
  table.importacao-titulos-grade tbody tr:nth-child(even) td, table.importacao-boletos-grade tbody tr:nth-child(even) td,
  table.importacao-titulos-grade tbody tr:hover td, table.importacao-boletos-grade tbody tr:hover td { min-width: 0; max-width: none !important; width: auto !important; padding: 0 !important; border: 0 !important; background: transparent !important; white-space: normal !important; overflow: visible !important; text-overflow: clip !important; overflow-wrap: anywhere; text-align: left !important; vertical-align: top !important; line-height: 1.35; color: var(--zizi-legacy-grid-text, #0f172a); }
  table.importacao-titulos-grade tbody tr td, table.importacao-boletos-grade tbody tr td { display: block; order: 20; }
  table.importacao-titulos-grade td::before, table.importacao-boletos-grade td::before { content: attr(data-label); display: block; margin-bottom: 2px; color: #64748b; font-size: 11px; font-weight: 700; letter-spacing: 0.02em; text-transform: uppercase; }
  /* campo de leitura parece texto; campo editavel tem caixa de 44px e 16px (sem zoom no iPhone) */
  table.importacao-titulos-grade td input:not([type="checkbox"]):not([type="hidden"]), table.importacao-titulos-grade td select,
  table.importacao-boletos-grade td input:not([type="checkbox"]):not([type="hidden"]) { display: block; width: 100% !important; max-width: 100% !important; min-width: 0 !important; min-height: 44px !important; padding: 8px 10px !important; font-size: 16px !important; border: 1px solid #cbd5e1 !important; border-radius: 8px !important; box-sizing: border-box !important; background: var(--zizi-legacy-grid-bg, #ffffff) !important; color: var(--zizi-legacy-grid-text, #0f172a) !important; }
  table.importacao-titulos-grade td input[readonly]:not([type="checkbox"]):not([type="hidden"]), table.importacao-boletos-grade td input:disabled:not([type="checkbox"]):not([type="hidden"]) { min-height: 0 !important; padding: 0 !important; border: 0 !important; background: transparent !important; opacity: 1; -webkit-text-fill-color: currentColor; }
  table.importacao-titulos-grade td[data-label="Plano de contas"] div, table.importacao-titulos-grade td[data-label="Plano de contas"] span { width: 100% !important; max-width: 100% !important; min-width: 0 !important; box-sizing: border-box; }
  /* ordem do cartao: o essencial primeiro, as acoes no proprio cartao */
  table.importacao-titulos-grade td[data-label="#"] { order: 0; grid-column: 1 / -1; padding-bottom: 6px !important; border-bottom: 1px solid #e2e8f0 !important; font-weight: 700; }
  table.importacao-titulos-grade td[data-label="#"]::before { content: "Titulo"; display: inline; margin: 0 6px 0 0; font-size: 12px; }
  table.importacao-titulos-grade td[data-label="Fornecedor"], table.importacao-boletos-grade td[data-label="Fornecedor"] { order: 1; grid-column: 1 / -1; }
  table.importacao-titulos-grade td[data-label="Fornecedor"] input, table.importacao-boletos-grade td[data-label="Fornecedor"] input { font-weight: 600; }
  table.importacao-titulos-grade td[data-label="Valor"], table.importacao-boletos-grade td[data-label="Valor"] { order: 2; }
  table.importacao-titulos-grade td[data-label="Valor"] input, table.importacao-boletos-grade td[data-label="Valor"] input { font-weight: 700; }
  table.importacao-titulos-grade td[data-label="Vencimento"], table.importacao-boletos-grade td[data-label="Vencimento"] { order: 3; }
  table.importacao-boletos-grade td[data-label="Situacao"] { order: 4; font-weight: 700; }
  table.importacao-boletos-grade td[data-label="Selecionar"] { order: 5; }
  table.importacao-titulos-grade td[data-label="Quitar"] { order: 4; }
  table.importacao-titulos-grade td[data-label="Doc. chegou"] { order: 5; }
  table.importacao-titulos-grade td[data-label="Parcela"] { order: 6; }
  table.importacao-titulos-grade td[data-label="Documento"] { order: 7; }
  table.importacao-titulos-grade td[data-label="Plano de contas"], table.importacao-boletos-grade td[data-label="Plano de contas"], table.importacao-boletos-grade td[data-label="Linha digitavel"] { grid-column: 1 / -1; }
  table.importacao-titulos-grade td[data-label="Plano de contas"] { order: 8; }
  table.importacao-titulos-grade td[data-label="Quitar"] input[type="checkbox"], table.importacao-boletos-grade td[data-label="Selecionar"] input[type="checkbox"] { display: block; width: 26px !important; height: 26px !important; margin: 9px 0; accent-color: #1d4ed8; }
  table.importacao-boletos-grade td[data-label="Acoes"] { order: 30; grid-column: 1 / -1; display: flex !important; flex-wrap: wrap; gap: 8px; padding-top: 8px !important; border-top: 1px solid #e2e8f0 !important; }
  table.importacao-boletos-grade td[data-label="Acoes"]::before { content: none; }
  table.importacao-boletos-grade td[data-label="Acoes"] .btn { flex: 1 1 auto !important; width: auto !important; min-width: 0; min-height: 44px; white-space: nowrap; overflow-wrap: normal; word-break: normal; padding: 8px 12px !important; font-size: 14px !important; }
}

/* ==========================================================================
   PACOTE CSS CELULAR (17/10/2026) — so CSS, so ate 640px; acima disso nada muda.
   Itens: #2 topo do chat, #3 gaveta, #6 modais, #7 alvos de toque, #8 zoom do iPhone,
   #10 texto cortado. (#9 vh -> dvh foi feito no lugar, com vh de fallback na linha anterior.)
   Bloco proprio no fim do arquivo para o integrador unir sem conflito.
   ========================================================================== */
@media (max-width: 640px) {
  /* #2: tres cartoes no topo do chat (pendencias, reajustes, avisos urgentes) dividem a tela; teto menor e rolagem interna. */
  .pendencias-do-cliente-cartao { max-height: 22vh; max-height: 22dvh; overflow-y: auto; overscroll-behavior: contain; }
  .pendencia-acoes button { min-height: 44px; min-width: 44px; }
  .avisos-urgentes-faixa .pendencia-acoes button { min-height: 44px; }

  /* #3: gaveta Produtos da Nota / Buscar Produto: respiro embaixo e X com area de toque. */
  .product-drawer { box-sizing: border-box; padding-bottom: calc(16px + env(safe-area-inset-bottom, 0px)); }
  .product-drawer-close-btn { min-width: 44px; min-height: 44px; }

  /* #6: modais fixos nao passam da tela e rolam por dentro. */
  .finance-action-password-modal { box-sizing: border-box; max-height: calc(100vh - 32px); max-height: calc(100dvh - 32px); overflow-y: auto; }
  .composer-video-overlay-card { box-sizing: border-box; max-height: calc(100vh - 32px); max-height: calc(100dvh - 32px); overflow-y: auto; }
  .financeiro-movel-controls .btn { min-width: 44px; min-height: 44px; }

  /* #7: alvos de toque de 44px. Botoes redondos ganham area extra por ::after, sem mudar o desenho. */
  .btn,
  .bubble-feedback-btn,
  .composer-plus-menu-item,
  .contrato-acao,
  .contrato-ver-mais,
  .zizi-busca-f2-combo { min-height: 44px; }
  .bubble-feedback-btn { min-width: 44px; }
  .contrato-encerramento-form input,
  .zizi-busca-f2-input { min-height: 44px; }
  .composer .plus,
  .composer .input .send,
  .composer .input .mic,
  .composer .input .speak-toggle-btn { position: relative; }
  .composer .plus::after { content: ""; position: absolute; inset: -7px; }
  .composer .input .send::after,
  .composer .input .mic::after,
  .composer .input .speak-toggle-btn::after { content: ""; position: absolute; inset: -4px; }
  .composer-attachment-thumb button::after { content: ""; position: absolute; inset: -11px; }

  /* #8: fonte de 16px em todo campo evita o zoom automatico do iPhone; especificidade alta para vencer modal de senha e bolhas de grade. */
  html body input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]):not([type="color"]):not([type="hidden"]),
  html body select,
  html body textarea { font-size: 16px; }

  /* #10: texto longo quebra ou limita em 2 linhas em vez de cortar sem saida. */
  .zizi-busca-f2-textos b,
  .zizi-busca-f2-textos small,
  .company-name,
  .chat-attachment-chip-nome {
    white-space: normal;
    overflow-wrap: anywhere;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    overflow: hidden;
  }
  .zz-etiqueta-grupo { white-space: normal; overflow-wrap: anywhere; max-width: 100%; }
  .bubble { overflow-wrap: anywhere; word-break: break-word; }
}

/* ==========================================================================
   CELULAR (18/10/2026) — faixa de icones com 6 fixos + "Mais" e abas das gavetas de 44px.
   Itens: ZIZI-...-CELULAR-FAIXA-DE-ICONES-6-FIXOS-20261018 e
   ZIZI-...-CELULAR-ABAS-DAS-GAVETAS-44PX-E-CAIXA-SEM-LINHA-DUPLICADA-20261018.
   Fora do @media so ficam os padroes ESCONDIDOS (Mais e a folha); o computador nao muda.
   ========================================================================== */
.story-mais,
.faixa-mais-folha,
.caixa-acesso-plano { display: none; }
@media (max-width: 640px) {
  /* Faixa (ordem do dono 23/10/2026, iPhone): "Modulo" FIXO no canto esquerdo (sticky, fundo opaco) e as demais pastilhas ROLAM
     para o lado com o dedo, sem espremer. Ordem: Modulo, Receber, Pagar, Caixa, Clientes, Fornecedores e o resto do modulo
     (ordem do DOM). O "Mais" fica escondido porque a rolagem alcanca tudo; o codigo dele segue (evolucao aditiva). */
  .stories--seis-fixos { overflow-x: auto; overflow-y: hidden; justify-content: flex-start; gap: 10px; -webkit-overflow-scrolling: touch; touch-action: pan-x; overscroll-behavior-x: contain; }
  .stories--seis-fixos .story { flex: 0 0 auto; min-width: 64px; order: 6; }
  /* A sombra de -12px pinta o recuo da faixa a esquerda do Modulo, senao as pastilhas que rolam aparecem numa fresta ali. */
  .stories--seis-fixos .story[data-kind="module"] { order: 0; position: sticky; left: 0; z-index: 3; background: var(--bg, #eef2f7); padding-right: 6px; box-shadow: -12px 0 0 0 var(--bg, #eef2f7), 8px 0 8px -6px rgba(15, 23, 42, 0.18); }
  html[data-zizi-user-theme="escuro"] .stories--seis-fixos .story[data-kind="module"] { background: #020617; box-shadow: -12px 0 0 0 #020617, 8px 0 8px -6px rgba(0, 0, 0, 0.6); }
  /* RN-MENU-008: Imoveis e Contratos (ramo aluguel) entram logo depois do Modulo (mesma ordem 0, vale a ordem do DOM). */
  .stories--seis-fixos .story[data-kind="imoveis"],
  .stories--seis-fixos .story[data-kind="contratos_locacao"] { order: 0; }
  .stories--seis-fixos .story[data-kind="contas_receber"] { order: 1; }
  .stories--seis-fixos .story[data-kind="contas_pagar"] { order: 2; }
  .stories--seis-fixos .story[data-kind="caixa"] { order: 3; }
  .stories--seis-fixos .story[data-kind="clientes"] { order: 4; }
  .stories--seis-fixos .story[data-kind="fornecedores"] { order: 5; }
  .stories--seis-fixos .story b,
  .stories--seis-fixos .story-mais b { display: block; font-size: 10px; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .story-mais { display: none; order: 7; flex: 0 0 auto; min-width: 64px; text-align: center; cursor: pointer; -webkit-user-select: none; user-select: none; }
  .story-mais .ring { width: 46px; height: 46px; margin: 0 auto 4px; border: 2px solid #c7d2fe; border-radius: 50%; background: #fff; display: flex; align-items: center; justify-content: center; box-sizing: border-box; }
  .story-mais .ico { font-size: 22px; line-height: 1; color: #1d4ed8; font-weight: 800; }
  .story-mais b { font-size: 10px; color: var(--text, #0f172a); }

  /* Folha "Mais": lista do resto, alvos de 44px. */
  .faixa-mais-folha.aberta { display: block; position: fixed; inset: 0; z-index: 2000; }
  .faixa-mais-fundo { position: absolute; inset: 0; background: rgba(15, 23, 42, 0.45); }
  .faixa-mais-caixa { position: absolute; left: 0; right: 0; bottom: 0; box-sizing: border-box; max-height: 70vh; max-height: 70dvh; overflow-y: auto; overscroll-behavior: contain; background: #fff; border-radius: 16px 16px 0 0; padding: 12px 16px calc(16px + env(safe-area-inset-bottom, 0px)); }
  .faixa-mais-topo { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
  .faixa-mais-x { min-width: 44px; min-height: 44px; border: 0; background: transparent; font-size: 28px; line-height: 1; cursor: pointer; }
  .faixa-mais-item { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 44px; padding: 8px 4px; border: 0; border-bottom: 1px solid #e2e8f0; background: transparent; font-size: 15px; font-weight: 600; text-align: left; cursor: pointer; }
  .faixa-mais-ico { display: inline-flex; align-items: center; justify-content: center; width: 32px; font-size: 20px; }
  .faixa-mais-ico .ico-img { width: 22px; height: 22px; }
  .faixa-mais-vazio { margin: 8px 0; color: var(--muted, #667085); font-size: 14px; }

  /* Abas das gavetas: alvo de 44px, sem encolher; rolagem lateral com sombra nas pontas como pista. */
  .tabs.story-tabs { scroll-snap-type: x proximity; background: linear-gradient(to right, #f8f9fb 30%, rgba(248, 249, 251, 0)) left center / 28px 100% no-repeat local, linear-gradient(to left, #f8f9fb 30%, rgba(248, 249, 251, 0)) right center / 28px 100% no-repeat local, linear-gradient(to right, rgba(15, 23, 42, 0.18), rgba(15, 23, 42, 0)) left center / 10px 100% no-repeat scroll, linear-gradient(to left, rgba(15, 23, 42, 0.18), rgba(15, 23, 42, 0)) right center / 10px 100% no-repeat scroll, #f8f9fb; }
  .tabs.story-tabs .tab { flex: 0 0 auto; box-sizing: border-box; min-height: 44px; min-width: 84px; scroll-snap-align: start; }
  /* Caixa: a barra propria (Hoje, Movimentos, Contas, Transferir, Fechar o caixa) ja leva a todos os destinos; a barra da gaveta repetia a mesma coisa. */
  #tabs[data-kind="caixa"] { display: none; }
  /* Plano de contas fica a 1 toque na barra propria do Caixa, com o caixa aberto ou fechado (a gaveta nao o mostra mais). */
  .caixa-acesso-plano { display: block; }
}
/* CELULAR-AVISOS-EM-UMA-LINHA (18/10/2026): faixa de avisos urgentes vira 1 linha que abre a lista; so ate 640px. */
@media (max-width: 640px) {
  .avisos-urgentes-faixa { max-height: 50vh; max-height: 50dvh; padding: 4px 8px; margin-bottom: 4px; }
  .avisos-urgentes-faixa .avisos-urgentes-linha { display: flex; justify-content: space-between; align-items: center; width: 100%; min-height: 44px; padding: 0 4px; border: 0; background: transparent; color: inherit; font: inherit; font-weight: 700; text-align: left; cursor: pointer; }
}

/* Celular: lista de Clientes/Fornecedores vira cartoes empilhados, sem rolagem horizontal. */
@media (max-width: 640px) {
  table.zizi-lista-cartoes,
  table.zizi-lista-cartoes tbody,
  table.zizi-lista-cartoes tr,
  table.zizi-lista-cartoes td { display: block; width: 100%; box-sizing: border-box; }
  table.zizi-lista-cartoes thead { display: none; }
  table.zizi-lista-cartoes tr { border: 1px solid var(--line); border-radius: 12px; padding: 8px 12px; margin-bottom: 10px; }
  table.zizi-lista-cartoes td { text-align: left !important; padding: 4px 0; overflow-wrap: anywhere; }
  table.zizi-lista-cartoes td::before { content: attr(data-label); display: block; font-size: 11px; color: var(--muted); }
}