: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; }

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: #8a97a3; 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;
}