/* BrickCSC · Atendimento. A caixa no modelo do SacFlow (copiada do Sistema VP,
   shared.css, 16 a 23/09/2026), vestida com a identidade BRN: papel, tinta,
   azul e cota. Três colunas sem rolagem de página: fila, conversa e pessoa. */

.atd-ws [hidden], .modal [hidden] { display: none !important; }

/* a tela cheia: cada coluna rola por dentro, a página não rola */
body.atd-cheio .casca { height: 100vh; height: 100dvh; min-height: 0; }
body.atd-cheio .principal { display: flex; flex-direction: column; height: 100vh; height: 100dvh; min-height: 0; overflow: hidden; }
body.atd-cheio .topo { padding: 14px 24px 12px; position: static; }
body.atd-cheio .topo h1 { font-size: 24px; }
body.atd-cheio .topo p { display: none; }
/* no computador a coluna da fila já tem o título: o topo da página sai */
@media (min-width: 821px) { body.atd-cheio .topo { display: none; } }
body.atd-cheio .conteudo { flex: 1; min-height: 0; padding: 0; display: flex; overflow: hidden; }

/* --------------------------------------------------------------- botões */
.atd-ic { flex-shrink: 0; display: block; }
.atd-btn {
  display: inline-flex; align-items: center; gap: 8px; height: 38px; padding: 0 14px;
  border-radius: var(--raio-p); border: 1px solid var(--linha-2); background: var(--branco); color: var(--texto);
  font-size: 14px; font-weight: 600; cursor: pointer; white-space: nowrap; text-decoration: none;
}
.atd-btn:hover { border-color: var(--azul); }
.atd-btn.primario { background: var(--azul); border-color: var(--azul); color: var(--papel); }
.atd-btn.primario:hover { background: var(--azul-2); border-color: var(--azul-2); }
.atd-btn:disabled { opacity: .45; cursor: not-allowed; }
.atd-btn:focus-visible, .atd-btn-ic:focus-visible, .atd-btn-txt:focus-visible, .atd-item-l:focus-visible { outline: 2px solid var(--azul-claro); outline-offset: 2px; }
.atd-btn-ic {
  position: relative; display: inline-flex; align-items: center; justify-content: center;
  width: 38px; height: 38px; border-radius: var(--raio-p); border: 1px solid transparent; background: transparent;
  color: var(--fraco); cursor: pointer; flex-shrink: 0;
}
.atd-btn-ic:hover { background: var(--papel-2); color: var(--texto); }
.atd-btn-ic.redondo { width: 30px; height: 30px; border-radius: 99px; border-color: var(--linha-2); }
.atd-btn-ic.ligado { border-color: var(--cota); color: var(--cota); }
.atd-btn-ic b { position: absolute; top: 3px; right: 3px; min-width: 16px; height: 16px; border-radius: 99px; background: var(--cota); color: #fff; font-size: 10px; line-height: 16px; }
.atd-btn-ic.gravando { color: var(--ruim); background: var(--ruim-f); }
.atd-btn-txt { display: inline-flex; align-items: center; gap: 7px; border: 0; background: transparent; color: var(--fraco); font-size: 13.5px; font-weight: 600; padding: 8px 6px; border-radius: var(--raio-p); cursor: pointer; }
.atd-btn-txt:hover { background: var(--papel-2); color: var(--texto); }

/* -------------------------------------------------------------- estrutura */
.atd-ws {
  flex: 1; min-width: 0; min-height: 0; height: 100%;
  display: grid; grid-template-columns: minmax(300px, 360px) minmax(0, 1fr) minmax(290px, 330px);
  background: var(--branco); border-top: 1px solid var(--linha);
}
.atd-col { min-height: 0; min-width: 0; display: flex; flex-direction: column; }
.atd-col-lista { border-right: 1px solid var(--linha); background: var(--branco); }
.atd-col-conversa { background: var(--papel); }
.atd-col-detalhes { border-left: 1px solid var(--linha); background: var(--branco); }

/* ------------------------------------------------------------------ fila */
.atd-lista-topo { padding: 16px 16px 12px; display: flex; flex-direction: column; gap: 12px; border-bottom: 1px solid var(--linha); }
.atd-lista-titulo { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.atd-lista-titulo h2 { margin: 0; font-family: var(--serifa); font-size: 24px; letter-spacing: -.01em; }
.atd-busca-linha { display: flex; gap: 8px; }
.atd-busca { flex: 1; display: flex; align-items: center; gap: 8px; height: 40px; padding: 0 12px; border: 1px solid var(--linha-2); border-radius: var(--raio-p); color: var(--apagado); background: #fff; }
.atd-busca:focus-within { border-color: var(--azul); outline: 2px solid var(--azul-claro); }
.atd-busca input { border: 0; outline: 0; flex: 1; min-width: 0; font-size: 14px; color: var(--texto); background: transparent; }
.atd-busca-linha .atd-btn-ic { width: 40px; height: 40px; border-color: var(--linha-2); background: #fff; }
.atd-abas, .atd-chips { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.atd-chips { margin-bottom: 16px; }
.atd-lista-topo .atd-aba { padding: 0 10px; font-size: 12.5px; }
.atd-aba { height: 32px; padding: 0 13px; border-radius: 99px; border: 1px solid var(--linha-2); background: var(--branco); color: var(--fraco); font-size: 13px; font-weight: 600; cursor: pointer; }
.atd-aba:hover { border-color: var(--azul); color: var(--texto); }
.atd-aba.on { background: var(--azul); border-color: var(--azul); color: var(--papel); }
.atd-caixas { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; }
.atd-caixa { display: flex; flex-direction: column; align-items: center; gap: 1px; padding: 7px 4px; border-radius: var(--raio-p); border: 1px solid transparent; background: var(--papel); color: var(--fraco); cursor: pointer; }
.atd-caixa span { font-size: 12px; font-weight: 600; }
.atd-caixa b { font-family: var(--mono); font-size: 16px; color: var(--texto); }
.atd-caixa:hover { border-color: var(--linha-2); }
.atd-caixa.on { background: var(--tinta); color: var(--papel); }
.atd-caixa.on b { color: #f0a675; }

.atd-itens { flex: 1; overflow-y: auto; }
.atd-item-l { display: flex; gap: 11px; width: 100%; text-align: left; padding: 12px 14px 12px 12px; border: 0; border-bottom: 1px solid var(--linha); border-left: 4px solid var(--dep, var(--linha-2)); background: var(--branco); cursor: pointer; font: inherit; color: inherit; }
.atd-item-l:hover { background: var(--papel); }
.atd-item-l.on { background: #fbf1ea; }
.atd-item-meio { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.atd-item-meio .linha1, .atd-item-meio .linha2 { display: flex; align-items: center; gap: 8px; justify-content: space-between; }
.atd-item-meio .linha1 b { font-size: 14.5px; font-weight: 650; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.atd-item-meio .linha-emp { display: flex; align-items: center; gap: 5px; font-size: 12px; color: var(--fraco); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.atd-item-meio .previa { font-size: 13px; color: var(--fraco); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.atd-item-meio .linha3 { display: flex; gap: 4px; flex-wrap: wrap; margin-top: 3px; }
.atd-tempo { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; font-weight: 700; color: var(--atencao); white-space: nowrap; }
.atd-tempo.estourou { color: var(--ruim); background: var(--ruim-f); padding: 1px 7px; border-radius: 99px; }
.atd-tempo.neutro { color: var(--apagado); font-weight: 500; }
.atd-nlidas { min-width: 21px; height: 21px; padding: 0 6px; border-radius: 99px; background: var(--cota); color: #fff; font-size: 11px; line-height: 21px; text-align: center; flex-shrink: 0; }
.atd-tag { display: inline-flex; align-items: center; gap: 4px; padding: 1px 8px; border-radius: 99px; border: 1px solid var(--linha); background: var(--papel); color: var(--fraco); font-size: 11.5px; font-weight: 600; }
.atd-tag.grande { padding: 4px 8px 4px 11px; font-size: 12.5px; background: var(--cota-fraca); border-color: #ecc9b1; color: #8a3f16; }
.atd-tag.grande button { border: 0; background: transparent; color: inherit; font-size: 15px; line-height: 1; cursor: pointer; padding: 0 2px; }
.atd-tag.prio-alta { background: var(--cota-fraca); border-color: #ecc9b1; color: #8a3f16; }
.atd-tag.prio-urgente { background: var(--ruim-f); border-color: #eab9b0; color: var(--ruim); }
.atd-av { position: relative; flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; border-radius: 99px; font-weight: 700; letter-spacing: .02em; }
.atd-av-dep { position: absolute; right: -1px; bottom: -1px; width: 13px; height: 13px; border-radius: 99px; border: 2px solid var(--branco); }
.atd-vazio { display: flex; flex-direction: column; gap: 4px; padding: 30px 20px; text-align: center; color: var(--fraco); font-size: 13.5px; }
.atd-vazio b { color: var(--texto); font-size: 15px; }
.atd-dica { font-size: 12.5px; color: var(--apagado); }

/* -------------------------------------------------------------- conversa */
.atd-sem-conversa { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; color: var(--apagado); text-align: center; padding: 30px; }
.atd-sem-conversa b { color: var(--texto); font-family: var(--serifa); font-size: 22px; }
.atd-sem-conversa span { max-width: 36ch; }
.atd-conv-topo { display: flex; align-items: flex-start; gap: 12px; padding: 14px 18px; background: var(--branco); border-bottom: 1px solid var(--linha); flex-wrap: wrap; }
.atd-voltar { display: none; }
.atd-conv-quem { flex: 1; min-width: 200px; display: flex; flex-direction: column; gap: 3px; }
.atd-conv-quem h3 { margin: 0; font-size: 18px; font-weight: 700; line-height: 1.25; }
.atd-conv-quem h3 .sep { color: var(--linha-2); font-weight: 400; margin: 0 2px; }
.atd-conv-quem h3 .emp { color: var(--fraco); font-weight: 600; }
.atd-conv-quem .sub { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; font-size: 13px; color: var(--fraco); }
.atd-conv-quem .sub i { font-style: normal; color: var(--linha-2); }
.atd-conv-quem .wa { display: inline-flex; align-items: center; gap: 5px; color: var(--ok); }
.atd-conv-quem .selos { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 4px; }
.atd-selo2 { display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px; border-radius: var(--raio-p); font-size: 12px; font-weight: 700; }
.atd-selo2.laranja { background: var(--atencao-f); color: var(--atencao); border: 1px solid #ead7b0; }
.atd-selo2.vermelho { background: var(--ruim-f); color: var(--ruim); border: 1px solid #eab9b0; }
.atd-selo2.azul { background: #dde7f1; color: var(--azul); border: 1px solid #c7d6e6; }
.atd-selo2.ok { background: var(--ok-f); color: var(--ok); border: 1px solid #c6ddcf; }
.atd-selo2.neutro { background: var(--papel); color: var(--fraco); border: 1px solid var(--linha); }
.atd-conv-acoes { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.atd-menu-wrap { position: relative; }
.atd-menu { position: absolute; right: 0; top: calc(100% + 6px); z-index: 30; min-width: 230px; padding: 6px; background: var(--branco); border: 1px solid var(--linha); border-radius: var(--raio); box-shadow: 0 12px 32px rgba(22,32,43,.16); }
.atd-menu.acima { top: auto; bottom: calc(100% + 6px); }
.atd-menu > button { display: flex; align-items: center; gap: 10px; width: 100%; padding: 9px 10px; border: 0; border-radius: var(--raio-p); background: transparent; color: var(--texto); font-size: 13.5px; text-align: left; cursor: pointer; }
.atd-menu > button:hover { background: var(--papel); }
.atd-menu > button.perigo { color: var(--ruim); }
.atd-tag-nova { display: flex; gap: 6px; padding: 6px 4px 2px; border-top: 1px solid var(--linha); margin-top: 4px; }
.atd-tag-nova input { flex: 1; min-width: 0; height: 34px; border: 1px solid var(--linha-2); border-radius: var(--raio-p); padding: 0 8px; }
.atd-tag-nova .atd-btn { height: 34px; padding: 0 10px; }

.atd-conv-corpo { flex: 1; overflow-y: auto; padding: 16px 22px 22px; display: flex; flex-direction: column; gap: 10px; }
.atd-dia { display: flex; align-items: center; gap: 14px; margin: 10px 0 4px; color: var(--fraco); font-size: 12.5px; font-weight: 600; }
.atd-dia::before, .atd-dia::after { content: ""; flex: 1; height: 1px; background: var(--linha-2); }
.atd-dia span:first-letter { text-transform: uppercase; }
.atd-sis { display: flex; justify-content: center; }
.atd-sis span { display: inline-flex; align-items: center; gap: 8px; padding: 5px 13px; border-radius: var(--raio-p); background: var(--branco); border: 1px solid var(--linha); color: var(--fraco); font-size: 12.5px; max-width: 92%; }
.atd-sis span i { font-style: normal; color: var(--apagado); margin-left: 6px; font-family: var(--mono); font-size: 11px; }
.atd-sis.erro span { background: var(--ruim-f); border-color: #eab9b0; color: var(--ruim); }

.atd-msg2 { display: flex; gap: 9px; align-items: flex-end; max-width: 78%; }
.atd-msg2.nossa { align-self: flex-end; flex-direction: row-reverse; }
.atd-msg2-bolha { position: relative; display: flex; flex-direction: column; gap: 4px; padding: 9px 13px 7px; border-radius: 14px; background: var(--branco); border: 1px solid var(--linha); box-shadow: 0 1px 1px rgba(22,32,43,.04); min-width: 0; }
.atd-msg2.dela .atd-msg2-bolha { border-bottom-left-radius: 4px; }
.atd-msg2.nossa .atd-msg2-bolha { background: #e8eef5; border-color: #d0dcea; border-bottom-right-radius: 4px; }
.atd-msg2.nossa.robo .atd-msg2-bolha { background: var(--papel-2); border-color: var(--linha-2); }
.atd-msg2-bolha .quem { display: inline-flex; align-items: center; gap: 5px; font-size: 11.5px; font-weight: 700; color: var(--azul); }
.atd-msg2.robo .atd-msg2-bolha .quem { color: var(--fraco); }
.atd-msg2-bolha .txt { white-space: pre-wrap; word-break: break-word; font-size: 14.5px; line-height: 1.45; }
.atd-msg2-bolha .hora { align-self: flex-end; font-size: 11px; color: var(--apagado); }
.atd-msg2-bolha .lida { font-style: normal; color: var(--azul-2); letter-spacing: -2px; }
.atd-msg2-bolha audio { max-width: 260px; height: 40px; }
.atd-msg2-bolha .atd-msg2-citar { position: absolute; top: 4px; right: 6px; display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; padding: 0; border: 0; border-radius: 50%; background: rgba(255,255,255,.94); color: var(--fraco); cursor: pointer; opacity: 0; transition: opacity .12s ease; box-shadow: 0 1px 3px rgba(22,32,43,.14); }
.atd-msg2.nossa .atd-msg2-bolha .atd-msg2-citar { right: auto; left: 6px; }
.atd-msg2:hover .atd-msg2-bolha .atd-msg2-citar, .atd-msg2-bolha .atd-msg2-citar:focus-visible { opacity: 1; }
@media (hover: none) { .atd-msg2-bolha .atd-msg2-citar { opacity: .75; } }
.atd-citado { display: flex; flex-direction: column; gap: 2px; padding: 5px 10px; margin-bottom: 2px; border-left: 3px solid var(--cota); border-radius: 6px; background: rgba(22,32,43,.05); }
.atd-citado b { font-size: 11.5px; color: #8a3f16; }
.atd-citado span { font-size: 12.5px; line-height: 1.35; color: var(--fraco); overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.atd-cita-barra { display: flex; align-items: center; gap: 10px; margin: 10px 14px 0; padding: 7px 10px; border: 1px solid #ecc9b1; border-left: 3px solid var(--cota); border-radius: var(--raio-p); background: #fbf1ea; }
.atd-cita-barra .ic { display: inline-flex; color: var(--cota); }
.atd-cita-barra .txt { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.atd-cita-barra .txt b { font-size: 12px; color: #8a3f16; }
.atd-cita-barra .txt span { font-size: 12.5px; color: var(--fraco); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.atd-anexos { margin: 10px 14px 0; padding: 10px 12px; border: 1px solid var(--linha-2); border-radius: var(--raio-p); background: #fff; }
.atd-anexos-tit { display: flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 700; margin-bottom: 8px; }
.atd-anexos-tit span { font-weight: 400; color: var(--apagado); }
.atd-anexos-lista { display: flex; flex-wrap: wrap; gap: 8px; }
.atd-anexo-card { display: flex; align-items: center; gap: 8px; max-width: 230px; padding: 6px 8px; border: 1px solid var(--linha); border-radius: var(--raio-p); background: var(--papel); }
.atd-anexo-card img { width: 38px; height: 38px; object-fit: cover; border-radius: 6px; }
.atd-anexo-card .ic { display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; border-radius: 6px; background: var(--papel-2); color: var(--fraco); font-size: 11px; font-weight: 700; }
.atd-anexo-card .nome { display: flex; flex-direction: column; min-width: 0; }
.atd-anexo-card .nome b { font-size: 12.5px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.atd-anexo-card .nome span { font-size: 11px; color: var(--apagado); }
.atd-col-conversa.soltando { position: relative; }
.atd-col-conversa.soltando::after { content: "Solte para anexar o arquivo"; position: absolute; inset: 10px; z-index: 40; display: flex; align-items: center; justify-content: center; pointer-events: none; border: 2px dashed var(--cota); border-radius: 14px; background: rgba(251,241,234,.94); font-size: 15px; font-weight: 700; color: #8a3f16; }
.atd-anexo { display: flex; align-items: center; gap: 12px; min-width: 220px; padding: 4px 0; }
.atd-anexo-ic { width: 40px; height: 46px; border-radius: 6px; background: var(--papel-2); color: var(--fraco); display: flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 800; flex-shrink: 0; }
.atd-anexo-ic.pdf { background: var(--ruim); color: #fff; }
.atd-anexo-txt { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.atd-anexo-txt b { font-size: 13.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.atd-anexo-txt span { font-size: 12px; color: var(--fraco); }
.atd-anexo .atd-btn-ic { border-color: var(--linha-2); background: #fff; }
.atd-anexo-lin { display: inline-flex; align-items: center; gap: 6px; font-size: 13.5px; }
.atd-nota { align-self: flex-end; max-width: 78%; display: flex; flex-direction: column; gap: 4px; padding: 9px 13px 7px; border-radius: 14px; border-bottom-right-radius: 4px; background: var(--atencao-f); border: 1px solid #ead7b0; }
.atd-nota .quem { display: inline-flex; align-items: center; gap: 5px; font-size: 11.5px; font-weight: 700; color: var(--atencao); }
.atd-nota .txt { white-space: pre-wrap; font-size: 14px; color: #4a3a12; }
.atd-nota .txt b { color: #8a3f16; }
.atd-nota .hora { align-self: flex-end; font-size: 11px; color: #9a8350; }

/* ------------------------------------------------------------ compositor */
.atd-comp { margin: 0 14px 14px; background: var(--branco); border: 1px solid var(--linha); border-radius: 14px; box-shadow: 0 4px 18px rgba(22,32,43,.05); }
.atd-comp-abas { display: flex; gap: 4px; padding: 0 12px; border-bottom: 1px solid var(--linha); }
.atd-comp-abas button { border: 0; background: transparent; padding: 11px 10px 9px; font-size: 13.5px; font-weight: 600; color: var(--fraco); border-bottom: 3px solid transparent; cursor: pointer; }
.atd-comp-abas button.on { color: var(--texto); border-bottom-color: var(--azul); }
.atd-comp.nota .atd-comp-abas button.on { border-bottom-color: var(--atencao); }
.atd-comp-aviso { margin: 10px 14px 0; padding: 8px 12px; border-radius: var(--raio-p); background: var(--atencao-f); border: 1px solid #ead7b0; color: #5e4510; font-size: 12.5px; }
.atd-comp-aviso a { color: var(--azul); font-weight: 700; }
.atd-comp-linha { display: flex; align-items: center; gap: 7px; margin: 10px 14px 0; padding: 5px 10px; border-radius: var(--raio-p); background: var(--ok-f); border: 1px solid #c6ddcf; color: #2a4a38; font-size: 12.5px; }
.atd-comp-linha .atd-ic { color: var(--ok); }
.atd-comp-caixa { position: relative; margin: 10px 14px 12px; border: 1px solid var(--linha-2); border-radius: 12px; background: #fff; }
.atd-comp-caixa:focus-within { border-color: var(--azul); }
.atd-comp.nota .atd-comp-caixa { background: #fffbef; border-color: #ead7b0; }
.atd-comp-caixa textarea { display: block; width: 100%; min-height: 64px; max-height: 220px; resize: vertical; border: 0; outline: 0; padding: 11px 13px 4px; font: inherit; font-size: 14.5px; background: transparent; }
.atd-comp-barra { display: flex; align-items: center; gap: 2px; padding: 4px 8px 8px; flex-wrap: wrap; }
.atd-comp-div { width: 1px; height: 22px; background: var(--linha); margin: 0 6px; }
.atd-comp-dica { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--atencao); padding-left: 6px; }
.atd-comp-grav { font-size: 12.5px; color: var(--ruim); font-weight: 600; }
.atd-enviar { margin-left: auto; display: flex; position: relative; }
.atd-enviar .atd-btn.primario { height: 42px; border-radius: 10px 0 0 10px; padding: 0 18px; }
.atd-enviar > .atd-btn.primario:only-child { border-radius: 10px; }
.atd-enviar .atd-btn.seta { border-radius: 0 10px 10px 0; padding: 0 9px; border-left: 1px solid rgba(255,255,255,.25); }
.atd-sugestoes, .atd-rapidas { position: absolute; left: 8px; bottom: calc(100% + 6px); z-index: 30; width: min(420px, calc(100% - 16px)); max-height: 300px; overflow-y: auto; padding: 6px; background: var(--branco); border: 1px solid var(--linha); border-radius: var(--raio); box-shadow: 0 12px 32px rgba(22,32,43,.16); }
.atd-rapidas { left: 0; width: 380px; max-width: 80vw; }
.atd-sugestoes button, .atd-rapidas button { display: flex; flex-direction: column; gap: 2px; width: 100%; text-align: left; padding: 8px 10px; border: 0; border-radius: var(--raio-p); background: transparent; cursor: pointer; }
.atd-sugestoes button:hover, .atd-rapidas button:hover { background: var(--papel); }
.atd-sugestoes b, .atd-rapidas b { font-size: 13px; }
.atd-sugestoes span, .atd-rapidas span { font-size: 12.5px; color: var(--fraco); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.atd-rapidas a { display: block; padding: 8px 10px; font-size: 12.5px; color: var(--azul); font-weight: 600; border-top: 1px solid var(--linha); margin-top: 4px; }
.atd-emojis { position: absolute; left: 0; bottom: calc(100% + 6px); z-index: 30; display: grid; grid-template-columns: repeat(6, 36px); gap: 2px; padding: 8px; background: var(--branco); border: 1px solid var(--linha); border-radius: var(--raio); box-shadow: 0 12px 32px rgba(22,32,43,.16); }
.atd-emojis button { width: 36px; height: 36px; border: 0; background: transparent; border-radius: var(--raio-p); font-size: 20px; cursor: pointer; }
.atd-emojis button:hover { background: var(--papel); }
.atd-barra-fim { display: flex; align-items: center; justify-content: center; gap: 12px; flex-wrap: wrap; margin: 0 14px 14px; padding: 13px 16px; background: var(--branco); border: 1px solid var(--linha); border-radius: 14px; color: var(--fraco); font-size: 14px; text-align: center; }

/* ------------------------------------------------------- painel da pessoa */
.atd-det-abas { display: flex; align-items: center; gap: 4px; padding: 0 10px; border-bottom: 1px solid var(--linha); }
.atd-det-abas button[role="tab"] { border: 0; background: transparent; padding: 14px 10px 11px; font-size: 14px; font-weight: 600; color: var(--fraco); border-bottom: 3px solid transparent; cursor: pointer; }
.atd-det-abas button[role="tab"].on { color: var(--texto); border-bottom-color: var(--azul); }
.atd-det-fechar { margin-left: auto; display: none; }
.atd-det-corpo { flex: 1; overflow-y: auto; padding: 16px 16px 30px; }
.atd-det-cab { display: flex; gap: 12px; align-items: center; margin-bottom: 16px; }
.atd-det-cab > div { display: flex; flex-direction: column; gap: 2px; min-width: 0; align-items: flex-start; }
.atd-det-cab b { font-size: 17px; line-height: 1.2; }
.atd-det-cab span { font-size: 13px; color: var(--fraco); }
.atd-det-cab .atd-btn-txt { padding: 4px 0; font-size: 12.5px; color: var(--azul); }
.atd-chip-v { display: inline-flex; align-items: center; gap: 5px; margin-top: 4px; padding: 3px 10px; border-radius: 99px; font-size: 12px !important; font-weight: 700; }
.atd-chip-v.ok { background: var(--ok-f); color: var(--ok) !important; border: 1px solid #c6ddcf; }
.atd-chip-v.neutro { background: var(--papel); color: var(--fraco) !important; border: 1px solid var(--linha); }
.atd-det-corpo h4 { margin: 0 0 6px; font-size: 13px; letter-spacing: .06em; text-transform: uppercase; color: var(--fraco); }
.atd-contato-l { display: flex; align-items: center; gap: 10px; min-height: 38px; color: var(--fraco); }
.atd-contato-l span { flex: 1; min-width: 0; font-size: 14px; color: var(--texto); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.atd-contato-l .atd-btn-ic { width: 32px; height: 32px; }
.atd-toques2 { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 8px; font-size: 12.5px; color: var(--fraco); }
.atd-toques2 b { color: var(--texto); font-family: var(--mono); }
.atd-sep { height: 1px; background: var(--linha); margin: 14px 0; }
.atd-campo { display: flex; gap: 11px; padding: 7px 0; color: var(--fraco); }
.atd-campo > div { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.atd-campo .rot { font-size: 12px; color: var(--fraco); }
.atd-campo select, .atd-campo textarea { width: 100%; border: 1px solid transparent; border-radius: var(--raio-p); background: transparent; padding: 3px 6px 3px 0; font: inherit; font-size: 14px; color: var(--texto); font-weight: 600; }
.atd-campo textarea { font-weight: 400; resize: vertical; padding: 6px 8px; border-color: var(--linha); background: #fff; }
.atd-campo select:hover, .atd-campo select:focus { border-color: var(--linha-2); padding-left: 6px; }
.atd-tags { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.atd-tags .atd-menu { left: 0; right: auto; min-width: 200px; }
.atd-gerou { display: flex; align-items: center; gap: 8px; margin: 8px 0 4px; padding: 9px 11px; border-radius: var(--raio-p); background: var(--ok-f); color: var(--ok); font-size: 13px; font-weight: 600; }
.atd-sanf { border: 1px solid var(--linha); border-radius: var(--raio); margin-top: 10px; background: var(--branco); }
.atd-sanf summary { list-style: none; display: flex; align-items: center; gap: 11px; padding: 12px 12px; cursor: pointer; }
.atd-sanf summary::-webkit-details-marker { display: none; }
.atd-sanf summary b { flex: 1; font-size: 14px; }
.atd-sanf summary .qtd { min-width: 22px; height: 22px; padding: 0 7px; border-radius: 99px; background: var(--cota-fraca); color: #8a3f16; font-size: 12px; font-weight: 700; line-height: 22px; text-align: center; }
.atd-sanf[open] summary .atd-ic:last-child { transform: rotate(180deg); }
.atd-sanf .corpo { padding: 0 12px 11px; display: flex; flex-direction: column; gap: 6px; }
.atd-tarefa { display: flex; gap: 10px; align-items: flex-start; padding: 7px 0; border-top: 1px solid var(--linha); cursor: pointer; }
.atd-tarefa input { margin-top: 3px; accent-color: var(--azul); }
.atd-tarefa span { display: flex; flex-direction: column; gap: 1px; }
.atd-tarefa b { font-size: 13.5px; font-weight: 600; }
.atd-tarefa i { font-style: normal; font-size: 12px; color: var(--fraco); }
.atd-tarefa i.atrasada, .atd-tarefa-l i.atrasada { color: var(--ruim); font-weight: 700; }
.atd-tarefa.feita b { text-decoration: line-through; color: var(--apagado); }
.atd-pedido { display: flex; flex-direction: column; gap: 3px; width: 100%; text-align: left; padding: 8px 0; border: 0; border-top: 1px solid var(--linha); background: transparent; cursor: pointer; font-size: 13px; }
.atd-pedido:hover span:last-child { color: var(--azul); }
.atd-pedido .l1 { display: flex; justify-content: space-between; gap: 8px; align-items: center; }
.atd-fb2 { display: flex; align-items: baseline; gap: 8px; }
.atd-fb2 b { font-family: var(--serifa); font-size: 34px; line-height: 1; color: var(--azul); }
.atd-fb2 span { font-size: 13px; color: var(--fraco); }
.atd-fb-form { display: grid; grid-template-columns: 76px 1fr; gap: 6px; }
.atd-fb-form input { border: 1px solid var(--linha-2); border-radius: var(--raio-p); padding: 7px 9px; min-width: 0; }
.atd-fb-form .atd-btn { grid-column: 1 / -1; justify-content: center; height: 34px; }
.atd-hist { display: flex; flex-direction: column; gap: 7px; width: 100%; text-align: left; padding: 11px; margin-bottom: 8px; border: 1px solid var(--linha); border-radius: var(--raio); background: var(--branco); cursor: pointer; }
.atd-hist:hover { border-color: var(--azul); }
.atd-hist .l1 { display: flex; justify-content: space-between; gap: 8px; font-size: 13.5px; }
.atd-hist .l1 i { font-style: normal; color: var(--fraco); font-size: 12.5px; }
.atd-hist .l2 { display: flex; flex-wrap: wrap; gap: 4px; }
.atd-linha-c { display: flex; flex-direction: column; gap: 2px; padding: 8px 0; border-top: 1px solid var(--linha); }
.atd-linha-c i { font-style: normal; font-size: 11.5px; color: var(--apagado); }
.atd-linha-c b { font-size: 13px; font-weight: 600; }
.atd-linha-c span { font-size: 12.5px; color: var(--fraco); }

/* --------------------------------------------------------------- janelas */
.atd-janela-sub { margin: 4px 0 0; font-size: 13px; color: var(--fraco); max-width: 52ch; }
.modal footer .atd-janela-erro { flex: 1; color: var(--ruim); font-size: 12.5px; align-self: center; }
.atd-aviso-amarelo { padding: 10px 12px; border-radius: var(--raio-p); background: var(--atencao-f); border: 1px solid #ead7b0; color: #5e4510; font-size: 13px; line-height: 1.5; }
.atd-achados { display: flex; flex-direction: column; gap: 2px; margin: -6px 0 10px; }
.atd-achados button { display: flex; align-items: center; gap: 10px; padding: 6px 8px; border: 0; border-radius: var(--raio-p); background: transparent; text-align: left; cursor: pointer; }
.atd-achados button:hover { background: var(--papel-2); }
.atd-achados span { display: flex; flex-direction: column; }
.atd-achados b { font-size: 13.5px; }
.atd-achados i { font-style: normal; font-size: 12px; color: var(--fraco); }

/* ------------------------------------------------------ outras telas */
.atd-pag { max-width: 1100px; }
.atd-pag code { background: var(--papel-2); border-radius: 4px; padding: 1px 5px; font-family: var(--mono); font-size: 12.5px; }
.atd-pag-lista { display: flex; flex-direction: column; gap: 8px; margin-top: 14px; }
.atd-tarefa-l, .atd-resp { display: flex; align-items: center; gap: 12px; padding: 13px 15px; background: var(--branco); border: 1px solid var(--linha); border-radius: var(--raio); }
.atd-tarefa-l > div, .atd-resp > div { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.atd-tarefa-l b { font-size: 14.5px; font-weight: 600; }
.atd-tarefa-l span { font-size: 12.5px; color: var(--fraco); }
.atd-tarefa-l span i { font-style: normal; }
.atd-tarefa-l .desc { color: var(--texto); }
.atd-tarefa-l input { width: 18px; height: 18px; accent-color: var(--azul); flex-shrink: 0; }
.atd-tarefa-l.feita b { text-decoration: line-through; color: var(--apagado); }
.atd-resp b { font-family: var(--mono); font-size: 14px; color: var(--cota); }
.atd-resp span { font-size: 13px; font-weight: 600; }
.atd-resp p { margin: 2px 0 0; font-size: 13.5px; color: var(--fraco); white-space: pre-wrap; }
.atd-cal-nav { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin: 14px 0 10px; }
.atd-cal-nav b { font-size: 14px; min-width: 160px; text-align: center; }
.atd-cal { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 8px; }
.atd-cal-dia { min-height: 240px; background: var(--branco); border: 1px solid var(--linha); border-radius: var(--raio); padding: 10px; display: flex; flex-direction: column; gap: 6px; }
.atd-cal-dia.hoje { border-color: var(--cota); box-shadow: inset 0 3px 0 var(--cota); }
.atd-cal-dia .cab { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 4px; }
.atd-cal-dia .cab span { font-size: 12px; color: var(--fraco); text-transform: capitalize; }
.atd-cal-dia .cab b { font-family: var(--serifa); font-size: 22px; }
.atd-cal-item { display: flex; flex-direction: column; gap: 1px; padding: 6px 8px; border-radius: var(--raio-p); background: var(--papel); border-left: 3px solid var(--apagado); }
.atd-cal-item[data-abrir] { cursor: pointer; }
.atd-cal-item.retorno { background: var(--cota-fraca); border-left-color: var(--cota); }
.atd-cal-item.feito { opacity: .55; }
.atd-cal-item i { font-style: normal; font-size: 11.5px; font-weight: 700; font-family: var(--mono); }
.atd-cal-item b { font-size: 12.5px; line-height: 1.3; font-weight: 600; }
.atd-cal-item span { font-size: 11.5px; color: var(--fraco); }
.atd-kpi-sub { display: block; font-size: 11.5px; color: var(--apagado); margin-top: 2px; }
.atd-term { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 10px; margin: 10px 0 8px; }
.atd-term-item { display: flex; flex-direction: column; gap: 3px; text-align: left; cursor: pointer; border: 1px solid var(--linha); border-radius: var(--raio); background: var(--branco); padding: 10px 12px; font: inherit; }
.atd-term-item:hover { border-color: var(--azul); }
.atd-term-item .k { font-size: 12px; font-weight: 600; color: var(--fraco); display: flex; align-items: center; gap: 6px; }
.atd-term-item .k i { width: 9px; height: 9px; border-radius: 99px; display: inline-block; }
.atd-term-item b { font-family: var(--serifa); font-size: 26px; line-height: 1.05; }
.atd-term-item .barra { height: 4px; border-radius: 99px; background: var(--papel-2); overflow: hidden; }
.atd-term-item .barra span { display: block; height: 100%; }
.atd-term-item .d { font-size: 11px; color: var(--apagado); }
.atd-linha-estado { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 14px; }
.atd-linha-estado .pilula { font-size: 13px; padding: 4px 12px; }
.atd-dupla-btn { display: flex; gap: 8px; }
.atd-dupla-btn input { flex: 1; min-width: 0; }
.atd-qr { display: flex; gap: 16px; align-items: flex-start; flex-wrap: wrap; margin-top: 6px; padding: 14px; border: 1px dashed var(--linha-2); border-radius: var(--raio); background: #fff; }
.atd-qr img { width: 220px; height: 220px; image-rendering: pixelated; }
.atd-qr p { flex: 1; min-width: 180px; margin: 0 0 8px; font-size: 13.5px; }
.atd-passos { margin: 0 0 14px; padding-left: 20px; display: grid; gap: 6px; font-size: 13.5px; }
.atd-prazos { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 0 12px; }
.atd-prazos .campo label { font-size: 12.5px; font-weight: 600; }

/* ------------------------------------------------------------- telas menores */
@media (max-width: 1280px) {
  .atd-ws { grid-template-columns: minmax(280px, 340px) minmax(0, 1fr); }
  .atd-col-detalhes { display: none; }
  .atd-ws.detalhes-abertos .atd-col-detalhes { display: flex; position: fixed; right: 0; top: 0; bottom: 0; width: min(360px, 100vw); z-index: 45; box-shadow: -12px 0 32px rgba(22,32,43,.18); }
  .atd-det-fechar { display: inline-flex; }
}
@media (max-width: 1000px) {
  .atd-cal { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 820px) {
  body.atd-cheio .topo { padding: 10px 12px; }
  body.atd-cheio .topo h1 { font-size: 20px; }
  .atd-ws { grid-template-columns: 1fr; }
  .atd-col-conversa { display: none; }
  .atd-ws.com-conversa .atd-col-lista { display: none; }
  .atd-ws.com-conversa .atd-col-conversa { display: flex; }
  .atd-voltar { display: inline-flex; }
  .atd-lista-topo { padding: 12px; }
  .atd-conv-topo { padding: 10px 12px; gap: 8px; }
  .atd-conv-topo > .atd-av { display: none; }
  .atd-conv-quem { min-width: 0; }
  .atd-conv-quem h3 { font-size: 16px; }
  .atd-conv-acoes { width: 100%; }
  .atd-conv-acoes .atd-btn { flex: 1; justify-content: center; }
  .atd-msg2, .atd-nota { max-width: 92%; }
  .atd-conv-corpo { padding: 12px; }
  .atd-comp, .atd-barra-fim { margin: 0 8px 8px; }
  .atd-comp-caixa textarea { min-height: 52px; }
  .atd-comp .some-cel { display: none; }
  .atd-cal { grid-template-columns: 1fr; }
  .atd-cal-dia { min-height: 0; }
  .atd-tarefa-l { flex-wrap: wrap; }
}

/* WhatsApp oficial (28/09/2026): tiques da Meta, mensagem que não chegou,
   aviso da janela de 24 horas e a prévia do modelo aprovado. */
.atd-msg2-bolha .tique { font-style: normal; color: var(--apagado); letter-spacing: -2px; }
.atd-msg2-bolha .tique.falhou { letter-spacing: 0; padding: 0 5px; border-radius: 99px; background: #b23a2a; color: #fff; font-weight: 700; }
.atd-msg2.falhou .atd-msg2-bolha { border-color: #e6b5ad; }
.atd-msg2-erro { font-size: 12px; color: #9b2c22; }
.atd-janela-fechada { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.atd-janela-fechada span { flex: 1 1 240px; }
.atd-modelo-previa { white-space: pre-wrap; padding: 10px 12px; border-radius: var(--raio-p); background: #eaf4ea; border: 1px solid #cfe3cf; font-size: 13.5px; line-height: 1.45; min-height: 44px; }