:root {
  --azul-marinho: #1c3d5a;
  --azul-marinho-escuro: #14293c;
  --azul-destaque: #2f6690;
  --cinza-fundo: #f2f4f7;
  --cinza-borda: #d7dce2;
  --cinza-texto: #47535e;
  --verde-ativo: #1f7a4d;
  --verde-atendente: #0f6e56;
  --vermelho-erro: #a4222c;
  --branco: #ffffff;
  --marca-laranja: #ed813b;
  --altura-topo: 72px; /* faixa de cima: logo na barra lateral + cabeçalho da página */
  --marca-cinza-azulado-claro: #c9cde0;
}

* { box-sizing: border-box; }
/* o atributo hidden sempre esconde, mesmo em elemento com display próprio (flex, grid...) */
[hidden] { display: none !important; }

body {
  margin: 0;
  font-family: "Segoe UI", Arial, Helvetica, sans-serif;
  background: var(--cinza-fundo);
  color: var(--cinza-texto);
}

a { color: var(--azul-destaque); text-decoration: none; }
a:hover { text-decoration: underline; }

/* Tela de login / setup */

.tela-cheia {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(180deg, var(--azul-marinho) 0%, var(--azul-marinho-escuro) 100%);
}

.cartao-login {
  background: var(--branco);
  padding: 2.5rem;
  border-radius: 6px;
  width: 100%;
  max-width: 360px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.25);
}

.cartao-login h1 {
  margin: 0 0 0.25rem;
  color: var(--azul-marinho);
  font-size: 1.5rem;
}

.subtitulo {
  margin: 0 0 1.5rem;
  color: var(--cinza-texto);
  font-size: 0.9rem;
}

/* Formulários */

form label {
  display: block;
  font-size: 0.85rem;
  font-weight: 600;
  margin-bottom: 1rem;
  color: var(--azul-marinho);
}

form label.linha {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-weight: 400;
}

form input[type="text"],
form input[type="email"],
form input[type="password"],
form input[type="number"],
form select,
form textarea {
  display: block;
  width: 100%;
  margin-top: 0.35rem;
  padding: 0.55rem 0.7rem;
  border: 1px solid var(--cinza-borda);
  border-radius: 4px;
  font-size: 0.95rem;
  font-family: inherit;
}

form textarea { resize: vertical; }

/* grupo de botões de escolha (radio), ex.: "Ao desistir" da inatividade em Configurações */
.grupo-opcoes { margin-bottom: 1rem; }
.grupo-opcoes-titulo { display: block; font-size: 0.85rem; font-weight: 600; color: var(--azul-marinho); margin-bottom: 0.4rem; }
.grupo-opcoes label.linha { margin-bottom: 0.4rem; font-size: 0.9rem; color: var(--cinza-texto); }

fieldset {
  border: 1px solid var(--cinza-borda);
  border-radius: 4px;
  margin-bottom: 1rem;
  padding: 0.75rem 1rem;
}

fieldset legend {
  font-weight: 600;
  color: var(--azul-marinho);
  padding: 0 0.4rem;
}

button {
  background: var(--azul-marinho);
  color: var(--branco);
  border: none;
  padding: 0.6rem 1.2rem;
  border-radius: 4px;
  font-size: 0.95rem;
  cursor: pointer;
}

button:hover { background: var(--azul-destaque); }

.erro {
  background: #fbe9e9;
  color: var(--vermelho-erro);
  border: 1px solid #f0c4c7;
  padding: 0.6rem 0.8rem;
  border-radius: 4px;
  font-size: 0.85rem;
  margin-bottom: 1rem;
}

.sucesso {
  background: #e3f3ea;
  color: var(--verde-ativo);
  border: 1px solid #bfe3cd;
  padding: 0.6rem 0.8rem;
  border-radius: 4px;
  font-size: 0.85rem;
  margin-bottom: 1rem;
}

.referencia-variaveis {
  margin-top: 1.5rem;
  font-size: 0.85rem;
  color: var(--cinza-texto);
}
.referencia-variaveis summary { cursor: pointer; font-weight: 600; color: var(--azul-marinho); }
.referencia-variaveis ul { margin: 0.6rem 0; padding-left: 1.2rem; }
.referencia-variaveis code { background: #eef1f4; padding: 0.05rem 0.35rem; border-radius: 3px; }

.dica { color: #5f6d7a; font-size: 0.85rem; }

.qr-codigo { text-align: center; }
.qr-codigo img {
  border: 1px solid var(--cinza-borda);
  border-radius: 8px;
  padding: 0.75rem;
  background: #fff;
}

/* Painel interno: menu na lateral esquerda */

.app-shell {
  display: flex;
  min-height: 100vh;
}

.barra-lateral {
  width: 230px;
  flex-shrink: 0;
  background: var(--azul-marinho);
  color: var(--branco);
  display: flex;
  flex-direction: column;
  position: sticky;
  top: 0;
  height: 100vh;
  transition: width 0.15s ease;
  overflow: hidden;
}

html.menu-recolhido .barra-lateral { width: 64px; }

.barra-lateral .marca {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  /* mesma altura do .fila-cabecalho, pra linha de baixo dos dois bater certinho */
  box-sizing: border-box;
  height: var(--altura-topo);
  padding: 0 1rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
  font-weight: 700;
  font-size: 1.05rem;
}

.marca-icone { height: 34px; width: 34px; flex-shrink: 0; }

.marca-nome { line-height: 1.2; min-width: 0; }
.marca-nome-linha {
  font-family: "Poppins", "Segoe UI", Arial, sans-serif;
  font-weight: 700;
  font-size: 1.15rem;
  white-space: nowrap;
}
.marca-chat { color: var(--branco); }
.marca-digital { color: var(--marca-laranja); }

.botao-recolher {
  background: transparent;
  border: none;
  color: var(--branco);
  padding: 0.15rem;
  cursor: pointer;
  display: flex;
  flex-shrink: 0;
}
.botao-recolher:hover { color: #dce6ee; }

.icone { width: 20px; height: 20px; flex-shrink: 0; }

.barra-lateral nav {
  flex: 1;
  display: flex;
  flex-direction: column;
  padding: 1rem 0;
}

.barra-lateral nav a {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  color: #dce6ee;
  padding: 0.65rem 1.5rem;
  font-size: 0.9rem;
  white-space: nowrap;
}
.barra-lateral nav a:hover {
  color: var(--branco);
  background: rgba(255, 255, 255, 0.08);
  text-decoration: none;
}

html.menu-recolhido .barra-lateral nav a { justify-content: center; padding: 0.65rem; }
html.menu-recolhido .barra-lateral .marca { padding: 0 0.6rem; justify-content: center; gap: 0.4rem; }
html.menu-recolhido .marca-icone { height: 22px; width: 22px; }

.sair {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.5rem;
  margin: 0;
  padding: 1rem 1.5rem;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
}

html.menu-recolhido .sair { align-items: center; padding: 1rem 0.5rem; }

.sair .usuario { font-size: 0.85rem; color: #dce6ee; white-space: nowrap; }
.sair button {
  background: transparent;
  border: 1px solid #4d6c85;
  padding: 0.35rem 0.8rem;
  font-size: 0.8rem;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  color: var(--branco);
  cursor: pointer;
  white-space: nowrap;
}
.sair button:hover { background: var(--azul-destaque); }

html.menu-recolhido .recolhivel { display: none; }

.area-principal {
  flex: 1;
  min-width: 0;
}

.conteudo {
  max-width: 960px;
  margin: 2rem auto;
  padding: 0 2rem;
}

.conteudo-estreita { max-width: 560px; }

.conteudo h1 { color: var(--azul-marinho); }

.cabecalho-lista {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 1rem;
}

.botao {
  background: var(--azul-marinho);
  color: var(--branco);
  padding: 0.5rem 1rem;
  border-radius: 4px;
  font-size: 0.9rem;
}
.botao:hover { background: var(--azul-destaque); text-decoration: none; }

.cartoes { display: flex; flex-wrap: wrap; gap: 1rem; margin: 1.5rem 0; }

.cartao {
  background: var(--branco);
  border: 1px solid var(--cinza-borda);
  border-radius: 6px;
  padding: 1.25rem 1.75rem;
  min-width: 140px;
}

.cartao .numero {
  display: block;
  font-size: 2rem;
  font-weight: 700;
  color: var(--azul-marinho);
}

.cartao .rotulo { font-size: 0.85rem; color: var(--cinza-texto); }

.subtitulo-painel { font-size: 1rem; color: var(--azul-marinho); margin: 1.75rem 0 0.6rem; }
.lista-online { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 0.4rem; }
.lista-online li { display: flex; align-items: center; gap: 0.5rem; font-size: 0.9rem; color: var(--cinza-texto); }

.aviso {
  background: #eaf1f6;
  border: 1px solid #cddce6;
  border-radius: 4px;
  padding: 0.75rem 1rem;
  font-size: 0.9rem;
}

.tabela {
  width: 100%;
  border-collapse: collapse;
  background: var(--branco);
  border: 1px solid var(--cinza-borda);
  border-radius: 6px;
  overflow: hidden;
}

.tabela th, .tabela td {
  text-align: left;
  padding: 0.65rem 1rem;
  border-bottom: 1px solid var(--cinza-borda);
  font-size: 0.9rem;
}

.tabela th {
  background: #e9edf1;
  color: var(--azul-marinho);
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.tabela tr:last-child td { border-bottom: none; }

.selo {
  display: inline-block;
  padding: 0.15rem 0.6rem;
  border-radius: 999px;
  font-size: 0.75rem;
  font-weight: 600;
}
.selo.ativo { background: #e3f3ea; color: var(--verde-ativo); }
.selo.inativo { background: #ececec; color: #6b7580; }

.ponto-online {
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #c7cdd4;
}
.ponto-online.online { background: var(--verde-ativo); }

.acoes-linha { display: flex; align-items: center; gap: 0.9rem; }
.form-inline { display: inline; margin: 0; }
.botao-link {
  background: none;
  border: none;
  padding: 0;
  color: var(--azul-destaque);
  text-decoration: underline;
  cursor: pointer;
  font-size: 0.9rem;
  font-family: inherit;
}
.botao-link:hover { color: var(--azul-marinho); }

.linha-form { display: flex; gap: 0.5rem; margin-bottom: 1rem; }
.linha-form input[type="text"] { flex: 1; margin-top: 0; }
.linha-form-inline { margin-bottom: 0; }

.campo-fixo { font-size: 0.9rem; color: var(--cinza-texto); margin: -0.5rem 0 1rem; }

.celula-truncada {
  max-width: 260px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.historico {
  background: var(--branco);
  border: 1px solid var(--cinza-borda);
  border-radius: 6px;
  padding: 1rem 1.25rem;
  margin: 1.25rem 0;
  max-height: 420px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.mensagem { max-width: 70%; }
.mensagem p {
  margin: 0.2rem 0 0;
  white-space: pre-line; /* respeita as quebras de linha (menu do bot vinha num parágrafo só) */
  background: #eef1f4;
  padding: 0.5rem 0.75rem;
  border-radius: 6px;
  font-size: 0.9rem;
  text-align: left; /* o balão do bot/atendente fica à direita, mas o texto dentro lê da esquerda */
}
.mensagem-remetente {
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: #8a97a3;
}
.mensagem-bot, .mensagem-atendente { margin-left: auto; text-align: right; }
.mensagem-bot p { background: var(--azul-marinho); color: var(--branco); }
/* verde-escuro pro atendente (aprovado pelo Paulo) — antes era o mesmo azul do bot e confundia
   quem respondeu: a pessoa ou a resposta automática */
.mensagem-atendente p { background: var(--verde-atendente); color: var(--branco); }

.mensagem-midia { max-width: 220px; border-radius: 6px; margin-top: 0.3rem; }
video.mensagem-midia { max-width: 260px; }
audio.mensagem-midia { max-width: 100%; }
.mensagem-arquivo {
  display: inline-block;
  margin-top: 0.3rem;
  padding: 0.4rem 0.7rem;
  background: #eef1f4;
  border-radius: 6px;
  font-size: 0.85rem;
  color: var(--azul-marinho);
}
.mensagem-bot .mensagem-arquivo, .mensagem-atendente .mensagem-arquivo { background: rgba(255, 255, 255, 0.15); color: var(--branco); }

.acoes-conversa { display: flex; gap: 0.75rem; margin-top: 1rem; }
.botao-secundario {
  background: transparent;
  border: 1px solid var(--cinza-borda);
  color: var(--cinza-texto);
}
.botao-secundario:hover { background: #e9edf1; }

.form-responder {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  margin-top: 1rem;
}
.form-responder-linha { display: flex; gap: 0.75rem; align-items: flex-start; }
.form-responder textarea {
  flex: 1;
  min-height: 70px;
  padding: 0.6rem 0.75rem;
  border: 1px solid var(--cinza-borda);
  border-radius: 4px;
  font-family: inherit;
  font-size: 0.9rem;
  resize: vertical;
}

.form-responder-barra { display: flex; align-items: center; gap: 0.5rem; position: relative; }
.botao-emoji, .botao-anexo, .botao-gravar-audio {
  box-sizing: border-box;
  /* ícones de linha (Tabler) em botão preenchido — opção "C" aprovada pelo Paulo, no lugar dos
     emojis 🙂📎🎤 que ficavam com cara infantil */
  background: var(--azul-marinho);
  border: 1px solid var(--azul-marinho);
  color: var(--branco);
  border-radius: 4px;
  width: 34px;
  height: 34px;
  margin: 0;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  line-height: 1;
}
.botao-emoji .icone, .botao-anexo .icone, .botao-gravar-audio .icone { width: 18px; height: 18px; }
.botao-emoji:hover, .botao-anexo:hover, .botao-gravar-audio:hover { background: var(--azul-marinho-escuro); }
.botao-gravar-audio.gravando {
  background: var(--vermelho-erro);
  border-color: var(--vermelho-erro);
  color: var(--branco);
  animation: pulsar-gravando 1.2s ease-in-out infinite;
}
@keyframes pulsar-gravando {
  0%, 100% { box-shadow: 0 0 0 0 rgba(164, 34, 44, 0.5); }
  50% { box-shadow: 0 0 0 7px rgba(164, 34, 44, 0); }
}
.anexo-nome { font-size: 0.8rem; color: #8a97a3; }
.anexo-nome.gravando-texto { color: var(--vermelho-erro); font-weight: 600; }
.botao-remover-anexo {
  box-sizing: border-box;
  background: transparent;
  border: 1px solid var(--cinza-borda);
  border-radius: 50%;
  width: 22px;
  height: 22px;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-size: 0.7rem;
  color: var(--cinza-texto);
  line-height: 1;
}
.botao-remover-anexo:hover { background: var(--vermelho-erro); border-color: var(--vermelho-erro); color: var(--branco); }
/* o display: flex acima vence o atributo hidden — sem isso o "×" aparecia mesmo sem anexo */
.botao-remover-anexo[hidden] { display: none; }

.emoji-painel {
  position: absolute;
  top: 40px;
  left: 0;
  z-index: 5;
  grid-template-columns: repeat(8, 1fr);
  gap: 0.15rem;
  background: var(--branco);
  border: 1px solid var(--cinza-borda);
  border-radius: 6px;
  padding: 0.5rem;
  max-width: 300px;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.12);
}
.emoji-painel:not([hidden]) { display: grid; }
.emoji-painel button {
  background: none;
  border: none;
  font-size: 1.2rem;
  cursor: pointer;
  padding: 0.25rem;
  border-radius: 4px;
  line-height: 1;
}
.emoji-painel button:hover { background: #eef1f4; }

.aviso-flutuante {
  position: fixed;
  top: 1rem;
  right: 1rem;
  background: var(--azul-marinho);
  color: var(--branco);
  padding: 0.75rem 1.25rem;
  border-radius: 6px;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.2);
  font-size: 0.9rem;
  z-index: 1000;
  animation: aviso-entrar 0.2s ease;
}

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

.banner-atualizar {
  background: #fff4cc;
  border-bottom: 1px solid #e8d68a;
  color: #6b5900;
  padding: 0.6rem 2rem;
  font-size: 0.9rem;
}
.banner-atualizar a { color: #6b5900; font-weight: 600; text-decoration: underline; margin-left: 0.35rem; }

.botao-ativar-notificacoes {
  display: block;
  width: calc(100% - 2rem);
  margin: 0.75rem 1rem;
  background: #fff4cc;
  color: #6b5900;
  border: 1px solid #e8d68a;
  border-radius: 4px;
  padding: 0.45rem 0.6rem;
  font-size: 0.8rem;
  text-align: left;
  cursor: pointer;
}
.botao-ativar-notificacoes:hover { background: #ffe999; }
html.menu-recolhido .botao-ativar-notificacoes { display: none; }

/* Editor de fluxo */

.conteudo-fluxo {
  display: flex;
  flex-direction: column;
  height: 100vh;
}

.editor-cabecalho {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1rem 1.5rem;
  border-bottom: 1px solid var(--cinza-borda);
  background: var(--branco);
}
.editor-cabecalho h1 { margin: 0; font-size: 1.2rem; color: var(--azul-marinho); }

.editor-acoes { display: flex; align-items: center; gap: 1rem; }

.mensagem-editor { font-size: 0.8rem; }
.mensagem-editor-pendente { color: #8a6d00; }
.mensagem-editor-ok { color: var(--verde-ativo); }
.mensagem-editor-erro { color: var(--vermelho-erro); }

.editor-corpo { flex: 1; display: flex; min-height: 0; }

.paleta-nos {
  width: 190px;
  flex-shrink: 0;
  background: var(--branco);
  border-right: 1px solid var(--cinza-borda);
  padding: 1rem;
  overflow-y: auto;
}
.paleta-titulo { font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.03em; color: #8a97a3; margin: 0 0 0.6rem; }
.botao-paleta {
  display: block;
  width: 100%;
  text-align: left;
  background: #eef1f4;
  border: 1px solid var(--cinza-borda);
  border-radius: 4px;
  padding: 0.5rem 0.7rem;
  margin-bottom: 0.5rem;
  font-size: 0.85rem;
  cursor: pointer;
  color: var(--cinza-texto);
}
.botao-paleta:hover { background: #e2e7eb; }
.paleta-dica { font-size: 0.78rem; color: #8a97a3; margin-top: 1rem; line-height: 1.4; }

.quadro-scroll {
  flex: 1;
  min-width: 0;
  overflow: auto;
  background: #e9edf1;
  background-image: radial-gradient(circle, #cfd6dc 1px, transparent 1px);
  background-size: 22px 22px;
  position: relative;
}

.quadro-fluxo {
  position: relative;
  width: 2400px;
  height: 1600px;
}

.camada-conexoes {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  overflow: visible;
}

.linha-conexao {
  fill: none;
  stroke: var(--azul-destaque);
  stroke-width: 2;
  stroke-linejoin: round;
  stroke-linecap: round;
  pointer-events: stroke;
  cursor: pointer;
}
.linha-conexao:hover { stroke: var(--vermelho-erro); }
.linha-conexao-temp { stroke: #8a97a3; stroke-dasharray: 5 4; pointer-events: none; }

.no-fluxo {
  position: absolute;
  width: 210px;
  background: var(--branco);
  border: 1px solid var(--cinza-borda);
  border-radius: 6px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
  cursor: grab;
  user-select: none;
}
.no-fluxo:active { cursor: grabbing; }

.no-cabecalho {
  background: var(--azul-marinho);
  color: var(--branco);
  font-size: 0.78rem;
  font-weight: 600;
  padding: 0.4rem 0.6rem;
  border-radius: 6px 6px 0 0;
}
.no-fluxo-transferir .no-cabecalho { background: #a4222c; }
.no-fluxo-fim .no-cabecalho { background: #4d5b66; }
.no-fluxo-condicao .no-cabecalho { background: #6a4c93; }
.no-fluxo-horario .no-cabecalho { background: #b6851f; }

.no-id { font-size: 0.68rem; color: #a3adb5; padding: 0.25rem 0.6rem 0; }
.no-corpo { font-size: 0.78rem; padding: 0.3rem 0.6rem 0.6rem; color: var(--cinza-texto); line-height: 1.35; }

.alca-entrada {
  position: absolute;
  left: -7px;
  top: 14px;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--branco);
  border: 2px solid var(--azul-marinho);
}

.alcas-saida { padding: 0.2rem 0 0.4rem; }
.alca-saida-linha {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 0.4rem;
  padding: 0.2rem 0.6rem;
  position: relative;
}
.alca-saida-rotulo { font-size: 0.72rem; color: #8a97a3; }
.alca-saida-ponto {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--azul-destaque);
  border: 2px solid var(--branco);
  box-shadow: 0 0 0 1px var(--azul-destaque);
  cursor: crosshair;
  flex-shrink: 0;
}
.alca-saida-ponto:hover { background: var(--vermelho-erro); box-shadow: 0 0 0 1px var(--vermelho-erro); }

.painel-edicao {
  width: 320px;
  flex-shrink: 0;
  background: var(--branco);
  border-left: 1px solid var(--cinza-borda);
  padding: 1.25rem;
  overflow-y: auto;
}
.painel-edicao h2 { margin: 0 0 0.2rem; font-size: 1rem; color: var(--azul-marinho); }

.campo-editor { display: block; font-size: 0.85rem; font-weight: 600; color: var(--azul-marinho); margin-bottom: 1rem; }
.campo-editor input, .campo-editor textarea, .campo-editor select {
  display: block;
  width: 100%;
  margin-top: 0.35rem;
  padding: 0.5rem 0.6rem;
  border: 1px solid var(--cinza-borda);
  border-radius: 4px;
  font-size: 0.88rem;
  font-family: inherit;
  font-weight: 400;
}
.campo-editor textarea { min-height: 70px; resize: vertical; }

.campo-lista { margin-bottom: 1rem; }
.campo-lista-titulo { font-size: 0.78rem; color: #8a97a3; margin: 0 0 0.4rem; }
.campo-lista-linha { display: flex; align-items: center; gap: 0.4rem; margin-bottom: 0.4rem; }
.campo-lista-linha input {
  flex: 1;
  padding: 0.4rem 0.5rem;
  border: 1px solid var(--cinza-borda);
  border-radius: 4px;
  font-size: 0.85rem;
}
.campo-par { display: flex; gap: 0.3rem; flex: 1; }
.campo-lista-remover {
  background: transparent;
  border: 1px solid var(--cinza-borda);
  border-radius: 4px;
  color: var(--vermelho-erro);
  width: 26px;
  height: 26px;
  cursor: pointer;
  flex-shrink: 0;
}
.campo-lista-adicionar {
  background: transparent;
  border: 1px dashed var(--cinza-borda);
  border-radius: 4px;
  padding: 0.35rem 0.6rem;
  font-size: 0.8rem;
  color: var(--azul-destaque);
  cursor: pointer;
  width: 100%;
}

.botao-excluir { margin-top: 0.5rem; color: var(--vermelho-erro); border-color: #f0c4c7; }
.botao-excluir:hover { background: #fbe9e9; }

/* Fila de atendimento — tela dividida (lista sempre visível + conversa aberta ao lado) */

.conteudo-fila {
  display: flex;
  flex-direction: column;
  height: 100vh;
}

.fila-cabecalho {
  box-sizing: border-box;
  min-height: var(--altura-topo); /* = .barra-lateral .marca */
  padding: 0.5rem 1.5rem;
  border-bottom: 1px solid var(--cinza-borda);
  background: var(--branco);
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 0.5rem;
}
.fila-cabecalho h1 { margin: 0; font-size: 1.2rem; color: var(--azul-marinho); }
.fila-cabecalho .erro { width: 100%; margin: 0; }
.nova-conversa-popover { position: relative; }

.fila-corpo { flex: 1; display: flex; min-height: 0; }

.fila-lista {
  width: 340px;
  flex-shrink: 0;
  background: var(--branco);
  border-right: 1px solid var(--cinza-borda);
  overflow-y: auto;
}

/* Filtros da fila (Minhas / Na fila / No bot / Todas + setor) — opção "A ajustada" */
.fila-filtros {
  position: sticky;
  top: 0;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  padding: 0.75rem;
  background: var(--branco);
  border-bottom: 1px solid var(--cinza-borda);
}
/* 5 filtros em duas linhas (3 + 2), todos da mesma largura */
.fila-filtros-chips { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.35rem; }
.chip-filtro {
  font-size: 0.8rem;
  padding: 0.3rem 0.5rem;
  border-radius: 999px;
  background: var(--cinza-fundo);
  color: var(--cinza-texto);
  white-space: nowrap;
  text-align: center;
}
.chip-filtro:hover { text-decoration: none; background: #e3e8ee; }
.chip-filtro.ativo { background: var(--azul-marinho); color: var(--branco); }
.chip-contagem { opacity: 0.75; margin-left: 0.15rem; }
/* tem gente esperando alguém assumir e o atendente está olhando outro filtro */
.chip-filtro.chip-alerta { background: #fde8e8; color: var(--vermelho-erro); font-weight: 600; }

/* busca por número/nome + botão de setor (opção 1: mostra o nome do setor escolhido) */
.fila-filtros-busca { display: flex; gap: 0.4rem; align-items: stretch; }
.busca-cliente {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 0.35rem;
  margin: 0;
  padding: 0 0.5rem;
  height: 34px;
  box-sizing: border-box;
  border: 1px solid var(--cinza-borda);
  border-radius: 4px;
  color: #8a97a3;
}
.busca-cliente:focus-within { border-color: var(--azul-destaque); }
.busca-cliente .icone { width: 16px; height: 16px; }
.busca-cliente input[type="search"] {
  flex: 1;
  min-width: 0;
  border: none;
  outline: none;
  padding: 0;
  margin: 0;
  font-size: 0.82rem;
  font-family: inherit;
  background: transparent;
}
.filtro-setor { position: relative; }
.filtro-setor > summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 0.3rem;
  height: 34px;
  box-sizing: border-box;
  padding: 0 0.55rem;
  border: 1px solid var(--cinza-borda);
  border-radius: 4px;
  font-size: 0.8rem;
  color: var(--cinza-texto);
  white-space: nowrap;
  max-width: 130px;
}
.filtro-setor > summary::-webkit-details-marker { display: none; }
.filtro-setor > summary span { overflow: hidden; text-overflow: ellipsis; }
.filtro-setor > summary .icone { width: 15px; height: 15px; flex-shrink: 0; }
.filtro-setor > summary.ativo { background: #e3ecf5; border-color: var(--azul-destaque); color: var(--azul-marinho); font-weight: 600; }
.filtro-setor-menu {
  position: absolute;
  right: 0;
  top: 38px;
  z-index: 5;
  min-width: 170px;
  padding: 0.3rem;
  background: var(--branco);
  border: 1px solid var(--cinza-borda);
  border-radius: 6px;
  box-shadow: 0 6px 18px rgba(20, 41, 60, 0.12);
}
.filtro-setor-menu a { display: block; padding: 0.4rem 0.6rem; border-radius: 4px; font-size: 0.82rem; color: var(--cinza-texto); }
.filtro-setor-menu a:hover { background: var(--cinza-fundo); text-decoration: none; }
.filtro-setor-menu a.selecionado { color: var(--azul-marinho); font-weight: 600; }

.item-conversa {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  border-bottom: 1px solid #edf0f3;
  color: var(--cinza-texto);
}
.item-conversa:hover { background: #f5f7f9; }
.item-conversa.selecionado { background: #e3ecf5; box-shadow: inset 3px 0 0 var(--azul-marinho); }
.item-conversa[hidden] { display: none; } /* busca instantânea esconde; o display: flex acima venceria o hidden */
.item-nome { font-weight: 400; color: #6b7885; }
.item-link {
  flex: 1;
  min-width: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 0.1rem 0.5rem;
  padding: 0.6rem 0.75rem;
  font-size: 0.82rem;
  color: inherit;
}
.item-link:hover { text-decoration: none; }
.item-numero { font-weight: 600; color: var(--azul-marinho); }
.item-tempo { font-size: 0.72rem; color: #8a97a3; text-align: right; white-space: nowrap; }
.item-ultima { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: #8a97a3; font-size: 0.78rem; }
.item-lado { display: flex; align-items: center; justify-content: flex-end; gap: 0.35rem; font-size: 0.72rem; color: #6b7885; white-space: nowrap; }
.item-puxar { margin: 0 0.6rem 0 0; }
.botao-pequeno { font-size: 0.75rem; padding: 0.25rem 0.6rem; margin: 0; }
.fila-vazia { padding: 1rem 0.9rem; }

/* bolinha = a vez é do atendente; a cor segue os minutos de espera de Configurações */
.bolinha { display: inline-block; width: 9px; height: 9px; border-radius: 50%; flex-shrink: 0; }
.bolinha-verde { background: #2e9e6a; }
.bolinha-amarela { background: #e0a100; }
.bolinha-vermelha { background: #d33a3a; }

.fila-detalhe-vazia { display: flex; align-items: center; justify-content: center; height: 100%; color: #8a97a3; }
/* Tamanho fixo: cabeçalho em cima, caixa de resposta embaixo, e só o histórico rola no meio.
   Antes a página toda rolava e o histórico crescia, empurrando os ícones e a caixa de resposta. */
.fila-detalhe { flex: 1; min-width: 0; display: flex; flex-direction: column; overflow: hidden; }
.fila-detalhe h2 { margin: 0 0 0.3rem; color: var(--azul-marinho); }
.cabecalho-conversa {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
  padding: 1rem 1.75rem 0.75rem;
  background: var(--cinza-fundo);
  border-bottom: 1px solid var(--cinza-borda);
}
.cabecalho-conversa-info { flex: 1; min-width: 12rem; }
.cabecalho-conversa-titulo { display: flex; align-items: center; gap: 0.4rem; }
.cabecalho-conversa-titulo h2 { margin: 0 0 0.2rem; }
.nome-contato { font-weight: 400; color: var(--cinza-texto); }
.renomear-popover { position: relative; }
.botao-lapis {
  list-style: none;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  color: #8a97a3;
}
.botao-lapis::-webkit-details-marker { display: none; }
.botao-lapis:hover { background: #e3e8ee; color: var(--azul-marinho); }
.botao-lapis .icone { width: 16px; height: 16px; }
.renomear-popover .form-renomear { left: 0; top: 2.1rem; min-width: 260px; }
.form-renomear .dica { margin: 0; font-size: 0.75rem; }
.cabecalho-conversa .dica { margin: 0; }
.cabecalho-conversa .acoes-conversa { margin: 0; align-items: center; }
.cabecalho-conversa .acoes-conversa form { margin: 0; }
.cabecalho-conversa .transferir-popover .form-transferir { right: 0; left: auto; }
/* Transferir é um <summary> e Finalizar/Assumir são <button>: o navegador dá fonte e altura de
   linha diferentes pra cada um — trava tudo igual pra ficarem simétricos */
.cabecalho-conversa .acoes-conversa button,
.cabecalho-conversa .acoes-conversa .botao-como-summary {
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 40px;
  min-width: 110px;
  padding: 0 1.2rem;
  margin: 0;
  font-family: inherit;
  font-size: 0.95rem;
  line-height: 1;
}
.fila-detalhe .historico { flex: 1; min-height: 0; max-height: none; margin: 1rem 1.75rem 0; }
.fila-detalhe > .erro, .fila-detalhe > .aviso { flex-shrink: 0; margin: 0.75rem 1.75rem 0; }
.fila-detalhe .form-responder { flex-shrink: 0; margin: 0.75rem 1.75rem 1.25rem; }
.fila-detalhe .form-responder textarea { height: 70px; resize: none; }

.transferir-popover { position: relative; }
.botao-como-summary {
  display: inline-block;
  cursor: pointer;
  background: transparent;
  border: 1px solid var(--cinza-borda);
  color: var(--cinza-texto);
  padding: 0.6rem 1.2rem;
  border-radius: 4px;
  font-size: 0.95rem;
  list-style: none;
}
.botao-como-summary::-webkit-details-marker { display: none; }
.botao-como-summary:hover { background: #e9edf1; }

.nova-conversa-popover .botao-como-summary {
  background: var(--azul-marinho);
  border-color: var(--azul-marinho);
  color: var(--branco);
  font-weight: 600;
}
.nova-conversa-popover .botao-como-summary:hover { background: var(--azul-destaque); }
.nova-conversa-popover .form-transferir { left: auto; right: 0; }
.form-transferir {
  position: absolute;
  top: 2.2rem;
  left: 0;
  z-index: 5;
  background: var(--branco);
  border: 1px solid var(--cinza-borda);
  border-radius: 6px;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.1);
  padding: 1rem;
  width: 260px;
}

/* Relatório */
.relatorio-topo { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.75rem; }
.relatorio-topo h1 { margin: 0; }
.relatorio-filtros { display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem; }
.filtro-periodo {
  border: 1px solid var(--cinza-borda); border-radius: 4px; padding: 0.35rem 0.8rem;
  font-size: 0.85rem; color: var(--cinza-texto); background: var(--branco);
}
.filtro-periodo:hover { text-decoration: none; border-color: var(--azul-destaque); }
.filtro-periodo.ativo { background: var(--azul-marinho); border-color: var(--azul-marinho); color: var(--branco); }
.relatorio-filtros select { padding: 0.35rem 0.5rem; font-size: 0.85rem; border: 1px solid var(--cinza-borda); border-radius: 4px; }
.cartao .rotulo-extra { display: block; font-size: 0.75rem; color: #8a97a3; margin-top: 0.15rem; }
.subtitulo-detalhe { font-weight: 400; font-size: 0.8rem; color: #8a97a3; margin-left: 0.4rem; }
.grafico-barras {
  display: flex; align-items: stretch; gap: 3px; height: 190px; padding: 0.75rem 0.75rem 0;
  background: var(--branco); border: 1px solid var(--cinza-borda); border-radius: 6px;
}
.barra-coluna { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; }
.barra { width: 100%; max-width: 22px; background: var(--azul-destaque); border-radius: 3px 3px 0 0; min-height: 0; }
.barra-valor { font-size: 0.7rem; color: var(--cinza-texto); line-height: 1.2; }
.barra-rotulo { font-size: 0.65rem; color: #8a97a3; padding: 0.3rem 0; white-space: nowrap; overflow: visible; width: 0; display: flex; justify-content: center; }
.mapa-pico {
  display: grid; gap: 3px; padding: 0.75rem; font-size: 0.7rem; color: #8a97a3;
  background: var(--branco); border: 1px solid var(--cinza-borda); border-radius: 6px;
}
.mapa-hora { text-align: center; }
.mapa-dia { display: flex; align-items: center; }
.mapa-celula { height: 22px; border-radius: 3px; background: var(--cinza-fundo); }
.mapa-celula.tom-1 { background: #e6f1fb; }
.mapa-celula.tom-2 { background: #b5d4f4; }
.mapa-celula.tom-3 { background: #85b7eb; }
.mapa-celula.tom-4 { background: #378add; }
.mapa-celula.tom-5 { background: #185fa5; }
.tabela-notas tbody tr { cursor: pointer; }
.tabela-notas tbody tr:hover { background: var(--cinza-fundo); }
.tabela-notas .coluna-nota { text-align: right; }
.nota { display: inline-block; min-width: 2rem; text-align: center; padding: 0.1rem 0.5rem; border-radius: 4px; font-weight: 600; font-size: 0.85rem; }
.nota-boa { background: #e3f3ea; color: var(--verde-ativo); }
.nota-media { background: #fbf0d9; color: #8a5a00; }
.nota-ruim { background: #fbe6e7; color: var(--vermelho-erro); }
@media (max-width: 700px) {
  .barra-rotulo { display: none; }
  .mapa-hora { font-size: 0.55rem; }
}

/* Notas internas, faixas de atendimento, respostas rápidas e motivo de encerramento (E1) */
.mensagem-nota { margin: 0 auto; max-width: 80%; text-align: left; }
.mensagem-nota p { background: #fff6d6; color: #5c4a10; border: 1px dashed #e0c25a; }
.mensagem-nota .mensagem-remetente { color: #8a6d12; }
.faixa-atendimento { display: flex; align-items: center; gap: 0.75rem; margin: 0.75rem 0 0.25rem; font-size: 0.75rem; color: #8a97a3; }
.faixa-atendimento::before, .faixa-atendimento::after { content: ""; flex: 1; border-top: 1px solid var(--cinza-borda); }
.faixa-atendimento span { white-space: nowrap; max-width: 85%; overflow: hidden; text-overflow: ellipsis; }
.protocolo { font-variant-numeric: tabular-nums; user-select: all; }

.botao-respostas {
  box-sizing: border-box; background: var(--azul-marinho); border: 1px solid var(--azul-marinho); color: var(--branco);
  border-radius: 4px; width: 34px; height: 34px; margin: 0; padding: 0; display: flex; align-items: center; justify-content: center; cursor: pointer;
}
.botao-respostas .icone { width: 18px; height: 18px; }
.botao-respostas:hover { background: var(--azul-marinho-escuro); }
.chave-nota { display: inline-flex; align-items: center; gap: 0.3rem; font-size: 0.8rem; color: var(--cinza-texto); cursor: pointer; margin: 0 0.25rem; white-space: nowrap; }
.chave-nota input { margin: 0; width: auto; }
.form-responder.modo-nota textarea { background: #fff6d6; border-color: #e0c25a; }
.respostas-painel {
  position: absolute; bottom: 40px; left: 0; right: 0; z-index: 6; max-width: 520px; max-height: 280px; overflow-y: auto;
  background: var(--branco); border: 1px solid var(--cinza-borda); border-radius: 6px; box-shadow: 0 6px 20px rgba(0, 0, 0, 0.12); padding: 0.3rem;
}
.resposta-item {
  display: block; width: 100%; text-align: left; background: none; border: none; border-radius: 4px; padding: 0.45rem 0.6rem; margin: 0; cursor: pointer; color: var(--cinza-texto);
}
.resposta-item strong { display: block; font-size: 0.85rem; color: var(--azul-marinho); }
.resposta-item span { display: block; font-size: 0.78rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.resposta-item.ativa, .resposta-item:hover { background: #eef1f4; }
.respostas-vazio { margin: 0.4rem 0.6rem; font-size: 0.8rem; color: #8a97a3; }

.nota-avulsa { flex-shrink: 0; margin: 0.75rem 1.75rem 1rem; font-size: 0.85rem; }
.nota-avulsa summary { cursor: pointer; color: var(--azul-destaque); }
.form-nota { display: flex; gap: 0.5rem; margin-top: 0.5rem; align-items: flex-end; }
.form-nota textarea { flex: 1; background: #fff6d6; border: 1px solid #e0c25a; border-radius: 4px; padding: 0.5rem; font-family: inherit; font-size: 0.9rem; resize: none; }

/* telas de cadastro (Respostas rápidas, Motivos de encerramento) */
.lista-setores-check { display: flex; flex-wrap: wrap; gap: 0.4rem 1rem; margin: 0.3rem 0 0.8rem; }
.lista-setores-check label { display: inline-flex; align-items: center; gap: 0.3rem; font-weight: normal; margin: 0; }
.lista-setores-check input { width: auto; margin: 0; }
.selo { display: inline-block; font-size: 0.72rem; padding: 0.1rem 0.45rem; border-radius: 999px; background: #eef1f4; color: var(--cinza-texto); }
.selo-inativo { background: #f6e3e4; color: var(--vermelho-erro); }
.texto-resumo { max-width: 360px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.grupo-motivo { background: var(--branco); border: 1px solid var(--cinza-borda); border-radius: 6px; padding: 0.75rem 1rem; margin-bottom: 1rem; }
.grupo-motivo h2 { font-size: 1rem; margin: 0 0 0.5rem; }
.grupo-motivo ul { list-style: none; padding: 0; margin: 0 0 0.5rem; }
.grupo-motivo li { margin: 0.3rem 0; }
.botao-link-perigo { color: var(--vermelho-erro); }
.linha-check { display: flex; align-items: center; gap: 0.4rem; }
.linha-check input { width: auto; margin: 0; }
.botoes-variaveis { display: flex; flex-wrap: wrap; gap: 0.3rem; margin: 0.3rem 0 0.4rem; }
.botoes-variaveis .botao-pequeno { background: #eef1f4; color: var(--azul-marinho); border: 1px solid var(--cinza-borda); }
.previa-resposta { max-width: 100%; margin-bottom: 1rem; }
form input[type="date"] { display: block; margin-top: 0.35rem; padding: 0.5rem 0.7rem; border: 1px solid var(--cinza-borda); border-radius: 4px; font-size: 0.95rem; font-family: inherit; }
.grupo-motivo li { display: flex; align-items: center; gap: 0.75rem; }
.grupo-motivo .linha-form { align-items: center; margin-bottom: 0.4rem; }
.grupo-motivo li .linha-form { flex: 1; margin-bottom: 0; }
.grupo-motivo .linha-check { margin: 0; font-weight: normal; white-space: nowrap; }

/* Marcadores, fixar e Ações da conversa (E1, 2a parte) */
.chip-marcador { display: inline-block; font-size: 0.68rem; line-height: 1.3; padding: 0.05rem 0.45rem; border-radius: 999px; color: var(--cor); border: 1px solid var(--cor); background: color-mix(in srgb, var(--cor) 10%, white); margin-right: 0.25rem; white-space: nowrap; }
.item-marcadores { grid-column: 1 / -1; display: block; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.marcadores-conversa { margin: 0.25rem 0 0; }
.ponto-marcador { display: inline-block; width: 0.6rem; height: 0.6rem; border-radius: 50%; margin-right: 0.4rem; vertical-align: middle; }
.icone-fixada { font-size: 0.75rem; }
.menu-acoes { min-width: 250px; display: flex; flex-direction: column; gap: 0.5rem; }
.menu-acoes form { margin: 0; display: flex; flex-direction: column; gap: 0.3rem; align-items: flex-start; }
.menu-acoes .linha-check { margin: 0; font-weight: normal; font-size: 0.85rem; color: var(--cinza-texto); }
.menu-acoes-titulo { font-size: 0.75rem; font-weight: 600; color: var(--azul-marinho); text-transform: uppercase; letter-spacing: 0.03em; }
.cabecalho-conversa .acoes-conversa .menu-acoes button.botao-link,
.cabecalho-conversa .acoes-conversa .menu-acoes button.botao-pequeno { height: auto; min-width: 0; padding: 0.3rem 0.6rem; font-size: 0.85rem; }
.cabecalho-conversa .acoes-conversa .menu-acoes button.botao-link { padding: 0.2rem 0; }
.form-marcador { align-items: center; }
.form-marcador input[type="color"] { width: 2.4rem; height: 2.2rem; padding: 0.1rem; border: 1px solid var(--cinza-borda); border-radius: 4px; background: var(--branco); flex: none; }
.form-marcador .linha-check { margin: 0; font-weight: normal; white-space: nowrap; }
.form-marcador input[type="text"] { min-width: 14rem; }

/* Configurações (tela principal e subtelas): cartões das subtelas, quadros, ajuda, barra de salvar */
.pagina-config:not(.conteudo-estreita) { max-width: 820px; }
.pagina-config h1,
.pagina-config h2,
.pagina-config fieldset legend { font-family: "Poppins", "Segoe UI", Arial, sans-serif; font-weight: 600; }
.pagina-config fieldset {
  background: var(--branco);
  border-left: 3px solid var(--marca-laranja);
  padding: 0.9rem 1.25rem 0.4rem;
  margin-bottom: 1.25rem;
  scroll-margin-top: 1rem;
}
.pagina-config fieldset legend { font-size: 1.05rem; }
.pagina-config fieldset > .dica:first-of-type { margin-top: 0.2rem; }
/* campos ligados por form="..." ficam fora de um <form> e não pegam o estilo de "form input" */
.pagina-config input[type="text"] {
  padding: 0.55rem 0.7rem;
  border: 1px solid var(--cinza-borda);
  border-radius: 4px;
  font-size: 0.95rem;
  font-family: inherit;
}

.trilha-config { font-size: 0.85rem; color: var(--cinza-texto); margin: 0 0 0.25rem; }
.trilha-config a { color: var(--azul-destaque); }

.cartoes-config { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 0.75rem; margin: 1.25rem 0 1rem; }
.cartao-config {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  padding: 0.85rem 1rem;
  background: var(--branco);
  border: 1px solid var(--cinza-borda);
  border-radius: 6px;
  color: var(--cinza-texto);
  text-decoration: none;
}
.cartao-config:hover { border-color: var(--azul-destaque); }
.cartao-config:hover .cartao-config-nome { text-decoration: underline; }
.cartao-config:focus-visible { outline: 2px solid var(--marca-laranja); outline-offset: 2px; }
.cartao-config-nome { font-family: "Poppins", "Segoe UI", Arial, sans-serif; font-weight: 600; color: var(--azul-marinho); }
.cartao-config-info { font-size: 0.85rem; font-weight: 600; display: flex; align-items: center; gap: 0.4rem; }
.cartao-config-texto { font-size: 0.8rem; color: #5f6d7a; }
.ponto-status { width: 0.55rem; height: 0.55rem; border-radius: 50%; display: inline-block; }
.ponto-status-ok { background: var(--verde-ativo); }
.ponto-status-falha { background: var(--vermelho-erro); }

.atalhos-config { display: flex; flex-wrap: wrap; gap: 0.25rem 1rem; margin-bottom: 1.25rem; padding-bottom: 0.75rem; border-bottom: 1px solid var(--cinza-borda); font-size: 0.85rem; }
.atalhos-config a { color: var(--azul-destaque); }

.campos-lado-a-lado { display: grid; grid-template-columns: 1fr 1fr; gap: 0 1.25rem; }
.campo-com-unidade { display: flex; align-items: center; gap: 0.5rem; margin-top: 0.35rem; font-weight: 400; color: var(--cinza-texto); }
form .campo-com-unidade input[type="number"] { width: 6.5rem; margin-top: 0; }

.ajuda { display: block; margin-top: 0.3rem; font-size: 0.8rem; font-weight: 400; color: #5f6d7a; }
.ajuda-solta { margin: -0.6rem 0 1rem 1.6rem; }

.barra-salvar {
  position: sticky;
  bottom: 0;
  z-index: 5;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 1rem;
  margin: 0 -0.5rem;
  padding: 0.75rem 0.5rem;
  background: var(--cinza-fundo);
  border-top: 1px solid var(--cinza-borda);
}
.barra-salvar-aviso { font-size: 0.85rem; font-weight: 600; color: #b0561b; }

@media (max-width: 720px) {
  .cartoes-config, .campos-lado-a-lado { grid-template-columns: 1fr; }
}
.grupo-motivo .nome-grupo { font-weight: 600; color: var(--azul-marinho); }

/* E1, 3a parte: responder citando, reações e mensagem que falhou */
.mensagem-citada {
  display: block;
  margin: 0.2rem 0 -0.1rem;
  padding: 0.3rem 0.6rem;
  border-left: 3px solid var(--marca-laranja);
  background: rgba(28, 61, 90, 0.06);
  border-radius: 4px;
  font-size: 0.8rem;
  color: var(--cinza-texto);
  text-align: left;
  text-decoration: none;
  white-space: pre-line;
}
.mensagem-citada span { display: block; font-weight: 600; color: var(--azul-marinho); font-size: 0.72rem; }
.mensagem-reacoes { display: inline-flex; gap: 0.2rem; margin-top: -0.4rem; padding: 0.05rem 0.35rem; background: var(--branco); border: 1px solid var(--cinza-borda); border-radius: 999px; font-size: 0.85rem; position: relative; }
.mensagem-acoes { display: flex; gap: 0.6rem; font-size: 0.75rem; margin-top: 0.15rem; opacity: 0.55; }
.mensagem-bot .mensagem-acoes, .mensagem-atendente .mensagem-acoes { justify-content: flex-end; }
.mensagem:hover .mensagem-acoes, .mensagem-acoes:focus-within { opacity: 1; }
.mensagem-acoes .botao-link { font-size: 0.75rem; }
.reagir-popover { position: relative; display: inline-block; }
.reagir-popover summary { list-style: none; cursor: pointer; }
.reagir-popover summary::-webkit-details-marker { display: none; }
.reagir-opcoes { position: absolute; z-index: 10; bottom: 1.4rem; left: 0; display: flex; gap: 0.15rem; padding: 0.3rem; background: var(--branco); border: 1px solid var(--cinza-borda); border-radius: 999px; box-shadow: 0 2px 8px rgba(20, 41, 60, 0.15); margin: 0; }
.mensagem-bot .reagir-opcoes, .mensagem-atendente .reagir-opcoes { left: auto; right: 0; }
.reagir-opcoes button { background: transparent; color: inherit; padding: 0.15rem 0.3rem; font-size: 1.1rem; border-radius: 50%; }
.reagir-opcoes button:hover, .reagir-opcoes .reacao-escolhida { background: #eef1f4; }
.mensagem-falha p { opacity: 0.6; }
.mensagem-aviso-falha { display: block; margin-top: 0.2rem; font-size: 0.78rem; color: var(--vermelho-erro); font-weight: 600; }
.mensagem-aviso-falha .botao-link { font-size: 0.78rem; }
.citando { display: flex; align-items: center; gap: 0.5rem; padding: 0.35rem 0.6rem; margin-bottom: 0.4rem; border-left: 3px solid var(--marca-laranja); background: #eef1f4; border-radius: 4px; font-size: 0.82rem; color: var(--cinza-texto); }
.citando-texto { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Contatos */
.cartoes-contatos { grid-template-columns: repeat(4, 1fr); }
.cartoes-contatos .cartao-config-nome { font-size: 1.35rem; }
.cartao-ativo { border-color: var(--marca-laranja); box-shadow: inset 0 -3px 0 var(--marca-laranja); }
.filtros-contatos select { width: auto; margin-top: 0; }
.selo-situacao-ignorado { background: #fff3d6; color: #7a5a00; }
.selo-situacao-bloqueado { background: #f6e3e4; color: var(--vermelho-erro); }
.paginacao { display: flex; gap: 1rem; align-items: center; justify-content: center; font-size: 0.9rem; }
.lista-tags-check { display: flex; flex-wrap: wrap; gap: 0.4rem 1.25rem; margin-bottom: 0.6rem; }
.lista-tags-check .linha-check { font-weight: 400; margin: 0; }
.pagina-config input[type="email"] { width: 100%; }
.cabecalho-lista .botao-secundario.botao { margin-left: 0.4rem; }
@media (max-width: 720px) { .cartoes-contatos { grid-template-columns: 1fr 1fr; } }

/* Feriados e horário do setor */
.acoes-topo { display: flex; align-items: center; gap: 0.75rem; margin: 0.5rem 0 1rem; }
.tabela-horario td, .tabela-horario th { padding: 0.35rem 0.5rem; }
.tabela-horario .periodo { white-space: nowrap; }
.tabela-horario .periodo span { margin: 0 0.3rem; font-size: 0.85rem; color: var(--cinza-texto); }
.pagina-config input[type="time"], .pagina-config input[type="date"] { padding: 0.4rem 0.5rem; border: 1px solid var(--cinza-borda); border-radius: 4px; font-family: inherit; font-size: 0.9rem; }
.pagina-config label input[type="date"] { display: block; width: 100%; margin-top: 0.35rem; }
.pagina-config label input[type="time"] { display: block; margin-top: 0.35rem; }
.no-fluxo-transferir_atendente .no-cabecalho { background: #7d1d24; }
.no-fluxo-aguardar .no-cabecalho { background: #2f6690; }
.no-fluxo-nota .no-cabecalho { background: #a8892a; }
.sem-quebra { white-space: nowrap; }

/* E2, 1a parte: abas do Relatório, metas, Auditoria e Reincidências */
.abas-relatorio { display: flex; gap: 0.25rem; margin: 1rem 0 0.25rem; border-bottom: 1px solid var(--cinza-borda); }
.abas-relatorio a {
  padding: 0.5rem 1rem; font-family: "Poppins", "Segoe UI", Arial, sans-serif; font-weight: 500; font-size: 0.9rem;
  color: var(--cinza-texto); border-bottom: 3px solid transparent; margin-bottom: -1px;
}
.abas-relatorio a:hover { text-decoration: none; color: var(--azul-marinho); }
.abas-relatorio a.ativa { color: var(--azul-marinho); border-bottom-color: var(--marca-laranja); font-weight: 600; }
.cartao-meta-ok { border-left: 4px solid var(--verde-ativo); }
.cartao-meta-ok .numero { color: var(--verde-ativo); }
.cartao-meta-fora { border-left: 4px solid var(--vermelho-erro); }
.cartao-meta-fora .numero { color: var(--vermelho-erro); }
a.cartao-link { color: inherit; }
a.cartao-link:hover { text-decoration: none; border-color: var(--azul-destaque); }
a.cartao-link:hover .rotulo-extra { text-decoration: underline; }
.celula-meta-ok { color: var(--verde-ativo); font-weight: 600; }
.celula-meta-fora { color: var(--vermelho-erro); font-weight: 600; }
.tabela-rolagem { overflow-x: auto; }
.tabela-rolagem .tabela { min-width: 640px; }
.filtros-auditoria {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 0.6rem 0.9rem; align-items: end;
  background: var(--branco); border: 1px solid var(--cinza-borda); border-radius: 6px; padding: 0.85rem 1rem; margin: 0.75rem 0;
}
.filtros-auditoria label { font-size: 0.8rem; font-weight: 600; color: var(--azul-marinho); }
.filtros-auditoria input, .filtros-auditoria select { font-size: 0.85rem; padding: 0.4rem 0.5rem; font-weight: 400; }
.filtros-auditoria input[type="date"] { display: block; width: 100%; margin-top: 0.35rem; border: 1px solid var(--cinza-borda); border-radius: 4px; font-family: inherit; }
.filtros-auditoria-botoes { display: flex; align-items: center; gap: 0.75rem; white-space: nowrap; }
.filtros-auditoria-botoes button { padding: 0.45rem 1rem; font-size: 0.9rem; }
.cabecalho-resultado { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; margin: 0.75rem 0 0.5rem; color: var(--azul-marinho); }
.selo-pequeno { font-size: 0.68rem; }
.dica-inline { font-size: 0.8rem; color: #8a97a3; font-weight: 400; }
.campo-curto { max-width: 8rem; }
form input.campo-curto, form input[type="number"].campo-curto { max-width: 8rem; }
.acoes-auditoria { display: flex; flex-wrap: wrap; gap: 0.4rem; margin: 0; }
.acoes-auditoria .botao { margin-left: 0 !important; }
.detalhes-atendimento {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 0.75rem 1.25rem; margin: 1rem 0;
  background: var(--branco); border: 1px solid var(--cinza-borda); border-radius: 6px; padding: 1rem 1.25rem;
}
.detalhes-atendimento dt { font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.03em; color: #8a97a3; }
.detalhes-atendimento dd { margin: 0.1rem 0 0; color: var(--azul-marinho); font-weight: 600; font-size: 0.92rem; }
.conversa-auditoria { background: var(--branco); border: 1px solid var(--cinza-borda); border-radius: 6px; padding: 0.25rem 1.25rem; }
.linha-auditoria { padding: 0.6rem 0; border-bottom: 1px solid #eef0f3; }
.linha-auditoria:last-child { border-bottom: none; }
.linha-auditoria p { margin: 0.2rem 0 0; white-space: pre-wrap; word-break: break-word; font-size: 0.9rem; }
.linha-auditoria-quem { font-weight: 600; font-size: 0.85rem; color: var(--azul-marinho); }
.linha-auditoria-cliente .linha-auditoria-quem { color: var(--azul-destaque); }
.linha-auditoria-atendente .linha-auditoria-quem { color: var(--verde-atendente); }
.linha-auditoria-interna { background: #fff8e6; margin: 0 -1.25rem; padding-left: 1.25rem; padding-right: 1.25rem; }
.linha-auditoria-interna .linha-auditoria-quem { color: #8a5a00; }
.linha-auditoria-quando { font-size: 0.75rem; color: #8a97a3; margin-left: 0.5rem; }
.linha-auditoria-citada { margin: 0.25rem 0 0; padding: 0.2rem 0.6rem; border-left: 3px solid var(--marca-laranja); color: #5f6d7a; font-size: 0.82rem; }
.linha-auditoria .mensagem-midia { display: block; }

/* E2, 2a parte: pausa, limite de conversas e alertas na Fila */
.fila-cabecalho-acoes { display: flex; align-items: center; gap: 0.6rem; flex-wrap: wrap; }
.pausa-popover .botao-como-summary { background: transparent; border-color: var(--cinza-borda); color: var(--azul-marinho); font-weight: 600; }
.pausa-popover .botao-como-summary:hover { background: #e9edf1; }
.form-pausa { min-width: 240px; display: flex; flex-direction: column; gap: 0.35rem; }
.form-pausa .dica { margin: 0 0 0.25rem; }
.botao-motivo-pausa { text-align: left; padding: 0.5rem 0.75rem; font-size: 0.9rem; color: var(--azul-marinho); }
.contador-limite { font-size: 0.85rem; color: var(--cinza-texto); }
.contador-limite strong { color: var(--azul-marinho); }
.contador-limite-cheio strong { color: var(--vermelho-erro); }
.faixa-pausa {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap;
  padding: 0.6rem 1.5rem; background: #fff3d6; border-bottom: 1px solid #f1d58f; color: #7a5a00; font-size: 0.9rem; margin: 0;
}
.faixa-pausa button { padding: 0.45rem 1rem; font-size: 0.9rem; background: var(--marca-laranja); }
.faixa-pausa button:hover { background: #d46d2a; }
.faixa-pausa-passou { background: #fbe6e7; border-bottom-color: #f0c4c7; color: var(--vermelho-erro); }
.faixa-alertas { list-style: none; margin: 0; padding: 0.4rem 1.5rem; background: #fff8e6; border-bottom: 1px solid #f1d58f; font-size: 0.85rem; display: flex; flex-direction: column; gap: 0.2rem; }
.faixa-alertas .alerta-atencao { color: #7a5a00; }
.faixa-alertas .alerta-grave { color: var(--vermelho-erro); font-weight: 600; }
.faixa-alertas-painel { border: 1px solid #f1d58f; border-radius: 6px; margin: 1rem 0 0; padding: 0.6rem 1rem; }
.ponto-online.em-pausa { background: #e0a800; }
.selo-equipe { margin-left: 0.3rem; }
.selo-equipe-livre { background: #e3f3ea; color: var(--verde-ativo); }
.selo-equipe-atendendo { background: #e6f1fb; color: var(--azul-destaque); }
.selo-equipe-limite { background: #fdebdc; color: #a8501a; }
.selo-equipe-pausa { background: #fff3d6; color: #7a5a00; }
.selo-equipe-passou { background: #fbe6e7; color: var(--vermelho-erro); }
.caixa-link-tv { display: flex; gap: 0.5rem; align-items: center; flex-wrap: wrap; margin: 1rem 0 0.75rem; }
.caixa-link-tv input { flex: 1; min-width: 240px; margin: 0; font-family: Consolas, monospace; font-size: 0.85rem; }
input.campo-tabela { margin-top: 0; width: 6rem; padding: 0.5rem 0.6rem; border: 1px solid var(--cinza-borda); border-radius: 4px; font-family: inherit; font-size: 0.95rem; }

/* E2, 3a parte: editor de fluxo com Testar, fluxos prontos, importar/exportar e versões */
.editor-cabecalho { flex-wrap: wrap; gap: 0.5rem; }
.editor-acoes { flex-wrap: wrap; gap: 0.6rem; }
.editor-acoes .botao-secundario { padding: 0.5rem 1rem; font-size: 0.9rem; border-radius: 4px; cursor: pointer; color: var(--azul-marinho); font-weight: 600; }
.menu-fluxo { position: relative; }
.menu-fluxo .botao-como-summary { padding: 0.5rem 0.9rem; font-size: 0.9rem; }
.menu-fluxo-itens {
  position: absolute; right: 0; top: 2.6rem; z-index: 20; min-width: 220px; display: flex; flex-direction: column; gap: 0.15rem;
  background: var(--branco); border: 1px solid var(--cinza-borda); border-radius: 6px; box-shadow: 0 6px 18px rgba(0, 0, 0, 0.12); padding: 0.5rem;
}
.menu-fluxo-itens a, .menu-fluxo-itens .botao-link { display: block; text-align: left; padding: 0.45rem 0.6rem; font-size: 0.9rem; border-radius: 4px; color: var(--azul-marinho); }
.menu-fluxo-itens a:hover, .menu-fluxo-itens .botao-link:hover { background: var(--cinza-fundo); text-decoration: none; }
.faixa-editor { margin: 0; padding: 0.55rem 1.5rem; font-size: 0.85rem; border-bottom: 1px solid var(--cinza-borda); background: #eaf1f6; color: var(--azul-marinho); }
.faixa-editor-atencao { background: #fff3d6; color: #7a5a00; border-bottom-color: #f1d58f; }
.faixa-editor-erro { background: #fbe9e9; color: var(--vermelho-erro); border-bottom-color: #f0c4c7; }
.simulador { width: 340px; flex-shrink: 0; display: flex; flex-direction: column; background: #f7f9fb; border-left: 1px solid var(--cinza-borda); min-height: 0; }
.simulador-topo { display: flex; align-items: center; justify-content: space-between; padding: 0.75rem 1rem; background: var(--azul-marinho); color: var(--branco); font-family: "Poppins", "Segoe UI", Arial, sans-serif; }
.simulador-topo .botao-link { color: var(--branco); font-size: 0.85rem; }
.simulador-botoes { display: flex; gap: 0.75rem; align-items: center; }
.simulador-dica { margin: 0; padding: 0.5rem 1rem; font-size: 0.75rem; color: #5f6d7a; border-bottom: 1px solid var(--cinza-borda); }
.simulador-conversa { flex: 1; overflow-y: auto; padding: 0.75rem; display: flex; flex-direction: column; gap: 0.45rem; }
.sim-balao { max-width: 88%; padding: 0.5rem 0.7rem; border-radius: 8px; font-size: 0.85rem; white-space: pre-wrap; word-break: break-word; }
.sim-cliente { align-self: flex-end; background: #dcf3e4; color: #1d3b2a; border-bottom-right-radius: 2px; }
.sim-bot { align-self: flex-start; background: var(--branco); border: 1px solid var(--cinza-borda); color: var(--cinza-texto); border-bottom-left-radius: 2px; }
.sim-evento { align-self: center; max-width: 95%; background: transparent; color: #8a6d00; font-size: 0.75rem; font-style: italic; text-align: center; padding: 0.15rem 0.4rem; }
.sim-erro { align-self: center; background: #fbe9e9; color: var(--vermelho-erro); font-size: 0.8rem; }
.simulador-form { display: flex; gap: 0.4rem; padding: 0.6rem; border-top: 1px solid var(--cinza-borda); background: var(--branco); margin: 0; }
.simulador-form input { flex: 1; margin: 0; padding: 0.5rem 0.6rem; }
.simulador-form button { padding: 0.5rem 0.9rem; font-size: 0.9rem; }
.no-fluxo.no-simulado { outline: 3px solid var(--marca-laranja); outline-offset: 2px; box-shadow: 0 0 0 6px rgba(237, 129, 59, 0.18); }
.dialogo-modelos { border: 1px solid var(--cinza-borda); border-radius: 8px; padding: 1.25rem 1.5rem; max-width: 640px; width: calc(100% - 32px); }
.dialogo-modelos::backdrop { background: rgba(20, 41, 60, 0.45); }
.dialogo-topo { display: flex; align-items: center; justify-content: space-between; }
.dialogo-topo h2 { margin: 0; color: var(--azul-marinho); font-family: "Poppins", "Segoe UI", Arial, sans-serif; font-size: 1.15rem; }
.lista-modelos { list-style: none; margin: 0.75rem 0 0; padding: 0; display: flex; flex-direction: column; gap: 0.5rem; }
.lista-modelos li { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 0.7rem 0.85rem; border: 1px solid var(--cinza-borda); border-radius: 6px; }
.lista-modelos li div { display: flex; flex-direction: column; gap: 0.15rem; }
.lista-modelos strong { color: var(--azul-marinho); }
.lista-modelos button { flex-shrink: 0; padding: 0.45rem 0.9rem; font-size: 0.85rem; }

/* E2, 4a parte: status do sistema, grupos de permissão, acessos, importar contatos */
.ponto-status-atencao { background: #e0a800; }
.lista-status { list-style: none; margin: 1rem 0; padding: 0; display: flex; flex-direction: column; gap: 0.6rem; }
.item-status { display: grid; grid-template-columns: 0.9rem 11rem 1fr; gap: 0.25rem 0.75rem; align-items: baseline; background: var(--branco); border: 1px solid var(--cinza-borda); border-left-width: 4px; border-radius: 6px; padding: 0.75rem 1rem; }
.item-status-ok { border-left-color: var(--verde-ativo); }
.item-status-atencao { border-left-color: #e0a800; }
.item-status-problema { border-left-color: var(--vermelho-erro); }
.item-status .ponto-status { align-self: center; }
.item-status-nome { font-family: "Poppins", "Segoe UI", Arial, sans-serif; font-weight: 600; color: var(--azul-marinho); }
.item-status-texto { font-weight: 600; color: var(--cinza-texto); }
.item-status-detalhe { grid-column: 3; font-size: 0.85rem; color: #5f6d7a; }
@media (max-width: 720px) { .item-status { grid-template-columns: 0.9rem 1fr; } .item-status-texto, .item-status-detalhe { grid-column: 2; } }
.lista-grupos { display: flex; flex-direction: column; gap: 0.6rem; margin: 1rem 0; }
.cartao-grupo { background: var(--branco); border: 1px solid var(--cinza-borda); border-radius: 6px; padding: 0.75rem 1rem; }
.cartao-grupo summary { cursor: pointer; display: flex; gap: 0.75rem; align-items: baseline; flex-wrap: wrap; }
.cartao-grupo form { margin-top: 0.75rem; }
.cartao-grupo-novo { display: block; }
.sem-quebra-celula { white-space: normal; }
.tabela-importar td { font-size: 0.85rem; }
.resumo-importar { display: flex; gap: 0.75rem; flex-wrap: wrap; margin: 1rem 0; }
.resumo-importar .cartao { padding: 0.75rem 1.25rem; }
.resumo-importar .cartao .numero { font-size: 1.6rem; }

/* E3: campanhas, lembretes, retornos e fila de envios */
.faixa-fila-envios { margin: 0.75rem 0 1rem; padding: 0.55rem 0.9rem; border-radius: 6px; font-size: 0.85rem; border: 1px solid var(--cinza-borda); }
.faixa-fila-ok { background: #e3f3ea; border-color: #bfe3cd; color: var(--verde-ativo); }
.faixa-fila-parada { background: #fff3d6; border-color: #f1d58f; color: #7a5a00; }
.faixa-fila-envios a { margin-left: 0.4rem; }
.selo-envio-pendente { background: #e6f1fb; color: var(--azul-destaque); }
.selo-envio-enviado { background: #e3f3ea; color: var(--verde-ativo); }
.selo-envio-falhou { background: #fbe6e7; color: var(--vermelho-erro); }
.selo-envio-pulado, .selo-envio-cancelado { background: #eef1f4; color: #5f6d7a; }
.campo-inline { display: inline-block; width: auto; margin: 0 0 0 0.4rem; padding: 0.3rem 0.5rem; }
.faixa-retorno { margin: 0.3rem 0 0; font-size: 0.82rem; color: #7a5a00; background: #fff8e6; border-radius: 4px; padding: 0.25rem 0.5rem; display: inline-block; }
.faixa-retorno .botao-link { font-size: 0.8rem; margin-left: 0.3rem; }
.agendar-retorno summary { cursor: pointer; list-style: none; }
.agendar-retorno summary::-webkit-details-marker { display: none; }
.form-retorno { display: flex; flex-direction: column; gap: 0.4rem; margin: 0.4rem 0 0.2rem; padding: 0.6rem; background: var(--cinza-fundo); border-radius: 6px; }
.form-retorno label { font-size: 0.8rem; font-weight: 600; color: var(--azul-marinho); }
.form-retorno input, .form-retorno select, .form-retorno textarea { margin-top: 0.2rem; font-size: 0.85rem; padding: 0.35rem 0.5rem; }
.form-retorno .linha-form { gap: 0.4rem; margin: 0; }
.form-retorno input[type="date"], .form-retorno input[type="time"] { display: block; border: 1px solid var(--cinza-borda); border-radius: 4px; font-family: inherit; }
.menu-acoes { max-height: calc(100vh - 170px); overflow-y: auto; }
.selo-campanha-rascunho { background: #eef1f4; color: #5f6d7a; }
.selo-campanha-enviando { background: #e6f1fb; color: var(--azul-destaque); }
.selo-campanha-pausada { background: #fff3d6; color: #7a5a00; }
.selo-campanha-concluida { background: #e3f3ea; color: var(--verde-ativo); }
.selo-campanha-cancelada { background: #fbe6e7; color: var(--vermelho-erro); }
.balao-exemplo { white-space: pre-wrap; background: #dcf8c6; color: #1d3b2a; border-radius: 8px; padding: 0.6rem 0.8rem; max-width: 420px; font-size: 0.9rem; margin: 0.25rem 0 0.75rem; }
.contagem-publico { margin: 0.75rem 0 0; padding: 0.6rem 0.8rem; background: #eaf1f6; border-radius: 6px; color: var(--azul-marinho); font-size: 0.9rem; display: flex; flex-direction: column; gap: 0.2rem; }
.campo-bloco { max-width: 320px; }
fieldset[disabled] { opacity: 0.85; }
.form-iniciar label { font-size: 0.8rem; font-weight: 600; color: var(--azul-marinho); }
.form-iniciar input[type="date"], .form-iniciar input[type="time"] { display: block; margin-top: 0.25rem; padding: 0.4rem 0.5rem; border: 1px solid var(--cinza-borda); border-radius: 4px; font-family: inherit; }
.form-iniciar { align-items: flex-end; }
.linha-form button { white-space: nowrap; }

/* E4: API oficial (janela de 24 h, modelos, conexão) */
.faixa-janela { margin: 0 1.75rem 0.5rem; padding: 0.6rem 0.8rem; background: #fff3d6; border: 1px solid #f1d58f; border-radius: 6px; font-size: 0.85rem; color: #7a5a00; }
.faixa-janela p { margin: 0 0 0.4rem; }
.form-modelo { display: flex; flex-direction: column; gap: 0.35rem; margin: 0; }
.form-modelo select, .form-modelo input { margin: 0; padding: 0.4rem 0.5rem; font-size: 0.85rem; }
#parametros-modelo { display: flex; flex-wrap: wrap; gap: 0.35rem; }
#parametros-modelo input { flex: 1; min-width: 140px; }
.form-conexao label.linha { display: flex; gap: 0.6rem; align-items: flex-start; margin-bottom: 0.6rem; }
.texto-modelo { font-size: 0.82rem; white-space: pre-wrap; max-width: 360px; }
.parametros-escolher-modelo { display: flex; flex-wrap: wrap; gap: 0.5rem 1rem; }
.parametros-escolher-modelo label { flex: 1; min-width: 200px; }

/* E4, 3a parte: vários números e vários fluxos */
.cartao-numero { background: var(--branco); }
.cartao-numero-desligado { opacity: 0.7; }
.form-numero { align-items: flex-end; flex-wrap: wrap; }
.form-numero label { font-size: 0.8rem; font-weight: 600; color: var(--azul-marinho); }
.form-numero input, .form-numero select { margin-top: 0.25rem; }
.selo-numero { background: #eaf1f6; color: var(--azul-destaque); }
.editor-titulo { display: flex; align-items: center; gap: 0.75rem; flex-wrap: wrap; }
.seletor-fluxo select { margin: 0; padding: 0.35rem 0.5rem; font-size: 0.9rem; }
.acoes-fluxo { display: flex; gap: 0.6rem; align-items: center; flex-wrap: wrap; justify-content: flex-end; }
.campo-renomear-fluxo { width: 9rem; margin: 0; padding: 0.3rem 0.4rem; font-size: 0.8rem; }
.form-novo-fluxo { display: flex; flex-direction: column; gap: 0.5rem; }
.form-novo-fluxo select, .form-novo-fluxo input { margin-top: 0.25rem; }

/* Configurações › Instagram: partes que abrem e fecham (dados da central, app próprio) */
.detalhes-config { margin: 1rem 0; }
.detalhes-config > summary { cursor: pointer; font-weight: 600; color: var(--azul-marinho); margin-bottom: 0.5rem; }

/* ---- Menu: página atual e gaveta do celular ---- */

/* no computador a "gaveta" não existe: nav e Sair continuam filhos diretos da barra lateral */
.menu-gaveta { display: contents; }
.fundo-menu { display: none; }
.voltar-lista { display: none; }
.aviso-so-celular { display: none; }

/* página em que a pessoa está: o traço laranja da marca */
.barra-lateral nav a[aria-current="page"] {
  color: var(--branco);
  background: rgba(255, 255, 255, 0.1);
  box-shadow: inset 3px 0 0 var(--marca-laranja);
}
.barra-lateral nav a:focus-visible,
.botao-recolher:focus-visible { outline: 2px solid var(--marca-laranja); outline-offset: -2px; }

@media (max-width: 760px) {
  :root { --altura-barra-celular: 56px; }

  /* a barra lateral vira uma faixa fina no topo; o menu abre por cima, pela esquerda */
  .app-shell { flex-direction: column; }
  .barra-lateral,
  html.menu-recolhido .barra-lateral {
    position: sticky;
    top: 0;
    z-index: 40;
    width: 100%;
    height: var(--altura-barra-celular);
    overflow: visible;
    transition: none;
  }
  .barra-lateral .marca,
  html.menu-recolhido .barra-lateral .marca {
    height: var(--altura-barra-celular);
    padding: 0 1rem;
    justify-content: flex-start;
    gap: 0.6rem;
    border-bottom: none;
  }
  html.menu-recolhido .marca-icone { height: 30px; width: 30px; }
  .marca-icone { height: 30px; width: 30px; }
  .botao-recolher { padding: 0.5rem; margin-left: -0.5rem; }
  /* o "recolhido" do computador não vale no celular */
  html.menu-recolhido .recolhivel { display: revert; }

  .menu-gaveta {
    display: flex;
    flex-direction: column;
    position: fixed;
    top: var(--altura-barra-celular);
    bottom: 0;
    left: 0;
    width: min(280px, 85vw);
    background: var(--azul-marinho);
    border-top: 1px solid rgba(255, 255, 255, 0.12);
    overflow-y: auto;
    transform: translateX(-100%);
    visibility: hidden;
    transition: transform 0.2s ease, visibility 0s linear 0.2s;
    z-index: 41;
  }
  html.menu-aberto .menu-gaveta { transform: none; visibility: visible; transition: transform 0.2s ease; }
  .barra-lateral nav { flex: 0 0 auto; padding: 0.5rem 0; }
  .barra-lateral nav a,
  html.menu-recolhido .barra-lateral nav a { justify-content: flex-start; padding: 0.8rem 1.5rem; font-size: 0.95rem; }
  .sair,
  html.menu-recolhido .sair { margin-top: auto; align-items: flex-start; padding: 1rem 1.5rem; }

  .fundo-menu {
    position: fixed;
    inset: var(--altura-barra-celular) 0 0 0;
    background: rgba(20, 41, 60, 0.5);
    z-index: 39;
  }
  html.menu-aberto .fundo-menu { display: block; }
  html.menu-aberto { overflow: hidden; }

  /* páginas comuns: margem de 1rem dos lados, títulos menores */
  .conteudo { margin: 1.25rem auto; padding: 0 1rem; }
  .conteudo h1 { font-size: 1.45rem; margin: 0 0 0.75rem; }
  .cabecalho-lista { flex-wrap: wrap; gap: 0.6rem; }
  .cabecalho-lista h1 { margin: 0; }

  /* tabelas: deslizam para o lado em vez de espremer as colunas */
  .tabela { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .tabela th, .tabela td { padding: 0.55rem 0.75rem; }
  .tabela th { white-space: nowrap; }
  .tabela-rolagem .tabela { display: table; }

  /* campos e botões com área de toque confortável, e sem zoom automático do iPhone (16px) */
  input[type="text"], input[type="email"], input[type="password"], input[type="number"], input[type="search"],
  input[type="tel"], input[type="date"], input[type="time"], input[type="datetime-local"], select, textarea { font-size: 16px; }

  /* Fila: ou a lista ou a conversa, uma de cada vez */
  .conteudo-fila { height: calc(100vh - var(--altura-barra-celular)); height: calc(100dvh - var(--altura-barra-celular)); }
  .fila-cabecalho { min-height: 0; padding: 0.6rem 1rem; }
  .fila-cabecalho h1 { font-size: 1.05rem; }
  .faixa-alertas { padding: 0.4rem 1rem; max-height: 6.5rem; overflow-y: auto; }
  .fila-lista { width: 100%; border-right: none; }
  .conteudo-fila:not([data-conversa-numero]) .fila-detalhe { display: none; }
  .conteudo-fila[data-conversa-numero] .fila-lista,
  .conteudo-fila[data-conversa-numero] .fila-cabecalho,
  .conteudo-fila[data-conversa-numero] .faixa-alertas { display: none; }
  .voltar-lista { display: inline-block; width: 100%; font-weight: 600; font-size: 0.9rem; }
  .cabecalho-conversa { padding: 0.6rem 1rem; gap: 0.5rem; }
  .cabecalho-conversa-info { min-width: 0; }
  .cabecalho-conversa-titulo h2 { font-size: 1.05rem; }
  .fila-detalhe .historico { margin: 0.75rem 0.75rem 0; }
  .fila-detalhe > .erro, .fila-detalhe > .aviso { margin: 0.5rem 0.75rem 0; }
  .fila-detalhe .form-responder { margin: 0.5rem 0.75rem 0.75rem; }
  .mensagem-nota { max-width: 95%; }

  /* nada passa da largura da tela: fieldset encolhe, linhas de formulário quebram, abas deslizam */
  fieldset { min-width: 0; }
  .linha-form { flex-wrap: wrap; }
  .linha-form > input[type="text"], .linha-form > input[type="file"], .linha-form > select { flex: 1 1 10rem; min-width: 0; }
  .linha-form-inline > input[type="text"] { flex: 1 1 8rem; min-width: 0; }
  .abas-relatorio { overflow-x: auto; scrollbar-width: none; }
  .abas-relatorio a { flex-shrink: 0; white-space: nowrap; }

  select { max-width: 100%; }

  /* menus que abrem por cima (Ações, Transferir, nome, Nova conversa, Pausar): sobem do pé da tela */
  .form-transferir,
  .renomear-popover .form-renomear,
  .cabecalho-conversa .transferir-popover .form-transferir,
  .nova-conversa-popover .form-transferir {
    position: fixed;
    left: 0.75rem;
    right: 0.75rem;
    top: auto;
    bottom: 0.75rem;
    width: auto;
    min-width: 0;
    max-height: 70vh;
    overflow-y: auto;
    z-index: 45;
    box-shadow: 0 -6px 24px rgba(20, 41, 60, 0.25);
  }

  /* botões-link lado a lado quebram de linha sem encavalar */
  a.botao { display: inline-block; margin: 0 0.35rem 0.4rem 0; }

  /* cartões de números: duas colunas iguais */
  .cartoes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.75rem; margin: 1rem 0; }
  .cartao { min-width: 0; padding: 1rem; }
  .cartao .numero { font-size: 1.6rem; }

  /* editor de fluxo: blocos numa faixa em cima, quadro no meio, edição embaixo, teste por cima */
  .aviso-so-celular { display: block; margin: 0; padding: 0.5rem 1rem; font-size: 0.8rem; background: #eaf1f6; border-bottom: 1px solid #cddce6; }
  .conteudo-fluxo { height: calc(100vh - var(--altura-barra-celular)); height: calc(100dvh - var(--altura-barra-celular)); }
  .editor-cabecalho { flex-wrap: wrap; gap: 0.5rem; padding: 0.6rem 1rem; }
  .editor-acoes { flex-wrap: wrap; gap: 0.5rem; }
  .editor-corpo { flex-direction: column; }
  .paleta-nos { width: 100%; display: flex; gap: 0.4rem; align-items: center; overflow-x: auto; padding: 0.5rem 1rem; border-right: none; border-bottom: 1px solid var(--cinza-borda); }
  .paleta-titulo, .paleta-dica { display: none; }
  .botao-paleta { display: inline-block; width: auto; flex-shrink: 0; margin: 0; white-space: nowrap; }
  .quadro-scroll { flex: 1; min-height: 40vh; }
  .painel-edicao { width: 100%; max-height: 45vh; border-left: none; border-top: 1px solid var(--cinza-borda); padding: 1rem; }
  .simulador { position: fixed; inset: var(--altura-barra-celular) 0 0 0; width: auto; z-index: 30; }
}

@media (prefers-reduced-motion: reduce) {
  .menu-gaveta, html.menu-aberto .menu-gaveta { transition: none; }
}

/* Som dos avisos: botão 🔔/🔕 e o aviso de som bloqueado pelo navegador, no pé do menu */
.botao-som-mudo,
.aviso-som-bloqueado {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin: 0 1rem 0.5rem;
  padding: 0.4rem 0.7rem;
  font-size: 0.8rem;
  color: var(--branco);
  background: transparent;
  border: 1px solid #4d6c85;
  border-radius: 4px;
  cursor: pointer;
  text-align: left;
}
.botao-som-mudo:hover { background: rgba(255, 255, 255, 0.08); }
.aviso-som-bloqueado { background: var(--marca-laranja); border-color: var(--marca-laranja); font-weight: 600; }
.aviso-som-bloqueado:hover { filter: brightness(1.05); }
html.menu-recolhido .botao-som-mudo { justify-content: center; margin: 0 0.5rem 0.5rem; }
html.menu-recolhido .aviso-som-bloqueado { font-size: 0; margin: 0 0.5rem 0.5rem; justify-content: center; }
html.menu-recolhido .aviso-som-bloqueado::before { content: "🔇"; font-size: 1rem; }