/* Aba 11 WhatsApp. Só cor, raio e sombra de base/tokens.css; peças de base/componentes.css. */
.wa-cabeca { margin-bottom: var(--s-24); max-width: 80ch; }
.wa-cabeca h1 { margin-bottom: var(--s-8); }
.wa-grade { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 440px), 1fr)); gap: var(--s-16); align-items: start; }
.wa-grade > [data-item] { margin: 0; }
.wa-bloco { display: flex; flex-direction: column; gap: var(--s-12); min-width: 0; }
.aprov { grid-column: 1 / -1; }

/* ===== Tela inteira ===== */
.wa {
  display: grid; grid-template-columns: minmax(300px, 380px) minmax(0, 1fr); height: 640px;
  background: var(--sup); border-radius: var(--raio-c); box-shadow: var(--sombra); overflow: hidden;
}
.wa-lista { display: flex; flex-direction: column; min-width: 0; min-height: 0; border-right: 1px solid var(--linha); }
.wa-lista-topo { display: flex; flex-direction: column; gap: var(--s-8); padding: var(--s-12); border-bottom: 1px solid var(--linha); }
.wa-lista-titulo { display: flex; align-items: center; justify-content: space-between; }
.wa-lista-titulo h2 { font-size: var(--t-20); }
.wa-filtros { display: flex; gap: var(--s-8); }
.wa-filtros > * { min-width: 0; }
.wa-filtros > .seg { flex: none; }
.wa-filtros > .selecao-botao { flex: 1; justify-content: space-between; }
.wa-acoes { display: flex; flex-wrap: wrap; gap: var(--s-8); }
.wa-acoes > .btn { flex: 1 1 auto; padding: 0 var(--s-8); gap: 6px; }
.wa-itens { flex: 1; min-height: 0; overflow-y: auto; padding: var(--s-8); display: flex; flex-direction: column; gap: 2px; scrollbar-color: var(--borda) transparent; }

.wa-linha {
  display: flex; gap: var(--s-12); align-items: center; width: 100%; padding: 10px var(--s-12); text-align: left;
  background: none; border: 0; border-radius: var(--raio-b); cursor: pointer; color: var(--texto);
  transition: background-color var(--dur-rapida) var(--curva);
}
.wa-linha:hover { background: var(--realce); }
.wa-linha[aria-current="true"] { background: var(--acento-claro); }
.wa-linha-corpo { display: flex; flex-direction: column; gap: 4px; min-width: 0; flex: 1; }
.wa-linha-l1, .wa-linha-l2 { display: flex; align-items: center; justify-content: space-between; gap: var(--s-8); min-width: 0; }
.wa-nome { font-size: var(--t-14); font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wa-hora-l { flex: none; font-size: var(--t-12); color: var(--fraco); font-variant-numeric: tabular-nums; }
.wa-previa { display: inline-flex; align-items: center; gap: 4px; min-width: 0; font-size: var(--t-12); color: var(--fraco); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wa-previa .ico { width: 14px; height: 14px; }
.wa-linha[data-nao-lida] .wa-nome { font-weight: 700; }
.wa-linha[data-nao-lida] .wa-hora-l { color: var(--acento-texto); font-weight: 600; }
.wa-linha[data-nao-lida] .wa-previa { color: var(--texto); }
.wa-nl { flex: none; display: inline-grid; place-items: center; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 999px; background: var(--acento); color: var(--no-acento); font: 600 var(--t-12) / 1 var(--fonte); }
.wa-digitando-previa { color: var(--acento-texto); font-weight: 600; }
.wa-linha-corpo .etiqueta, .wa-linha-corpo .selo { align-self: flex-start; }

/* ===== Conversa ===== */
.wa-conversa { display: flex; flex-direction: column; min-width: 0; min-height: 0; background: var(--wa-fundo); }
.wa-cab { display: flex; align-items: center; gap: var(--s-12); min-height: 64px; padding: var(--s-8) var(--s-16); background: var(--sup); border-bottom: 1px solid var(--linha); }
.wa-cab-id { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.wa-cab-id strong { font-size: var(--t-16); font-weight: 600; letter-spacing: -0.01em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wa-cab-id span { font-size: var(--t-12); color: var(--fraco); }
.wa-cab-acoes { display: flex; align-items: center; gap: var(--s-8); flex: none; }
.wa-voltar { display: none; }
.wa-msgs { flex: 1; min-height: 0; overflow-y: auto; padding: var(--s-16) var(--s-24); display: flex; flex-direction: column; gap: 2px; scrollbar-color: var(--borda) transparent; background: var(--wa-fundo); }
.wa-fundo-liso { background: var(--wa-fundo); }

.wa-dia { display: flex; justify-content: center; margin: var(--s-12) 0 var(--s-8); }
.wa-dia span { padding: 4px 12px; border-radius: 999px; background: var(--wa-recebida); color: var(--fraco); font: 500 var(--t-12) / 1.2 var(--fonte); box-shadow: var(--wa-sombra); font-variant-numeric: tabular-nums; }
.wa-msg { display: flex; }
.wa-msg.wa-nos { justify-content: flex-end; }
.wa-msg.wa-ult { margin-bottom: var(--s-8); }
.wa-bolha {
  display: flex; flex-wrap: wrap; align-items: flex-end; gap: 2px var(--s-8); max-width: min(520px, 82%); padding: 8px 12px;
  border-radius: 14px; color: var(--wa-texto); box-shadow: var(--wa-sombra); font-size: var(--t-14); line-height: 1.45; overflow-wrap: anywhere;
}
.wa-eles .wa-bolha { background: var(--wa-recebida); }
.wa-nos .wa-bolha { background: var(--wa-enviada); }
/* You escuro: o laranja de texto (#FF7A45) dava 3,81 sobre a bolha enviada; #FF9A70 dá 4,74 (Faro) */
[data-tema="escuro"][data-empresa="you"] .wa-nos .wa-bolha { --acento-texto: #FF9A70; }
.wa-eles.wa-ult .wa-bolha { border-bottom-left-radius: 4px; }
.wa-nos.wa-ult .wa-bolha { border-bottom-right-radius: 4px; }
.wa-bolha > p { flex: 1 1 auto; min-width: 0; }
.wa-meta { display: inline-flex; align-items: center; gap: 4px; margin-left: auto; padding-top: 2px; font-size: 11px; line-height: 1; color: var(--wa-hora); font-variant-numeric: tabular-nums; }
.wa-meta .ico { width: 14px; height: 14px; color: var(--acento-texto); }
.wa-link { color: var(--acento-texto); text-decoration: underline; text-underline-offset: 2px; }
.wa-contato { display: flex; align-items: center; gap: var(--s-12); min-width: 200px; flex: 1 1 100%; padding-bottom: 4px; }
.wa-contato strong { display: block; font-weight: 600; }
.wa-contato span:not(.avatar) { color: var(--wa-hora); font-size: var(--t-12); }

/* Áudio */
.wa-audio { display: flex; align-items: center; gap: var(--s-12); flex: 1 1 100%; min-width: 230px; }
.wa-play { display: grid; place-items: center; flex: none; width: 36px; height: 36px; padding: 0; border: 0; border-radius: 50%; background: var(--acento); color: var(--no-acento); cursor: pointer; transition: background-color var(--dur-rapida) var(--curva); }
.wa-play:hover { background: var(--acento-hover); }
.wa-play .ico { width: 16px; height: 16px; fill: currentColor; }
.wa-onda { display: flex; align-items: center; gap: 2px; height: 28px; flex: 1; }
.wa-onda i { display: block; width: 3px; border-radius: 2px; background: var(--wa-hora); }
.wa-onda i.tocado { background: var(--acento-texto); }
.wa-dur { flex: none; min-width: 34px; font-size: var(--t-12); color: var(--wa-hora); font-variant-numeric: tabular-nums; }

/* Digitando */
.wa-digitando { display: inline-flex; gap: 4px; padding: 12px 14px; border-radius: 14px 14px 14px 4px; background: var(--wa-recebida); box-shadow: var(--wa-sombra); }
.wa-digitando i { width: 7px; height: 7px; border-radius: 50%; background: var(--wa-hora); animation: wa-ponto 1.2s var(--curva) infinite; }
.wa-digitando i:nth-child(2) { animation-delay: 0.15s; }
.wa-digitando i:nth-child(3) { animation-delay: 0.3s; }
@keyframes wa-ponto { 0%, 60%, 100% { opacity: 0.35; } 30% { opacity: 1; } }

/* Escrever */
.wa-escrever { display: flex; align-items: center; gap: var(--s-8); padding: var(--s-12) var(--s-16); background: var(--sup); border-top: 1px solid var(--linha); }
.wa-escrever .campo-input { height: var(--app-controle); min-height: var(--app-controle); padding: 9px var(--s-12); resize: none; flex: 1; }
.wa-emojis { display: grid; grid-template-columns: repeat(6, 1fr); gap: 2px; }
.wa-emojis button { width: 36px; height: 36px; border: 0; border-radius: 8px; background: none; font-size: 20px; cursor: pointer; }
.wa-emojis button:hover { background: var(--realce); }

/* Demos dos blocos */
.wa-demo { border-radius: var(--raio-b); overflow: hidden; }
.wa-demo-lista { display: flex; flex-direction: column; gap: var(--s-8); background: var(--sup); border: 1px solid var(--linha); padding: var(--s-8); }
.wa-demo-lista .wa-lista-topo { border: 0; padding: var(--s-4); }
.wa-demo > .wa-cab { border: 1px solid var(--linha); border-radius: var(--raio-b); margin-bottom: var(--s-8); }
#demo-cabecalho { display: flex; flex-direction: column; }
.wa-fundo-liso.wa-demo { padding: var(--s-16); display: flex; flex-direction: column; gap: 2px; }
.wa-demo-escrever { padding: 0 !important; }
.wa-demo-escrever .wa-escrever { border-radius: var(--raio-b); }
.wa-demo-escrever .wa-escrever + .wa-escrever { margin-top: var(--s-8); }
.wa-vazios { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: var(--s-12); }
.wa-vazio { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--s-8); min-height: 190px; padding: var(--s-16); text-align: center; border-radius: var(--raio-b); background: var(--wa-fundo); }
.wa-vazio .ico { width: 32px; height: 32px; color: var(--fraco); }
.wa-vazio strong { font-size: var(--t-14); font-weight: 600; }
.wa-vazio p { font-size: var(--t-12); color: var(--fraco); max-width: 26ch; }

/* Contraste */
.wa-tabela-rolagem { overflow-x: auto; }
.wa-contraste { width: 100%; border-collapse: collapse; font-size: var(--t-12); }
.wa-contraste th { text-align: left; color: var(--fraco); font-weight: 600; padding: 6px 8px; border-bottom: 1px solid var(--linha); }
.wa-contraste td { padding: 8px; border-bottom: 1px solid var(--linha); font-variant-numeric: tabular-nums; white-space: nowrap; }
.wa-amostra { display: inline-grid; place-items: center; width: 40px; height: 24px; border-radius: 6px; font-weight: 700; border: 1px solid var(--linha); }

@media (max-width: 860px) {
  .wa { grid-template-columns: minmax(0, 1fr); height: 680px; }
  .wa[data-vista="lista"] .wa-conversa, .wa[data-vista="conversa"] .wa-lista { display: none; }
  .wa-lista { border-right: 0; }
  .wa-voltar { display: inline-flex; }
  .wa-msgs { padding-inline: var(--s-12); }
  .wa-bolha { max-width: 90%; }
  .wa-cab { padding-inline: var(--s-8); }
  .wa-cab-acoes .btn-p:not(.btn-icone) { display: none; }
}

/* avatar de iniciais sobre a linha escolhida: fundo da superfície, senão o acento-claro dobra e o texto perde contraste */
.wa-linha[aria-current="true"] .avatar:not(:has(img)) { background: var(--sup); }

/* ===== Fundos da conversa (R3, 11.1): sutis, só desenho sobre --wa-fundo; as bolhas continuam cheias, então o texto não perde contraste ===== */
.wa-tres { display: flex; flex-direction: column; gap: var(--s-12); }
.wa-tres > div { display: flex; flex-direction: column; gap: var(--s-4); }
.wa-menu-rotulo { padding: 6px 10px 2px; font-size: var(--t-12); font-weight: 600; color: var(--fraco); }
[data-fundo="a"] { background-image: radial-gradient(circle, color-mix(in srgb, var(--fraco) 26%, transparent) 1px, transparent 1.6px); background-size: 20px 20px; }
[data-fundo="b"] { background-image: repeating-linear-gradient(45deg, color-mix(in srgb, var(--fraco) 11%, transparent) 0 1px, transparent 1px 14px); }
[data-fundo="c"] {
  background-size: 168px 168px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='168' height='168' viewBox='0 0 168 168' fill='none' stroke='%23636366' stroke-opacity='.2' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cg transform='translate(14 16) rotate(-12 12 12)'%3E%3Cpath d='M7.9 20A9 9 0 1 0 4 16.1L2 22Z'/%3E%3C/g%3E%3Cg transform='translate(100 10) rotate(18 12 12)'%3E%3Cpath d='m16 6-8.414 8.586a2 2 0 0 0 2.829 2.829l8.414-8.586a4 4 0 1 0-5.657-5.657l-8.379 8.551a6 6 0 1 0 8.485 8.485l8.379-8.551'/%3E%3C/g%3E%3Cg transform='translate(58 66) rotate(8 12 12)'%3E%3Cpath d='M8 2v4M16 2v4M3 10h18'/%3E%3Crect width='18' height='18' x='3' y='4' rx='2'/%3E%3C/g%3E%3Cg transform='translate(128 80) rotate(-10 12 12)'%3E%3Cpath d='M18 6 7 17l-5-5'/%3E%3Cpath d='m22 10-7.5 7.5L13 16'/%3E%3C/g%3E%3Cg transform='translate(12 98) rotate(14 12 12)'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='M8 14s1.5 2 4 2 4-2 4-2M9 9h.01M15 9h.01'/%3E%3C/g%3E%3Cg transform='translate(86 132) rotate(-8 12 12)'%3E%3Cpath d='M22 17a2 2 0 0 1-2 2H6.828a2 2 0 0 0-1.414.586l-2.202 2.202A.71.71 0 0 1 2 21.286V5a2 2 0 0 1 2-2h16a2 2 0 0 1 2 2z'/%3E%3C/g%3E%3C/svg%3E");
}
:root[data-tema="escuro"] [data-fundo="c"] { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='168' height='168' viewBox='0 0 168 168' fill='none' stroke='%23C9CDD6' stroke-opacity='.14' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cg transform='translate(14 16) rotate(-12 12 12)'%3E%3Cpath d='M7.9 20A9 9 0 1 0 4 16.1L2 22Z'/%3E%3C/g%3E%3Cg transform='translate(100 10) rotate(18 12 12)'%3E%3Cpath d='m16 6-8.414 8.586a2 2 0 0 0 2.829 2.829l8.414-8.586a4 4 0 1 0-5.657-5.657l-8.379 8.551a6 6 0 1 0 8.485 8.485l8.379-8.551'/%3E%3C/g%3E%3Cg transform='translate(58 66) rotate(8 12 12)'%3E%3Cpath d='M8 2v4M16 2v4M3 10h18'/%3E%3Crect width='18' height='18' x='3' y='4' rx='2'/%3E%3C/g%3E%3Cg transform='translate(128 80) rotate(-10 12 12)'%3E%3Cpath d='M18 6 7 17l-5-5'/%3E%3Cpath d='m22 10-7.5 7.5L13 16'/%3E%3C/g%3E%3Cg transform='translate(12 98) rotate(14 12 12)'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='M8 14s1.5 2 4 2 4-2 4-2M9 9h.01M15 9h.01'/%3E%3C/g%3E%3Cg transform='translate(86 132) rotate(-8 12 12)'%3E%3Cpath d='M22 17a2 2 0 0 1-2 2H6.828a2 2 0 0 0-1.414.586l-2.202 2.202A.71.71 0 0 1 2 21.286V5a2 2 0 0 1 2-2h16a2 2 0 0 1 2 2z'/%3E%3C/g%3E%3C/svg%3E"); }