/* Area do CLIENTE (/, /painel/*, /seguranca/*). Tema claro, o padrao desde
   08/09: e a mesma casa da inbox, que fica aberta o dia inteiro.

   Barra LATERAL, nao superior -- e o mesmo layout para toda tela desta area,
   nao so a home (ver o comentario em layouts/painel.html.erb). Titulo,
   legenda, tabela e o formulario de convite reaproveitam os componentes
   `.painel__*` e `.convites__*` que ja moram em dono.css -- eles so consomem
   token semantico, entao funcionam nos dois temas sem uma linha a mais.
   Duplica-los aqui criaria duas verdades para o mesmo componente.

   A BARRA LATERAL usa os tokens `--bc-lateral-*` (marca_tokens.css), FIXOS
   e independentes do alternador claro/escuro -- redesenho de 08/09,
   referencia visual trazida pelo Gustavo. So `.painel__conteudo` (e tudo
   dentro dele) reage ao tema; a barra fica verde-profunda sempre. */

body.painel {
  min-height: 100dvh;
  margin: 0;
  display: flex;
  background: var(--bc-bg);
  color: var(--bc-ink);
  font: 15px/1.5 var(--bc-fonte);
}

/* ── barra lateral ────────────────────────────────────────────────────── */

.painel__lateral {
  flex: 0 0 232px;
  display: flex;
  flex-direction: column;
  padding: 1.25rem 1rem;
  background: var(--bc-lateral-bg);
  border-right: 1px solid var(--bc-lateral-line);
  /* A LARGURA e o que anima ao recolher -- tudo o mais (icone, texto) reage
     a essa mudanca via as regras `.painel--recolhida` abaixo. Uma
     transicao so, no lugar certo, e o que faz a barra parecer viva sem
     virar circo: pedido do Gustavo foi fluidez, nao efeito chamativo. */
  transition: flex-basis 180ms cubic-bezier(.2,.7,.3,1);
}

.painel__topo {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 0 .1rem 1rem;
}

.painel__marca {
  display: flex;
  align-items: center;
  gap: .55rem;
  text-decoration: none;
  overflow: hidden;
}

/* Identidade da conta (a RAIZ de quem esta logado), logo abaixo da marca --
   o mesmo lugar que a Zenvia usa para o nome da organizacao no topo da
   barra. Nome com prefixo `raiz`, e nao `conta`, de proposito: `.painel__
   conta-nome` ja existe em dono.css, para a CELULA da tabela de contas na
   area do dono -- mesmo bundle de CSS (`:app` do Propshaft), entao um nome
   igual aqui pegaria emprestado o estilo de la, ou pior, mudaria o de la sem
   ninguem notar. Encolhe junto com o resto quando a barra recolhe (ver a
   regra em "barra RECOLHIDA" abaixo). */
.painel__raiz {
  display: flex;
  flex-direction: column;
  gap: .1rem;
  margin: 0 .1rem 1.25rem;
  padding: .55rem .7rem;
  background: var(--bc-lateral-bg-2);
  border: 1px solid var(--bc-lateral-line);
  border-radius: var(--bc-raio);
  overflow: hidden;
  transition: opacity 120ms ease;
}

.painel__raiz-nome {
  color: var(--bc-lateral-ink);
  font-size: .82rem; font-weight: 600;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

.painel__raiz-id {
  color: var(--bc-lateral-ink-mut);
  font-family: var(--bc-fonte-mono);
  font-size: .7rem;
}

/* UMA logo por vez: expandida mostra so o lockup horizontal (simbolo + nome
   ja desenhados juntos no mesmo svg); recolhida mostra so o simbolo sozinho.
   O `.painel__marca-simbolo` fica escondido por padrao com o mesmo truque de
   `opacity/width/margin 0` que a barra ja usa para `.painel__marca-nome`
   quando recolhe -- symetrico de proposito, os dois lados da mesma troca. */
.painel__marca-simbolo {
  height: 26px; width: 0; flex: 0 0 auto;
  opacity: 0; margin: 0;
  pointer-events: none;
  transition: opacity 120ms ease;
}
/* Rebrand BC Service (15/09): a marca virou `image_tag` fixo (raster, cor
   propria da marca do Baratao), nao mais o SVG em `currentColor` de antes
   -- `color` abaixo ficou sem efeito (nenhum filho usa `currentColor`),
   mantido so porque nao atrapalha; pode remover quando alguem mexer aqui
   de novo. */
.painel__marca-nome {
  height: 18px; width: auto;
  color: var(--bc-lateral-marca);
  transition: opacity 120ms ease;
}

.painel__recolher {
  appearance: none;
  flex: 0 0 auto;
  display: grid; place-items: center;
  width: 26px; height: 26px;
  padding: 0;
  color: var(--bc-lateral-ink-mut);
  background: none;
  border: 1px solid var(--bc-lateral-line);
  border-radius: 50%;
  cursor: pointer;
  transition: color 120ms ease, border-color 120ms ease, background-color 120ms ease;
}

.painel__recolher:hover {
  color: var(--bc-lateral-ink);
  border-color: var(--bc-lateral-marca);
  background: var(--bc-lateral-bg-2);
}

.painel__recolher-seta {
  width: 15px; height: 15px;
  transition: rotate 180ms ease;
}

.painel__recolher-seta--virada { rotate: 180deg; }

.painel__nav {
  display: flex;
  flex-direction: column;
  gap: .15rem;
}

.painel__nav-item,
.painel__tema,
.painel__sair {
  display: flex;
  align-items: center;
  gap: .7rem;
  padding: .6rem .8rem;
  color: var(--bc-lateral-ink);
  border-radius: var(--bc-raio);
  text-decoration: none;
  font: inherit;
  font-size: .9rem; font-weight: 600;
  white-space: nowrap;
  transition: background-color 140ms ease, color 140ms ease, translate 140ms ease;
}

.painel__nav-item:hover,
.painel__tema:hover,
.painel__sair:hover {
  color: var(--bc-lateral-ink);
  background: var(--bc-lateral-bg-2);
  /* Um deslize sutil no hover -- e a diferenca entre "clicavel" e
     "clicavel e vivo". Desliga sozinho para quem pediu menos movimento
     (marca_tokens.css ja cobre isso globalmente). */
  translate: 2px 0;
}

/* Item atual: pilula verde-neon sobre o verde profundo -- "onde eu estou"
   fica obvio sem precisar ler o rotulo com atencao, mesmo raciocinio de
   antes, so que agora com um par de cores proprio da barra (nunca
   `--bc-primary`, que muda com o alternador -- a barra nao muda). */
.painel__nav-item--atual {
  color: var(--bc-lateral-atual-ink);
  background: var(--bc-lateral-atual-bg);
}

.painel__nav-item--atual:hover {
  color: var(--bc-lateral-atual-ink);
  background: var(--bc-lateral-atual-bg);
  translate: 0;
}

.painel__icone {
  flex: 0 0 auto;
  width: 20px; height: 20px;
}

.painel__nav-rotulo {
  overflow: hidden;
  text-overflow: ellipsis;
  transition: opacity 120ms ease;
}

/* Selo de contagem (so em "Conversas", quando ha conversa aberta pendente
   -- ver layouts/painel.html.erb). `margin-left: auto` empurra pro fim do
   item, sem precisar mudar `justify-content` do `.painel__nav-item`
   inteiro. Cor FIXA (nunca --bc-primary, que muda com o alternador): o
   selo vive na barra lateral, que nao muda de tema (marca_tokens.css). */
.painel__nav-contagem {
  margin-left: auto;
  flex: 0 0 auto;
  padding: .05rem .4rem;
  color: var(--bc-lateral-atual-ink);
  background: var(--bc-lateral-atual-bg);
  border-radius: 999px;
  font-family: var(--bc-fonte-mono);
  font-size: .7rem; font-weight: 700;
}

/* Item ATUAL ja preenche o fundo inteiro com a mesma cor do selo -- sem
   isto o numero ficaria invisivel (fundo e texto identicos). */
.painel__nav-item--atual .painel__nav-contagem {
  color: var(--bc-lateral-bg);
  background: var(--bc-lateral-ink);
}

/* Barra recolhida (so icones): sem espaco pro selo, e o item fica
   `justify-content: center` (regra mais abaixo) -- o `margin-left: auto`
   empurraria o numero para fora da vista. */
body.painel--recolhida .painel__nav-contagem { display: none; }

/* ── botao/estados que nao sao link (tema, sair) ─────────────────────── */

.painel__tema,
.painel__sair {
  width: 100%;
  appearance: none;
  background: none;
  border: 0;
  cursor: pointer;
  text-align: left;
}

.painel__sair:hover { color: var(--bc-lateral-danger); }

/* O sol mostra quando o tema atual e CLARO (convida a trocar para escuro);
   a lua, o oposto. `[data-theme="escuro"]` so existe quando a pessoa ja
   trocou -- reaproveita o MESMO atributo que marca_tokens.css usa para
   repintar as cores, sem estado duplicado em lugar nenhum. Invertido do
   redesenho de 07/09: o padrao virou claro (ver marca_tokens.css). */
.painel__icone--lua { display: none; }
[data-theme="escuro"] .painel__icone--sol { display: none; }
[data-theme="escuro"] .painel__icone--lua { display: block; }

.painel__rodape {
  margin-top: auto;
  padding-top: 1rem;
  border-top: 1px solid var(--bc-lateral-line);
  display: flex;
  flex-direction: column;
  gap: .3rem;
}

/* O nome da EMPRESA sempre visivel: num produto multi-cliente, "em qual conta
   eu estou" nao pode depender de memoria. */
.painel__empresa {
  padding: .3rem .8rem .5rem;
  color: var(--bc-lateral-ink-mut);
  font-size: .78rem;
  font-weight: 600;
  letter-spacing: .02em;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* ── barra RECOLHIDA (so icones) ─────────────────────────────────────── */

body.painel--recolhida .painel__lateral { flex-basis: 72px; }
body.painel--recolhida .painel__marca-nome,
body.painel--recolhida .painel__nav-rotulo,
body.painel--recolhida .painel__empresa {
  opacity: 0;
  width: 0;
  margin: 0;
  pointer-events: none;
}
/* Troca de logo: recolhida inverte quem some. */
body.painel--recolhida .painel__marca-simbolo {
  opacity: 1; width: auto; pointer-events: auto;
}
body.painel--recolhida .painel__raiz {
  opacity: 0; height: 0; margin: 0; padding: 0;
  pointer-events: none;
}
body.painel--recolhida .painel__topo { justify-content: center; }
body.painel--recolhida .painel__recolher { position: absolute; opacity: 0; pointer-events: none; }
body.painel--recolhida .painel__lateral:hover .painel__recolher {
  position: static; opacity: 1; pointer-events: auto;
}
body.painel--recolhida .painel__nav-item,
body.painel--recolhida .painel__tema,
body.painel--recolhida .painel__sair { justify-content: center; padding-inline: 0; }
body.painel--recolhida .painel__nav-item:hover,
body.painel--recolhida .painel__tema:hover,
body.painel--recolhida .painel__sair:hover { translate: 0; }
body.painel--recolhida .painel__empresa { padding: 0; }

/* ── conteudo ─────────────────────────────────────────────────────────── */

.painel__conteudo {
  flex: 1 1 auto;
  min-width: 0;
  max-width: 1040px;
  padding: 2.5rem 2rem 4rem;
}

/* Faixa da queda do tempo real (A3, 09/11/2026), acima do conteudo. Tinta do tema com fundo ambar translucido e borda: o texto
   mede o contraste da tinta, nao do ambar. `[hidden]` precisa de regra propria porque o `display: flex` vence o atributo. */
.painel__tempo-real {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .75rem;
  flex-wrap: wrap;
  margin: 0 0 1rem;
  padding: .65rem .9rem;
  color: var(--bc-ink);
  background: color-mix(in srgb, var(--bc-warn) 22%, var(--bc-surface));
  border: 1px solid var(--bc-warn);
  border-radius: var(--bc-raio);
  font-size: .88rem; font-weight: 600;
}

.painel__tempo-real[hidden] { display: none; }

.painel__tempo-real-botao {
  padding: .4rem .9rem;
  appearance: none;
  color: var(--bc-primary-ink);
  background: var(--bc-primary);
  border: 0;
  border-radius: var(--bc-raio);
  font: inherit;
  font-size: .85rem; font-weight: 700;
  cursor: pointer;
}

.painel__tempo-real-botao[hidden] { display: none; }

.painel__flash {
  margin: 0 0 1.5rem;
  padding: .68rem .85rem;
  border-radius: var(--bc-raio);
  font-size: .9rem;
  animation: painel-flash-entra 220ms cubic-bezier(.2,.7,.3,1) both;
}

@keyframes painel-flash-entra {
  from { opacity: 0; translate: 0 -6px; }
  to   { opacity: 1; translate: 0 0; }
}

.painel__flash--aviso {
  color: var(--bc-ok);
  background: color-mix(in oklab, var(--bc-ok) 14%, transparent);
  border: 1px solid color-mix(in oklab, var(--bc-ok) 32%, transparent);
}

.painel__flash--alerta {
  color: var(--bc-danger);
  background: color-mix(in oklab, var(--bc-danger) 14%, transparent);
  border: 1px solid color-mix(in oklab, var(--bc-danger) 32%, transparent);
}

/* dono.css estiliza `.convites__campo input`; o convite de time acrescenta
   dois `select` (grupo e papel), que precisam da mesma casca. */
.convites__campo select {
  padding: .6rem .7rem;
  color: var(--bc-ink);
  background: var(--bc-surface-2);
  border: 1px solid var(--bc-campo-borda);
  border-radius: var(--bc-raio);
  font: inherit;
}

.convites__campo select:focus-visible {
  outline: 2px solid var(--bc-focus);
  outline-offset: 1px;
}

/* `.convites__estado--pendente` ja existe em dono.css (Convite#estado usa o
   mesmo nome de estado). Template#meta_status acrescenta tres que o convite
   nao tem -- so essas tres entram aqui, para nao duplicar a que ja existe. */
.convites__estado--aprovado {
  color: var(--bc-ok);
  background: color-mix(in srgb, var(--bc-ok) 14%, transparent);
}

.convites__estado--recusado {
  color: var(--bc-danger);
  background: color-mix(in srgb, var(--bc-danger) 14%, transparent);
}

.convites__estado--desativado {
  color: var(--bc-ink-faint);
  background: color-mix(in srgb, var(--bc-ink-faint) 14%, transparent);
}

/* Template#meta_status "indeterminado" (achado 11/09): submissao com falha
   de rede, pode ter chegado na Meta ou nao. Cor de aviso, nao neutro nem
   vermelho -- nao e erro comum, e "confira antes de agir". */
.convites__estado--indeterminado {
  color: var(--bc-warn);
  background: color-mix(in srgb, var(--bc-warn) 14%, transparent);
}

/* Botao secundario dentro da tabela de templates. Mesmo reset de
   `.painel__sair` (appearance none, sem fundo, cursor pointer) -- mas
   `.painel__sair` e um item de largura total na barra lateral, e este vive
   ao lado do badge de estado numa celula, entao ganha contorno e formato de
   pilula (mesmo raio de `.convites__estado`) em vez de preencher a linha. */
.templates__submeter {
  margin-left: .5rem;
  padding: .18rem .6rem;
  appearance: none;
  color: var(--bc-ink-soft);
  background: none;
  border: 1px solid var(--bc-line);
  border-radius: 999px;
  font: inherit;
  font-size: .75rem; font-weight: 600;
  cursor: pointer;
  transition: color 140ms ease, background-color 140ms ease, border-color 140ms ease;
}

.templates__submeter:hover {
  color: var(--bc-primary-ink);
  background: var(--bc-primary);
  border-color: var(--bc-primary);
}

/* Mesmo formato de pilula, mas neutro -- "Atualizar status" nao e a acao
   principal da linha (a Meta ja tem o template), so uma consulta. */
.templates__atualizar {
  margin-left: .5rem;
  padding: .18rem .6rem;
  appearance: none;
  color: var(--bc-ink-mut);
  background: none;
  border: 1px solid var(--bc-line);
  border-radius: 999px;
  font: inherit;
  font-size: .75rem; font-weight: 600;
  cursor: pointer;
  transition: color 140ms ease, border-color 140ms ease;
}

.templates__atualizar:hover {
  color: var(--bc-ink);
  border-color: var(--bc-ink-mut);
}

/* Nome do modelo + o id da Meta embaixo, pequeno e monoespacado -- mesmo
   padrao do WhatsApp Manager, para quem tira o id daqui para uma integracao
   reconhecer de cara qual e qual. */
.templates__nome { display: block; font-weight: 600; }

.templates__id {
  display: block;
  margin-top: .1rem;
  color: var(--bc-ink-mut);
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-size: .72rem;
}

.templates__categoria-nota {
  display: block;
  margin-top: .1rem;
  color: var(--bc-ink-mut);
  font-size: .72rem;
}

/* ── configuracoes (hub) ──────────────────────────────────────────────── */

/* So dois links, de proposito -- nao vira grid de cartoes so para duas
   entradas. Mesma casca de `.painel__vazio` (fundo de superficie, borda
   fina), empilhada. */
.configuracoes__lista {
  display: grid;
  gap: .75rem;
  margin: 0;
  padding: 0;
  list-style: none;
  max-width: 480px;
}

.configuracoes__link {
  display: block;
  padding: 1rem 1.1rem;
  color: inherit;
  background: var(--bc-surface);
  border: 1px solid var(--bc-line);
  border-radius: var(--bc-raio);
  text-decoration: none;
  transition: border-color 140ms ease, background-color 140ms ease;
}

.configuracoes__link:hover {
  border-color: var(--bc-primary);
  background: color-mix(in oklab, var(--bc-primary) 6%, var(--bc-surface));
}

.configuracoes__link-titulo {
  display: block;
  color: var(--bc-ink);
  font-weight: 600; font-size: .95rem;
}

.configuracoes__link-legenda {
  display: block;
  margin-top: .2rem;
  color: var(--bc-ink-mut);
  font-size: .82rem;
}

/* Nota de limitacao declarada (webhook de saida ainda nao existe, Plano 5) --
   mesmo estilo de `.painel__legenda`, so um pouco mais apagada para nao
   competir com a legenda principal da tela. */
.configuracoes__nota {
  color: var(--bc-ink-faint);
  font-size: .85rem;
}

/* ── tokens (chaves da API) ───────────────────────────────────────────── */

/* O valor que so aparece UMA VEZ: precisa se destacar de verdade, porque
   ninguem vai poder copiar de novo depois deste carregamento. `--bc-warn`
   e o mesmo tom que a janela de 24h usa para "acabando" -- o mesmo tipo de
   urgencia que o token novo pede ("copie AGORA"). */
.chaves__token-novo {
  margin: 0 0 1.5rem;
  padding: .9rem 1.1rem;
  background: color-mix(in oklab, var(--bc-warn) 16%, var(--bc-surface));
  border: 1px solid color-mix(in oklab, var(--bc-warn) 45%, transparent);
  border-radius: var(--bc-raio);
}

.chaves__token-novo p {
  margin: 0 0 .5rem;
  color: var(--bc-ink);
  font-size: .88rem;
}

.chaves__token-novo code {
  display: block;
  padding: .65rem .8rem;
  overflow-wrap: break-word;
  color: var(--bc-ink);
  background: var(--bc-bg);
  border: 1px solid var(--bc-line);
  border-radius: var(--bc-raio);
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-size: .85rem;
  user-select: all;
}

.chaves__form {
  display: flex;
  gap: .6rem;
  align-items: center;
  flex-wrap: wrap;
  margin: 0 0 1.5rem;
}

.chaves__form input[type="text"] {
  min-width: 280px;
  padding: .6rem .8rem;
  color: var(--bc-ink);
  background: var(--bc-surface-2);
  border: 1px solid var(--bc-line);
  border-radius: var(--bc-raio);
  font: inherit;
}

.chaves__form input[type="text"]:focus-visible {
  outline: 2px solid var(--bc-focus);
  outline-offset: 1px;
}

.chaves__form input[type="submit"] {
  padding: .6rem 1rem;
  color: var(--bc-primary-ink);
  background: var(--bc-primary);
  border: 0;
  border-radius: var(--bc-raio);
  font: inherit; font-weight: 600;
  cursor: pointer;
}

.chaves__form input[type="submit"]:hover { background: var(--bc-primary-hover); }

/* Grupos por chave (API separada por grupo, 30/09). O aviso de "sem grupo"
   usa o mesmo tom de urgencia do token novo: e um estado a corrigir, nao
   informacao neutra. */
.chaves__sem-grupo {
  margin: 0 0 .5rem;
  padding: .45rem .6rem;
  color: var(--bc-ink);
  background: color-mix(in oklab, var(--bc-warn) 16%, var(--bc-surface));
  border: 1px solid color-mix(in oklab, var(--bc-warn) 45%, transparent);
  border-radius: var(--bc-raio);
  font-size: .82rem;
}

.chaves__grupos {
  display: flex;
  flex-direction: column;
  gap: .3rem;
  font-size: .88rem;
}

.chaves__grupos label { display: flex; gap: .4rem; align-items: center; }

.chaves__dono { color: var(--bc-ink-soft); font-size: .8rem; }

.chaves__grupos input[type="submit"] {
  align-self: flex-start;
  margin-top: .3rem;
  padding: .35rem .7rem;
  color: var(--bc-primary-ink);
  background: var(--bc-primary);
  border: 0;
  border-radius: var(--bc-raio);
  font: inherit; font-weight: 600;
  cursor: pointer;
}

@media (max-width: 760px) {
  body.painel { flex-direction: column; }
  .painel__lateral {
    flex: 0 0 auto !important;
    flex-direction: row;
    align-items: center;
    padding: .85rem 1rem;
    border-right: 0;
    border-bottom: 1px solid var(--bc-lateral-line);
  }
  .painel__topo { margin: 0 1rem 0 0; }
  .painel__recolher { display: none; }
  /* Achado do redesenho de 08/09: sem `flex-shrink: 0`, este chip
     espremia numa barra HORIZONTAL apertada e o nome da conta ficava
     ilegivel (so a casca visivel, sem o texto). Ja existia antes desta
     rodada -- so ficou mais visivel contra o verde profundo. Mesmo
     tratamento de `.painel__empresa` logo abaixo: escondido no mobile,
     onde o espaco e curto e ninguem confunde de conta no proprio
     celular. */
  .painel__raiz { display: none; }
  .painel__nav { flex-direction: row; }
  .painel__nav-rotulo { display: none; }
  /* Mesma barra horizontal apertada do chip de conta (regra acima) -- sem
     espaco pro selo ao lado do rotulo, que ja esta escondido. */
  .painel__nav-contagem { display: none; }
  .painel__rodape {
    margin: 0 0 0 auto; padding: 0; border-top: 0;
    flex-direction: row; align-items: center;
  }
  .painel__empresa { display: none; }
  .painel__sair, .painel__tema { width: auto; }
  .painel__conteudo { padding: 1.75rem 1.25rem 3rem; }
}

/* ---------------------------------------------------------------------------
   Mensagens pre-determinadas (17/09) -- CRUD em Configuracoes.

   `dono.css` ja estiliza `.convites__campo input` e limita `.convites__form`
   a 380px, que serve para um campo de UMA linha. Aqui ha um `<textarea>` de
   varias linhas: 380px o deixaria estreito demais para ler o que se escreve,
   entao esta tela pede `--largo` explicitamente, em vez de alargar o
   formulario de convite junto (que ninguem pediu para mudar).
   --------------------------------------------------------------------------- */
.convites__form--largo { max-width: 640px; }

.convites__campo textarea {
  width: 100%;
  padding: .72rem .9rem;
  font: inherit; font-size: 1rem; line-height: 1.5;
  color: var(--bc-ink);
  background: var(--bc-bg);
  border: 1px solid var(--bc-line);
  border-radius: var(--bc-raio);
  resize: vertical;
}

.convites__dica {
  color: var(--bc-ink-faint);
  font-size: .78rem; line-height: 1.45;
}

/* O atalho aparece como codigo (`/bomdia`) porque e literalmente o que se
   digita -- fonte monoespacada deixa claro que nao ha espaco escondido. */
.painel__codigo {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: .9em;
}

/* O texto da resposta pode ser longo; sem limite a coluna estoura a tabela e
   volta a rolagem lateral que o commit de 17/09 tirou. */
.painel__celula-texto {
  max-width: 34rem;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  color: var(--bc-ink-soft);
}

/* ---------------------------------------------------------------------------
   Disparo manual (19/10) -- a mensagem do template escolhido, como o cliente
   vai receber, com cada campo destacado no lugar do seu {{N}}. A bolha e a
   da mensagem enviada da inbox (`--bc-bolha-nos`, com a letra e a borda de
   `.painel .conversa__bolha--saida` em z_refinamento.css), para ler como
   "isto e o que sai". `--bc-ink`, NAO `--bc-primary-ink`: o refinamento
   clareou a bolha, e letra branca nela some (mesmo motivo de
   `.suporte__bolha--saida`).
   --------------------------------------------------------------------------- */
.disparos__template { display: grid; gap: .6rem; }

/* O `display: grid` de cima venceria o `hidden` (que no navegador e so um
   `display: none` da folha padrao): sem esta linha o Stimulus marcaria o
   bloco e ele continuaria na tela. */
.disparos__template[hidden] { display: none; }

.disparos__rotulo {
  margin: 0;
  color: var(--bc-ink-soft);
  font-size: .8rem; font-weight: 600;
}

/* `fit-content` + teto: na tela de confirmar a bolha fica fora do formulario,
   e sem isto esticava na largura inteira do conteudo. */
.disparos__bolha {
  justify-self: start;
  width: fit-content;
  max-width: min(100%, 30rem);
  margin: 0;
  padding: .6rem .8rem;
  color: var(--bc-ink);
  background: var(--bc-bolha-nos);
  border: 1px solid color-mix(in srgb, var(--bc-primary) 20%, var(--bc-line));
  border-radius: var(--bc-raio);
  border-bottom-right-radius: 3px;
  font-size: .9rem; line-height: 1.45;
  white-space: pre-wrap;
  overflow-wrap: break-word;
}

.disparos__variavel {
  padding: 0 .3em;
  color: var(--bc-primary);
  font-weight: 700;
  background: color-mix(in srgb, var(--bc-primary) 12%, transparent);
  border-radius: 4px;
  outline: 1px dashed color-mix(in srgb, var(--bc-primary) 55%, transparent);
}

/* O passo a passo do Disparo manual (19/10). Ao lado do formulario quando
   cabe; em cima dele quando nao cabe (o guia vem antes no HTML, entao e o
   que se le primeiro). `@container`, e nao `@media`: quem decide e a largura
   do conteudo, que muda com a barra lateral aberta ou recolhida. */
.disparos { container-type: inline-size; }

.disparos__layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 1.5rem;
  align-items: start;
}

@container (min-width: 860px) {
  .disparos__layout {
    grid-template-columns: minmax(0, 480px) minmax(0, 22rem);
    grid-template-areas: "form guia";
    gap: 2rem;
  }
  .disparos__layout > form { grid-area: form; }
  .disparos__guia { grid-area: guia; position: sticky; top: 1.5rem; }
}

.disparos__guia {
  display: grid;
  gap: .9rem;
  max-width: 480px;
  padding: 20px 22px;
  background: var(--bc-surface);
  border: 1px solid var(--bc-line);
  border-radius: 15px;
}

.disparos__guia-titulo {
  margin: 0;
  color: var(--bc-ink);
  font-size: 1rem; font-weight: 700;
}

/* Numero em circulo por contador de CSS: a lista continua sendo um <ol> de
   verdade (leitor de tela le "1 de 4"), so o marcador muda de cara. */
.disparos__passos {
  display: grid;
  gap: .8rem;
  margin: 0; padding: 0;
  list-style: none;
  counter-reset: passo;
}

.disparos__passos li {
  position: relative;
  padding-left: 2.1rem;
  color: var(--bc-ink-soft);
  font-size: .88rem; line-height: 1.45;
  counter-increment: passo;
}

.disparos__passos li::before {
  content: counter(passo);
  position: absolute; left: 0; top: -.05rem;
  display: grid; place-items: center;
  width: 1.5rem; height: 1.5rem;
  color: var(--bc-primary-ink);
  background: var(--bc-primary);
  border-radius: 50%;
  font-size: .78rem; font-weight: 700;
}

.disparos__passos strong { color: var(--bc-ink); }

.disparos__guia-aviso,
.disparos__guia-nota {
  margin: 0;
  font-size: .82rem; line-height: 1.45;
}

.disparos__guia-aviso {
  padding: .55rem .7rem;
  color: var(--bc-warn);
  background: color-mix(in srgb, var(--bc-warn) 10%, transparent);
  border-radius: 8px;
  font-weight: 600;
}

.disparos__guia-nota { color: var(--bc-ink-faint); }

/* O formato do CSV, junto do campo do arquivo (19/10). O exemplo tem cara de
   planilha -- linhas e colunas -- porque e de uma planilha que o atendente
   parte. */
.disparos__formato {
  display: grid;
  gap: .5rem;
  padding: .75rem .85rem;
  background: var(--bc-bg);
  border: 1px dashed var(--bc-line);
  border-radius: var(--bc-raio);
}

.disparos__regras {
  display: grid;
  gap: .3rem;
  margin: 0; padding-left: 1.1rem;
  color: var(--bc-ink-soft);
  font-size: .8rem; line-height: 1.45;
}

.disparos__regras strong { color: var(--bc-ink); }

/* Na tela de confirmar, o que a planilha manda para cada numero (19/10),
   ao lado do telefone e mais apagado que ele. */
.disparos__valores-da-planilha { color: var(--bc-ink-soft); }

/* `__variavel-titulo`: o titulo de coluna que preenche um campo da mensagem
   (19/10). Mesma cara do titulo do telefone, classe propria porque o teste
   dos titulos sugeridos passa cada `__cabecalho` pelo leitor como coluna de
   TELEFONE. */
.disparos__cabecalho,
.disparos__variavel-titulo {
  padding: 0 .3em;
  color: var(--bc-ink);
  background: color-mix(in srgb, var(--bc-ink-faint) 14%, transparent);
  border-radius: 4px;
  font-family: var(--bc-fonte-mono);
  font-size: .92em;
}

.disparos__exemplo {
  justify-self: start;
  border-collapse: collapse;
  font-family: var(--bc-fonte-mono);
  font-size: .78rem;
}

.disparos__exemplo th,
.disparos__exemplo td {
  padding: .25rem .6rem;
  text-align: left;
  color: var(--bc-ink);
  border: 1px solid var(--bc-line);
}

.disparos__exemplo th {
  font-weight: 700;
  background: color-mix(in srgb, var(--bc-primary) 10%, transparent);
}

/* Atendimento por este numero (numero dedicado, 19/10): o horario e uma
   linha por dia -- nome, inicio, fim, fechado. Os rotulos "Inicio"/"Fim"
   existem para leitor de tela; na grade, a ordem ja diz qual e qual. */
.numero-atendimento { max-width: 640px; }
.numero-atendimento__horario {
  display: grid; gap: .5rem;
  margin: 0; padding: .75rem 1rem;
  border: 1px solid var(--bc-line); border-radius: 10px;
}
.numero-atendimento__horario legend { padding: 0 .35rem; font-weight: 600; }
.numero-atendimento__dia {
  display: grid; align-items: center; gap: .5rem;
  grid-template-columns: 6rem auto auto auto;
}
.numero-atendimento__rotulo {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap;
}
.numero-atendimento__fechado { display: inline-flex; align-items: center; gap: .3rem; }
.numero-atendimento textarea { width: 100%; font: inherit; }

@media (max-width: 480px) {
  .numero-atendimento__dia { grid-template-columns: 1fr 1fr; }
  .numero-atendimento__nome-do-dia { grid-column: 1 / -1; font-weight: 600; }
}

/* Avaliacoes (19/10): as notas dos postos ao suporte do numero dedicado. */
.avaliacoes__filtro { margin: 1rem 0; }  /* o resto vem de .dashboard__periodo (mesmo filtro de Gastos e Inicio) */
.avaliacoes__resumo { display: flex; flex-wrap: wrap; gap: 1rem; margin-bottom: 1.5rem; }
.avaliacoes__cartao {
  display: grid; gap: .25rem; padding: .75rem 1rem; min-width: 9rem;
  border: 1px solid var(--bc-line); border-radius: 10px;
}
.avaliacoes__rotulo { color: var(--bc-ink-mut); font-size: .8rem; }
.avaliacoes__valor { font-size: 1.4rem; }
.avaliacoes__cartao--notas { grid-template-columns: auto auto; column-gap: 1rem; }
.avaliacoes__nota { display: contents; }
.avaliacoes__tabela { width: 100%; border-collapse: collapse; margin-bottom: 1.5rem; }
.avaliacoes__tabela th, .avaliacoes__tabela td {
  padding: .45rem .5rem; border-bottom: 1px solid var(--bc-line); text-align: left; vertical-align: top;
}
.avaliacoes__comentario { white-space: pre-wrap; overflow-wrap: anywhere; max-width: 28rem; }
@media (max-width: 640px) {
  .avaliacoes__tabela { display: block; overflow-x: auto; }
}