/* ds-whatsapp — o canal WhatsApp do Atendimento com a cara do WhatsApp Web.
 *
 * 23/set/2026, pedido do Matheus: "o mais parecido possível com o visual do
 * WhatsApp". O time passa o dia no WhatsApp; a tela do CRM falando a mesma
 * língua visual (balão verde = meu, branco = do cliente, hora no canto do
 * balão, separador de dia) tira o estranhamento de responder "fora" dele.
 *
 * Escopo: SÓ o canal WhatsApp. O console põe `.canal-wa` no #atd-shell quando
 * a aba WhatsApp está aberta (selecionarCanalAtendimento); o Instagram segue
 * com o visual de antes. Todo seletor começa em `#pg-atendimento
 * .atd-shell.canal-wa` — o id garante que vence o legado do console.html, o
 * ds-advanced (textarea com (0,1,1)) e o ds-dark ((0,2,0)).
 *
 * O desenho do fundo é nosso, não do WhatsApp: ícones de viagem da Lucide
 * (licença ISC) em traço bem apagado, num ladrilho SVG em data: — a CSP já
 * libera `img-src data:`. Não usar arte do WhatsApp aqui.
 *
 * Tema escuro: as mesmas peças com as cores do WhatsApp escuro, sob .ds-dark.
 * Para desligar a camada inteira: tirar o <link> do console.html.
 */

#pg-atendimento .atd-shell.canal-wa {
  --wa-fundo: #efeae2;
  --wa-ladrilho: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%22300%22 height=%22330%22 viewBox=%220 0 300 330%22 fill=%22none%22 stroke=%22%234a5a52%22 stroke-opacity=%22.13%22 stroke-width=%221.3%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cg transform=%22translate%2822 26%29 rotate%28-18 12 12%29 scale%281.35%29%22%3E%3Cpath d=%22M17.8 19.2 16 11l3.5-3.5C21 6 21.5 4 21 3c-1-.5-3 0-4.5 1.5L13 8 4.8 6.2c-.5-.1-.9.1-1.1.5l-.3.5c-.2.5-.1 1 .3 1.3L9 12l-2 3H4l-1 1 3 2 2 3 1-1v-3l3-2 3.5 5.3c.3.4.8.5 1.3.3l.5-.2c.4-.3.6-.7.5-1.2z%22/%3E%3C/g%3E%3Cg transform=%22translate%28150 18%29 rotate%288 12 12%29 scale%281.35%29%22%3E%3Cpath d=%22M13 8c0-2.76-2.46-5-5.5-5S2 5.24 2 8h2l1-1 1 1h4%22/%3E%3Cpath d=%22M13 7.14A5.82 5.82 0 0 1 16.5 6c3.04 0 5.5 2.24 5.5 5h-3l-1-1-1 1h-3%22/%3E%3Cpath d=%22M5.89 9.71c-2.15 2.15-2.3 5.47-.35 7.43l4.24-4.25.7-.7.71-.71 2.12-2.12c-1.95-1.96-5.27-1.8-7.42.35%22/%3E%3Cpath d=%22M11 15.5c.5 2.5-.17 4.5-1 6.5h4c2-5.5-.5-12-1-14%22/%3E%3C/g%3E%3Cg transform=%22translate%28250 70%29 rotate%280 12 12%29 scale%281.35%29%22%3E%3Ccircle cx=%2212%22 cy=%2212%22 r=%2210%22/%3E%3Cpath d=%22M12 2a14.5 14.5 0 0 0 0 20 14.5 14.5 0 0 0 0-20%22/%3E%3Cpath d=%22M2 12h20%22/%3E%3C/g%3E%3Cg transform=%22translate%2880 112%29 rotate%28-10 12 12%29 scale%281.35%29%22%3E%3Cpath d=%22M6 20a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h12a2 2 0 0 1 2 2v10a2 2 0 0 1-2 2%22/%3E%3Cpath d=%22M8 18V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v14%22/%3E%3Cpath d=%22M10 20h4%22/%3E%3Ccircle cx=%2216%22 cy=%2220%22 r=%222%22/%3E%3Ccircle cx=%228%22 cy=%2220%22 r=%222%22/%3E%3C/g%3E%3Cg transform=%22translate%28190 140%29 rotate%2824 12 12%29 scale%281.35%29%22%3E%3Cpath d=%22M2 9a3 3 0 0 1 0 6v2a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2v-2a3 3 0 0 1 0-6V7a2 2 0 0 0-2-2H4a2 2 0 0 0-2 2Z%22/%3E%3Cpath d=%22M13 5v2M13 17v2M13 11v2%22/%3E%3C/g%3E%3Cg transform=%22translate%2820 210%29 rotate%2812 12 12%29 scale%281.35%29%22%3E%3Cpath d=%22M14.5 4h-5L7 7H4a2 2 0 0 0-2 2v9a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2V9a2 2 0 0 0-2-2h-3l-2.5-3z%22/%3E%3Ccircle cx=%2212%22 cy=%2213%22 r=%223%22/%3E%3C/g%3E%3Cg transform=%22translate%28120 220%29 rotate%280 12 12%29 scale%281.35%29%22%3E%3Ccircle cx=%2212%22 cy=%2212%22 r=%224%22/%3E%3Cpath d=%22M12 2v2M12 20v2M4.93 4.93l1.41 1.41M17.66 17.66l1.41 1.41M2 12h2M20 12h2M6.34 17.66l-1.41 1.41M19.07 4.93l-1.41 1.41%22/%3E%3C/g%3E%3Cg transform=%22translate%28250 215%29 rotate%28-8 12 12%29 scale%281.35%29%22%3E%3Cpath d=%22M20 10c0 4.993-5.539 10.193-7.399 11.799a1 1 0 0 1-1.202 0C9.539 20.193 4 14.993 4 10a8 8 0 0 1 16 0%22/%3E%3Ccircle cx=%2212%22 cy=%2210%22 r=%223%22/%3E%3C/g%3E%3Cg transform=%22translate%28170 265%29 rotate%280 12 12%29 scale%281.35%29%22%3E%3Ccircle cx=%2212%22 cy=%2212%22 r=%2210%22/%3E%3Cpath d=%22m16.24 7.76-1.804 5.411a2 2 0 0 1-1.265 1.265L7.76 16.24l1.804-5.411a2 2 0 0 1 1.265-1.265z%22/%3E%3C/g%3E%3Cg transform=%22translate%2860 298%29 rotate%28160 12 12%29 scale%281.35%29%22%3E%3Cpath d=%22M17.8 19.2 16 11l3.5-3.5C21 6 21.5 4 21 3c-1-.5-3 0-4.5 1.5L13 8 4.8 6.2c-.5-.1-.9.1-1.1.5l-.3.5c-.2.5-.1 1 .3 1.3L9 12l-2 3H4l-1 1 3 2 2 3 1-1v-3l3-2 3.5 5.3c.3.4.8.5 1.3.3l.5-.2c.4-.3.6-.7.5-1.2z%22/%3E%3C/g%3E%3C/svg%3E");
  --wa-painel: #f0f2f5;
  --wa-lista: #ffffff;
  --wa-linha: #e9edef;
  --wa-texto: #111b21;
  --wa-sec: #667781;
  --wa-icone: #54656f;
  --wa-entra: #ffffff;
  --wa-sai: #d9fdd3;
  --wa-verde: #00a884;
  --wa-verde-vivo: #25d366;
  --wa-verde-hora: #1fa855;
  --wa-hover: #f5f6f6;
  --wa-ativo: #f0f2f5;
  --wa-input: #ffffff;
  --wa-hora: #667781;
  --wa-data: #ffffff;
  --wa-sistema: #ffeecd;
  --wa-sistema-texto: #54656f;
  --wa-avatar: #dfe5e7;
  --wa-avatar-texto: #54656f;
  --wa-sombra: 0 1px .5px rgba(11, 20, 26, .13);
  --wa-anexo: rgba(11, 20, 26, .05);
  border-color: var(--wa-linha);
  border-radius: 10px;
  background: var(--wa-lista);
  color: var(--wa-texto);
}

.ds-dark #pg-atendimento .atd-shell.canal-wa {
  --wa-fundo: #0b141a;
  --wa-ladrilho: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%22300%22 height=%22330%22 viewBox=%220 0 300 330%22 fill=%22none%22 stroke=%22%23ffffff%22 stroke-opacity=%22.055%22 stroke-width=%221.3%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cg transform=%22translate%2822 26%29 rotate%28-18 12 12%29 scale%281.35%29%22%3E%3Cpath d=%22M17.8 19.2 16 11l3.5-3.5C21 6 21.5 4 21 3c-1-.5-3 0-4.5 1.5L13 8 4.8 6.2c-.5-.1-.9.1-1.1.5l-.3.5c-.2.5-.1 1 .3 1.3L9 12l-2 3H4l-1 1 3 2 2 3 1-1v-3l3-2 3.5 5.3c.3.4.8.5 1.3.3l.5-.2c.4-.3.6-.7.5-1.2z%22/%3E%3C/g%3E%3Cg transform=%22translate%28150 18%29 rotate%288 12 12%29 scale%281.35%29%22%3E%3Cpath d=%22M13 8c0-2.76-2.46-5-5.5-5S2 5.24 2 8h2l1-1 1 1h4%22/%3E%3Cpath d=%22M13 7.14A5.82 5.82 0 0 1 16.5 6c3.04 0 5.5 2.24 5.5 5h-3l-1-1-1 1h-3%22/%3E%3Cpath d=%22M5.89 9.71c-2.15 2.15-2.3 5.47-.35 7.43l4.24-4.25.7-.7.71-.71 2.12-2.12c-1.95-1.96-5.27-1.8-7.42.35%22/%3E%3Cpath d=%22M11 15.5c.5 2.5-.17 4.5-1 6.5h4c2-5.5-.5-12-1-14%22/%3E%3C/g%3E%3Cg transform=%22translate%28250 70%29 rotate%280 12 12%29 scale%281.35%29%22%3E%3Ccircle cx=%2212%22 cy=%2212%22 r=%2210%22/%3E%3Cpath d=%22M12 2a14.5 14.5 0 0 0 0 20 14.5 14.5 0 0 0 0-20%22/%3E%3Cpath d=%22M2 12h20%22/%3E%3C/g%3E%3Cg transform=%22translate%2880 112%29 rotate%28-10 12 12%29 scale%281.35%29%22%3E%3Cpath d=%22M6 20a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h12a2 2 0 0 1 2 2v10a2 2 0 0 1-2 2%22/%3E%3Cpath d=%22M8 18V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v14%22/%3E%3Cpath d=%22M10 20h4%22/%3E%3Ccircle cx=%2216%22 cy=%2220%22 r=%222%22/%3E%3Ccircle cx=%228%22 cy=%2220%22 r=%222%22/%3E%3C/g%3E%3Cg transform=%22translate%28190 140%29 rotate%2824 12 12%29 scale%281.35%29%22%3E%3Cpath d=%22M2 9a3 3 0 0 1 0 6v2a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2v-2a3 3 0 0 1 0-6V7a2 2 0 0 0-2-2H4a2 2 0 0 0-2 2Z%22/%3E%3Cpath d=%22M13 5v2M13 17v2M13 11v2%22/%3E%3C/g%3E%3Cg transform=%22translate%2820 210%29 rotate%2812 12 12%29 scale%281.35%29%22%3E%3Cpath d=%22M14.5 4h-5L7 7H4a2 2 0 0 0-2 2v9a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2V9a2 2 0 0 0-2-2h-3l-2.5-3z%22/%3E%3Ccircle cx=%2212%22 cy=%2213%22 r=%223%22/%3E%3C/g%3E%3Cg transform=%22translate%28120 220%29 rotate%280 12 12%29 scale%281.35%29%22%3E%3Ccircle cx=%2212%22 cy=%2212%22 r=%224%22/%3E%3Cpath d=%22M12 2v2M12 20v2M4.93 4.93l1.41 1.41M17.66 17.66l1.41 1.41M2 12h2M20 12h2M6.34 17.66l-1.41 1.41M19.07 4.93l-1.41 1.41%22/%3E%3C/g%3E%3Cg transform=%22translate%28250 215%29 rotate%28-8 12 12%29 scale%281.35%29%22%3E%3Cpath d=%22M20 10c0 4.993-5.539 10.193-7.399 11.799a1 1 0 0 1-1.202 0C9.539 20.193 4 14.993 4 10a8 8 0 0 1 16 0%22/%3E%3Ccircle cx=%2212%22 cy=%2210%22 r=%223%22/%3E%3C/g%3E%3Cg transform=%22translate%28170 265%29 rotate%280 12 12%29 scale%281.35%29%22%3E%3Ccircle cx=%2212%22 cy=%2212%22 r=%2210%22/%3E%3Cpath d=%22m16.24 7.76-1.804 5.411a2 2 0 0 1-1.265 1.265L7.76 16.24l1.804-5.411a2 2 0 0 1 1.265-1.265z%22/%3E%3C/g%3E%3Cg transform=%22translate%2860 298%29 rotate%28160 12 12%29 scale%281.35%29%22%3E%3Cpath d=%22M17.8 19.2 16 11l3.5-3.5C21 6 21.5 4 21 3c-1-.5-3 0-4.5 1.5L13 8 4.8 6.2c-.5-.1-.9.1-1.1.5l-.3.5c-.2.5-.1 1 .3 1.3L9 12l-2 3H4l-1 1 3 2 2 3 1-1v-3l3-2 3.5 5.3c.3.4.8.5 1.3.3l.5-.2c.4-.3.6-.7.5-1.2z%22/%3E%3C/g%3E%3C/svg%3E");
  --wa-painel: #202c33;
  --wa-lista: #111b21;
  --wa-linha: #222d34;
  --wa-texto: #e9edef;
  --wa-sec: #8696a0;
  --wa-icone: #aebac1;
  --wa-entra: #202c33;
  --wa-sai: #005c4b;
  --wa-verde-hora: #00a884;
  --wa-hover: #202c33;
  --wa-ativo: #2a3942;
  --wa-input: #2a3942;
  --wa-hora: rgba(233, 237, 239, .6);
  --wa-data: #182229;
  --wa-sistema: #182229;
  --wa-sistema-texto: #ffd279;
  --wa-avatar: #6b7c85;
  --wa-avatar-texto: #e9edef;
  --wa-sombra: 0 1px .5px rgba(0, 0, 0, .25);
  --wa-anexo: rgba(255, 255, 255, .06);
}

/* ── Lista de conversas ─────────────────────────────────────────────── */

#pg-atendimento .atd-shell.canal-wa .atd-lista {
  background: var(--wa-lista);
  border-right: 1px solid var(--wa-linha);
}
#pg-atendimento .atd-shell.canal-wa .atd-lista-topo {
  padding: 14px 16px 10px;
  border-bottom: 0;
  background: var(--wa-lista);
}
#pg-atendimento .atd-shell.canal-wa .atd-lista-topo strong {
  color: var(--wa-texto);
  font-size: 21px;
  font-weight: 700;
  letter-spacing: -.01em;
}
#pg-atendimento .atd-shell.canal-wa .atd-lista-topo small { color: var(--wa-sec); }
#pg-atendimento .atd-shell.canal-wa .atd-lista-topo .icone-btn {
  border-color: transparent;
  background: transparent;
  color: var(--wa-icone);
}
#pg-atendimento .atd-shell.canal-wa .atd-lista-topo .icone-btn:hover { background: var(--wa-ativo); }

#pg-atendimento .atd-shell.canal-wa .atd-busca {
  min-height: 0;
  margin: 0 12px 8px;
  padding: 0 12px;
  gap: 12px;
  border: 0;
  border-radius: 8px;
  background: var(--wa-painel);
}
#pg-atendimento .atd-shell.canal-wa .atd-busca svg { stroke: var(--wa-icone); width: 16px; height: 16px; flex-basis: 16px; }
#pg-atendimento .atd-shell.canal-wa .atd-busca input {
  height: 36px;
  min-height: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  background: transparent;
  color: var(--wa-texto);
  font-size: 14px;
}
#pg-atendimento .atd-shell.canal-wa .atd-busca input::placeholder { color: var(--wa-sec); }
#pg-atendimento .atd-shell.canal-wa .atd-busca input:focus { outline: none; box-shadow: none; }

#pg-atendimento .atd-shell.canal-wa .atd-lista .chat-canal {
  min-height: 72px;
  grid-template-columns: 49px minmax(0, 1fr);
  gap: 14px;
  align-items: center;
  padding: 0 0 0 13px;
  border: 0;
  background: transparent;
  cursor: pointer;
}
#pg-atendimento .atd-shell.canal-wa .atd-lista .chat-canal:hover { background: var(--wa-hover); }
#pg-atendimento .atd-shell.canal-wa .atd-lista .chat-canal.ativo { background: var(--wa-ativo); }
/* a linha divisória começa depois da foto, como no WhatsApp */
#pg-atendimento .atd-shell.canal-wa .atd-item-corpo {
  align-self: stretch;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 2px;
  padding: 0 15px 0 0;
  border-bottom: 1px solid var(--wa-linha);
}
#pg-atendimento .atd-shell.canal-wa .chat-canal:hover .atd-item-corpo,
#pg-atendimento .atd-shell.canal-wa .chat-canal.ativo .atd-item-corpo { border-bottom-color: transparent; }
#pg-atendimento .atd-shell.canal-wa .atd-avatar {
  width: 49px;
  height: 49px;
  background: var(--wa-avatar);
  color: var(--wa-avatar-texto);
  font-size: 17px;
  font-weight: 600;
}
#pg-atendimento .atd-shell.canal-wa .atd-item-linha b {
  color: var(--wa-texto);
  font-size: 16px;
  font-weight: 500;
}
#pg-atendimento .atd-shell.canal-wa .atd-item-hora { color: var(--wa-sec); font-size: 12px; }
#pg-atendimento .atd-shell.canal-wa .tem-nao-lidas .atd-item-hora { color: var(--wa-verde-hora); font-weight: 600; }
#pg-atendimento .atd-shell.canal-wa .atd-item-previa { color: var(--wa-sec); font-size: 14px; }
#pg-atendimento .atd-shell.canal-wa .tem-nao-lidas .atd-item-previa > span:first-child { color: var(--wa-texto); }
#pg-atendimento .atd-shell.canal-wa .chat-badge {
  min-width: 20px;
  height: 20px;
  display: inline-grid;
  place-items: center;
  padding: 0 6px;
  border-radius: 10px;
  background: var(--wa-verde-vivo);
  color: #fff;
  font-size: 12px;
  font-weight: 600;
  line-height: 1;
}
.ds-dark #pg-atendimento .atd-shell.canal-wa .chat-badge { color: #111b21; }
#pg-atendimento .atd-shell.canal-wa .atd-lista .vazio { color: var(--wa-sec); }

/* ── Conversa aberta ────────────────────────────────────────────────── */

#pg-atendimento .atd-shell.canal-wa .atd-chat,
#pg-atendimento .atd-shell.canal-wa .atd-chat .chat-painel { background: var(--wa-fundo); }

#pg-atendimento .atd-shell.canal-wa .chat-topo-conversa {
  min-height: 60px;
  padding: 10px 16px;
  border-bottom: 1px solid var(--wa-linha);
  background: var(--wa-painel);
}
#pg-atendimento .atd-shell.canal-wa .chat-topo-conversa .atd-avatar { width: 40px; height: 40px; font-size: 15px; }
#pg-atendimento .atd-shell.canal-wa .atd-topo-identidade b { color: var(--wa-texto); font-size: 16px; font-weight: 500; }
#pg-atendimento .atd-shell.canal-wa .atd-topo-identidade small { color: var(--wa-sec); font-size: 13px; }
#pg-atendimento .atd-shell.canal-wa .chat-topo-conversa .icone-btn {
  border-color: transparent;
  background: transparent;
  color: var(--wa-icone);
}
#pg-atendimento .atd-shell.canal-wa .chat-topo-conversa .icone-btn:hover { background: rgba(11, 20, 26, .06); }

#pg-atendimento .atd-shell.canal-wa .chat-msgs {
  gap: 2px;
  padding: 14px max(5%, calc((100% - 900px) / 2)) 10px;
  background-color: var(--wa-fundo);
  background-image: var(--wa-ladrilho);
  background-size: 300px 330px;
  scrollbar-width: thin;
  scrollbar-color: rgba(128, 128, 128, .35) transparent;
}

/* separador de dia: "Hoje", "Ontem", "segunda-feira", "12/09/2026" */
#pg-atendimento .atd-shell.canal-wa .wa-dia {
  align-self: center;
  margin: 10px 0 8px;
}
#pg-atendimento .atd-shell.canal-wa .wa-dia span {
  display: inline-block;
  padding: 5px 12px 6px;
  border-radius: 7.5px;
  background: var(--wa-data);
  color: var(--wa-sec);
  box-shadow: var(--wa-sombra);
  font-size: 12.5px;
}

/* balão */
#pg-atendimento .atd-shell.canal-wa .chat-msg {
  position: relative;
  align-self: flex-start;
  max-width: min(65%, 560px);
  min-width: 64px;
  padding: 6px 7px 8px 9px;
  border: 0;
  border-radius: 7.5px;
  background: var(--wa-entra);
  color: var(--wa-texto);
  box-shadow: var(--wa-sombra);
  font-size: 14.2px;
  line-height: 19px;
}
#pg-atendimento .atd-shell.canal-wa .chat-msg.minha {
  align-self: flex-end;
  background: var(--rem-fundo, var(--wa-sai));
}
/* o "rabinho" só no primeiro balão de cada sequência, como no WhatsApp */
#pg-atendimento .atd-shell.canal-wa .chat-msg.cauda { margin-top: 8px; border-top-left-radius: 0; }
#pg-atendimento .atd-shell.canal-wa .chat-msg.minha.cauda { border-top-left-radius: 7.5px; border-top-right-radius: 0; }
#pg-atendimento .atd-shell.canal-wa .wa-dia + .chat-msg.cauda { margin-top: 0; }
#pg-atendimento .atd-shell.canal-wa .chat-msg.cauda::before {
  content: "";
  position: absolute;
  top: 0;
  left: -8px;
  width: 8px;
  height: 13px;
  background: var(--wa-entra);
  clip-path: polygon(0 0, 100% 0, 100% 100%);
}
#pg-atendimento .atd-shell.canal-wa .chat-msg.minha.cauda::before {
  left: auto;
  right: -8px;
  background: var(--rem-fundo, var(--wa-sai));
  clip-path: polygon(0 0, 100% 0, 0 100%);
}

/* quem respondeu (o WhatsApp não mostra, mas o time precisa saber) */
#pg-atendimento .atd-shell.canal-wa .chat-msg .autor {
  margin: 0 0 1px;
  color: var(--rem-cor, var(--wa-verde-hora));
  font-size: 12.8px;
  font-weight: 500;
  line-height: 18px;
}
#pg-atendimento .atd-shell.canal-wa .chat-msg .autor.celular {
  color: var(--rem-cor, var(--wa-sec));
  font-style: italic;
  opacity: 1;
}
#pg-atendimento .atd-shell.canal-wa .wa-meta svg.lida { color: #53bdeb; }
#pg-atendimento .atd-shell.canal-wa .wa-meta .falhou {
  color: #e5484d;
  font-weight: 700;
}

/* hora + ✓ no canto de baixo, na mesma linha do texto quando cabe */
#pg-atendimento .atd-shell.canal-wa .chat-msg .wa-texto { white-space: pre-wrap; }
#pg-atendimento .atd-shell.canal-wa .wa-meta {
  float: right;
  position: relative;
  top: 6px;
  display: inline-flex;
  align-items: center;
  gap: 3px;
  margin: 0 0 -4px 10px;
  color: var(--wa-hora);
  font-size: 11px;
  line-height: 15px;
  white-space: nowrap;
}
#pg-atendimento .atd-shell.canal-wa .wa-meta svg { width: 16px; height: 11px; }
#pg-atendimento .atd-shell.canal-wa .wa-so-meta { display: flow-root; min-height: 10px; }

/* mídia */
#pg-atendimento .atd-shell.canal-wa .chat-msg .chat-midia { margin: -3px -4px 5px -6px; }
#pg-atendimento .atd-shell.canal-wa .chat-msg .chat-midia img {
  max-width: min(330px, 100%);
  max-height: 340px;
  border-radius: 6px;
}
#pg-atendimento .atd-shell.canal-wa .chat-msg .chat-anexo {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 5px;
  padding: 10px 12px;
  border-radius: 6px;
  background: var(--wa-anexo);
  color: var(--wa-texto);
  font-weight: 500;
  text-decoration: none;
}
#pg-atendimento .atd-shell.canal-wa .chat-msg .chat-anexo::before {
  content: "";
  width: 28px;
  height: 28px;
  flex: 0 0 28px;
  border-radius: 50%;
  background: var(--wa-verde) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23fff'%3E%3Cpath d='M8 5v14l11-7z'/%3E%3C/svg%3E") center / 16px no-repeat;
}
#pg-atendimento .atd-shell.canal-wa .chat-msg .chat-anexo:hover { text-decoration: underline; }

#pg-atendimento .atd-shell.canal-wa .chat-vazio { color: var(--wa-sec); }

/* avisos do canal viram "mensagem do sistema" amarela */
#pg-atendimento .atd-shell.canal-wa .atd-janela {
  margin: 0;
  padding: 7px 14px;
  border: 0;
  border-radius: 0;
  background: var(--wa-sistema);
  color: var(--wa-sistema-texto);
  font-size: 12.5px;
  text-align: center;
}

/* ── Campo de escrever ─────────────────────────────────────────────── */

#pg-atendimento .atd-shell.canal-wa .chat-input {
  min-height: 62px;
  align-items: flex-end;
  gap: 8px;
  padding: 10px max(14px, calc((100% - 960px) / 2));
  border-top: 0;
  background: var(--wa-painel);
}
#pg-atendimento .atd-shell.canal-wa .chat-input textarea {
  height: 42px;
  min-height: 42px;
  padding: 10px 14px;
  border: 0;
  border-radius: 8px;
  background: var(--wa-input);
  color: var(--wa-texto);
  box-shadow: none;
  font-size: 15px;
  line-height: 22px;
}
#pg-atendimento .atd-shell.canal-wa .chat-input textarea:focus { outline: none; box-shadow: none; }
#pg-atendimento .atd-shell.canal-wa .chat-input textarea::placeholder { color: var(--wa-sec); }
#pg-atendimento .atd-shell.canal-wa .atd-emoji-btn {
  width: 42px;
  height: 42px;
  flex-basis: 42px;
  border: 0;
  background: transparent;
  font-size: 22px;
}
#pg-atendimento .atd-shell.canal-wa .atd-emoji-btn:hover { background: rgba(11, 20, 26, .06); }
#pg-atendimento .atd-shell.canal-wa .atd-enviar {
  width: 42px;
  height: 42px;
  flex-basis: 42px;
  background: var(--wa-verde);
  color: #fff;
  box-shadow: none;
}
#pg-atendimento .atd-shell.canal-wa .atd-enviar:hover:not(:disabled) { filter: brightness(1.06); }
#pg-atendimento .atd-shell.canal-wa .atd-enviar:disabled {
  background: transparent;
  color: var(--wa-icone);
  opacity: .5;
}

/* ── Tela de boas-vindas (nenhuma conversa aberta) ──────────────────── */

#pg-atendimento .atd-shell.canal-wa #wa-painel > .atd-boas-vindas {
  height: 100%;
  display: grid;
  align-content: center;
  justify-items: center;
  gap: 10px;
  border-bottom: 6px solid var(--wa-verde-vivo);
  background: var(--wa-painel);
  color: var(--wa-sec);
  text-align: center;
}
#pg-atendimento .atd-shell.canal-wa #wa-painel > .atd-boas-vindas::before {
  content: "";
  width: 84px;
  height: 84px;
  margin-bottom: 8px;
  border-radius: 50%;
  background: var(--wa-verde-vivo) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7.9 20A9 9 0 1 0 4 16.1L2 22Z'/%3E%3Cpath d='M9 10h.01M12 10h.01M15 10h.01'/%3E%3C/svg%3E") center / 42px no-repeat;
}
#pg-atendimento .atd-shell.canal-wa #wa-painel > .atd-boas-vindas b {
  color: var(--wa-texto);
  font-size: 28px;
  font-weight: 300;
}

/* ── Painel de contexto ao lado ─────────────────────────────────────── */

#pg-atendimento .atd-shell.canal-wa .atd-contexto {
  border-left: 1px solid var(--wa-linha);
  background: var(--wa-lista);
}
#pg-atendimento .atd-shell.canal-wa .atd-contexto-topo {
  min-height: 60px;
  background: var(--wa-painel);
  border-bottom: 1px solid var(--wa-linha);
}

/* ── Aba do canal, fora do shell ────────────────────────────────────── */

#pg-atendimento #atd-tab-whatsapp .atd-canal-icone {
  background: var(--wa-verde-vivo, #25d366);
  color: #fff;
}
#pg-atendimento #atd-tab-whatsapp .atd-canal-icone svg { width: 14px; height: 14px; }
#pg-atendimento #atd-nao-lidas-wa { background: #25d366; }

@media (max-width: 780px) {
  #pg-atendimento .atd-shell.canal-wa .chat-msg { max-width: 85%; }
  #pg-atendimento .atd-shell.canal-wa .chat-msgs { padding: 10px 14px; }
  #pg-atendimento .atd-shell.canal-wa .chat-input { padding: 8px; }
}

/* ── Uma cor por remetente (23/set) ─────────────────────────────────────
 * A lógica é a do próprio WhatsApp: VERDE = EU. Quem está logado vê as
 * próprias mensagens verdes; cada colega tem uma cor fixa, tirada do id
 * dele (a mesma em qualquer conversa, nos dois canais e nos três sistemas);
 * resposta dada direto no celular fica cinza e a Cláudia fica roxa. O cliente
 * continua branco. As classes vêm de classeRemetenteAtd() no console.
 * Contraste conferido: nome ≥ 4.8:1 e texto ≥ 6.7:1 sobre o próprio balão,
 * nos dois temas. Vale fora do .canal-wa também (balões do Instagram).
 */
#pg-atendimento .rem-eu { --rem-fundo: #d9fdd3; --rem-cor: #107a3e; }
#pg-atendimento .rem-1 { --rem-fundo: #dcebff; --rem-cor: #1a5fb4; }
#pg-atendimento .rem-2 { --rem-fundo: #ffe8d6; --rem-cor: #a8450a; }
#pg-atendimento .rem-3 { --rem-fundo: #ffe0ec; --rem-cor: #ad1457; }
#pg-atendimento .rem-4 { --rem-fundo: #d3f4f4; --rem-cor: #0b6b73; }
#pg-atendimento .rem-5 { --rem-fundo: #eef5cf; --rem-cor: #556306; }
#pg-atendimento .rem-6 { --rem-fundo: #f3e6d8; --rem-cor: #7a4e22; }
#pg-atendimento .rem-7 { --rem-fundo: #e4e8ff; --rem-cor: #3949ab; }
#pg-atendimento .rem-celular { --rem-fundo: #e9edef; --rem-cor: #4a5a63; }
#pg-atendimento .rem-ia { --rem-fundo: #ece4ff; --rem-cor: #6a3fc8; }

.ds-dark #pg-atendimento .rem-eu { --rem-fundo: #005c4b; --rem-cor: #7ee2a8; }
.ds-dark #pg-atendimento .rem-1 { --rem-fundo: #1d3f66; --rem-cor: #9ccbff; }
.ds-dark #pg-atendimento .rem-2 { --rem-fundo: #5c3514; --rem-cor: #ffc08f; }
.ds-dark #pg-atendimento .rem-3 { --rem-fundo: #5c1f38; --rem-cor: #ffadcb; }
.ds-dark #pg-atendimento .rem-4 { --rem-fundo: #0f4a50; --rem-cor: #86e6ee; }
.ds-dark #pg-atendimento .rem-5 { --rem-fundo: #3d4710; --rem-cor: #d7e676; }
.ds-dark #pg-atendimento .rem-6 { --rem-fundo: #4a3520; --rem-cor: #e8c39a; }
.ds-dark #pg-atendimento .rem-7 { --rem-fundo: #283266; --rem-cor: #b9c0ff; }
.ds-dark #pg-atendimento .rem-celular { --rem-fundo: #2a3942; --rem-cor: #c3ccd2; }
.ds-dark #pg-atendimento .rem-ia { --rem-fundo: #3b2d66; --rem-cor: #cbb8ff; }

/* Instagram (fora do .canal-wa): só a cor do balão e do nome */
#pg-atendimento .chat-msg.minha.rem { background: var(--rem-fundo); }
#pg-atendimento .chat-msg.minha.rem .autor { color: var(--rem-cor); }