/* Estilos "WhatsApp" e "Conversas" (este é só a variação em estilo-conversas.css): aparência da CONVERSA (Inbox) e da tela de conectar o WhatsApp (QR). O resto do sistema segue o visual da Regência.
   Só vale com <html data-estilo="whatsapp">. Troca os tokens do app.css e refaz a caixa de conversa. Claro e escuro. */

/* Padrão em qualquer estilo: o tique só aparece no estilo WhatsApp. */
.tique { display: none; }

/* ---------- tokens: claro ---------- */
:root:is([data-estilo="whatsapp"], [data-estilo="conversas"]) :is(.inbox, .qr-caixa) {
  --fonte: 'Segoe UI', 'Helvetica Neue', Helvetica, Arial, system-ui, sans-serif;
  --raio-sm: 6px;
  --raio-md: 8px;

  --fundo: #F0F2F5;
  --superficie: #FFFFFF;
  --superficie-2: #F0F2F5;
  --linha: #E9EDEF;
  --linha-forte: #D1D7DB;
  --texto: #111B21;
  --texto-fraco: #3B4A54;
  --texto-tenue: #5F6F79;
  --destaque: #008069;
  --destaque-suave: rgba(0, 168, 132, 0.1);
  --acao-fundo: #008069;
  --acao-hover: #006E5A;
  --acao-texto: #FFFFFF;


  --ok: #06684F;
  --ok-fundo: #D9FDD3;
  --alerta: #7A4E00;
  --alerta-fundo: #FFEECD;
  --perigo: #B3261E;
  --perigo-fundo: #FBE3E0;
  --info-fundo: #E7F3F8;

  --msg-contato-fundo: #FFFFFF;
  --msg-ia-fundo: #D9FDD3;
  --msg-ia-texto: #111B21;
  --msg-humano-fundo: #D9FDD3;
  --msg-humano-texto: #111B21;
  --foco: #008069;

  --wa-cab: #F0F2F5;
  --wa-campo: #FFFFFF;
  --wa-papel: #EFEAE2;
  --wa-padrao: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160' viewBox='0 0 160 160' fill='none' stroke='%23D9D2C5' stroke-width='1.3' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='20' cy='22' r='6'/%3E%3Cpath d='M70 18v10M65 23h10'/%3E%3Cpath d='M118 20c4-6 8 6 12 0s8 6 12 0'/%3E%3Cpath d='M30 78l4 8 9 1-6.5 6 1.7 9-8.2-4.3-8.2 4.3 1.7-9-6.5-6 9-1z'/%3E%3Crect x='84' y='70' width='24' height='16' rx='5'/%3E%3Cpath d='M92 86l-3 6 8-6'/%3E%3Cpath d='M130 80a8 8 0 1 1-6 13'/%3E%3Ccircle cx='28' cy='132' r='3'/%3E%3Cpath d='M70 130l12-8 12 8'/%3E%3Cpath d='M126 128l8 8m0-8l-8 8'/%3E%3C/svg%3E");
  --wa-dia: #FFFFFF;
  --wa-aviso: #FFEECD;
  --wa-hora: #54656F;
  --wa-tique: #667781;
  --wa-pilula-fundo: #D9FDD3;
  --wa-pilula-texto: #005C4B;
  --wa-avatar-fundo: #DFE5E7;
  --wa-avatar-texto: #54656F;
  --wa-selo: #25D366;
  --wa-selo-texto: #0B3B22;
}

/* ---------- tokens: escuro (forçado e pelo sistema) ---------- */
:root:is([data-estilo="whatsapp"], [data-estilo="conversas"])[data-theme="dark"] :is(.inbox, .qr-caixa) {
  color-scheme: dark;
  --fundo: #111B21;
  --superficie: #1F2C33;
  --superficie-2: #2A3942;
  --linha: #222D34;
  --linha-forte: #3B4A54;
  --texto: #E9EDEF;
  --texto-fraco: #C7D0D5;
  --texto-tenue: #8696A0;
  --destaque: #00A884;
  --destaque-suave: rgba(0, 168, 132, 0.16);
  --acao-fundo: #00A884;
  --acao-hover: #06CF9C;
  --acao-texto: #111B21;


  --ok: #7FD1A0;
  --ok-fundo: rgba(127, 209, 160, 0.14);
  --alerta: #F6D9A8;
  --alerta-fundo: rgba(246, 217, 168, 0.14);
  --perigo: #FF9D93;
  --perigo-fundo: rgba(255, 157, 147, 0.14);
  --info-fundo: rgba(83, 189, 235, 0.14);

  --msg-contato-fundo: #202C33;
  --msg-ia-fundo: #005C4B;
  --msg-ia-texto: #E9EDEF;
  --msg-humano-fundo: #005C4B;
  --msg-humano-texto: #E9EDEF;
  --foco: #53BDEB;

  --wa-cab: #202C33;
  --wa-campo: #2A3942;
  --wa-papel: #0B141A;
  --wa-padrao: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160' viewBox='0 0 160 160' fill='none' stroke='%231B262D' stroke-width='1.3' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='20' cy='22' r='6'/%3E%3Cpath d='M70 18v10M65 23h10'/%3E%3Cpath d='M118 20c4-6 8 6 12 0s8 6 12 0'/%3E%3Cpath d='M30 78l4 8 9 1-6.5 6 1.7 9-8.2-4.3-8.2 4.3 1.7-9-6.5-6 9-1z'/%3E%3Crect x='84' y='70' width='24' height='16' rx='5'/%3E%3Cpath d='M92 86l-3 6 8-6'/%3E%3Cpath d='M130 80a8 8 0 1 1-6 13'/%3E%3Ccircle cx='28' cy='132' r='3'/%3E%3Cpath d='M70 130l12-8 12 8'/%3E%3Cpath d='M126 128l8 8m0-8l-8 8'/%3E%3C/svg%3E");
  --wa-dia: #182229;
  --wa-aviso: #182229;
  --wa-hora: #A8B4BB;
  --wa-tique: #8696A0;
  --wa-pilula-fundo: #103529;
  --wa-pilula-texto: #21C063;
  --wa-avatar-fundo: #6A7175;
  --wa-avatar-texto: #FFFFFF;
  --wa-selo: #00A884;
  --wa-selo-texto: #111B21;
}
@media (prefers-color-scheme: dark) {
  :root:is([data-estilo="whatsapp"], [data-estilo="conversas"]):not([data-theme="light"]) :is(.inbox, .qr-caixa) {
    color-scheme: dark;
    --fundo: #111B21;
    --superficie: #1F2C33;
    --superficie-2: #2A3942;
    --linha: #222D34;
    --linha-forte: #3B4A54;
    --texto: #E9EDEF;
    --texto-fraco: #C7D0D5;
    --texto-tenue: #8696A0;
    --destaque: #00A884;
    --destaque-suave: rgba(0, 168, 132, 0.16);
    --acao-fundo: #00A884;
    --acao-hover: #06CF9C;
    --acao-texto: #111B21;


    --ok: #7FD1A0;
    --ok-fundo: rgba(127, 209, 160, 0.14);
    --alerta: #F6D9A8;
    --alerta-fundo: rgba(246, 217, 168, 0.14);
    --perigo: #FF9D93;
    --perigo-fundo: rgba(255, 157, 147, 0.14);
    --info-fundo: rgba(83, 189, 235, 0.14);

    --msg-contato-fundo: #202C33;
    --msg-ia-fundo: #005C4B;
    --msg-ia-texto: #E9EDEF;
    --msg-humano-fundo: #005C4B;
    --msg-humano-texto: #E9EDEF;
    --foco: #53BDEB;

    --wa-cab: #202C33;
    --wa-campo: #2A3942;
    --wa-papel: #0B141A;
    --wa-padrao: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160' viewBox='0 0 160 160' fill='none' stroke='%231B262D' stroke-width='1.3' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='20' cy='22' r='6'/%3E%3Cpath d='M70 18v10M65 23h10'/%3E%3Cpath d='M118 20c4-6 8 6 12 0s8 6 12 0'/%3E%3Cpath d='M30 78l4 8 9 1-6.5 6 1.7 9-8.2-4.3-8.2 4.3 1.7-9-6.5-6 9-1z'/%3E%3Crect x='84' y='70' width='24' height='16' rx='5'/%3E%3Cpath d='M92 86l-3 6 8-6'/%3E%3Cpath d='M130 80a8 8 0 1 1-6 13'/%3E%3Ccircle cx='28' cy='132' r='3'/%3E%3Cpath d='M70 130l12-8 12 8'/%3E%3Cpath d='M126 128l8 8m0-8l-8 8'/%3E%3C/svg%3E");
    --wa-dia: #182229;
    --wa-aviso: #182229;
    --wa-hora: #A8B4BB;
    --wa-tique: #8696A0;
    --wa-pilula-fundo: #103529;
    --wa-pilula-texto: #21C063;
    --wa-avatar-fundo: #6A7175;
    --wa-avatar-texto: #FFFFFF;
    --wa-selo: #00A884;
    --wa-selo-texto: #111B21;
  }
}

/* ---------- geral (só dentro da conversa) ---------- */
:is([data-estilo="whatsapp"], [data-estilo="conversas"]) .inbox { font-family: var(--fonte); }
:is([data-estilo="whatsapp"], [data-estilo="conversas"]) .inbox .btn { border-radius: 999px; }
:is([data-estilo="whatsapp"], [data-estilo="conversas"]) .inbox .btn.so-icone { border-radius: 50%; }
:is([data-estilo="whatsapp"], [data-estilo="conversas"]) .inbox .entrada { border-radius: 8px; }
:is([data-estilo="whatsapp"], [data-estilo="conversas"]) .inbox .contagem-nl { background: var(--wa-selo); color: var(--wa-selo-texto); }

/* ---------- lista de conversas ---------- */
:is([data-estilo="whatsapp"], [data-estilo="conversas"]) .inbox-lista { background: var(--superficie); border-right-color: var(--linha-forte); }
:is([data-estilo="whatsapp"], [data-estilo="conversas"]) .inbox-filtros { border-bottom: 0; padding: 10px 12px 6px; gap: 8px; }
:is([data-estilo="whatsapp"], [data-estilo="conversas"]) .inbox .abas { background: transparent; padding: 0; gap: 6px; flex-wrap: wrap; }
:is([data-estilo="whatsapp"], [data-estilo="conversas"]) .inbox .abas button { flex: 0 0 auto; min-height: 30px; padding: 0 13px; border-radius: 999px; border: 1px solid var(--linha-forte); background: var(--superficie); color: var(--texto-fraco); }
:is([data-estilo="whatsapp"], [data-estilo="conversas"]) .inbox .abas button:hover:not([aria-pressed="true"]):not([aria-selected="true"]) { background: var(--superficie-2); }
:is([data-estilo="whatsapp"], [data-estilo="conversas"]) .inbox .abas button[aria-pressed="true"], :is([data-estilo="whatsapp"], [data-estilo="conversas"]) .inbox .abas button[aria-selected="true"] { background: var(--wa-pilula-fundo); color: var(--wa-pilula-texto); border-color: transparent; box-shadow: none; }
:is([data-estilo="whatsapp"], [data-estilo="conversas"]) .inbox .busca input { background: var(--superficie-2); border-color: transparent; border-radius: 8px; min-height: 36px; }

:is([data-estilo="whatsapp"], [data-estilo="conversas"]) .conv-item { grid-template-columns: 49px minmax(0, 1fr) auto; align-items: center; border-bottom: 0; padding: 10px 16px 10px 14px; position: relative; }
:is([data-estilo="whatsapp"], [data-estilo="conversas"]) .conv-item::after { content: ""; position: absolute; left: 76px; right: 0; bottom: 0; border-bottom: 1px solid var(--linha); }
:is([data-estilo="whatsapp"], [data-estilo="conversas"]) .conv-item:hover { background: var(--superficie-2); }
:is([data-estilo="whatsapp"], [data-estilo="conversas"]) .conv-item[aria-current="true"] { background: var(--superficie-2); }
:is([data-estilo="whatsapp"], [data-estilo="conversas"]) .avatar-canal { width: 49px; height: 49px; }
:is([data-estilo="whatsapp"], [data-estilo="conversas"]) .conv-item .avatar { width: 49px; height: 49px; font-size: 17px; background: var(--wa-avatar-fundo); color: var(--wa-avatar-texto); }
:is([data-estilo="whatsapp"], [data-estilo="conversas"]) .conv-item .nome, :is([data-estilo="whatsapp"], [data-estilo="conversas"]) .conv-item.nao-lida .nome { font-weight: 400; font-size: 17px; }
:is([data-estilo="whatsapp"], [data-estilo="conversas"]) .conv-item .hora { font-size: 12px; }
:is([data-estilo="whatsapp"], [data-estilo="conversas"]) .conv-item.nao-lida .hora { color: var(--destaque); font-weight: 600; }
:is([data-estilo="whatsapp"], [data-estilo="conversas"]) .conv-item .previa { -webkit-line-clamp: 1; font-size: 14px; color: var(--texto-tenue); }
:is([data-estilo="whatsapp"], [data-estilo="conversas"]) .conv-item.nao-lida .previa { color: var(--texto); font-weight: 400; }
:is([data-estilo="whatsapp"], [data-estilo="conversas"]) .inbox .avatar { background: var(--wa-avatar-fundo); color: var(--wa-avatar-texto); font-weight: 600; }

/* ---------- conversa ---------- */
:is([data-estilo="whatsapp"], [data-estilo="conversas"]) .thread-cab { background: var(--wa-cab); border-bottom: 0; }
:is([data-estilo="whatsapp"], [data-estilo="conversas"]) .thread-cab h2 { font-size: 16px; font-weight: 400; }
:is([data-estilo="whatsapp"], [data-estilo="conversas"]) .mensagens {
  background-color: var(--wa-papel);
  background-image: var(--wa-padrao);
  background-size: 160px 160px;
  padding: 14px clamp(12px, 6%, 72px);
  gap: 3px;
}
:is([data-estilo="whatsapp"], [data-estilo="conversas"]) .dia { background: var(--wa-dia); color: var(--texto-tenue); padding: 5px 12px; border-radius: 8px; font-size: 12.5px; font-weight: 500; text-transform: uppercase; box-shadow: 0 1px 0.5px rgba(11, 20, 26, 0.13); margin: 8px 0; }

:is([data-estilo="whatsapp"], [data-estilo="conversas"]) .msg { border: 0; border-radius: 7.5px; padding: 6px 8px 5px 9px; gap: 0; box-shadow: 0 1px 0.5px rgba(11, 20, 26, 0.13); position: relative; font-size: 14.2px; line-height: 19px; color: var(--texto); }
:is([data-estilo="whatsapp"], [data-estilo="conversas"]) .msg.ia { color: var(--msg-ia-texto); }
:is([data-estilo="whatsapp"], [data-estilo="conversas"]) .msg.humano { color: var(--msg-humano-texto); }
:is([data-estilo="whatsapp"], [data-estilo="conversas"]) .msg:not(.ia, .humano, .sistema) .autor { display: none; }
:is([data-estilo="whatsapp"], [data-estilo="conversas"]) .msg .autor { font-size: 12.5px; font-weight: 500; opacity: 1; color: var(--wa-pilula-texto); }
:is([data-estilo="whatsapp"], [data-estilo="conversas"]) .msg .quando { opacity: 1; color: var(--wa-hora); font-size: 11px; gap: 3px; margin-top: -2px; }
:is([data-estilo="whatsapp"], [data-estilo="conversas"]) .msg .tique { display: inline-flex; color: var(--wa-tique); }
:is([data-estilo="whatsapp"], [data-estilo="conversas"]) .msg .tique .icone { width: 16px; height: 16px; }
:is([data-estilo="whatsapp"], [data-estilo="conversas"]) .msg .tique.falhou { color: var(--perigo); }
:is([data-estilo="whatsapp"], [data-estilo="conversas"]) .msg.pendente { border-style: none; opacity: .85; }
:is([data-estilo="whatsapp"], [data-estilo="conversas"]) .msg.sistema { background: var(--wa-aviso); color: var(--wa-hora); font-size: 12.5px; border: 0; padding: 6px 12px; margin: 6px 0; }

/* rabinho do balão: só na primeira mensagem de uma sequência */
:is([data-estilo="whatsapp"], [data-estilo="conversas"]) .msg::before { content: ""; position: absolute; top: 0; width: 8px; height: 13px; background: inherit; }
:is([data-estilo="whatsapp"], [data-estilo="conversas"]) .msg:not(.ia, .humano, .sistema) { border-top-left-radius: 0; }
:is([data-estilo="whatsapp"], [data-estilo="conversas"]) .msg:not(.ia, .humano, .sistema)::before { left: -8px; clip-path: polygon(100% 0, 100% 100%, 0 0); }
:is([data-estilo="whatsapp"], [data-estilo="conversas"]) .msg:is(.ia, .humano) { border-top-right-radius: 0; }
:is([data-estilo="whatsapp"], [data-estilo="conversas"]) .msg:is(.ia, .humano)::before { right: -8px; clip-path: polygon(0 0, 100% 0, 0 100%); }
:is([data-estilo="whatsapp"], [data-estilo="conversas"]) .msg.sistema::before { display: none; }
:is([data-estilo="whatsapp"], [data-estilo="conversas"]) .msg:not(.ia, .humano, .sistema) + .msg:not(.ia, .humano, .sistema) { border-top-left-radius: 7.5px; }
:is([data-estilo="whatsapp"], [data-estilo="conversas"]) .msg:not(.ia, .humano, .sistema) + .msg:not(.ia, .humano, .sistema)::before { display: none; }
:is([data-estilo="whatsapp"], [data-estilo="conversas"]) .msg:is(.ia, .humano) + .msg:is(.ia, .humano) { border-top-right-radius: 7.5px; }
:is([data-estilo="whatsapp"], [data-estilo="conversas"]) .msg:is(.ia, .humano) + .msg:is(.ia, .humano)::before { display: none; }
:is([data-estilo="whatsapp"], [data-estilo="conversas"]) .msg:not(.ia, .humano, .sistema) + .msg:is(.ia, .humano),
:is([data-estilo="whatsapp"], [data-estilo="conversas"]) .msg:is(.ia, .humano) + .msg:not(.ia, .humano, .sistema) { margin-top: 8px; }

/* ---------- caixa de resposta ---------- */
:is([data-estilo="whatsapp"], [data-estilo="conversas"]) .caixa-resposta { background: var(--wa-cab); border-top: 0; padding: 10px 16px; }
:is([data-estilo="whatsapp"], [data-estilo="conversas"]) .caixa-resposta textarea { background: var(--wa-campo); border-color: transparent; border-radius: 8px; padding: 10px 12px; min-height: 42px; }
:is([data-estilo="whatsapp"], [data-estilo="conversas"]) .btn-enviar { width: 44px; height: 44px; min-height: 44px; padding: 0; border-radius: 50%; font-size: 0; display: grid; place-items: center; flex: none; }
:is([data-estilo="whatsapp"], [data-estilo="conversas"]) .btn-enviar .rotulo-enviar { display: none; }
:is([data-estilo="whatsapp"], [data-estilo="conversas"]) .btn-enviar .icone { width: 22px; height: 22px; }
:is([data-estilo="whatsapp"], [data-estilo="conversas"]) .menu-rapidas { border-radius: 10px; }

/* ---------- conectar o WhatsApp (QR), no formato do WhatsApp Web ---------- */
/* Lado a lado quando cabe (QR à direita); empilhado quando o cartão é estreito (QR em cima). */
:is([data-estilo="whatsapp"], [data-estilo="conversas"]) .qr-caixa { display: flex; flex-direction: row-reverse; flex-wrap: wrap; justify-content: center; align-items: center; gap: 28px 44px; padding: 32px; border: 0; border-radius: 12px; box-shadow: 0 1px 3px rgba(11, 20, 26, 0.16); }
:is([data-estilo="whatsapp"], [data-estilo="conversas"]) .qr-caixa > :last-child { flex: 1 1 300px; min-width: 0; }
:is([data-estilo="whatsapp"], [data-estilo="conversas"]) .qr-caixa img { width: 264px; height: 264px; padding: 0; border-radius: 4px; flex: none; }
:is([data-estilo="whatsapp"], [data-estilo="conversas"]) .qr-caixa .esqueleto { width: 264px !important; height: 264px !important; flex: none; }
:is([data-estilo="whatsapp"], [data-estilo="conversas"]) .qr-caixa h3 { font-size: 26px; font-weight: 300; line-height: 1.25; color: var(--texto); }
:is([data-estilo="whatsapp"], [data-estilo="conversas"]) .qr-caixa ol { font-size: 16px; line-height: 1.8; color: var(--texto); padding-left: 24px; }
:is([data-estilo="whatsapp"], [data-estilo="conversas"]) .qr-caixa .btn { align-self: flex-start; }
:is([data-estilo="whatsapp"], [data-estilo="conversas"]) .qr-caixa { background: var(--superficie); }