/* Tela de atendimento GoAll, no formato do WhatsApp. Paleta e tipografia: clientes/goall/knowledge/brand_identity.md §7 e §8. */
:root {
  --goall-purple-deep: #160041;
  --goall-purple-mid: #4705AB;
  --goall-purple-vibrant: #640BFE;
  --goall-purple-light: #B463FE;
  --goall-orange: #FF931E;
  --goall-lime: #D9E021;
  --goall-magenta: #FF3ABC;
  --white: #FFFFFF;
  --gray-50: #F5F5F7;

  --tinta: var(--goall-purple-deep);
  --tinta-2: rgba(22, 0, 65, .68);
  --tinta-3: rgba(22, 0, 65, .48);
  --linha: rgba(22, 0, 65, .1);
  --fundo: var(--gray-50);
  --superficie: var(--white);
  --roxo-suave: rgba(100, 11, 254, .08);
  --bolha-eu: #EDE3FF;          /* roxo vibrante a 12% sobre branco, opaco para o balão não pegar o padrão do fundo */
  --magenta-suave: rgba(255, 58, 188, .12);
  --laranja-suave: rgba(255, 147, 30, .14);   /* laranja oficial a 14%, fundo do aviso da ficha de contato */
  --fundo-chat: var(--gray-50);
  --padrao-chat: rgba(22, 0, 65, .045);

  --fonte: 'Outfit', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
  --esp-1: 4px; --esp-2: 8px; --esp-3: 12px; --esp-4: 16px; --esp-5: 24px; --esp-6: 32px;
  --raio-1: 8px; --raio-2: 14px; --raio-pill: 999px;
  --avatar: 46px;
}

[hidden] { display: none !important; }
* { box-sizing: border-box; }
html { color-scheme: light; }
body {
  margin: 0; font-family: var(--fonte); font-size: 15px; line-height: 1.4;
  color: var(--tinta); background: var(--fundo);
  display: flex; flex-direction: column; height: 100vh; height: 100dvh; overflow: hidden;
}
h1, h2, p { margin: 0; }

/* topo */
.topo {
  flex: none; display: flex; align-items: center; justify-content: space-between; gap: var(--esp-4);
  padding: var(--esp-2) var(--esp-5); background: var(--goall-purple-deep); color: var(--white);
}
.marca { display: flex; align-items: center; gap: var(--esp-3); }
/* logo oficial (assets/logos/goall_logo_fundo_escuro.png), só sem a margem transparente */
.marca-logo { display: block; height: 32px; width: auto; }
.marca-sub { font-weight: 400; font-size: 15px; color: var(--goall-lime); padding-left: var(--esp-3); border-left: 1px solid rgba(255, 255, 255, .25); }
.topo-dir { display: flex; align-items: center; gap: var(--esp-3); flex-wrap: wrap; justify-content: flex-end; }
.quem { font-size: 13px; opacity: .8; }
.topo .btn-link { color: var(--white); }
.nav { display: flex; gap: 2px; }
.nav-item {
  font: inherit; font-size: 14px; font-weight: 500; color: rgba(255, 255, 255, .72); background: none; border: 0;
  padding: 6px 12px; border-radius: var(--raio-pill); cursor: pointer;
}
.nav-item:hover { color: var(--white); }
.nav-item[aria-current="page"] { background: rgba(255, 255, 255, .14); color: var(--white); }
.nav-item:focus-visible { outline: 2px solid var(--goall-lime); outline-offset: 1px; }

/* peças */
.rotulo { display: block; font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .1em; color: var(--tinta-2); margin-bottom: 2px; }
.sub { color: var(--tinta-3); font-size: 12.5px; }
.pill, .selo { display: inline-block; border-radius: var(--raio-pill); white-space: nowrap; }
.pill { font-size: 12px; font-weight: 500; padding: 3px 10px; }
.pill-laranja { background: var(--goall-orange); color: var(--goall-purple-deep); }
.pill-lime { background: var(--goall-lime); color: var(--goall-purple-deep); }
.pill-neutra { background: rgba(255, 255, 255, .14); color: var(--white); }
.selo { font-size: 11.5px; font-weight: 600; padding: 1px 8px; }
.selo-voce { background: var(--goall-magenta); color: var(--goall-purple-deep); }
.selo-pronta { background: var(--goall-lime); color: var(--goall-purple-deep); }
.selo-nada { background: var(--fundo); color: var(--tinta-2); box-shadow: inset 0 0 0 1px var(--linha); }
.selo-sem { color: var(--tinta-2); box-shadow: inset 0 0 0 1px var(--tinta-3); }
.selo-antiga { background: var(--goall-orange); color: var(--goall-purple-deep); }
.selo-comercial { background: var(--goall-purple-light); color: var(--goall-purple-deep); }

.btn {
  font: inherit; font-weight: 600; font-size: 14px; line-height: 1.2; border-radius: var(--raio-pill); padding: 9px 16px;
  border: 1px solid var(--linha); background: var(--superficie); color: var(--tinta); cursor: pointer;
  text-decoration: none; display: inline-flex; align-items: center; white-space: nowrap;
}
.btn:hover:not(:disabled) { border-color: var(--goall-purple-vibrant); }
.btn:disabled { opacity: .42; cursor: not-allowed; }
.btn-primario { background: var(--goall-purple-vibrant); border-color: var(--goall-purple-vibrant); color: var(--white); }
.btn-pequeno { font-size: 13px; padding: 6px 12px; }
.btn-discreto { border-color: transparent; color: var(--tinta-2); }
.btn-link { font: inherit; background: none; border: 0; padding: 0; color: var(--goall-purple-vibrant); cursor: pointer; text-decoration: underline; text-underline-offset: 2px; }
.btn-link:disabled { opacity: .45; cursor: wait; }
input, textarea { font: inherit; color: inherit; background: var(--superficie); border: 1px solid var(--linha); border-radius: var(--raio-1); }
input { padding: 10px 12px; }
input:focus, textarea:focus, .btn:focus-visible, .item:focus-visible, .filtro:focus-visible, .enviar:focus-visible { outline: 2px solid var(--goall-purple-vibrant); outline-offset: 1px; }

/* login */
.login { flex: 1; overflow: auto; display: flex; flex-direction: column; align-items: center; padding: var(--esp-6) var(--esp-4); }
.cartao-login {
  width: 100%; max-width: 380px; background: var(--superficie); border: 1px solid var(--linha); border-radius: var(--raio-2);
  padding: var(--esp-5); display: flex; flex-direction: column; gap: var(--esp-2);
}
.cartao-login h1 { font-size: 22px; font-weight: 700; letter-spacing: -0.01em; }
.cartao-login p { color: var(--tinta-2); margin-bottom: var(--esp-2); }
.cartao-login .btn-primario { justify-content: center; margin-top: var(--esp-2); }
.cartao-login .btn-link { align-self: center; margin-top: var(--esp-1); }
.aviso-erro { margin-top: var(--esp-3); font-weight: 500; }

/* aplicação */
.app { flex: 1; min-height: 0; display: grid; grid-template-columns: minmax(320px, 420px) 1fr; }

/* lista de conversas */
.lista { min-height: 0; display: flex; flex-direction: column; background: var(--superficie); border-right: 1px solid var(--linha); }
.lista-topo { flex: none; padding: var(--esp-3) var(--esp-3) var(--esp-2); display: flex; flex-direction: column; gap: var(--esp-2); }
.busca { width: 100%; background: var(--fundo); border-color: transparent; border-radius: var(--raio-pill); padding: 9px 16px; }
.filtros { display: flex; gap: 6px; flex-wrap: wrap; }
.filtro {
  font: inherit; font-size: 13px; font-weight: 500; border: 0; background: var(--fundo); color: var(--tinta-2);
  border-radius: var(--raio-pill); padding: 5px 12px; cursor: pointer; display: inline-flex; gap: 6px; align-items: center;
}
.filtro .n { font-weight: 600; color: var(--tinta); }
.filtro.ativo { background: var(--goall-purple-deep); color: var(--white); }
.filtro.ativo .n { color: var(--goall-lime); }
.lista-corpo { flex: 1; min-height: 0; overflow: auto; }
.lista-vazia { padding: var(--esp-5) var(--esp-4); color: var(--tinta-3); }

.item {
  display: flex; gap: var(--esp-3); align-items: center; width: 100%; text-align: left; font: inherit; color: inherit;
  background: none; border: 0; padding: 0 var(--esp-3); cursor: pointer;
}
.item:hover { background: var(--fundo); }
.item.ativo { background: var(--roxo-suave); }
.item-meio { flex: 1; min-width: 0; padding: var(--esp-3) 0; border-bottom: 1px solid var(--linha); display: flex; flex-direction: column; gap: 2px; }
.item-linha { display: flex; align-items: center; gap: var(--esp-2); min-width: 0; }
.item-nome { flex: 1; min-width: 0; font-weight: 500; font-size: 15.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.item-hora { flex: none; font-size: 12px; color: var(--tinta-3); }
.item-previa { flex: 1; min-width: 0; font-size: 14px; color: var(--tinta-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.item.nao-lida .item-nome { font-weight: 700; }
.item.nao-lida .item-hora { color: var(--goall-purple-vibrant); font-weight: 600; }
.item.nao-lida .item-previa { color: var(--tinta); }
.badge {
  flex: none; min-width: 20px; height: 20px; padding: 0 6px; border-radius: var(--raio-pill);
  background: var(--goall-purple-vibrant); color: var(--white); font-size: 12px; font-weight: 600;
  display: inline-flex; align-items: center; justify-content: center;
}
.badge-voce { background: var(--goall-magenta); color: var(--goall-purple-deep); }
.item-selos { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 2px; }

.avatar {
  flex: none; width: var(--avatar); height: var(--avatar); border-radius: 50%;
  background: var(--goall-purple-light); color: var(--white); font-weight: 600; font-size: 16px;
  display: inline-flex; align-items: center; justify-content: center; overflow: hidden;
}
.avatar svg { width: 60%; height: 60%; fill: currentColor; }

/* conversa */
.chat { min-height: 0; min-width: 0; display: flex; flex-direction: column; background: var(--fundo-chat); }
.chat-vazio { flex: 1; display: flex; align-items: center; justify-content: center; color: var(--tinta-3); padding: var(--esp-6); }
.chat-conteudo { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.chat-topo {
  flex: none; display: flex; align-items: center; gap: var(--esp-3); padding: var(--esp-2) var(--esp-4);
  background: var(--superficie); border-bottom: 1px solid var(--linha);
}
.chat-topo .avatar { --avatar: 40px; font-size: 14px; }
.chat-quem { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.chat-quem strong { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chat-acoes { display: flex; gap: var(--esp-2); align-items: center; }
.voltar { display: none; font: inherit; font-size: 30px; line-height: 1; background: none; border: 0; color: var(--tinta); cursor: pointer; padding: 0 var(--esp-1); }

.mensagens {
  flex: 1; min-height: 0; overflow: auto; padding: var(--esp-4) 6%;
  display: flex; flex-direction: column; gap: 3px;
  background-color: var(--fundo-chat);
  background-image: radial-gradient(var(--padrao-chat) 1px, transparent 1px);
  background-size: 18px 18px;
}
.separador { align-self: center; margin: var(--esp-3) 0 var(--esp-2); }
.separador span {
  display: inline-block; background: var(--superficie); color: var(--tinta-2); font-size: 12px; font-weight: 500;
  padding: 4px 12px; border-radius: var(--raio-1); box-shadow: 0 1px 1px rgba(22, 0, 65, .08);
}
.bolha {
  max-width: min(620px, 72%); padding: 6px 10px 6px; border-radius: var(--raio-1);
  background: var(--superficie); box-shadow: 0 1px 1px rgba(22, 0, 65, .1); align-self: flex-start;
}
.bolha-eu { align-self: flex-end; background: var(--bolha-eu); }
.bolha + .bolha-eu, .bolha-mobi + .bolha-mobi { margin-top: 0; }
.bolha-mobi + .bolha-eu, .bolha-eu + .bolha-mobi { margin-top: 6px; }
.bolha-texto { white-space: pre-wrap; overflow-wrap: anywhere; }
.bolha-texto strong { font-weight: 700; }
.assinatura { font-size: 12px; color: var(--tinta-3); padding: 0 var(--esp-2); margin-bottom: -4px; }
.midia { display: block; font-size: 13px; font-style: italic; color: var(--tinta-2); }
.midia-link { display: block; margin: -2px -6px 4px; }
.midia-img { display: block; max-width: min(320px, 100%); max-height: 360px; border-radius: 6px; cursor: zoom-in; background: var(--fundo); }
.midia-audio { display: block; width: min(300px, 100%); margin-bottom: 4px; }
.midia-video { display: block; max-width: min(320px, 100%); border-radius: 6px; margin-bottom: 4px; }
.bolha-pe { float: right; margin: 6px 0 -3px 12px; font-size: 11px; color: var(--tinta-3); white-space: nowrap; display: inline-flex; gap: 4px; align-items: center; }
.bolha-erro { clear: both; display: block; margin-top: 4px; font-size: 12px; background: var(--goall-magenta); color: var(--goall-purple-deep); border-radius: 6px; padding: 2px 6px; }
.tique { font-size: 12px; letter-spacing: -3px; padding-right: 3px; color: var(--tinta-3); }
.tique-read { color: var(--goall-purple-vibrant); }
.tique-failed { color: var(--goall-magenta); letter-spacing: 0; font-weight: 700; }

.rodape-chat { flex: none; background: var(--fundo); border-top: 1px solid var(--linha); padding: var(--esp-2) var(--esp-4) var(--esp-3); display: flex; flex-direction: column; gap: var(--esp-2); max-height: 55%; overflow: auto; }
.sugestao { background: var(--superficie); border-radius: var(--raio-1); padding: var(--esp-2) var(--esp-3); display: flex; flex-direction: column; gap: 6px; }
.sugestao-topo { display: flex; gap: var(--esp-2); align-items: center; flex-wrap: wrap; }
.sugestao-topo .btn-link { margin-left: auto; font-size: 13px; }
.para-voce { background: var(--magenta-suave); box-shadow: inset 3px 0 0 var(--goall-magenta); border-radius: 6px; padding: 6px 10px; font-size: 14px; }
.do-agente { background: var(--fundo); box-shadow: inset 3px 0 0 var(--linha); border-radius: 6px; padding: 6px 10px; font-size: 14px; color: var(--tinta-2); }
.do-agente .btn-link { display: block; margin-top: 2px; font-size: 13px; }
.aviso { font-size: 13px; color: var(--tinta-2); padding: 0 var(--esp-1); }
.composer { display: flex; gap: var(--esp-2); align-items: flex-end; }
.composer textarea {
  flex: 1; resize: none; border: 0; border-radius: 22px; padding: 11px 16px; min-height: 44px; max-height: 180px;
  line-height: 1.4; box-shadow: 0 1px 1px rgba(22, 0, 65, .08);
}
.enviar {
  flex: none; width: 44px; height: 44px; border-radius: 50%; border: 0; cursor: pointer;
  background: var(--goall-purple-vibrant); color: var(--white); font-size: 18px;
  display: inline-flex; align-items: center; justify-content: center;
}
.enviar:disabled { background: var(--tinta-3); opacity: .5; cursor: not-allowed; }
/* imagem anexada, antes de enviar (28/09/2026) */
.anexo { display: flex; gap: var(--esp-3); align-items: center; background: var(--superficie); border-radius: var(--raio-1); padding: var(--esp-2) var(--esp-3); }
.anexo[hidden] { display: none; }
.anexo-img { flex: none; width: 72px; height: 72px; object-fit: cover; border-radius: 6px; background: var(--fundo); }
.anexo-info { flex: 1; min-width: 0; font-size: 13px; color: var(--tinta-2); overflow-wrap: anywhere; }
.chat-conteudo.soltar::after {
  content: 'Solte a imagem para anexar'; position: absolute; inset: 0; z-index: 8; display: flex; align-items: center; justify-content: center;
  background: rgba(22, 0, 65, .55); color: var(--white); font-weight: 600; font-size: 18px; pointer-events: none;
}

.toast {
  position: fixed; left: 50%; bottom: 90px; transform: translateX(-50%); z-index: 10;
  max-width: calc(100% - 32px); padding: 10px 16px; border-radius: var(--raio-2);
  background: var(--goall-purple-deep); color: var(--white); font-weight: 500;
}
.toast-erro { background: var(--goall-magenta); color: var(--goall-purple-deep); }

/* emojis */
.chat-conteudo { position: relative; }
.emoji-botao {
  flex: none; width: 44px; height: 44px; border-radius: 50%; border: 0; cursor: pointer; font-size: 22px; line-height: 1;
  background: var(--superficie); box-shadow: 0 1px 1px rgba(22, 0, 65, .08);
}
.emoji-botao[aria-expanded="true"] { background: var(--roxo-suave); }
.emoji-painel {
  position: absolute; left: var(--esp-4); bottom: 72px; z-index: 6; width: min(380px, calc(100% - 32px)); max-height: 340px; overflow: auto;
  background: var(--superficie); border-radius: var(--raio-2); box-shadow: 0 8px 24px rgba(22, 0, 65, .18);
  padding: var(--esp-3); display: flex; flex-direction: column; gap: var(--esp-2);
}
.emoji-grade { display: grid; grid-template-columns: repeat(8, 1fr); gap: 2px; }
.emoji { font-size: 22px; line-height: 1; padding: 6px 0; border: 0; background: none; border-radius: var(--raio-1); cursor: pointer; }
.emoji:hover, .emoji:focus-visible { background: var(--fundo); }

/* contatos (CRM, fase 1) */
.base-info { padding: 0 var(--esp-1); }
.mais { display: flex; margin: var(--esp-3) auto; }
.ficha { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.ficha-corpo { flex: 1; min-height: 0; overflow: auto; padding: var(--esp-5); display: flex; flex-direction: column; gap: var(--esp-4); }
.ficha-corpo > * { max-width: 760px; }
.ficha-dados { margin: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: var(--esp-2); }
.ficha-dados > div { background: var(--superficie); border: 1px solid var(--linha); border-radius: var(--raio-1); padding: var(--esp-2) var(--esp-3); min-width: 0; }
.ficha-dados dd { margin: 0; font-weight: 500; overflow-wrap: anywhere; }
.ficha-dados .indisponivel dd { color: var(--tinta-3); font-weight: 400; }
.aviso-caixa { background: var(--laranja-suave); box-shadow: inset 3px 0 0 var(--goall-orange); border-radius: 6px; padding: var(--esp-2) var(--esp-3); font-size: 14px; }
.ficha-acoes { display: flex; gap: var(--esp-2); flex-wrap: wrap; }

/* seleção de contatos para campanha */
.item-sel { display: flex; align-items: center; }
.item-sel .item { flex: 1; min-width: 0; padding-left: var(--esp-2); }
.item-sel.marcado { background: var(--roxo-suave); }
.marcar { flex: none; width: 18px; height: 18px; margin: 0 0 0 var(--esp-3); accent-color: var(--goall-purple-vibrant); cursor: pointer; }
.selecao { display: flex; align-items: center; gap: var(--esp-3); flex-wrap: wrap; padding: var(--esp-2) var(--esp-1) 0; border-top: 1px solid var(--linha); }
.selecao .btn-primario { margin-left: auto; }
.selecao-todos { display: flex; align-items: center; gap: var(--esp-2); cursor: pointer; }
.selecao-todos .marcar { margin-left: calc(var(--esp-3) - var(--esp-1)); }
.comunicacao { background: var(--superficie); border: 1px solid var(--linha); border-radius: var(--raio-1); padding: var(--esp-2) var(--esp-3); display: flex; flex-direction: column; gap: 6px; align-items: flex-start; }

/* campanhas */
.cabeca-pagina { display: flex; align-items: center; gap: var(--esp-3); flex-wrap: wrap; }
.cabeca-pagina .btn-primario { margin-left: auto; }
.como-funciona { border: 1px solid var(--linha); border-radius: var(--raio-1); padding: var(--esp-2) var(--esp-3); background: var(--superficie); }
.como-funciona summary { cursor: pointer; font-size: 14.5px; font-weight: 600; }
.como-funciona .sub { margin-top: var(--esp-2); }
.titulo-secao { font-size: 13px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--tinta-2); margin-top: var(--esp-2); }
.vazio-campanhas { align-items: flex-start; }
.proximo-passo { font-size: 14.5px; font-weight: 600; color: var(--goall-purple-vibrant); }
.rotulo-grupo { margin-bottom: calc(var(--esp-1) * -1); }

/* janela de nova campanha (17/09/2026) */
.janela-fundo { position: fixed; inset: 0; z-index: 40; background: rgba(22, 0, 65, .45); display: flex; align-items: center; justify-content: center; padding: var(--esp-4); }
.janela-fundo[hidden] { display: none; }
.janela {
  background: var(--superficie); border-radius: var(--raio-2); box-shadow: 0 16px 48px rgba(22, 0, 65, .28);
  width: 100%; max-width: 620px; max-height: min(86vh, 760px); display: flex; flex-direction: column;
}
.janela-cabeca { display: flex; align-items: center; justify-content: space-between; gap: var(--esp-3); padding: var(--esp-4) var(--esp-4) var(--esp-2); }
.janela-cabeca h2 { font-size: 19px; font-weight: 700; letter-spacing: -0.01em; }
.btn-fechar { border: 0; background: none; font-size: 18px; line-height: 1; color: var(--tinta-2); cursor: pointer; padding: 6px; border-radius: var(--raio-1); }
.btn-fechar:hover { background: var(--fundo); }
.janela-passos { display: flex; gap: var(--esp-2); list-style: none; margin: 0; padding: 0 var(--esp-4) var(--esp-3); flex-wrap: wrap; }
.passo { display: flex; align-items: center; gap: 6px; font-size: 13.5px; color: var(--tinta-2); }
.passo + .passo::before { content: ''; width: 14px; height: 1px; background: var(--linha); }
.passo-n { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; border-radius: 50%; background: var(--fundo); border: 1px solid var(--linha); font-size: 12.5px; font-weight: 700; }
.passo-atual { color: var(--tinta); font-weight: 600; }
.passo-atual .passo-n { background: var(--goall-purple-vibrant); border-color: var(--goall-purple-vibrant); color: var(--white); }
.passo-feito .passo-n { background: var(--roxo-suave); border-color: transparent; color: var(--goall-purple-vibrant); }
.janela-corpo { padding: 0 var(--esp-4) var(--esp-3); overflow: auto; display: flex; flex-direction: column; gap: var(--esp-3); flex: 1 1 auto; min-height: 0; }
.janela-pe { border-top: 1px solid var(--linha); padding: var(--esp-3) var(--esp-4); display: flex; align-items: center; gap: var(--esp-3); flex-wrap: wrap; }
.pe-aviso { flex: 1; min-width: 120px; }
.pe-botoes { display: flex; gap: var(--esp-2); margin-left: auto; flex-wrap: wrap; }
.segmentos { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: var(--esp-2); }
.segmento {
  display: flex; flex-direction: column; align-items: flex-start; gap: 2px; text-align: left; cursor: pointer;
  border: 1px solid var(--linha); border-radius: var(--raio-1); background: var(--superficie); padding: var(--esp-2) var(--esp-3); font: inherit; color: inherit;
}
.segmento:hover { border-color: var(--goall-purple-vibrant); }
.segmento-ativo { border-color: var(--goall-purple-vibrant); background: var(--roxo-suave); }
.segmento-nome { font-weight: 600; font-size: 14.5px; }
.segmento-n { font-size: 13px; color: var(--tinta-2); }
body.com-janela { overflow: hidden; }
.janela-passos[hidden] { display: none; }
.escolha-modelo { display: flex; align-items: center; justify-content: space-between; gap: var(--esp-2); flex-wrap: wrap; }
.modelo-marcado { border-color: var(--goall-purple-vibrant); background: var(--roxo-suave); }
.modelo .btn { align-self: flex-start; }

/* campanha encerrada: uma linha que abre no toque (17/09/2026) */
.campanha-linha { background: var(--superficie); border: 1px solid var(--linha); border-radius: var(--raio-2); }
.campanha-linha > summary { cursor: pointer; padding: var(--esp-2) var(--esp-4); display: flex; align-items: center; gap: var(--esp-2); flex-wrap: wrap; list-style: none; }
.campanha-linha > summary::-webkit-details-marker { display: none; }
.campanha-linha > summary::before { content: '▸'; color: var(--tinta-2); font-size: 12px; }
.campanha-linha[open] > summary::before { content: '▾'; }
.campanha-linha > summary:hover { background: var(--fundo); border-radius: var(--raio-2); }
.linha-nome { font-weight: 600; }
.linha-resumo { margin-left: auto; }
.campanha-linha .campanha { border: 0; border-top: 1px solid var(--linha); border-radius: 0; }
.variaveis { display: flex; flex-direction: column; gap: var(--esp-2); }
.variavel { display: grid; grid-template-columns: 110px 160px 1fr; gap: var(--esp-2); align-items: center; }
.variavel .rotulo { margin: 0; }
.reserva { display: flex; align-items: center; gap: var(--esp-2); min-width: 0; }
.reserva .sub { flex: none; }
.reserva input { flex: 1; min-width: 0; }
.previa-mensagem { display: flex; flex-direction: column; gap: 4px; }
.previa-mensagem .bolha { align-self: flex-start; max-width: min(560px, 100%); white-space: pre-wrap; overflow-wrap: anywhere; margin: 0; }
#cp-previa { display: flex; flex-direction: column; gap: var(--esp-3); }
.campanha-cabeca { display: flex; justify-content: space-between; gap: var(--esp-3); align-items: flex-start; }
.campanha .ficha-dados > div { background: var(--fundo); }
.lotes { margin: 0; padding-left: var(--esp-4); font-size: 13.5px; color: var(--tinta-2); }
.campanha-acoes { align-items: center; }
.conferir-linha { flex-basis: 100%; display: flex; align-items: center; gap: var(--esp-2); flex-wrap: wrap; }
.conferir { font-size: 13.5px; flex-wrap: wrap; }
.conferir input { accent-color: var(--goall-purple-vibrant); }
.lista-modelos { display: flex; flex-direction: column; gap: var(--esp-2); }
.modelo { border: 1px solid var(--linha); border-radius: var(--raio-1); padding: var(--esp-2) var(--esp-3); display: flex; flex-direction: column; gap: 6px; align-items: flex-start; }
.modelo-corpo { white-space: pre-wrap; font-size: 14px; color: var(--tinta-2); overflow-wrap: anywhere; }
.campo-largo { display: flex; flex-direction: column; }
.campo-tarefa { display: flex; flex-direction: column; gap: 4px; max-width: 360px; }
.campo-largo textarea { width: 100%; padding: 10px 12px; resize: vertical; }

/* atendentes */
.tela-usuarios { flex: 1; min-height: 0; overflow: auto; padding: var(--esp-5) var(--esp-4); }
.usuarios-conteudo { max-width: 880px; margin: 0 auto; display: flex; flex-direction: column; gap: var(--esp-4); }
.usuarios-conteudo h1 { font-size: 22px; font-weight: 700; letter-spacing: -0.01em; }
.cartao { background: var(--superficie); border: 1px solid var(--linha); border-radius: var(--raio-2); padding: var(--esp-4); display: flex; flex-direction: column; gap: var(--esp-3); }
.cartao h2 { font-size: 16px; font-weight: 600; }
.cartao .btn-primario { align-self: flex-start; }
.campos, .usuario-campos { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: var(--esp-3); }
.campos label, .usuario-campos label { display: flex; flex-direction: column; min-width: 0; }
.campos input, .usuario-campos input { width: 100%; }
select { font: inherit; color: inherit; padding: 9px 10px; border: 1px solid var(--linha); border-radius: var(--raio-1); background: var(--superficie); width: 100%; }
select:focus { outline: 2px solid var(--goall-purple-vibrant); outline-offset: 1px; }
.check { display: flex; align-items: center; gap: var(--esp-2); font-size: 14px; }
.lista-usuarios { display: flex; flex-direction: column; gap: var(--esp-3); }
.usuario { background: var(--superficie); border: 1px solid var(--linha); border-radius: var(--raio-2); padding: var(--esp-3) var(--esp-4); display: flex; flex-direction: column; gap: var(--esp-3); }
.usuario-cabeca { display: flex; gap: var(--esp-3); align-items: center; min-width: 0; }
.usuario-cabeca .avatar { --avatar: 40px; font-size: 14px; }
.usuario-id { display: flex; flex-direction: column; min-width: 0; }
.usuario-id strong { display: flex; gap: var(--esp-2); align-items: center; font-weight: 600; }
.usuario-id .sub { overflow-wrap: anywhere; }
.usuario-acoes { display: flex; justify-content: flex-end; gap: var(--esp-2); }

@media (max-width: 820px) {
  .topo { padding: var(--esp-2) var(--esp-4); flex-wrap: wrap; row-gap: var(--esp-1); }
  .topo-dir { width: 100%; justify-content: space-between; }
  .quem { display: none; }
  .app { display: block; position: relative; }
  .lista, .chat { position: absolute; inset: 0; }
  .lista { border-right: 0; }
  .chat { display: none; }
  /* cada tela troca lista por detalhe com a própria classe: com-conversa não pode esconder a lista de contatos */
  body.com-conversa #tela-app .lista, body.com-ficha #tela-contatos .lista { display: none; }
  body.com-conversa #tela-app .chat, body.com-ficha #tela-contatos .chat { display: flex; }
  .nav-item { padding: 5px 10px; }
  .ficha-corpo { padding: var(--esp-4); }
  .ficha-dados { grid-template-columns: 1fr 1fr; }
  /* no celular os filtros de contato rolam de lado numa linha só, como no WhatsApp */
  #ct-filtros { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin: 0 calc(-1 * var(--esp-3)); padding: 0 var(--esp-3); }
  #ct-filtros::-webkit-scrollbar { display: none; }
  #ct-filtros .filtro { flex: none; }
  .variavel { grid-template-columns: 1fr 1fr; }
  .variavel .rotulo { grid-column: 1 / -1; }
  /* no celular a janela ocupa a tela inteira, como uma página */
  .janela-fundo { padding: 0; align-items: stretch; }
  .janela { max-width: none; max-height: none; border-radius: 0; height: 100%; }
  .cabeca-pagina .btn-primario { margin-left: 0; width: 100%; justify-content: center; }
  .pe-botoes { width: 100%; margin-left: 0; }
  .pe-botoes .btn { flex: 1; justify-content: center; }
  .variavel input, .variavel .reserva { grid-column: 1 / -1; }
  .campanha .ficha-dados, .nova-campanha .ficha-dados { grid-template-columns: 1fr 1fr; }
  .voltar { display: inline-block; }
  .chat-topo { padding: var(--esp-2); gap: var(--esp-2); flex-wrap: wrap; }
  /* os botões descem para uma linha própria: com «Passar ao …» eles espremiam o nome numa palavra por linha (04/11/2026) */
  .chat-acoes { flex-basis: 100%; justify-content: flex-end; }
  .chat-acoes .btn-discreto { display: none; }
  .mensagens { padding: var(--esp-3) var(--esp-3); }
  .bolha { max-width: 86%; }
  .rodape-chat { padding: var(--esp-2); }
}