/* ==========================================================================
   Atendimento (/atendimento e /atendimento/membros). Só tokens de tokens.css; cores de etapa por chave
   (neutro, azul, ciano, violeta, ambar, verde, vermelho, cinza) mapeadas para tokens existentes, sempre
   acompanhadas do nome (a cor nunca é o único sinal — VIS-09).
   ========================================================================== */

/* ---------- Cores por chave (etapas, grupos, filtros) ---------- */
.atd-cor-neutro { --atd-cor: var(--texto-2); }
.atd-cor-azul { --atd-cor: var(--info); }
.atd-cor-ciano { --atd-cor: color-mix(in oklab, var(--info) 50%, var(--ok)); }
.atd-cor-violeta { --atd-cor: color-mix(in oklab, var(--info) 58%, var(--erro)); }
.atd-cor-ambar { --atd-cor: var(--aviso); }
.atd-cor-verde { --atd-cor: var(--ok); }
.atd-cor-vermelho { --atd-cor: var(--erro); }
.atd-cor-cinza { --atd-cor: var(--texto-3); }

.atd-ponto { display: inline-block; flex: none; width: 9px; height: 9px; border-radius: 50%; background: var(--atd-cor, var(--texto-3)); box-shadow: 0 0 0 2px color-mix(in oklab, var(--atd-cor, var(--texto-3)) 22%, transparent); }

/* Tons de estado: texto + ícone, cor só complementa. */
.atd-tom-erro { color: var(--erro); }
.atd-tom-aviso { color: var(--aviso); }
.atd-tom-info { color: var(--info); }
.atd-tom-ok { color: var(--ok); }
.atd-tom-neutro { color: var(--texto-2); }
.selo.atd-tom-erro { background: var(--erro-fundo); }
.selo.atd-tom-aviso { background: var(--aviso-fundo); }
.selo.atd-tom-info { background: var(--info-fundo); }
.selo.atd-tom-ok { background: var(--ok-fundo); }
.selo.atd-tom-neutro { background: var(--ativo); }

/* ---------- Barra superior desta tela: sem a trilha e mais baixa, para dar altura à lista e à conversa ----------
   A classe atd-app é posta na .app ao montar a tela e retirada na limpeza (index.js); a casca não é editada. */
/* A .app fica com a altura da janela e o conteúdo ocupa o que sobra abaixo da barra, seja qual for a altura dela. */
.app.atd-app { height: 100dvh; }
.app.atd-app .principal { min-height: 0; }
.app.atd-app .topo { padding-top: 8px; }
.app.atd-app .topo > .vidro-1 { min-height: 46px; gap: var(--e-2); padding: 5px 6px 5px 10px; }
.app.atd-app .botao-gaveta { width: 32px; min-height: 32px; }
.app.atd-app .botao-logo { padding: 2px 10px 2px 2px; }
.app.atd-app .botao-logo img { width: 30px; height: 30px; border-radius: 9px; }
.app.atd-app .trilha { display: none; }
.app.atd-app .topo-acoes { margin-left: auto; gap: 4px; }
.app.atd-app .selo-ensaio { min-height: 22px; padding: 0 8px; font-size: var(--t-2xs); }
.app.atd-app .botao-busca { min-width: 176px; min-height: 32px; gap: 8px; padding: 0 5px 0 12px; font-size: var(--t-sm); }
.app.atd-app .botao-busca svg { width: 15px; height: 15px; }
.app.atd-app .botao-busca kbd { height: 20px; min-width: 20px; padding: 0 5px; }
.app.atd-app .topo-acoes .botao.icone { width: 32px; min-height: 32px; }
.app.atd-app .topo-acoes .botao.icone svg { width: 16px; height: 16px; }
.app.atd-app .botao-usuario { gap: 8px; padding: 2px 8px 2px 2px; }
.app.atd-app .botao-usuario .avatar { width: 28px; height: 28px; font-size: var(--t-2xs); }
.app.atd-app .botao-usuario b { font-size: var(--t-xs); }
.app.atd-app .botao-usuario small { font-size: var(--t-2xs); }

/* ---------- Tela: altura da janela, rolagens próprias (VIS-04); sem cabeçalho de página (o h1 é só para leitor) ---------- */
.conteudo.atd-alvo {
  display: flex;
  flex-direction: column;
  gap: var(--e-2);
  flex: 1 1 0; /* ocupa a altura que sobra na .app (100dvh, acima); as rolagens são internas */
  min-height: 520px;
  padding: var(--e-2) var(--e-4) var(--e-3);
}
.atd-tempo-real, .atd-topo-nao-lidas {
  display: inline-flex; align-items: center; gap: 5px; min-height: 24px; padding: 0 8px; flex: none;
  border-radius: var(--r-pill); background: var(--ativo); font-size: var(--t-xs); font-weight: 600; white-space: nowrap;
}
.atd-tempo-real:empty { display: none; }
.atd-tempo-real svg, .atd-topo-nao-lidas svg { width: 14px; height: 14px; }
.atd-tempo-real.atd-tom-ok { background: var(--ok-fundo); }
.atd-tempo-real.atd-tom-aviso { background: var(--aviso-fundo); }
.atd-topo-nao-lidas { color: var(--texto-2); font-variant-numeric: tabular-nums; }
/* No cabeçalho estreito da coluna a tela mostra "N não lidas"; o leitor de tela ouve "N mensagens não lidas". */
.atd-nl-longo { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.atd-faixa { align-items: center; }
.atd-faixa .botao { margin-left: auto; flex: none; }
.atd-conteudo { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.atd-conteudo > .vidro.cartao { margin: auto 0; }
.atd-carregando-tela { display: grid; gap: var(--e-3); }

.atd {
  position: relative;
  flex: 1;
  min-height: 0;
  display: grid;
  grid-template-columns: minmax(316px, 384px) minmax(0, 1fr);
  grid-template-rows: minmax(0, 1fr);
  gap: var(--e-3);
}
.atd.com-detalhes { grid-template-columns: minmax(280px, 340px) minmax(0, 1fr) minmax(340px, 380px); }
.atd > * { min-height: 0; min-width: 0; }

/* ---------- Coluna da lista: filtros no alto (três desenhos — filtros.js) e a lista embaixo ---------- */
.atd-coluna-lista { display: flex; flex-direction: column; overflow: hidden; border-radius: var(--r-xl); }
.atd-filtros {
  container: atd-menu / inline-size;
  flex: none;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 8px;
  max-height: 64%;
  overflow-y: auto;
  padding: 10px 10px 0;
}
.atd-filtros .botao svg { width: 16px; height: 16px; }

/* Cabeçalho compacto: ao vivo, não lidas, quem atende e a versão do menu. */
.atd-filtros-cabeca { display: flex; align-items: center; gap: 4px; min-width: 0; min-height: 28px; }
.atd-indicadores { display: flex; align-items: center; gap: 4px; min-width: 0; }
.atd-membros { flex: none; }
.atd-versoes { flex: none; align-items: center; gap: 1px; padding: 2px; }
.atd-versoes-rotulo { padding: 0 4px 0 6px; color: var(--texto-3); font-size: var(--t-2xs); font-weight: 650; }
.atd-versoes button { min-width: 24px; min-height: 22px; padding: 0 7px; justify-content: center; font-size: var(--t-xs); font-variant-numeric: tabular-nums; }

/* Busca: o campo filtra a lista; o "Ctrl O" dentro dele abre a busca em todas as conversas. */
.atd-filtros-busca { display: flex; align-items: center; gap: 6px; min-width: 0; }
.atd-busca-caixa {
  flex: 1; min-width: 0; display: flex; align-items: center; gap: 6px; height: 34px; padding: 0 4px 0 11px;
  border: 1px solid var(--campo-borda); border-radius: var(--r-pill); background: var(--campo);
  transition: border-color var(--mov-rapido), background-color var(--mov-rapido), box-shadow var(--mov-rapido);
}
.atd-busca-caixa:focus-within { border-color: var(--destaque-tinta); background: var(--campo-foco); box-shadow: var(--foco); }
.atd-busca-icone { flex: none; width: 15px; height: 15px; color: var(--texto-3); }
.atd-busca { flex: 1; min-width: 0; height: 100%; padding: 0; border: 0; background: transparent; color: var(--texto); font-size: var(--t-sm); text-overflow: ellipsis; }
.atd-busca:focus, .atd-busca:focus-visible { outline: none; box-shadow: none; }
.atd-busca-atalho { flex: none; display: inline-flex; padding: 0; border: 0; border-radius: var(--r-xs); background: transparent; cursor: pointer; }
.atd-busca-atalho kbd { height: 22px; padding: 0 6px; border-bottom-width: 1px; font-size: var(--t-2xs); white-space: nowrap; }
.atd-busca-atalho:hover kbd { border-color: var(--destaque-tinta); color: var(--texto); }
.atd-botao-filtros, .atd-botao-acoes, .atd-filtros-busca .atd-agrupar { position: relative; flex: none; }
.atd-botao-filtros.ativo { color: var(--destaque-tinta); border-color: color-mix(in oklab, var(--destaque-tinta) 40%, transparent); }
.atd-selo-filtros {
  position: absolute; top: -5px; right: -5px; display: inline-grid; place-items: center; min-width: 17px; height: 17px; padding: 0 4px;
  border-radius: var(--r-pill); background: var(--destaque); color: var(--destaque-texto); font-size: var(--t-2xs); font-weight: 700; line-height: 1; font-variant-numeric: tabular-nums;
}

/* Abas (padrão de ui/pagina.js), em três estilos: sublinhadas (funis, 1), segmentado com ícones (estados, 2; setores, 3). */
.atd-abas-caixa { min-width: 0; overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: thin; }
.atd-filtros .atd-abas { width: max-content; max-width: none; gap: 0; padding: 0; border: 0; border-radius: 0; background: transparent; overflow: visible; }
.atd-filtros .atd-abas [role="tab"] { gap: 6px; font-size: var(--t-sm); }
.atd-filtros .atd-abas [role="tab"] svg { width: 15px; height: 15px; flex: none; }
.atd-filtros .atd-abas [role="tab"]:focus-visible { box-shadow: var(--foco); }
.atd-filtros .atd-abas .contagem { padding: 1px 6px; border-radius: var(--r-pill); background: var(--ativo); color: var(--texto-2); font-size: var(--t-2xs); font-weight: 650; font-variant-numeric: tabular-nums; }
.atd-filtros .atd-abas .contagem.atd-tom-erro { background: var(--erro-fundo); color: var(--erro); }
.atd-filtros .atd-abas .contagem.atd-tom-aviso { background: var(--aviso-fundo); color: var(--aviso); }
.atd-filtros .atd-abas .contagem.atd-tom-info { background: var(--info-fundo); color: var(--info); }
.atd-filtros .atd-abas .contagem.atd-tom-ok { background: var(--ok-fundo); color: var(--ok); }
.atd-abas-funis { border-bottom: 1px solid var(--linha); }
.atd-abas-funis .atd-abas [role="tab"] { position: relative; min-height: 32px; padding: 0 10px; border-radius: var(--r-sm) var(--r-sm) 0 0; }
.atd-abas-funis .atd-abas [role="tab"]::after { content: ""; position: absolute; left: 8px; right: 8px; bottom: 0; height: 2px; border-radius: 2px; background: transparent; }
.atd-abas-funis .atd-abas [role="tab"][aria-selected="true"] { background: transparent; box-shadow: none; color: var(--texto); font-weight: 650; }
.atd-abas-funis .atd-abas [role="tab"][aria-selected="true"]::after { background: var(--destaque-tinta); }
.atd-abas-funis .atd-abas [role="tab"]:focus-visible { box-shadow: var(--foco); }
.atd-abas-funis .atd-abas .contagem { padding: 0; background: transparent; color: var(--texto-3); font-size: var(--t-xs); }
:is(.atd-abas-estados, .atd-abas-setores) .atd-abas { display: flex; width: 100%; gap: 2px; padding: 3px; border: 1px solid var(--linha); border-radius: var(--r-pill); background: var(--hover); }
:is(.atd-abas-estados, .atd-abas-setores) .atd-abas [role="tab"] { flex: 1 0 auto; justify-content: center; gap: 4px; min-height: 28px; padding: 0 5px; border-radius: var(--r-pill); font-size: var(--t-xs); }
.atd-abas-estados .atd-abas .contagem { padding: 1px 5px; }
.atd-abas-setores .atd-abas { border-radius: var(--r-md); }
.atd-abas-setores .atd-abas [role="tab"] { min-width: 28px; padding: 0 5px; border-radius: var(--r-sm); }
/* Ícone sozinho: nos setores, sempre; nos estados, menos no escolhido. O nome continua no nome acessível e na dica. */
.atd-abas-setores .atd-aba-rotulo,
.atd-abas-estados [role="tab"]:not([aria-selected="true"]) .atd-aba-rotulo { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* Etapas do funil: grade de 2 colunas com ponto colorido e contagem ("Resultados" agrupa pausa, ganho e perda num menu). */
.atd-grade-etapas { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2px 6px; }
.atd-grade-vazia { grid-column: 1 / -1; margin: 0; font-size: var(--t-xs); }
.atd-etapa-filtro {
  display: flex; align-items: center; gap: 7px; min-width: 0; min-height: 28px; padding: 3px 8px;
  border: 1px solid transparent; border-radius: var(--r-sm); background: transparent;
  color: var(--texto); font-size: var(--t-sm); font-weight: 520; text-align: left; cursor: pointer;
  transition: background-color var(--mov-rapido), border-color var(--mov-rapido);
}
.atd-etapa-filtro:hover { background: var(--hover); }
.atd-etapa-filtro[aria-pressed="true"], .atd-etapa-resultados.escolhida { background: color-mix(in oklab, var(--atd-cor) 15%, transparent); font-weight: 660; }
.atd-etapa-todas .atd-ponto { display: none; }
.atd-etapa-todas[aria-pressed="true"] { background: var(--destaque-suave); color: var(--texto); }
/* Nome inteiro em até 2 linhas (corte com reticências só na 3ª); nome completo continua no title e no nome acessível. A
   contagem tem lugar fixo (até 3 algarismos, existe vazia antes de chegar), então mudar o número não muda a quebra. */
.atd-etapa-nome {
  flex: 1; min-width: 0; overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2;
  line-height: 1.2; overflow-wrap: anywhere;
}
.atd-etapa-n { flex: none; min-width: 3ch; text-align: end; color: var(--texto-2); font-size: var(--t-xs); font-weight: 620; font-variant-numeric: tabular-nums; }
.atd-etapa-seta { flex: none; width: 13px; height: 13px; margin-left: -2px; color: var(--texto-3); }
.atd-etapa-resultados.escolhida .atd-etapa-nome { font-style: italic; padding-inline-end: .25em; }

/* Pílulas Minhas / Sem responsável (versão 1). */
.atd-pilulas { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
.atd-pilula {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-width: 0; min-height: 30px; padding: 0 12px;
  border: 1px solid var(--linha); border-radius: var(--r-pill); background: var(--vidro-2); color: var(--texto); font-size: var(--t-sm); font-weight: 560; cursor: pointer;
  transition: background-color var(--mov-rapido), border-color var(--mov-rapido);
}
.atd-pilula:hover { background: var(--vidro-3); border-color: var(--linha-forte); }
.atd-pilula[aria-pressed="true"] { background: var(--destaque); border-color: transparent; color: var(--destaque-texto); }
.atd-pilula-n { color: var(--texto-3); font-size: var(--t-xs); font-weight: 650; font-variant-numeric: tabular-nums; }
.atd-pilula[aria-pressed="true"] .atd-pilula-n { color: var(--destaque-texto); }

/* Filtros suspensos: em linha de texto (versão 1) ou em pílulas pequenas com ícone (versão 3). */
.atd-linha-campos { display: flex; flex-wrap: wrap; align-items: center; gap: 2px; margin: 0 -4px; padding-top: 6px; border-top: 1px solid var(--linha); }
.atd-pilulas-campos { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; }
.atd-campo-menu {
  display: inline-flex; align-items: center; gap: 4px; min-width: 0; max-width: 100%; min-height: 28px; padding: 0 7px;
  border: 1px solid transparent; border-radius: var(--r-sm); background: transparent; color: var(--texto-2); font-size: var(--t-sm); font-weight: 560; cursor: pointer;
  transition: background-color var(--mov-rapido), color var(--mov-rapido);
}
.atd-campo-menu:hover, .atd-campo-menu[aria-expanded="true"] { background: var(--hover); color: var(--texto); }
.atd-campo-menu.ativo { background: var(--destaque-suave); color: var(--destaque-tinta); }
.atd-campo-texto { min-width: 0; max-width: 150px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.atd-campo-seta { flex: none; width: 13px; height: 13px; color: var(--texto-3); }
.atd-campo-icone { flex: none; width: 14px; height: 14px; color: var(--texto-3); }
.atd-campo-pilula { min-height: 26px; padding: 0 8px; border-color: var(--linha); border-radius: var(--r-pill); background: var(--vidro-2); font-size: var(--t-xs); }
.atd-campo-pilula .atd-campo-texto { max-width: 96px; }
.atd-campo-pilula.ativo { border-color: color-mix(in oklab, var(--destaque-tinta) 35%, transparent); }
.atd-campo-menu.ativo .atd-campo-icone, .atd-campo-menu.ativo .atd-campo-seta { color: currentColor; }

/* Seletores nativos (versão 2): no alto com ícone e em grade com rótulo pequeno em cima. */
.atd-filtros .atd-select { width: 100%; min-width: 0; height: 34px; min-height: 34px; padding-top: 0; padding-bottom: 0; font-size: var(--t-sm); }
.atd-seletores-topo, .atd-grade-campos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
.atd-seletor, .atd-campo-rotulado { position: relative; display: grid; min-width: 0; }
.atd-seletor-icone { position: absolute; top: 50%; left: 11px; width: 15px; height: 15px; margin-top: -7.5px; color: var(--texto-3); pointer-events: none; }
.atd-seletor .atd-select { padding-left: 33px; }
.atd-campo-rotulado > span { position: absolute; top: 6px; left: 13px; color: var(--texto-3); font-size: var(--t-2xs); font-weight: 650; letter-spacing: .08em; text-transform: uppercase; pointer-events: none; }
.atd-filtros .atd-campo-rotulado .atd-select { height: 42px; min-height: 42px; padding-top: 15px; font-weight: 600; }
:is(.atd-seletor, .atd-campo-rotulado).ativo .atd-select { border-color: color-mix(in oklab, var(--destaque-tinta) 45%, transparent); background-color: var(--destaque-suave); }

/* Rodapé dos filtros: total do recorte (e carregadas), agrupamento e "Limpar filtros". */
.atd-filtros-rodape {
  display: flex; align-items: center; gap: 4px 8px; min-height: 32px; margin: 0 -10px; padding: 2px 12px 4px;
  border-bottom: 1px solid var(--linha); color: var(--texto-2); font-size: var(--t-xs);
}
.atd-rodape-total { font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }
.atd-rodape-agrupado { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--texto-3); }
.atd-rodape-agrupado::before { content: "·"; margin-right: 6px; }
.atd-rodape-botao {
  display: inline-flex; align-items: center; gap: 5px; min-width: 0; min-height: 26px; padding: 0 6px;
  border: 0; border-radius: var(--r-xs); background: transparent; color: var(--texto-2); font-size: var(--t-xs); font-weight: 560; cursor: pointer;
}
.atd-rodape-botao:hover, .atd-rodape-botao[aria-expanded="true"] { background: var(--hover); color: var(--texto); }
.atd-rodape-botao svg { flex: none; width: 14px; height: 14px; color: var(--texto-3); }
.atd-rodape-botao span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.atd-rodape-limpar { flex: none; padding: 2px 4px; border: 0; border-radius: var(--r-xs); background: transparent; color: var(--destaque-tinta); font-size: var(--t-xs); font-weight: 650; cursor: pointer; text-decoration: underline; text-underline-offset: 2px; }
.atd-rodape-limpar:hover { background: var(--hover); }

/* Versão 2 — blocos: etapas em caixas, "Todas" e o último item sozinho em largura total, contagem em destaque. */
.atd-filtros[data-versao="2"] .atd-grade-etapas { gap: 5px; }
.atd-filtros[data-versao="2"] .atd-etapa-filtro { min-height: 32px; padding: 3px 10px; border-color: var(--linha); border-radius: var(--r-md); background: var(--vidro-2); }
.atd-filtros[data-versao="2"] .atd-etapa-filtro:hover { background: var(--vidro-3); border-color: var(--linha-forte); }
.atd-filtros[data-versao="2"] .atd-etapa-filtro[aria-pressed="true"], .atd-filtros[data-versao="2"] .atd-etapa-resultados.escolhida { border-color: var(--atd-cor); background: color-mix(in oklab, var(--atd-cor) 14%, var(--vidro-2)); }
.atd-filtros[data-versao="2"] .atd-etapa-todas { grid-column: 1 / -1; }
.atd-filtros[data-versao="2"] .atd-etapa-todas .atd-ponto { display: inline-block; }
.atd-filtros[data-versao="2"] .atd-etapa-todas[aria-pressed="true"] { border-color: color-mix(in oklab, var(--destaque-tinta) 45%, transparent); background: var(--destaque-suave); }
.atd-filtros[data-versao="2"] .atd-etapa-sem:nth-child(even) { grid-column: 1 / -1; }
.atd-filtros[data-versao="2"] .atd-etapa-n { color: var(--texto); font-size: var(--t-sm); font-weight: 700; }

/* Versão 3 — compacta: "Todas" em pílula de largura total e etapas em 2 colunas sem caixa. */
.atd-filtros[data-versao="3"] { gap: 6px; }
.atd-filtros[data-versao="3"] .atd-grade-etapas { gap: 0 8px; }
.atd-filtros[data-versao="3"] .atd-etapa-filtro { min-height: 23px; padding: 2px 6px; font-size: var(--t-xs); }
.atd-filtros[data-versao="3"] .atd-abas-setores .atd-abas [role="tab"] { min-height: 26px; }
.atd-filtros[data-versao="3"] .atd-filtros-rodape { min-height: 28px; }
.atd-filtros[data-versao="3"] .atd-etapa-todas { grid-column: 1 / -1; min-height: 28px; margin-bottom: 3px; padding: 2px 10px; border-color: var(--linha); border-radius: var(--r-pill); background: var(--vidro-2); font-size: var(--t-sm); }
.atd-filtros[data-versao="3"] .atd-etapa-todas .atd-ponto { display: inline-block; }
.atd-filtros[data-versao="3"] .atd-etapa-todas[aria-pressed="true"] { border-color: color-mix(in oklab, var(--destaque-tinta) 35%, transparent); background: var(--destaque-suave); }
.atd-filtros[data-versao="3"] .atd-filtros-cabeca { min-height: 24px; }

/* Coluna estreita (janela intermediária ou detalhes abertos): o cabeçalho encolhe antes de quebrar. */
@container atd-menu (width < 350px) {
  .atd-filtros .atd-versoes-rotulo { display: none; }
}
@container atd-menu (width < 320px) {
  .atd-filtros .atd-nl-curto { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .atd-filtros .atd-campo-pilula .atd-campo-texto { max-width: 70px; }
}

.atd-lista { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.atd-lista-corpo { flex: 1; min-height: 0; overflow: auto; padding: 4px 6px 10px; overscroll-behavior: contain; scroll-padding-top: var(--atd-rolagem-topo, 42px); }
.atd-lista-carregando { display: grid; gap: 8px; padding: 8px; }
.atd-esqueleto-linha { height: 64px; }
.atd-lista-corpo .estado { padding: var(--e-7) var(--e-4); }
.atd-lista-corpo .estado h2 { font-size: var(--t-lg); }

/* Grupos: o cabeçalho gruda só dentro do próprio grupo, sem empilhar (GRP-06). */
.atd-grupo + .atd-grupo { margin-top: 2px; }
.atd-grupo-titulo { position: sticky; top: 0; z-index: 2; margin: 0; padding-top: 2px; background: var(--vidro-solido); border-radius: var(--r-sm); box-shadow: 0 1px 0 var(--linha); }
.atd-grupo-cabeca {
  display: flex; flex-wrap: wrap; align-items: center; gap: 2px 7px; width: 100%; min-height: 34px; padding: 6px 10px;
  border: 0; border-radius: var(--r-sm); background: transparent; color: var(--texto-2);
  font-size: var(--t-xs); font-weight: 680; letter-spacing: .02em; text-align: left; cursor: pointer;
}
.atd-grupo-cabeca:hover { background: var(--hover); }
.atd-grupo-seta { width: 15px; height: 15px; flex: none; color: var(--texto-3); }
.atd-grupo-icone { width: 15px; height: 15px; flex: none; }
.atd-grupo-nome { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--texto); }
.atd-grupo-n { margin-left: auto; flex: none; color: var(--texto-3); font-weight: 520; font-variant-numeric: tabular-nums; }
.atd-grupo-terminal .atd-grupo-nome { font-style: italic; padding-inline-end: .25em; }
.atd-grupo-fora .atd-grupo-nome { color: var(--info); }
.atd-fora-aviso { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 8px; margin: 2px 6px 6px; padding: 8px 10px; border-radius: var(--r-md); background: var(--info-fundo); font-size: var(--t-xs); color: var(--texto); }
.atd-fora-aviso svg { width: 15px; height: 15px; color: var(--info); flex: none; }
.atd-fora-aviso span { flex: 1; min-width: 150px; }

.atd-linhas { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.atd-linha { position: relative; }
.atd-linha-abrir {
  display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 10px; align-items: start; width: 100%;
  padding: 9px 10px; border: 0; border-radius: var(--r-md); background: transparent; color: var(--texto);
  text-align: left; cursor: pointer; transition: background-color var(--mov-rapido);
}
.atd-linha-abrir:hover { background: var(--hover); }
.atd-linha.aberta .atd-linha-abrir { background: var(--destaque-suave); box-shadow: inset 3px 0 0 var(--destaque-tinta); }
.atd-linha-avatar { margin-top: 2px; }
.atd-linha-texto { display: grid; gap: 3px; min-width: 0; }
.atd-linha-topo { display: flex; align-items: center; gap: 6px; min-width: 0; }
.atd-linha-nome { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: var(--t-md); font-weight: 560; }
.atd-linha.nao-lida .atd-linha-nome { font-weight: 720; }
.atd-icone-fixada { width: 14px; height: 14px; flex: none; color: var(--info); }
.atd-linha-hora { flex: none; font-size: var(--t-2xs); color: var(--texto-3); font-variant-numeric: tabular-nums; }
.atd-nao-lidas {
  flex: none; display: inline-grid; place-items: center; min-width: 20px; height: 20px; padding: 0 6px; border-radius: var(--r-pill);
  background: var(--destaque); color: var(--destaque-texto); font-size: var(--t-2xs); font-weight: 700; font-variant-numeric: tabular-nums;
}
.atd-linha-previa { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: var(--t-sm); color: var(--texto-2); }
.atd-linha.nao-lida .atd-linha-previa { color: var(--texto); }
.atd-linha-previa.vazia { color: var(--texto-3); font-style: italic; padding-inline-end: .25em; }
.atd-previa-prefixo { color: var(--texto-3); }
.atd-previa-falha, .atd-previa-incerta { display: inline-flex; align-items: center; gap: 3px; font-weight: 600; }
.atd-previa-falha { color: var(--erro); }
.atd-previa-incerta { color: var(--aviso); }
.atd-previa-falha svg, .atd-previa-incerta svg { width: 12px; height: 12px; }
.atd-linha-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 5px; padding-right: 34px; min-width: 0; }
.atd-linha-meta .selo { min-height: 20px; padding: 0 7px; font-size: var(--t-2xs); }
.atd-linha-meta .selo svg { width: 11px; height: 11px; }
.atd-linha-resp { display: inline-flex; align-items: center; gap: 3px; max-width: 130px; font-size: var(--t-2xs); color: var(--texto-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.atd-linha-resp svg { width: 11px; height: 11px; flex: none; }
.atd-linha-resp.sem { font-style: italic; padding-inline-end: .25em; }
.atd-linha-menu { position: absolute; right: 6px; bottom: 6px; opacity: 0; transition: opacity var(--mov-rapido); }
.atd-linha:hover .atd-linha-menu, .atd-linha:focus-within .atd-linha-menu, .atd-linha-menu[aria-expanded="true"] { opacity: 1; }
@media (hover: none) { .atd-linha-menu { opacity: 1; } }
.atd-mais { display: grid; justify-items: center; gap: 4px; padding: var(--e-3) 0 var(--e-2); }
.atd-mais p { margin: 0; font-size: var(--t-2xs); }

/* ---------- Chip de etapa (FUN-02) ---------- */
.atd-chip-etapa {
  --atd-cor: var(--texto-3);
  display: inline-flex; align-items: center; gap: 6px; max-width: 100%; min-height: 22px; padding: 0 9px;
  border: 1px solid color-mix(in oklab, var(--atd-cor) 38%, transparent); border-radius: var(--r-pill);
  background: color-mix(in oklab, var(--atd-cor) 12%, transparent);
  color: var(--texto); font-size: var(--t-2xs); font-weight: 620; line-height: 1; white-space: nowrap;
}
.atd-chip-etapa.atd-cor-neutro { --atd-cor: var(--texto-2); }
.atd-chip-etapa.atd-cor-azul { --atd-cor: var(--info); }
.atd-chip-etapa.atd-cor-ciano { --atd-cor: color-mix(in oklab, var(--info) 50%, var(--ok)); }
.atd-chip-etapa.atd-cor-violeta { --atd-cor: color-mix(in oklab, var(--info) 58%, var(--erro)); }
.atd-chip-etapa.atd-cor-ambar { --atd-cor: var(--aviso); }
.atd-chip-etapa.atd-cor-verde { --atd-cor: var(--ok); }
.atd-chip-etapa.atd-cor-vermelho { --atd-cor: var(--erro); }
.atd-chip-etapa.atd-cor-cinza { --atd-cor: var(--texto-3); }
.atd-chip-etapa .atd-ponto { width: 8px; height: 8px; box-shadow: none; }
.atd-chip-nome { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.atd-chip-etapa.sem { border-style: dashed; color: var(--texto-3); }
button.atd-chip-etapa { cursor: pointer; transition: background-color var(--mov-rapido); }
button.atd-chip-etapa:hover:not(:disabled) { background: color-mix(in oklab, var(--atd-cor) 22%, transparent); }
button.atd-chip-etapa:disabled { cursor: default; opacity: .75; }
.atd-chip-grande { min-height: 30px; padding: 0 10px 0 12px; font-size: var(--t-sm); }
.atd-chip-seta { width: 14px; height: 14px; flex: none; color: var(--texto-3); }
.atd-chip-mini { max-width: 100%; }
[aria-busy="true"].atd-chip-etapa, [aria-busy="true"].atd-responsavel { opacity: .6; cursor: progress; }

/* Itens de menu com cor, ícone de estado, contagem e seções */
.menu-suspenso [role^="menuitem"] > span:has(> .atd-ponto),
.menu-suspenso [role^="menuitem"] > span:has(> .atd-menu-icone) { display: flex; align-items: center; gap: 9px; flex: 1; min-width: 0; }
.menu-suspenso .atd-menu-rotulo { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.menu-suspenso .atd-menu-extra { color: var(--texto-3); font-size: var(--t-2xs); margin-left: 6px; }
.menu-suspenso .atd-menu-secao { font-size: var(--t-2xs); font-weight: 680; letter-spacing: .08em; text-transform: uppercase; color: var(--texto-3); }
.menu-suspenso [aria-disabled="true"]:has(.atd-menu-secao) { opacity: 1; cursor: default; min-height: 28px; }
.menu-suspenso [aria-disabled="true"]:has(.atd-menu-secao) svg { display: none; }
.menu-suspenso [role^="menuitem"] .atd-menu-icone { width: 15px; height: 15px; }
.menu-suspenso [role^="menuitem"] .atd-menu-icone.atd-tom-erro { color: var(--erro); }
.menu-suspenso [role^="menuitem"] .atd-menu-icone.atd-tom-aviso { color: var(--aviso); }
.menu-suspenso [role^="menuitem"] .atd-menu-icone.atd-tom-info { color: var(--info); }
.menu-suspenso [role^="menuitem"] .atd-menu-icone.atd-tom-ok { color: var(--ok); }
.menu-suspenso [role^="menuitem"] .atd-menu-icone.atd-tom-neutro { color: var(--texto-2); }
.menu-suspenso [role^="menuitem"]:has(.atd-menu-rotulo) .atalho { padding-left: 10px; font-variant-numeric: tabular-nums; }

/* Menu de etapa: itens mais compactos para caber inteiro na janela; se não couber, rola com folga no fim. */
.menu-suspenso[aria-label="Mudar etapa do funil"] { max-height: min(calc(100dvh - 16px), 620px); padding-bottom: 8px; scroll-padding-bottom: 8px; }
.menu-suspenso[aria-label="Mudar etapa do funil"] [role^="menuitem"] { min-height: 32px; }
.menu-suspenso[aria-label="Mudar etapa do funil"] [aria-disabled="true"]:has(.atd-menu-secao) { min-height: 26px; }
.menu-suspenso[aria-label="Mudar etapa do funil"] .menu-cabeca { padding: 8px 10px 6px; }

/* ---------- Conversa: base comum aos três layouts (conversa.js, compositor.js, layouts.js) ----------
   Os mesmos nós em todos os layouts: cada um só muda encaixes e aparência (data-layout no painel). O painel é contêiner
   de consulta (largura própria, inclusive com os detalhes abertos) e por isso bloco de contenção: nada dentro dele usa
   position: fixed — menus, diálogos e painéis da IA vão para o <body>.
   Ordem: base → Layout 1 → Layout 2 → Layout 3 → contêiner/mídia (no fim do arquivo). */
.atd-conversa { container: atd-conversa / inline-size; display: flex; flex-direction: column; overflow: hidden; border-radius: var(--r-xl); }
.atd-conversa-vazia { flex: 1; display: grid; place-items: center; padding: var(--e-6); }
.atd-conversa-corpo { flex: 1; min-height: 0; display: flex; flex-direction: column; }

/* Cabeçalho estável: nome, linha de dados, pílulas e ações. */
.atd-conversa-cabeca { flex: none; display: grid; gap: var(--e-2); padding: var(--e-3) var(--e-4); border-bottom: 1px solid var(--linha); }
.atd-cabeca-linha { display: flex; align-items: center; gap: var(--e-3); min-width: 0; }
.atd-voltar { display: none; flex: none; }
.atd-avatar { width: 40px; height: 40px; }
.atd-cabeca-id { flex: 1; min-width: 0; display: grid; gap: 3px; }
.atd-cabeca-id h2 { margin: 0; min-width: 0; max-width: 100%; font-size: var(--t-lg); line-height: 1.2; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.atd-cabeca-sub { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 6px; min-width: 0; font-size: var(--t-xs); color: var(--texto-3); }
.atd-sep { flex: none; }
.atd-par { display: inline-flex; align-items: center; gap: 6px; min-width: 0; max-width: 100%; }
.atd-par-inicio > .atd-sep { visibility: hidden; } /* "·" no começo de linha (conversa.js → ajustarSeparadores) */
.atd-endereco { font-variant-numeric: tabular-nums; white-space: nowrap; }
.atd-canal { display: inline-flex; align-items: center; gap: 4px; min-width: 0; }
.atd-canal svg { width: 13px; height: 13px; flex: none; }
.atd-canal-off { color: var(--aviso); font-weight: 600; }
.atd-cabeca-acoes { display: flex; align-items: center; gap: 4px; flex: none; }
.atd-alternar-detalhes[aria-pressed="true"], .atd-botao-imersivo[aria-pressed="true"] { background: var(--ativo); }
/* Seletor "⌄ ◫" da Ficha do cliente: pílula de vidro com dois botões (menu de seções | abrir/fechar a ficha). */
.atd-ficha-alternador { display: inline-flex; align-items: center; flex: none; height: 32px; padding: 2px; gap: 1px; border: 1px solid var(--linha); border-radius: var(--r-pill); background: var(--vidro-1); }
.atd-ficha-alternador > button { display: inline-grid; place-items: center; height: 26px; min-width: 28px; padding: 0 5px; border: 0; border-radius: var(--r-pill); background: transparent; color: var(--texto-2); cursor: pointer; transition: background var(--mov-rapido) var(--curva), color var(--mov-rapido) var(--curva); }
.atd-ficha-alternador > .atd-menu-ficha { min-width: 22px; padding: 0 3px; }
.atd-ficha-alternador > button:hover { background: var(--hover); color: var(--texto); }
.atd-ficha-alternador > button:focus-visible { outline: none; box-shadow: var(--foco); }
.atd-ficha-alternador svg { width: 17px; height: 17px; }
.atd-ficha-alternador > .atd-menu-ficha svg { width: 14px; height: 14px; }
.atd-ficha-alternador > .atd-menu-ficha[aria-expanded="true"] { background: var(--ativo); color: var(--texto); }
.atd-ficha-alternador > .atd-alternar-detalhes[aria-pressed="true"] { background: var(--ativo); color: var(--destaque-tinta); box-shadow: var(--vidro-reflexo); }
.atd-cabeca-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; min-width: 0; }
.atd-responsavel {
  display: inline-flex; align-items: center; gap: 8px; min-height: 30px; max-width: 260px; padding: 0 10px 0 4px;
  border: 1px solid var(--linha); border-radius: var(--r-pill); background: var(--vidro-2); color: var(--texto); cursor: pointer; text-align: left;
}
.atd-responsavel:hover:not([aria-disabled="true"]) { background: var(--vidro-3); border-color: var(--linha-forte); }
.atd-responsavel .avatar.pequeno { width: 24px; height: 24px; border-radius: 8px; }
.atd-responsavel > svg:first-child { width: 16px; height: 16px; margin-left: 4px; color: var(--texto-3); }
.atd-responsavel.sem { border-style: dashed; }
.atd-resp-texto { display: grid; min-width: 0; line-height: 1.15; }
.atd-resp-texto b { font-size: var(--t-xs); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.atd-resp-texto small { font-size: var(--t-2xs); color: var(--texto-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Itens dentro da linha do nome: compactos. Responsável vira texto com seta (o setor continua no nome acessível). */
.atd-cabeca-sub .atd-responsavel { gap: 5px; min-height: 24px; max-width: 100%; padding: 0 5px 0 3px; border-color: transparent; background: transparent; color: var(--texto-2); }
.atd-cabeca-sub .atd-responsavel:hover:not([aria-disabled="true"]) { border-color: transparent; background: var(--hover); }
.atd-cabeca-sub .atd-responsavel .avatar.pequeno { width: 18px; height: 18px; border-radius: 6px; font-size: var(--t-2xs); box-shadow: none; }
.atd-cabeca-sub .atd-responsavel > svg:first-child { width: 14px; height: 14px; margin-left: 0; }
.atd-cabeca-sub .atd-resp-texto b { font-weight: 600; color: inherit; }
.atd-conversa:not([data-layout="3"]) .atd-cabeca-sub .atd-resp-texto small { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.atd-cabeca-sub .selo { min-height: 20px; padding: 0 8px; font-size: var(--t-2xs); }
.atd-cabeca-sub .selo svg { width: 12px; height: 12px; }
.atd-selo-nao-lidas { font-variant-numeric: tabular-nums; }

/* Histórico e trilho de ações rápidas (Layout 1: lateral; Layout 2: canto inferior direito; Layout 3: sem trilho). */
.atd-historico-caixa { position: relative; flex: 1; min-height: 0; display: flex; }
.atd-historico { flex: 1; min-height: 0; overflow: auto; display: flex; flex-direction: column; gap: 6px; padding: var(--e-4) var(--e-4) var(--e-5); overscroll-behavior: contain; }
.atd-historico:focus-visible { box-shadow: inset var(--foco); }
.atd-trilho { flex: none; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; gap: var(--e-2); padding: var(--e-3) var(--e-3) var(--e-4) 0; }
.atd-trilho:not(:has(> :not([hidden]))) { display: none; }
.atd-trilho .botao { width: 38px; min-height: 38px; }
.atd-trilho .botao svg { width: 17px; height: 17px; }
.atd-trilho .botao[aria-pressed="true"] { --b-texto: var(--info); --b-fundo: var(--info-fundo); --b-borda: color-mix(in oklab, var(--info) 40%, transparent); }
.atd-novas { position: absolute; left: 50%; bottom: 12px; transform: translateX(-50%); z-index: 3; box-shadow: var(--sombra-2); }
.atd-anteriores { display: flex; justify-content: center; padding-bottom: 4px; }
.atd-inicio-historico { align-self: center; margin: 0 0 4px; font-size: var(--t-2xs); color: var(--texto-3); }
.atd-carregando { display: grid; gap: 10px; }
.atd-carregando .esqueleto:nth-child(2) { justify-self: end; }
.atd-dia-bloco { display: flex; flex-direction: column; gap: 6px; }
/* Separador em linha própria, centralizado, sem flutuar sobre as bolhas. */
.atd-dia { position: static; align-self: stretch; display: flex; justify-content: center; margin: 8px 0 4px; }
.atd-dia span { display: inline-block; padding: 3px 12px; border-radius: var(--r-pill); background: var(--vidro-3); border: 1px solid var(--linha); box-shadow: var(--sombra-1); font-size: var(--t-2xs); font-weight: 600; color: var(--texto-2); }

/* Encaixes da IA: ocultos e vazios até a sessão dos agentes usar. A região tem altura máxima e rolagem própria, então
   nunca cobre o compositor (ACE-19). */
.atd-ia { flex: none; max-height: min(38%, 260px); overflow-y: auto; overscroll-behavior: contain; padding: var(--e-2) var(--e-4); border-top: 1px solid var(--linha); }
.atd-ia-ferramenta { flex: none; display: inline-flex; align-items: center; gap: 4px; }
/* "Sugestão da IA" (ia-sugestao.js): botão na barra, estado (progresso/erro) e cartão na região. Vidro claro com aro em
   destaque informativo; texto sempre em --texto sobre fundo quase sólido (legível nos dois temas). */
.atd-ia-botao[aria-disabled="true"] { opacity: .55; cursor: not-allowed; }
.atd-ia-botao[aria-busy="true"] { opacity: 1; cursor: progress; }
.atd-ia-botao[aria-busy="true"] > svg { animation: atd-ia-pulso 1.2s ease-in-out infinite; }
.atd-ia-botao > svg { color: var(--info); }
.atd-conversa[data-layout="1"] .atd-ia-botao { min-height: 26px; padding: 0 10px; }
.atd-conversa[data-layout="1"] .atd-ia-botao svg { width: 13px; height: 13px; }
.atd-ia { display: grid; gap: var(--e-2); }
.atd-ia-estado { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; padding: 8px 12px; border-radius: var(--r-md);
  background: var(--info-fundo); color: var(--texto); font-size: var(--t-sm); }
.atd-ia-estado > svg { width: 16px; height: 16px; flex: none; color: var(--info); }
.atd-ia-estado.erro { background: var(--erro-fundo); }
.atd-ia-estado.erro > svg { color: var(--erro); }
.atd-ia-estado .atd-ia-progresso { flex: 1 1 14ch; min-width: 0; }
.atd-ia-estado .grupo-botoes { gap: 4px; }
.atd-ia-estado kbd { height: 18px; min-width: 22px; margin-left: 2px; font-size: var(--t-2xs); }
.atd-ia-girando { width: 14px; height: 14px; flex: none; border-radius: 50%; border: 2px solid var(--info); border-right-color: transparent; animation: girar .8s linear infinite; }
.atd-ia-cartao { display: grid; gap: 8px; padding: 10px 12px; border-radius: var(--r-md);
  border: 1px solid color-mix(in oklab, var(--info) 34%, var(--linha)); background: var(--vidro-solido-2); box-shadow: var(--sombra-1); color: var(--texto); }
.atd-ia-cabeca { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; min-width: 0; }
.atd-ia-cabeca h3 { margin: 0; font-size: var(--t-sm); font-weight: 700; }
.atd-ia-marca { width: 16px; height: 16px; flex: none; color: var(--info); }
.atd-ia-etapa { display: inline-flex; min-height: 20px; align-items: center; padding: 0 8px; border-radius: var(--r-pill); background: var(--info-fundo); color: var(--texto-2); font-size: var(--t-2xs); font-weight: 620; }
.atd-ia-quando { margin-left: auto; color: var(--texto-3); font-size: var(--t-2xs); }
.atd-ia-mudou { display: flex; align-items: flex-start; gap: 6px; margin: 0; padding: 6px 10px; border-radius: var(--r-sm); background: var(--aviso-fundo); color: var(--texto); font-size: var(--t-xs); font-weight: 560; }
.atd-ia-mudou svg { width: 14px; height: 14px; flex: none; margin-top: 1px; color: var(--aviso); }
.atd-ia-texto { margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; font-size: var(--t-md); line-height: 1.45; user-select: text; border-radius: var(--r-xs); }
.atd-ia-texto:focus-visible { outline: none; box-shadow: var(--foco); }
.atd-ia-acoes { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 10px; }
.atd-ia-nota { color: var(--texto-3); font-size: var(--t-2xs); }
.atd-ia-acoes .grupo-botoes { margin-left: auto; gap: 6px; }
@keyframes atd-ia-pulso { 50% { opacity: .35; } }
@media (prefers-reduced-motion: reduce) { .atd-ia-girando, .atd-ia-botao[aria-busy="true"] > svg { animation: none; } }

/* Bolhas: autoria inconfundível (HIS-06). Cliente à esquerda; equipe à direita; nota tracejada âmbar; sistema ao centro. */
.atd-msg {
  align-self: flex-start; display: grid; gap: 3px; max-width: min(68ch, 80%); padding: 8px 12px 6px;
  border: 1px solid var(--linha); border-radius: var(--r-lg) var(--r-lg) var(--r-lg) var(--r-xs);
  background: var(--vidro-solido-2); color: var(--texto); box-shadow: var(--sombra-1);
}
.atd-msg-saida { align-self: flex-end; border-radius: var(--r-lg) var(--r-lg) var(--r-xs) var(--r-lg); background: color-mix(in oklab, var(--destaque-suave) 100%, var(--vidro-solido-2)); border-color: color-mix(in oklab, var(--destaque-tinta) 22%, transparent); }
.atd-msg-interna { align-self: flex-end; border: 1.5px dashed var(--aviso); border-radius: var(--r-lg) var(--r-lg) var(--r-xs) var(--r-lg); background: var(--aviso-fundo); box-shadow: none; }
.atd-msg-faixa { display: flex; align-items: center; gap: 5px; font-size: var(--t-2xs); font-weight: 720; letter-spacing: .06em; text-transform: uppercase; color: var(--aviso); }
.atd-msg-faixa svg { width: 13px; height: 13px; }
.atd-msg-autor { display: flex; align-items: center; gap: 6px; font-size: var(--t-2xs); color: var(--texto-3); }
.atd-msg-autor b { font-weight: 650; color: var(--texto-2); }
.atd-msg-autor .selo { min-height: 18px; padding: 0 6px; font-size: var(--t-2xs); }
.atd-msg-corpo { margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; word-break: break-word; font-size: var(--t-md); line-height: 1.45; user-select: text; }
.atd-link { color: var(--destaque-tinta); text-decoration: underline; text-underline-offset: 2px; overflow-wrap: anywhere; }
.atd-msg-citacao { display: flex; align-items: center; gap: 6px; max-width: 100%; padding: 4px 8px; border: 0; border-left: 3px solid var(--linha-forte); border-radius: var(--r-xs); background: var(--hover); color: var(--texto-2); font-size: var(--t-xs); text-align: left; cursor: pointer; }
.atd-msg-citacao span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.atd-msg-citacao svg { width: 12px; height: 12px; flex: none; }
.atd-msg-rodape { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 4px 8px; font-size: var(--t-2xs); color: var(--texto-3); font-variant-numeric: tabular-nums; }
.atd-msg-status { display: inline-flex; align-items: center; gap: 3px; font-weight: 600; }
.atd-msg-status svg { width: 12px; height: 12px; }
.atd-msg-erro { flex-basis: 100%; text-align: right; color: var(--erro); }
.atd-msg-acoes { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 6px; padding-top: 2px; }
.atd-msg-otimista { opacity: .88; }
.atd-st-falhou, .atd-st-recusada { border-color: var(--erro); }
.atd-st-incerta, .atd-st-erro-rede { border-color: var(--aviso); }
.atd-msg-sistema {
  align-self: center; display: inline-flex; align-items: center; gap: 6px; max-width: 90%; padding: 4px 12px;
  border-radius: var(--r-pill); background: var(--hover); color: var(--texto-3); font-size: var(--t-xs); text-align: center;
}
.atd-msg-sistema svg { width: 13px; height: 13px; flex: none; }
.atd-msg-sistema time { font-size: var(--t-2xs); opacity: .85; }
.atd-msg-destaque { box-shadow: var(--foco); }

/* Compositor: sempre visível (VIS-04/ACE-19); nota interna inequívoca (COM-08). */
.atd-compositor { flex: none; display: grid; gap: 6px; padding: var(--e-3) var(--e-4) var(--e-2); border-top: 1px solid var(--linha); background: var(--vidro-1); }
.atd-compositor.atd-modo-nota { background: var(--aviso-fundo); box-shadow: inset 0 3px 0 var(--aviso); }
.atd-compositor-topo { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 12px; min-width: 0; }
.atd-modos { flex: none; display: flex; }
.atd-modos button { gap: 6px; min-height: 28px; padding: 0 var(--e-3); font-size: var(--t-xs); color: var(--texto-2); }
.atd-modos button svg { width: 14px; height: 14px; }
.atd-modos button[aria-pressed="true"] { background: var(--aviso); color: var(--texto-inverso); }
.atd-simular { flex: none; gap: 6px; color: var(--texto-2); }
.atd-simular svg { width: 15px; height: 15px; }
.atd-compositor-linha { display: flex; align-items: flex-end; gap: var(--e-2); min-width: 0; }
.atd-campo {
  flex: 1; min-width: 0; min-height: 42px; max-height: 150px; padding: 10px 14px; resize: none; overflow-y: hidden;
  border: 1px solid var(--campo-borda); border-radius: var(--r-md); background: var(--campo); color: var(--texto);
  font: inherit; font-size: var(--t-md); line-height: 1.45;
}
/* Placeholder sempre em uma linha (tela estreita não quebra nem corta pela metade). */
.atd-campo::placeholder { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.atd-campo:focus { background: var(--campo-foco); border-color: var(--destaque-tinta); outline: none; box-shadow: var(--foco); }
.atd-campo:disabled { opacity: .6; cursor: not-allowed; }
.atd-modo-nota .atd-campo { border: 1.5px dashed var(--aviso); }
.atd-enviar { min-height: 42px; flex: none; }
.atd-compositor-aviso { display: flex; align-items: flex-start; gap: 8px; padding: 6px 10px; border-radius: var(--r-sm); font-size: var(--t-xs); background: var(--info-fundo); }
.atd-compositor-aviso svg { width: 15px; height: 15px; flex: none; margin-top: 1px; color: var(--info); }
.atd-compositor-aviso.atencao { background: var(--aviso-fundo); }
.atd-compositor-aviso.atencao svg { color: var(--aviso); }
.atd-compositor-aviso.erro { background: var(--erro-fundo); }
.atd-compositor-aviso.erro svg { color: var(--erro); }
.atd-compositor-encerrada { display: flex; align-items: center; gap: 8px; font-size: var(--t-xs); color: var(--texto-2); }
.atd-compositor-encerrada > svg { width: 15px; height: 15px; color: var(--ok); }
/* Rodapé: só o contador (compositor.js oculta o rodapé junto com ele). */
.atd-compositor-rodape { display: flex; align-items: center; gap: 10px; min-width: 0; font-size: var(--t-2xs); color: var(--texto-3); }
.atd-compositor-rodape kbd { height: 18px; min-width: 18px; font-size: var(--t-2xs); }
.atd-contador { flex: none; }
.atd-contador.excedido { color: var(--erro); font-weight: 650; }
.atd-layouts { flex: none; align-items: center; gap: 1px; padding: 2px; }
/* Seletor "Layout 1 · 2 · 3" na barra acima do campo, sempre à direita (nos três layouts). */
.atd-compositor-topo > .atd-layouts { margin-left: auto; }
.atd-layouts-rotulo { padding: 0 4px 0 6px; color: var(--texto-3); font-size: var(--t-2xs); font-weight: 650; }
.atd-layouts button { min-width: 24px; min-height: 22px; padding: 0 7px; justify-content: center; font-size: var(--t-xs); font-variant-numeric: tabular-nums; }
/* Rótulo só para leitor de tela quando o botão vira ícone (o nome acessível continua o texto). */
.atd-conversa:is([data-layout="1"], [data-layout="3"]) .atd-enviar-rotulo,
.atd-conversa[data-layout="3"] :is(.atd-simular-rotulo, .atd-ia-rotulo) { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* ---------- Layout 1 — Centralizada (padrão): nome no centro, pílulas, bolhas da equipe no destaque, trilho lateral ---------- */
.atd-conversa[data-layout="1"] .atd-conversa-cabeca { gap: 6px; padding-top: var(--e-4); }
.atd-conversa[data-layout="1"] .atd-cabeca-linha { display: grid; grid-template-columns: 1fr minmax(0, auto) 1fr; column-gap: var(--e-3); }
.atd-conversa[data-layout="1"] .atd-voltar { grid-area: 1 / 1; justify-self: start; }
.atd-conversa[data-layout="1"] .atd-cabeca-id { grid-area: 1 / 2; justify-items: center; text-align: center; }
.atd-conversa[data-layout="1"] .atd-cabeca-acoes { grid-area: 1 / 3; justify-self: end; }
.atd-conversa[data-layout="1"] .atd-cabeca-id h2 { font-size: var(--t-xl); font-weight: 700; letter-spacing: -.01em; }
.atd-conversa[data-layout="1"] :is(.atd-cabeca-sub, .atd-cabeca-meta) { justify-content: center; }
.atd-conversa[data-layout="1"] .atd-cabeca-meta .atd-chip-grande { min-height: 28px; }
.atd-conversa[data-layout="1"] .atd-msg-saida:not(.atd-st-falhou, .atd-st-recusada, .atd-st-incerta, .atd-st-erro-rede) {
  border-color: transparent; background: var(--destaque); color: var(--destaque-texto); box-shadow: 0 8px 20px -12px var(--destaque-brilho), var(--sombra-1);
}
.atd-conversa[data-layout="1"] .atd-msg-saida:not(.atd-st-falhou, .atd-st-recusada, .atd-st-incerta, .atd-st-erro-rede) :is(.atd-msg-autor, .atd-msg-autor b, .atd-msg-rodape, .atd-msg-status, .atd-link) { color: var(--destaque-texto); }
.atd-conversa[data-layout="1"] .atd-msg-saida:not(.atd-st-falhou, .atd-st-recusada, .atd-st-incerta, .atd-st-erro-rede) :is(.atd-msg-autor .selo, .atd-msg-citacao) {
  border-left-color: var(--destaque-texto); background: color-mix(in oklab, var(--destaque-texto) 16%, transparent); color: var(--destaque-texto);
}
.atd-conversa[data-layout="1"] .atd-compositor-linha { align-items: flex-end; }
.atd-conversa[data-layout="1"] .atd-campo { min-height: 44px; padding: 11px 18px; border-radius: 22px; }
.atd-conversa[data-layout="1"] .atd-enviar { width: 44px; min-height: 44px; padding: 0; border-radius: 50%; }
.atd-conversa[data-layout="1"] .atd-compositor-topo { gap: 4px 10px; }
.atd-conversa[data-layout="1"] .atd-modos button { min-height: 26px; padding: 0 10px; }
.atd-conversa[data-layout="1"] .atd-modos button svg { width: 13px; height: 13px; }
.atd-conversa[data-layout="1"] .atd-simular { min-height: 26px; padding: 0 8px; font-size: var(--t-xs); }

/* ---------- Layout 2 — Operacional: linha única de dados, cartões numa coluna central, ferramentas acima do campo ---------- */
.atd-conversa[data-layout="2"] .atd-conversa-cabeca { padding-top: 10px; padding-bottom: 10px; }
.atd-conversa[data-layout="2"] .atd-cabeca-id h2 { font-weight: 700; }
.atd-conversa[data-layout="2"] .atd-cabeca-sub .atd-chip-etapa { min-height: 22px; padding: 0 6px; border-color: transparent; background: transparent; font-size: var(--t-xs); }
.atd-conversa[data-layout="2"] .atd-cabeca-sub button.atd-chip-etapa:hover:not(:disabled) { background: var(--hover); }
.atd-conversa[data-layout="2"] .atd-responsavel.sem { color: var(--aviso); font-weight: 650; }
.atd-conversa[data-layout="2"] .atd-responsavel.sem > svg { color: var(--aviso); }
.atd-conversa[data-layout="2"] .atd-botao-estado { --b-fundo: var(--destaque); --b-texto: var(--destaque-texto); --b-borda: transparent; }
.atd-conversa[data-layout="2"] .atd-botao-estado:hover { background: var(--destaque-forte); }
.atd-conversa[data-layout="2"] .atd-historico > :is(.atd-dia-bloco, .atd-anteriores, .atd-carregando, .aviso, .estado) { align-self: center; width: min(100%, 46rem); }
/* Cartão: linha de rótulo (autor e selo à esquerda, hora e status à direita) montada só por CSS. */
.atd-conversa[data-layout="2"] .atd-msg:not(.atd-msg-sistema) {
  grid-template-columns: minmax(0, 1fr) auto auto;
  grid-template-areas: "faixa faixa faixa" "autor hora status" "citacao citacao citacao" "corpo corpo corpo" "erro erro erro" "acoes acoes acoes";
  column-gap: 8px; row-gap: 0; max-width: min(88%, 38rem); padding: 8px 12px 10px; border-radius: var(--r-sm); box-shadow: none;
}
.atd-conversa[data-layout="2"] .atd-msg-faixa { grid-area: faixa; margin-bottom: 4px; }
.atd-conversa[data-layout="2"] .atd-msg-autor { grid-area: autor; min-width: 0; }
.atd-conversa[data-layout="2"] .atd-msg-autor b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.atd-conversa[data-layout="2"] .atd-msg-citacao { grid-area: citacao; margin-top: 5px; }
.atd-conversa[data-layout="2"] .atd-msg-corpo { grid-area: corpo; margin-top: 4px; }
.atd-conversa[data-layout="2"] .atd-msg-rodape { display: contents; }
.atd-conversa[data-layout="2"] .atd-msg-rodape > time { grid-area: hora; align-self: center; }
.atd-conversa[data-layout="2"] .atd-msg-status { grid-area: status; align-self: center; }
.atd-conversa[data-layout="2"] .atd-msg-erro { grid-area: erro; margin-top: 4px; text-align: left; }
.atd-conversa[data-layout="2"] .atd-msg-acoes { grid-area: acoes; margin-top: 6px; justify-content: flex-start; }
.atd-conversa[data-layout="2"] .atd-compositor > * { justify-self: center; width: min(100%, 50rem); }
.atd-conversa[data-layout="2"] .atd-compositor-topo { gap: 6px 10px; }
.atd-conversa[data-layout="2"] .atd-campo { min-height: 76px; }

/* ---------- Layout 3 — Moderna: avatar colorido, chips, fundo com brilho, bolhas planas e compositor em uma linha ---------- */
.atd-conversa[data-layout="3"] .atd-avatar { border-radius: 50%; background: var(--atd-cor); color: var(--texto-inverso); box-shadow: none; }
.atd-conversa[data-layout="3"] .atd-cabeca-sub { gap: 4px; }
.atd-conversa[data-layout="3"] .atd-cabeca-sub > :is(.atd-canal, .atd-endereco) {
  display: inline-flex; align-items: center; min-height: 22px; padding: 0 8px; border: 1px solid var(--linha); border-radius: var(--r-pill); background: var(--vidro-2); color: var(--texto-2); font-size: var(--t-2xs);
}
.atd-conversa[data-layout="3"] .atd-cabeca-sub > .atd-canal-off { color: var(--aviso); }
.atd-conversa[data-layout="3"] .atd-cabeca-sub .atd-responsavel { min-height: 22px; padding: 0 6px 0 3px; border-color: var(--linha); border-radius: var(--r-pill); background: var(--vidro-2); font-size: var(--t-2xs); }
.atd-conversa[data-layout="3"] .atd-cabeca-sub .atd-responsavel.sem { border-style: dashed; }
.atd-conversa[data-layout="3"] .atd-cabeca-sub .atd-resp-texto { display: flex; align-items: baseline; gap: 4px; }
.atd-conversa[data-layout="3"] .atd-cabeca-sub .atd-resp-texto b { font-size: var(--t-2xs); }
.atd-conversa[data-layout="3"] .atd-cabeca-sub .atd-resp-texto small::before { content: "· "; }
.atd-conversa[data-layout="3"] .atd-cabeca-sub .atd-chip-etapa { min-height: 22px; padding: 0 8px; font-size: var(--t-2xs); }
.atd-conversa[data-layout="3"] .atd-botao-estado { --b-fundo: transparent; --b-texto: var(--destaque-tinta); --b-borda: var(--destaque-tinta); }
.atd-conversa[data-layout="3"] .atd-botao-estado:hover { background: var(--destaque-suave); }
.atd-conversa[data-layout="3"] .atd-historico-caixa {
  background:
    radial-gradient(48% 42% at 0% 0%, var(--mancha-1), transparent 72%),
    radial-gradient(42% 38% at 100% 0%, var(--mancha-3), transparent 72%),
    radial-gradient(52% 44% at 100% 100%, var(--mancha-2), transparent 74%);
}
.atd-conversa[data-layout="3"] :is(.atd-msg-entrada, .atd-msg-saida) { border-color: transparent; border-radius: var(--r-md); box-shadow: none; }
.atd-conversa[data-layout="3"] .atd-msg:is(.atd-st-falhou, .atd-st-recusada) { border-color: var(--erro); }
.atd-conversa[data-layout="3"] .atd-msg:is(.atd-st-incerta, .atd-st-erro-rede) { border-color: var(--aviso); }
.atd-conversa[data-layout="3"] .atd-compositor { gap: 5px; }
.atd-conversa[data-layout="3"] .atd-compositor-linha { gap: 6px; }
.atd-conversa[data-layout="3"] .atd-compositor-topo { gap: 4px 10px; }
.atd-conversa[data-layout="3"] .atd-modos button { min-height: 26px; padding: 0 10px; border-radius: var(--r-pill); }
.atd-conversa[data-layout="3"] .atd-modos button svg { width: 13px; height: 13px; }
.atd-conversa[data-layout="3"] .atd-ia-botao { width: 40px; min-height: 40px; padding: 0; border-radius: 50%; justify-content: center; --b-borda: var(--linha-forte); }
.atd-conversa[data-layout="3"] .atd-simular { width: 40px; min-height: 40px; padding: 0; border-radius: 50%; --b-borda: var(--linha-forte); }
.atd-conversa[data-layout="3"] .atd-campo { min-height: 42px; padding: 10px 16px; border-radius: 21px; }
.atd-conversa[data-layout="3"] .atd-enviar { width: 42px; min-height: 42px; padding: 0; border-radius: 50%; }

/* O destaque de "ir para a mensagem citada" vale em qualquer layout. */
.atd-conversa .atd-msg.atd-msg-destaque { box-shadow: var(--foco); }

/* ---------- Contêiner: largura do próprio painel (vale também com os detalhes abertos) ---------- */
@container atd-conversa (width < 640px) {
  .atd-trilho { display: none; }
}
/* Cabeçalho compacto (celular, detalhes abertos): nome e ações na primeira linha; a linha de dados ocupa a largura
   inteira embaixo, em vez de se espremer na coluna do nome. O Layout 1 deixa de centralizar. */
@container atd-conversa (width < 560px) {
  .atd-conversa[data-layout] .atd-cabeca-linha { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; column-gap: var(--e-2); row-gap: 4px; }
  .atd-conversa[data-layout="3"] .atd-cabeca-linha { grid-template-columns: auto auto minmax(0, 1fr) auto; }
  .atd-conversa[data-layout] .atd-cabeca-id { display: contents; text-align: left; }
  .atd-conversa[data-layout] .atd-voltar { grid-area: 1 / 1; }
  .atd-conversa[data-layout="3"] .atd-avatar { grid-area: 1 / 2; }
  .atd-conversa[data-layout] .atd-cabeca-id h2 { grid-row: 1; grid-column: -3 / -2; }
  .atd-conversa[data-layout] .atd-cabeca-acoes { grid-row: 1; grid-column: -2 / -1; justify-self: end; }
  .atd-conversa[data-layout] .atd-cabeca-sub { grid-row: 2; grid-column: 1 / -1; justify-content: flex-start; }
  .atd-conversa[data-layout="1"] .atd-conversa-cabeca { padding-top: var(--e-3); }
  .atd-conversa[data-layout="1"] .atd-cabeca-id h2 { font-size: var(--t-lg); }
  .atd-conversa[data-layout="1"] .atd-cabeca-meta { justify-content: flex-start; }
}
@container atd-conversa (width < 520px) {
  .atd-simular-rotulo, .atd-ia-rotulo, .atd-rotulo-opcional { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .atd-conversa:not([data-layout="3"]) .atd-compositor .atd-ia-botao { width: 32px; min-height: 32px; padding: 0; justify-content: center; --b-borda: var(--linha-forte); }
  .atd-conversa:not([data-layout="3"]) .atd-compositor .atd-simular { width: 32px; min-height: 32px; padding: 0; --b-borda: var(--linha-forte); } /* só ícone: contorno para não sumir */
}

/* ---------- Ficha do cliente (detalhes.js, ficha/*.js) ---------- */
.atd-detalhes { display: flex; flex-direction: column; overflow: hidden; border-radius: var(--r-xl); }
.atd-detalhes-topo { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: var(--e-3) var(--e-3) var(--e-3) var(--e-4); border-bottom: 1px solid var(--linha); }
.atd-detalhes-titulo { display: flex; align-items: center; gap: 8px; min-width: 0; }
.atd-detalhes-titulo > svg { width: 18px; height: 18px; flex: none; color: var(--destaque-tinta); }
.atd-detalhes-topo h2 { margin: 0; font-size: var(--t-lg); white-space: nowrap; }
.atd-detalhes-topo h2:focus { outline: none; }
.atd-ficha-salvamento { display: inline-flex; align-items: center; gap: 5px; min-width: 0; font-size: var(--t-2xs); color: var(--texto-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.atd-ficha-salvamento svg { width: 12px; height: 12px; flex: none; }
.atd-ficha-salvamento[data-estado="salvo"] { color: var(--ok); }
.atd-ficha-salvamento[data-estado="erro"] { color: var(--erro); }
.atd-ficha-girando { width: 10px; height: 10px; flex: none; border: 1.5px solid currentColor; border-right-color: transparent; border-radius: 50%; animation: atd-ficha-girar .8s linear infinite; }
@keyframes atd-ficha-girar { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .atd-ficha-girando { animation: none; } }
.atd-detalhes-corpo { flex: 1; min-height: 0; overflow: auto; display: grid; align-content: start; gap: var(--e-2); padding: var(--e-3); scroll-padding-top: var(--e-2); }
.atd-ficha-vivo { display: contents; }
.atd-ficha-carregando { display: grid; gap: 12px; padding: var(--e-2); }
.atd-ficha-indisponivel { flex-wrap: wrap; }

/* Seções recolhíveis: cartões arredondados de vidro claro. */
.atd-ficha-secao { border: 1px solid var(--linha); border-radius: var(--r-lg); background: var(--vidro-1); box-shadow: var(--vidro-reflexo); }
.atd-ficha-secao > h3 { margin: 0; font-size: inherit; }
.atd-ficha-secao-cabeca { display: flex; align-items: center; gap: 8px; width: 100%; min-height: 40px; padding: 0 var(--e-3); border: 0; border-radius: var(--r-lg); background: none; color: var(--texto); font: inherit; font-size: var(--t-sm); font-weight: 640; text-align: left; cursor: pointer; }
.atd-ficha-secao-cabeca:hover { background: var(--hover); }
.atd-ficha-secao-cabeca:focus-visible { outline: none; box-shadow: var(--foco); }
.atd-ficha-secao-cabeca > svg { width: 16px; height: 16px; flex: none; color: var(--texto-3); }
.atd-ficha-secao-cabeca > span { flex: 1; min-width: 0; }
.atd-ficha-secao-cabeca > .atd-ficha-secao-seta { transition: transform var(--mov) var(--curva); }
.atd-ficha-secao-cabeca[aria-expanded="false"] > .atd-ficha-secao-seta { transform: rotate(-90deg); }
.atd-ficha-secao-corpo { display: grid; gap: 10px; padding: 2px var(--e-3) var(--e-3); }
.atd-ficha-secao-corpo[hidden] { display: none; }

.atd-ficha { display: grid; gap: 6px; margin: 0; }
.atd-ficha-linha { display: grid; grid-template-columns: 104px minmax(0, 1fr); gap: 8px; align-items: center; font-size: var(--t-sm); }
.atd-ficha-linha dt { color: var(--texto-3); font-size: var(--t-xs); }
.atd-ficha-linha dd { margin: 0; min-width: 0; overflow-wrap: anywhere; display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.atd-nota-funil { margin: 2px 0 0; font-size: var(--t-2xs); }
.atd-detalhes-acoes, .atd-ficha-acoes { display: flex; flex-wrap: wrap; gap: 6px; }
.atd-id { margin: 4px 2px 0; font-size: var(--t-2xs); }
.atd-ficha-obs { display: flex; align-items: center; gap: 6px; margin: 0; font-size: var(--t-xs); }
.atd-ficha-obs svg { width: 14px; height: 14px; flex: none; }
.atd-ficha-vazio { display: flex; align-items: center; gap: 6px; margin: 0; font-size: var(--t-xs); }
.atd-ficha-vazio svg { width: 14px; height: 14px; flex: none; }
.selo.atd-ficha-sua { min-height: 20px; padding: 0 8px; font-size: var(--t-2xs); }
.atd-ficha-link { padding: 0; border: 0; background: none; color: var(--destaque-tinta); font: inherit; font-weight: 620; text-decoration: underline; text-underline-offset: 2px; cursor: pointer; }
.atd-ficha-link:focus-visible { outline: none; box-shadow: var(--foco); border-radius: 4px; }

/* Campos: rótulo + chip do autor numa linha; controles compactos. */
.atd-ficha-campo { display: grid; gap: 4px; margin: 0; }
.atd-ficha-rotulo { display: flex; align-items: center; justify-content: space-between; gap: 6px; min-width: 0; font-size: var(--t-xs); color: var(--texto-2); font-weight: 560; }
.atd-ficha-campo .entrada { min-height: 34px; font-size: var(--t-sm); }
.atd-ficha-campo textarea.entrada { min-height: 0; resize: vertical; }
.atd-ficha-campo .dica { font-size: var(--t-2xs); color: var(--texto-3); }
.atd-detalhes [aria-invalid="true"] { border-color: var(--erro); box-shadow: 0 0 0 2px var(--erro-fundo); }
.atd-ficha-em-linha { display: flex; gap: 6px; }
.atd-ficha-em-linha .entrada { flex: 1; min-width: 0; }
.atd-ficha-grade { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.atd-ficha-grade > :nth-child(1), .atd-ficha-grade > :nth-child(6) { grid-column: 1 / -1; }
.atd-ficha-autor { display: inline-flex; align-items: center; gap: 3px; flex: none; max-width: 50%; min-height: 18px; padding: 0 7px 0 5px; border-radius: var(--r-pill); background: var(--info-fundo); color: var(--info); font-size: var(--t-2xs); font-weight: 560; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.atd-ficha-autor svg { width: 11px; height: 11px; flex: none; }
.atd-ficha-linha-simnao { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.atd-ficha-linha-simnao > .atd-ficha-rotulo { flex: 1; justify-content: flex-start; flex-wrap: wrap; }
.atd-ficha-simnao { flex: none; padding: 2px; }
.atd-ficha-simnao button { min-height: 26px; padding: 0 10px; font-size: var(--t-xs); }
.atd-ficha-marco { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; }
.atd-ficha-marco .marcar { flex: 1; min-width: 150px; }
.atd-ficha-data-curta { width: auto; min-height: 32px; font-size: var(--t-sm); }
.atd-ficha-cartao { display: grid; gap: 8px; padding: var(--e-3); border: 1px solid var(--linha); border-radius: var(--r-md); background: var(--vidro-2); }
.atd-ficha-interruptor { padding: 2px 0; font-size: var(--t-sm); }
.atd-ficha-interruptor span small { font-size: var(--t-xs); }

/* Caso: identidade, tipo de ação e chips. */
.atd-ficha-identidade { display: grid; gap: 2px; min-width: 0; }
.atd-ficha-nome { font-size: var(--t-md); font-weight: 650; overflow-wrap: anywhere; }
.atd-ficha-canal { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; font-size: var(--t-xs); color: var(--texto-3); }
.atd-ficha-canal > svg { width: 13px; height: 13px; flex: none; }
.atd-ficha-copiar.botao.pequeno.icone { width: 26px; min-height: 26px; }
.atd-ficha-copiar svg { width: 14px; height: 14px; }
.atd-ficha-caso { display: grid; gap: 8px; }
.atd-ficha-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.atd-ficha-chip { display: inline-flex; align-items: center; gap: 5px; min-height: 28px; max-width: 100%; padding: 0 10px; border: 1px solid var(--linha); border-radius: var(--r-pill); background: var(--vidro-2); color: var(--texto); font: inherit; font-size: var(--t-xs); font-weight: 560; cursor: pointer; }
.atd-ficha-chip > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.atd-ficha-chip svg { width: 13px; height: 13px; flex: none; }
.atd-ficha-chip:hover { border-color: var(--linha-forte); background: var(--vidro-3); }
.atd-ficha-chip:focus-visible { outline: none; box-shadow: var(--foco); }
.atd-ficha-chip.vazio { color: var(--texto-3); border-style: dashed; }
.atd-ficha-chip.pequeno { min-height: 20px; padding: 0 7px; font-size: var(--t-2xs); cursor: default; }

/* Funil: chips das etapas (a atual marcada). */
.atd-ficha-etapas { display: flex; flex-wrap: wrap; gap: 5px; }
.atd-ficha-etapa { display: inline-flex; align-items: center; gap: 5px; min-height: 26px; padding: 0 9px; border: 1px solid var(--linha); border-radius: var(--r-pill); background: transparent; color: var(--texto-2); font: inherit; font-size: var(--t-2xs); font-weight: 560; cursor: pointer; }
.atd-ficha-etapa:hover:not(:disabled) { background: var(--hover); color: var(--texto); }
.atd-ficha-etapa:focus-visible { outline: none; box-shadow: var(--foco); }
.atd-ficha-etapa[aria-pressed="true"] { background: var(--ativo); border-color: var(--linha-forte); color: var(--texto); font-weight: 650; }
.atd-ficha-etapa:disabled { cursor: default; opacity: .7; }

/* Anotações internas. */
.atd-ficha-notas { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; max-height: 280px; overflow: auto; }
.atd-ficha-notas li { display: grid; gap: 2px; padding: 8px 10px; border-left: 3px solid var(--aviso); border-radius: var(--r-xs); background: var(--aviso-fundo); }
.atd-ficha-notas p { margin: 0; font-size: var(--t-sm); white-space: pre-wrap; overflow-wrap: anywhere; }
.atd-ficha-notas small { font-size: var(--t-2xs); }

/* Informações do caso: dois cartões alternáveis com contador x/N. */
.atd-ficha-abas { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
.atd-ficha-aba { display: grid; gap: 6px; padding: 10px; border: 1px solid var(--linha); border-radius: var(--r-md); background: transparent; color: var(--texto-2); font: inherit; font-size: var(--t-xs); font-weight: 600; text-align: left; cursor: pointer; }
.atd-ficha-aba:hover { background: var(--hover); }
.atd-ficha-aba:focus-visible { outline: none; box-shadow: var(--foco); }
.atd-ficha-aba[aria-selected="true"] { background: var(--vidro-3); border-color: var(--linha-forte); color: var(--texto); box-shadow: var(--sombra-1), var(--vidro-reflexo); }
.atd-ficha-contador { display: flex; align-items: center; gap: 6px; }
.atd-ficha-contador b { font-size: var(--t-sm); font-variant-numeric: tabular-nums; }
.atd-ficha-barra { position: relative; flex: 1; height: 4px; border-radius: var(--r-pill); background: var(--ativo); overflow: hidden; }
.atd-ficha-barra > i { position: absolute; inset: 0 auto 0 0; border-radius: inherit; background: var(--destaque); }
.atd-ficha-contador.completo .atd-ficha-barra > i { background: var(--ok); }
.atd-ficha-aba-painel { display: grid; gap: 10px; }
.atd-ficha-grupo { display: grid; gap: 8px; margin: 0; padding: 0; border: 0; min-width: 0; }
.atd-ficha-grupo + .atd-ficha-grupo { padding-top: 8px; border-top: 1px solid var(--linha); }
.atd-ficha-grupo legend { padding: 0 0 6px; font-size: var(--t-2xs); font-weight: 650; letter-spacing: .04em; text-transform: uppercase; color: var(--texto-3); }
.atd-ficha-falta { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; margin: 0; padding: 8px 10px; border-radius: var(--r-sm); background: var(--aviso-fundo); color: var(--aviso); font-size: var(--t-xs); }
.atd-ficha-falta.completo { background: var(--ok-fundo); color: var(--ok); }
.atd-ficha-falta svg { width: 14px; height: 14px; }
.atd-ficha-sub { display: grid; gap: 6px; }
.atd-ficha-lista { display: grid; gap: 6px; }
.atd-ficha-item { display: flex; align-items: center; gap: 4px; }
.atd-ficha-item-campos { flex: 1; min-width: 0; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); gap: 4px; }
.atd-ficha-item-campos.tres { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) minmax(0, .9fr); }
.atd-ficha-item-campos .entrada { min-height: 32px; padding-left: 8px; padding-right: 8px; font-size: var(--t-xs); }
.atd-ficha-adicionar { justify-self: start; }

/* Outros setores e IA. */
.atd-ficha-vinculo { gap: 6px; padding: 10px; }
.atd-ficha-vinculo header { display: flex; align-items: center; gap: 6px; font-size: var(--t-sm); }
.atd-ficha-vinculo header svg { width: 15px; height: 15px; flex: none; color: var(--texto-3); }
.atd-ficha-vinculo header b { flex: 1; }
.atd-ficha-vinculo header .selo { font-size: var(--t-2xs); min-height: 20px; padding: 0 8px; }
.atd-ficha-vinculo ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.atd-ficha-vinculo li { display: grid; gap: 1px; font-size: var(--t-xs); }
.atd-ficha-vinculo li > span { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.atd-ficha-ia { grid-template-columns: auto minmax(0, 1fr); align-items: start; border-style: dashed; }
.atd-ficha-ia > svg { width: 18px; height: 18px; color: var(--destaque-tinta); }
.atd-ficha-ia > span { display: grid; gap: 2px; font-size: var(--t-sm); }
.atd-ficha-ia small { font-size: var(--t-2xs); }

/* ---------- Diálogos do atendimento ---------- */
.atd-opcoes-prazo { display: grid; gap: 10px; }
.atd-opcoes-prazo .entrada { margin-left: 28px; width: calc(100% - 28px); }
/* "Cliente responde (simulação)" (simulacao.js). */
.atd-simulacao-campo { width: 100%; min-height: 104px; resize: vertical; }
.atd-simulacao-dica { margin: calc(-1 * var(--e-2)) 0 0; font-size: var(--t-2xs); color: var(--texto-3); }
.atd-simulacao-dica kbd { height: 18px; min-width: 18px; font-size: var(--t-2xs); }
.atd-simulacao-erro { margin: 0; color: var(--erro); font-size: var(--t-xs); font-weight: 560; }

/* ---------- Telas intermediárias: detalhes por cima da conversa ---------- */
@media (max-width: 1280px) and (min-width: 901px) {
  .atd.com-detalhes { grid-template-columns: minmax(280px, 340px) minmax(0, 1fr); }
  .atd-detalhes { position: absolute; top: 0; right: 0; bottom: 0; width: min(380px, 52%); min-width: 320px; z-index: 6; box-shadow: var(--sombra-3); background: var(--vidro-3); }
}

/* ---------- Tela estreita: um painel por vez, com Voltar (VIS-07) ---------- */
@media (max-width: 900px) {
  .conteudo.atd-alvo { min-height: 460px; gap: var(--e-2); padding: var(--e-2) var(--e-2) var(--e-2); }
  .app.atd-app .botao-busca { min-width: 0; }
  .atd-filtros { max-height: 58%; }
  .atd-rotulo-opcional { display: none; }
  .atd, .atd.com-detalhes { grid-template-columns: minmax(0, 1fr); }
  .atd[data-painel="lista"] > .atd-conversa,
  .atd[data-painel="lista"] > .atd-detalhes,
  .atd[data-painel="conversa"] > .atd-coluna-lista,
  .atd[data-painel="conversa"] > .atd-detalhes,
  .atd[data-painel="detalhes"] > .atd-coluna-lista,
  .atd[data-painel="detalhes"] > .atd-conversa { display: none; }
  .atd-voltar { display: inline-flex; }
  .atd-msg { max-width: 88%; }
  .atd-compositor { padding: var(--e-2) var(--e-3); }
  .atd-campo { padding-left: 12px; padding-right: 12px; }
  .atd-campo::placeholder { font-size: var(--t-sm); }
  /* Trilho, Lida do Layout 2 e seletor de layout somem: tudo continua pelo "…" e pelo Ctrl+P. */
  .atd-trilho, .atd-layouts, .atd-conversa[data-layout="2"] .atd-botao-lida { display: none; }
  .atd-conversa[data-layout] .atd-conversa-cabeca { padding: var(--e-2) var(--e-3); }
  .atd-avatar { width: 34px; height: 34px; }
}
/* Layout 3 com transparência reduzida (sistema ou conta): fundo sólido, sem o brilho. */
@media (prefers-reduced-transparency: reduce) {
  .atd-conversa[data-layout="3"] .atd-historico-caixa { background: none; }
}
html[data-reduce-transparency="1"] .atd-conversa[data-layout="3"] .atd-historico-caixa { background: none; }

/* ---------- Modo imersivo (Imersivo 1 · 2 · 3 — index.js, layouts.js) ----------
   Só classes e atributos na .app (atd-imersivo + data-imersivo com a versão desenhada) e a faixa própria no topo da tela:
   lista, conversa, compositor e campo continuam os mesmos nós. A casca não é editada; aqui ela só some. Nada de transição
   na grade (a âncora de rolagem é restaurada na hora); só a faixa aparece com um esmaecer curto (desligado com movimento
   reduzido, base.css). */
.atd { --atd-faixa: 4.5rem; }
.app.atd-imersivo { grid-template-columns: minmax(0, 1fr); }
.app.atd-imersivo > .barra-lateral, .app.atd-imersivo .topo { display: none; }
.atd-imersivo-barra {
  flex: none; display: flex; align-items: center; gap: 6px 10px; min-width: 0; min-height: 40px; padding: 4px 4px 4px 14px;
  border-radius: var(--r-pill); animation: aparecer var(--mov) var(--curva);
}
.atd-imersivo-titulo { display: inline-flex; align-items: center; gap: 7px; min-width: 0; font-size: var(--t-sm); color: var(--texto-3); }
.atd-imersivo-titulo > svg { flex: none; width: 16px; height: 16px; color: var(--destaque-tinta); }
.atd-imersivo-titulo b { flex: none; color: var(--texto); font-weight: 650; white-space: nowrap; }
.atd-imersivo-nome { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.atd-imersivo-nome::before { content: "·"; margin-right: 7px; }
.atd-imersivos { flex: none; align-items: center; gap: 1px; padding: 2px; }
.atd-imersivos-rotulo { padding: 0 4px 0 6px; color: var(--texto-3); font-size: var(--t-2xs); font-weight: 650; }
.atd-imersivos button { min-width: 24px; min-height: 22px; padding: 0 7px; justify-content: center; font-size: var(--t-xs); font-variant-numeric: tabular-nums; }
.selo.atd-imersivo-ensaio { flex: none; min-height: 22px; padding: 0 8px; font-size: var(--t-2xs); cursor: help; }
.atd-imersivo-sair { flex: none; margin-left: auto; min-height: 30px; }
.atd-imersivo-sair svg { width: 16px; height: 16px; }

@media (min-width: 901px) {
  /* Imersivo 2 — Conversa em destaque: as linhas que já existem viram uma faixa de avatares com o selo de não lidas (o
     nome fica no nome acessível e na dica, index.js); grupos viram divisórias com a seta (dá para abrir um recolhido) e os
     filtros somem. Sem grupos para mostrar (carregando, vazio, erro), a coluna fica na largura normal para o aviso caber. */
  .app.atd-imersivo[data-imersivo="2"] .atd:has(> .atd-coluna-lista .atd-grupo) { grid-template-columns: var(--atd-faixa) minmax(0, 1fr); }
  .app.atd-imersivo[data-imersivo="2"] .atd-filtros { display: none; }
  .app.atd-imersivo[data-imersivo="2"] .atd > .atd-conversa { justify-self: center; width: min(100%, 56rem); }
  /* A divisória do grupo gruda rente ao topo (sem faixa de padding por onde a linha de cima apareceria) e o
     scroll-padding (altura dela + folga) põe a conversa trazida à vista (index.js → lista.rolarAte, setas) logo abaixo. */
  .app.atd-imersivo[data-imersivo="2"] .atd-lista-corpo { padding: 0 6px 10px; scroll-padding-top: 28px; scrollbar-width: thin; }
  .app.atd-imersivo[data-imersivo="2"] .atd-lista-corpo > .atd-grupo:first-child { margin-top: 6px; }
  .app.atd-imersivo[data-imersivo="2"] .atd-linha-abrir { display: flex; justify-content: center; gap: 0; padding: 5px 0; }
  .app.atd-imersivo[data-imersivo="2"] .atd-linha-avatar { width: 38px; height: 38px; margin: 0; border-radius: 13px; font-size: var(--t-xs); }
  .app.atd-imersivo[data-imersivo="2"] .atd-linha-texto { display: contents; }
  .app.atd-imersivo[data-imersivo="2"] .atd-linha-texto > :not(.atd-linha-topo),
  .app.atd-imersivo[data-imersivo="2"] .atd-linha-topo > :not(.atd-nao-lidas) { display: none; }
  .app.atd-imersivo[data-imersivo="2"] .atd-linha-topo { position: absolute; top: 1px; right: 1px; }
  .app.atd-imersivo[data-imersivo="2"] .atd-nao-lidas { min-width: 18px; height: 18px; padding: 0 5px; box-shadow: 0 0 0 2px var(--vidro-solido); }
  /* O "…" da linha fica no lugar (o menu de contexto e o Shift+F10 continuam ancorados na linha), mas sem clique nem desenho. */
  .app.atd-imersivo[data-imersivo="2"] .atd-linha-menu { opacity: 0; pointer-events: none; }
  .app.atd-imersivo[data-imersivo="2"] .atd-grupo-titulo { padding-top: 0; }
  .app.atd-imersivo[data-imersivo="2"] .atd-grupo-cabeca { justify-content: center; flex-wrap: nowrap; gap: 2px; min-height: 24px; padding: 4px 0; }
  .app.atd-imersivo[data-imersivo="2"] :is(.atd-grupo-nome, .atd-grupo-n, .atd-grupo-cabeca > .selo) { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .app.atd-imersivo[data-imersivo="2"] :is(.atd-fora-aviso, .atd-mais p) { display: none; }
  .app.atd-imersivo[data-imersivo="2"] .atd-mais .botao { width: 40px; gap: 0; padding: 0; font-size: 0; }
  .app.atd-imersivo[data-imersivo="2"] .atd-lista-corpo > .aviso { justify-content: center; gap: 0; padding: 8px 0; font-size: 0; }

  /* Imersivo 3 — Tela cheia: só a conversa, na largura toda (a lista volta enquanto nenhuma estiver aberta). */
  .app.atd-imersivo[data-imersivo="3"] .atd:has(> .atd-conversa[data-conversa-id]) { grid-template-columns: minmax(0, 1fr); }
  .app.atd-imersivo[data-imersivo="3"] .atd:has(> .atd-conversa[data-conversa-id]) > .atd-coluna-lista { display: none; }
}
@media (min-width: 1281px) {
  .app.atd-imersivo[data-imersivo="2"] .atd.com-detalhes:has(> .atd-coluna-lista .atd-grupo) { grid-template-columns: var(--atd-faixa) minmax(0, 1fr) minmax(340px, 380px); }
  .app.atd-imersivo[data-imersivo="3"] .atd.com-detalhes:has(> .atd-conversa[data-conversa-id]) { grid-template-columns: minmax(0, 1fr) minmax(340px, 380px); }
}
/* Tela estreita: as três escondem a moldura e continua um painel por vez (a faixa da 2 não se aplica); na faixa ficam só o
   selo de ensaio e o Sair. Como o trilho e o seletor de layout, o botão do cabeçalho some para o nome do contato caber:
   entrar e trocar de versão pelo "…" ou pelo Ctrl+P; sair pelo Sair da faixa, Esc, "…" ou Ctrl+P. */
@media (max-width: 900px) {
  .atd-imersivo-barra { min-height: 38px; padding-left: 4px; }
  .atd-imersivo-titulo, .atd-imersivos, .atd-cabeca-acoes .atd-botao-imersivo { display: none; }
  .selo.atd-imersivo-ensaio { margin-left: 4px; }
}

/* ---------- /atendimento/membros ---------- */
.atd-membros-grade { display: grid; gap: var(--e-4); grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }
.atd-membros-grade > .atd-setor-cartao { margin: 0; }
.atd-setor-cartao { display: grid; gap: var(--e-3); align-content: start; }
.atd-sem-membros { display: flex; align-items: flex-start; gap: 6px; margin: 0; font-size: var(--t-xs); color: var(--aviso); }
.atd-sem-membros svg { width: 14px; height: 14px; flex: none; margin-top: 1px; }
.atd-setor-cartao header { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; }
.atd-setor-cartao h2 { margin: 0; font-size: var(--t-lg); }
.atd-setor-cartao header p { margin: 2px 0 0; font-size: var(--t-xs); }
.atd-membros-lista { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.atd-membros-lista li { display: flex; align-items: center; gap: 8px; font-size: var(--t-sm); }
.atd-membros-opcoes { display: grid; gap: 4px; max-height: min(50vh, 420px); overflow: auto; margin-top: 8px; padding: 4px; border: 1px solid var(--linha); border-radius: var(--r-md); }
.atd-membro-opcao { padding: 4px 6px; border-radius: var(--r-xs); }
.atd-membro-opcao:hover { background: var(--hover); }