/* Estilo "Conversas": variação do estilo WhatsApp (estilo-whatsapp.css) com verde mais forte, fundo cinza liso,
   balões sem rabinho e caixa de mensagem em pílula. Só vale com <html data-estilo="conversas">.
   No escuro herda as cores do estilo WhatsApp. */

/* ---------- tokens claros ---------- */
:root[data-estilo="conversas"] :is(.inbox, .qr-caixa) {
  --fundo: #F4F6F5;
  --linha: #E3E8E5;
  --linha-forte: #CBD3CE;
  --destaque: #1B7F57;
  --destaque-suave: rgba(27, 127, 87, 0.1);
  --acao-fundo: #1B7F57;
  --acao-hover: #166C4A;
  --ok-fundo: #DDF6D0;
  --msg-ia-fundo: #DDF6D0;
  --msg-humano-fundo: #DDF6D0;
  --foco: #1B7F57;
  --wa-cab: #FFFFFF;
  --wa-papel: #E9E9E9;
  --wa-pilula-fundo: #1B7F57;
  --wa-pilula-texto: #14603F;
  --wa-selo: #1B7F57;
  --wa-selo-texto: #FFFFFF;
}
/* ---------- lista de conversas ---------- */
[data-estilo="conversas"] .inbox .abas button { background: var(--superficie); border: 1.5px solid var(--destaque); color: var(--destaque); font-weight: 700; }
[data-estilo="conversas"] .inbox .abas button:hover:not([aria-pressed="true"]):not([aria-selected="true"]) { background: var(--destaque-suave); }
[data-estilo="conversas"] .inbox .abas button[aria-pressed="true"], [data-estilo="conversas"] .inbox .abas button[aria-selected="true"] { background: var(--acao-fundo); color: var(--acao-texto); border-color: var(--acao-fundo); }
[data-estilo="conversas"] .inbox .busca input { background: var(--superficie); border: 1px solid var(--linha-forte); }
[data-estilo="conversas"] .conv-item { grid-template-columns: 44px minmax(0, 1fr) auto; }
[data-estilo="conversas"] .conv-item::after { left: 70px; }
[data-estilo="conversas"] .avatar-canal { width: 44px; height: 44px; }
[data-estilo="conversas"] .conv-item .avatar { width: 44px; height: 44px; font-size: 15px; font-weight: 800; }
[data-estilo="conversas"] .conv-item .nome, [data-estilo="conversas"] .conv-item.nao-lida .nome { font-weight: 700; font-size: 15px; }
[data-estilo="conversas"] .conv-item[aria-current="true"] { background: var(--superficie-2); box-shadow: inset 4px 0 0 var(--destaque); }
/* avatares em cores suaves que se alternam */
[data-estilo="conversas"] .conv-item:nth-child(5n+1) .avatar { background: #D9F2E3; color: #14603F; }
[data-estilo="conversas"] .conv-item:nth-child(5n+2) .avatar { background: #FADDDD; color: #A32A22; }
[data-estilo="conversas"] .conv-item:nth-child(5n+3) .avatar { background: #FADFEA; color: #9D2F63; }
[data-estilo="conversas"] .conv-item:nth-child(5n+4) .avatar { background: #EBDDF8; color: #6B3AA0; }
[data-estilo="conversas"] .conv-item:nth-child(5n) .avatar { background: #DDEFF8; color: #1D6485; }

/* ---------- conversa ---------- */
[data-estilo="conversas"] .thread-cab { border-bottom: 1px solid var(--linha); }
[data-estilo="conversas"] .thread-cab h2 { font-weight: 700; }
[data-estilo="conversas"] .mensagens { background-image: none; padding: 16px clamp(12px, 5%, 56px); }
[data-estilo="conversas"] .dia { background: #7A8583; color: #fff; font-size: 11px; font-weight: 700; letter-spacing: .05em; box-shadow: none; }
:root[data-theme="dark"][data-estilo="conversas"] .dia { background: #182229; }
/* balões sem rabinho, cantos iguais */
[data-estilo="conversas"] .msg, [data-estilo="conversas"] .msg:is(.ia, .humano), [data-estilo="conversas"] .msg:not(.ia, .humano, .sistema) { border-radius: 10px; box-shadow: 0 1px 2px rgba(11, 20, 26, 0.1); padding: 8px 12px 6px; }
[data-estilo="conversas"] .msg::before { display: none !important; }

/* ---------- caixa de mensagem em pílula ---------- */
[data-estilo="conversas"] .caixa-resposta { background: var(--wa-papel); padding: 12px 16px 16px; }
[data-estilo="conversas"] .caixa-resposta form { background: var(--superficie); border-radius: 28px; padding: 6px 8px 6px 18px; box-shadow: 0 1px 4px rgba(11, 20, 26, 0.16); align-items: center; }
[data-estilo="conversas"] .caixa-resposta textarea { background: transparent; border: 0; padding: 8px 0; }
[data-estilo="conversas"] .caixa-resposta textarea:focus { outline: none; }
[data-estilo="conversas"] .caixa-resposta form:focus-within { outline: 2px solid var(--foco); }
[data-estilo="conversas"] .inbox .abas button[aria-pressed="true"] .num, [data-estilo="conversas"] .inbox .abas button[aria-selected="true"] .num { color: inherit; opacity: .85; }