/* ============================================================
   ARCA CHAT — layout de conversa, identidade Arca
   Ativa quando body.modo-chat (rota #/atendimento)

   O layout de três colunas continua o mesmo — a equipe atende por ele todo
   dia e a familiaridade vale mais que a novidade. O que mudou na v6.7: a
   paleta própria virou apelido dos tokens do DS, então o Chat deixou de ser
   uma ilha visual dentro do sistema.
============================================================ */
:root{
  --wa-rail:var(--surface-app);
  --wa-panel:var(--surface-card);
  --wa-head:var(--surface-app);
  --wa-border:var(--border-subtle);
  --wa-text:var(--text-heading);
  --wa-sec:var(--text-muted);
  --wa-faint:var(--text-subtle);
  --wa-green:var(--btn-primary-bg);        /* ação primária (enviar) */
  --wa-green-dark:var(--btn-primary-bg-hover);
  --wa-unread:var(--surface-badge);       /* contador de não lidas */
  --wa-chat-bg:var(--surface-chat);      /* fundo da conversa */
  --wa-out:var(--surface-bubble-out);          /* bolha enviada */
  --wa-in:var(--surface-bubble-in);              /* bolha recebida */
  --wa-hover:var(--surface-muted);
  --wa-sel:var(--surface-accent-soft);
  --wa-check:var(--border-focus);        /* confirmação de leitura */
  --wa-nota:var(--state-warning-bg);      /* nota interna */
  --wa-nota-borda:var(--state-warning-border);
}

/* ---------- modo chat: esconde o shell do sistema ---------- */
body.modo-chat{background:var(--wa-rail)}
body.modo-chat .sidebar,
body.modo-chat .topbar{display:none!important}
body.modo-chat .main-col{margin:0}
body.modo-chat .view{padding:0!important;max-width:none!important;height:100vh;overflow:hidden}
/* Sem sobrescritas de modal aqui: o sistema é claro por padrão desde a v6.7. */

/* ---------- grade principal ---------- */
.wa{display:flex;height:100vh;background:var(--wa-panel);color:var(--wa-text);font-size:14.5px}
.wa input::placeholder,.wa textarea::placeholder{color:var(--wa-faint)}
.wa svg text{fill:var(--text-muted)}
.wa *{scrollbar-width:thin;scrollbar-color:var(--border-default) transparent}
.wa ::-webkit-scrollbar{width:6px;height:6px}
.wa ::-webkit-scrollbar-thumb{background:var(--border-default);border-radius:var(--radius-xs)}
.wa a{color:var(--wa-green)}

/* ---------- rail de ícones (menu lateral) ----------
   O trilho (.wa-rail-slot) reserva 62px no layout; o rail em si é absoluto e,
   ao passar o mouse ou receber foco, abre até 236px POR CIMA da lista, mostrando
   o nome de cada botão. Sobrepor em vez de empurrar: a lista não pula.
   Ritmo: espera 160ms antes de abrir (passar o mouse de raspão não abre), abre
   em --dur-slow com --ease-out e fecha um pouco mais rápido; os rótulos entram
   depois que a largura já cresceu e saem antes dela encolher. Depois de clicar
   num painel, .recolhido fecha o rail com calma mesmo com o mouse em cima
   (views-chat.js recolherRail) e some quando o cursor sai. */
.wa-rail-slot{width:62px;flex-shrink:0;position:relative;z-index:60}
.wa-rail{
  position:absolute;top:0;bottom:0;left:0;width:62px;overflow:hidden;
  background:var(--wa-rail);border-right:1px solid var(--wa-border);
  display:flex;flex-direction:column;align-items:stretch;gap:4px;padding:10px;
  transition:width var(--dur-base) var(--ease-standard) var(--delay-fechar),box-shadow var(--dur-base) var(--ease-standard) var(--delay-fechar);
}
.wa-rail:hover,.wa-rail:focus-within{
  width:236px;box-shadow:var(--shadow-lg);
  transition:width var(--dur-slow) var(--ease-out) var(--delay-abrir),box-shadow var(--dur-slow) var(--ease-out) var(--delay-abrir);
}
.wa-rail-rotulo{
  white-space:nowrap;font-size:var(--text-sm);font-weight:var(--fw-medium);color:inherit;
  opacity:0;transform:translateX(-6px);
  transition:opacity var(--dur-fast) var(--ease-standard),transform var(--dur-fast) var(--ease-standard);
}
.wa-rail:hover .wa-rail-rotulo,.wa-rail:focus-within .wa-rail-rotulo{
  opacity:1;transform:none;
  transition:opacity var(--dur-base) var(--ease-out) var(--delay-rotulo),transform var(--dur-base) var(--ease-out) var(--delay-rotulo);
}
.wa-rail.recolhido:hover,.wa-rail.recolhido:focus-within{
  width:62px;box-shadow:none;
  transition:width var(--dur-slow) var(--ease-standard) var(--delay-recolher),box-shadow var(--dur-slow) var(--ease-standard) var(--delay-recolher);
}
.wa-rail.recolhido .wa-rail-rotulo{opacity:0;transform:translateX(-6px);transition-delay:0ms}
.wa-rail-logo{
  height:40px;border-radius:var(--radius-md);background:var(--surface-inverse);color:var(--text-on-inverse);
  display:flex;align-items:center;gap:12px;padding:0 8px;margin-bottom:8px;cursor:pointer;flex-shrink:0;
  transition:opacity var(--dur-fast) var(--ease-standard);
}
.wa-rail-logo:hover{opacity:.85}
.wa-rail-logo svg{width:24px;height:24px;flex-shrink:0}
.wa-rail-div{border-top:1px solid var(--border-subtle);margin:5px 4px}
.wa-rail-btn{
  height:42px;border-radius:var(--radius-md);border:none;background:transparent;cursor:pointer;
  display:flex;align-items:center;gap:12px;padding:0 9px;color:var(--text-muted);position:relative;
  transition:var(--transition-control);text-align:left;
}
.wa-rail-btn:hover{background:var(--surface-sunken);color:var(--text-heading)}
.wa-rail-btn:focus-visible{box-shadow:var(--ring-focus)}
.wa-rail-btn.ativo{background:var(--surface-inverse);color:var(--text-on-inverse)}
.wa-rail-btn svg{width:23px;height:23px;flex-shrink:0}
/* o contador fica sempre absoluto: no rail fechado mora no canto do ícone e, aberto,
   desliza para a borda direita no mesmo ritmo da largura (trocar para static dava um pulo) */
.wa-rail-badge{
  position:absolute;top:2px;right:2px;background:var(--wa-unread);color:var(--text-on-badge);font-size:var(--text-2xs);
  font-weight:700;min-width:17px;height:17px;border-radius:var(--radius-md);display:flex;align-items:center;
  justify-content:center;padding:0 4px;
  transition:top var(--dur-base) var(--ease-standard) var(--delay-fechar),right var(--dur-base) var(--ease-standard) var(--delay-fechar),transform var(--dur-base) var(--ease-standard) var(--delay-fechar);
}
.wa-rail-btn.ativo .wa-rail-badge{background:var(--surface-card);color:var(--text-heading)}
.wa-rail:hover .wa-rail-badge,.wa-rail:focus-within .wa-rail-badge{
  top:50%;right:10px;transform:translateY(-50%);
  transition:top var(--dur-slow) var(--ease-out) var(--delay-abrir),right var(--dur-slow) var(--ease-out) var(--delay-abrir),transform var(--dur-slow) var(--ease-out) var(--delay-abrir);
}
.wa-rail.recolhido:hover .wa-rail-badge,.wa-rail.recolhido:focus-within .wa-rail-badge{top:2px;right:2px;transform:none}
.wa-rail-sep{flex:1}
.wa-rail-avatar{display:flex;align-items:center;gap:10px;padding-left:2px;cursor:default;margin-top:4px;color:var(--text-body)}
.wa-rail-avatar > span:first-child{
  width:38px;height:38px;border-radius:var(--radius-pill);background:var(--btn-primary-bg);color:var(--btn-primary-fg);font-weight:700;
  display:flex;align-items:center;justify-content:center;font-size:.9rem;flex-shrink:0;
}
.wa-rail-avatar .wa-rail-rotulo{font-weight:var(--fw-regular)}

/* ---------- departamentos da conversa (drawer): marcação múltipla ---------- */
.wa-dept-lista{display:flex;flex-wrap:wrap;gap:6px 10px;margin:4px 0 6px}
.wa-dept-opcao{display:inline-flex;align-items:center;gap:6px;cursor:pointer;margin:0}
.wa-dept-opcao input{margin:0;cursor:pointer}
.wa-dept-opcao input:disabled,.wa-dept-opcao input:disabled + .wa-minichip{cursor:not-allowed}
.wa-dept-opcao input:focus-visible + .wa-minichip{box-shadow:var(--ring-focus)}

/* ---------- painel esquerdo (lista) ---------- */
.wa-left{
  width:398px;min-width:300px;flex-shrink:0;border-right:1px solid var(--wa-border);
  display:flex;flex-direction:column;background:var(--wa-panel);
}
.wa-left-head{
  padding:14px 18px 8px;display:flex;align-items:center;justify-content:space-between;gap:8px;
}
.wa-left-head h2{font-size:1.28rem;font-weight:700;color:var(--wa-text);font-family:inherit}
.wa-left-acoes{display:flex;gap:2px}
.wa-busca{padding:0 12px 8px}
.wa-busca input{
  width:100%;border:none;background:var(--wa-rail);border-radius:var(--radius-md);padding:8px 14px 8px 38px;
  font-size:.86rem;color:var(--wa-text);
  background-image:url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="%235c6f80" stroke-width="2"><circle cx="10.5" cy="10.5" r="6.5"/><path d="m20 20-4.8-4.8"/></svg>');
  background-repeat:no-repeat;background-size:16px;background-position:12px center;
}
.wa-busca input::placeholder{color:var(--wa-faint)}
.wa-busca input:focus-visible{box-shadow:var(--ring-focus);outline:none}
.wa-filtros{display:flex;gap:6px;padding:2px 12px 8px;flex-wrap:wrap;align-items:center}
.wa-chip{
  border:1px solid var(--check-borda);background:var(--surface-card);color:var(--text-body);border-radius:var(--radius-lg);
  padding:3px 11px;font-size:.78rem;cursor:pointer;font-weight:500;transition:var(--transition-control);
}
.wa-chip:hover{background:var(--surface-sunken);color:var(--text-heading)}
.wa-chip:focus-visible{box-shadow:var(--ring-focus);outline:none}
.wa-chip.ativo{background:var(--surface-inverse);color:var(--text-on-inverse);border-color:var(--surface-inverse);font-weight:600}
.wa-filtros select{
  border:1px solid var(--check-borda);background:var(--surface-card);color:var(--text-body);border-radius:var(--radius-lg);
  padding:3px 8px;font-size:.75rem;max-width:110px;cursor:pointer;
}
.wa-filtros select:focus-visible{box-shadow:var(--ring-focus);outline:none}
.wa-lista{flex:1;overflow-y:auto}
.wa-conv{
  display:flex;gap:12px;padding:9px 14px;cursor:pointer;align-items:center;position:relative;
}
.wa-conv:hover{background:var(--btn-ghost-bg-hover)}
.wa-conv.sel{background:var(--wa-sel)}
.wa-conv+.wa-conv .wa-conv-body{border-top:1px solid var(--wa-border)}
.wa-avatar{
  width:47px;height:47px;border-radius:var(--radius-pill);flex-shrink:0;background:var(--surface-avatar);color:var(--text-on-brand);
  display:flex;align-items:center;justify-content:center;font-weight:700;font-size:1.05rem;
  overflow:hidden;position:relative;
}
.wa-avatar img{width:100%;height:100%;object-fit:cover}
.wa-avatar.grupo{background:var(--surface-avatar-grupo)}
.wa-avatar svg{width:22px;height:22px;color:var(--text-on-brand)}
.wa-conv-body{flex:1;min-width:0;padding:6px 0}
.wa-conv-top{display:flex;justify-content:space-between;align-items:baseline;gap:8px}
.wa-conv-top b{font-weight:500;font-size:.98rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.wa-hora{font-size:var(--text-2xs);color:var(--text-muted);flex-shrink:0}
.wa-hora.naolida{color:var(--wa-unread);font-weight:700}
.wa-conv-sub{display:flex;align-items:center;gap:6px;margin-top:2px}
.wa-previa{
  flex:1;min-width:0;color:var(--wa-sec);font-size:.83rem;white-space:nowrap;overflow:hidden;
  text-overflow:ellipsis;
}
.wa-previa svg,.wa-previa .ico{width:13px;height:13px;vertical-align:-2px;color:var(--wa-faint)}
.wa-naolidas{
  background:var(--wa-unread);color:var(--text-on-badge);font-size:.7rem;font-weight:700;min-width:20px;height:20px;
  border-radius:var(--radius-md);display:flex;align-items:center;justify-content:center;padding:0 6px;flex-shrink:0;
}
.wa-conv-chips{display:flex;gap:4px;margin-top:3px;flex-wrap:wrap;align-items:center}
.wa-conv-chips .chip{height:18px}
/* chip de status clicável no dashboard: o .chip carrega a cor, o botão só a contagem */
.wa-chip-status{display:inline-flex;align-items:center;gap:6px;padding:3px 10px 3px 4px}
.wa-chip-status b{font-weight:600;color:var(--text-heading)}
.wa-minichip{
  font-size:var(--text-2xs);font-weight:600;padding:1px 7px;border-radius:var(--radius-md);color:var(--text-on-brand);
}
.wa-minichip.outline{background:transparent!important;border:1px solid var(--wa-border);color:var(--wa-sec)}
.wa-minichip svg{width:10px;height:10px;vertical-align:-1px}
.wa-vazio{padding:40px 24px;text-align:center;color:var(--wa-faint);font-size:.85rem;line-height:1.6}

/* ---------- área principal (chat) ---------- */
.wa-main{flex:1;min-width:0;display:flex;flex-direction:column;background:var(--wa-chat-bg);position:relative}
.wa-main.painel{background:var(--surface-muted);overflow-y:auto}
/* arrastando um arquivo por cima da conversa */
.wa-main.arrastando::after{
  content:'Solte para anexar';position:absolute;inset:8px;z-index:9;pointer-events:none;
  border:2px dashed var(--border-focus);background:var(--surface-translucida);border-radius:var(--radius-lg);
  display:flex;align-items:center;justify-content:center;font-weight:var(--fw-medium);color:var(--text-heading);
}
.wa-fundo{
  position:absolute;inset:0;opacity:.4;pointer-events:none;
  background-image:radial-gradient(var(--border-default) 1px, transparent 1.4px);
  background-size:26px 26px;
}
.wa-vazio-main{
  margin:auto;text-align:center;color:var(--wa-sec);max-width:420px;padding:30px;z-index:1;
}
.wa-vazio-main .big{font-size:3.2rem;margin-bottom:12px;display:flex;justify-content:center}
.wa-vazio-main .big svg{width:60px;height:60px;color:var(--text-subtle)}
.wa-vazio-main h3{color:var(--wa-text);font-weight:600;margin-bottom:8px;font-size:1.3rem}
.wa-vazio-main p{font-size:.86rem;line-height:1.6}

.wa-chat-head{
  background:var(--wa-head);padding:8px 16px;display:flex;align-items:center;gap:12px;z-index:2;
  border-left:1px solid var(--wa-border);
}
.wa-chat-head .wa-avatar{width:40px;height:40px;cursor:pointer}
.wa-chat-head-info{flex:1;min-width:0;cursor:pointer}
.wa-chat-head-info b{font-size:.98rem;font-weight:500;display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.wa-chat-head-info small{color:var(--wa-sec);font-size:.76rem;display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.wa-chat-head-acoes{display:flex;gap:2px;align-items:center}
/* troca rápida de status: botão secundário com o chip dentro + menu ancorado nele */
.wa-status-wrap{position:relative;margin-right:6px}
.wa-status-btn{
  height:30px;padding:0 var(--space-2) 0 var(--space-1);display:inline-flex;align-items:center;gap:var(--space-1);
  background:var(--btn-secondary-bg);border:1px solid var(--border-default);border-radius:var(--radius-control);
  cursor:pointer;color:var(--text-muted);transition:var(--transition-control);
}
.wa-status-btn:hover{background:var(--btn-secondary-bg-hover);border-color:var(--check-borda);color:var(--text-heading)}
.wa-status-btn:focus-visible{box-shadow:var(--ring-focus)}
.wa-status-btn > svg{width:14px;height:14px}
.wa-menu-status{top:calc(100% + 4px);right:0;left:auto;min-width:200px}
.wa-menu-status button{display:flex;align-items:center;gap:var(--space-2);padding:7px 10px}
.wa-menu-status button > svg{margin-left:auto;margin-right:0;color:var(--text-heading)}
.wa-menu-status button.atual{background:var(--surface-muted)}
.wa-ico-btn{
  width:38px;height:38px;border-radius:var(--radius-pill);border:1px solid transparent;background:transparent;cursor:pointer;
  color:var(--text-muted);display:flex;align-items:center;justify-content:center;transition:var(--transition-control);flex-shrink:0;
}
.wa-ico-btn:hover{background:var(--surface-sunken);color:var(--text-heading)}
.wa-ico-btn:focus-visible{box-shadow:var(--ring-focus);outline:none}
/* no cabeçalho os botões ficam em grupo: a borda no hover faz o grupo ler como botões */
.wa-chat-head-acoes .wa-ico-btn:hover,.wa-left-acoes .wa-ico-btn:hover{border-color:var(--border-default)}
.wa-ico-btn svg{width:22px;height:22px}
.wa-ico-btn.gravando{color:var(--state-danger-fg);animation:wa-pulsa var(--dur-ciclo) infinite}
@keyframes wa-pulsa{50%{opacity:.4}}

.wa-msgs{flex:1;overflow-y:auto;padding:12px 7% 8px;z-index:1;display:flex;flex-direction:column}
.wa-dia{align-self:center;margin:10px 0 6px}
.wa-dia span{
  background:var(--surface-raised);color:var(--wa-sec);font-size:.72rem;padding:5px 12px;border-radius:var(--radius-md);
  box-shadow:var(--shadow-xs);font-weight:500;
}
.wa-bolha{
  max-width:65%;margin:2px 0;padding:6px 9px 7px;border-radius:var(--radius-md);position:relative;
  box-shadow:var(--shadow-xs);font-size:.885rem;line-height:1.45;
  align-self:flex-start;background:var(--wa-in);word-wrap:break-word;
}
.wa-bolha.minha{align-self:flex-end;background:var(--wa-out)}
.wa-bolha.midia{padding:4px}
.wa-bolha.midia .wa-bolha-meta{padding:2px 6px 0}
.wa-bolha.midia .wa-legenda{padding:4px 6px 0}
.wa-remetente{font-size:.78rem;font-weight:700;margin-bottom:2px;color:var(--wa-green)}
.wa-bolha-txt{white-space:pre-wrap}
/* formatação do WhatsApp: é conteúdo do usuário, por isso o 700 aqui não fere o DESIGN.md §3 */
.wa-bolha-txt strong{font-weight:var(--fw-bold)}
.wa-bolha-txt em{font-style:italic}
.wa-bolha-txt s{text-decoration:line-through}
.wa-mono{font-family:var(--font-mono);font-size:.92em;background:var(--surface-sunken);border-radius:var(--radius-xs);padding:0 3px}
pre.wa-mono{display:block;white-space:pre-wrap;padding:6px 8px;margin:2px 0}
.wa-bolha-meta{
  display:flex;justify-content:flex-end;align-items:center;gap:4px;margin-top:2px;
  font-size:var(--text-2xs);color:var(--text-muted);
}
.wa-bolha-meta svg{width:13px;height:13px}
.wa-ticks{letter-spacing:-2px;font-size:.78rem;color:var(--text-muted)}
.wa-ticks svg{width:16px;height:16px;vertical-align:-3px}
.wa-ticks.lida{color:var(--tick-lida)}
.wa-fila{font-style:italic}

/* mensagem editada: selo discreto; com histórico (chat-v14b) vira um <details> que abre as versões anteriores */
.wa-editada{display:flex;align-items:center;gap:4px;font-size:var(--text-2xs);color:var(--text-muted);font-style:italic;margin-top:3px}
.wa-editada svg{width:12px;height:12px}
.wa-edicoes summary{cursor:pointer;list-style:none;user-select:none}
.wa-edicoes summary::-webkit-details-marker{display:none}
.wa-edicoes summary:hover{color:var(--text-heading)}
.wa-edicoes summary:focus-visible{box-shadow:var(--ring-focus);border-radius:var(--radius-xs)}
.wa-edicoes-item{
  margin-top:4px;padding:4px 8px;border-left:2px solid var(--border-default);
  font-size:var(--text-xs);color:var(--text-muted);white-space:pre-wrap;word-break:break-word;
}
.wa-edicoes-item small{display:block;font-family:var(--font-mono);font-size:var(--text-2xs);margin-bottom:2px}
.wa-erro{color:var(--state-danger-fg);font-weight:600}
.wa-img{max-width:330px;max-height:340px;border-radius:var(--radius-sm);display:block;cursor:pointer}
.wa-figurinha{width:150px;height:150px;object-fit:contain;display:block}
.wa-video{max-width:330px;max-height:340px;border-radius:var(--radius-sm);display:block;background:var(--navy-950)}
.wa-audio{display:flex;align-items:center;gap:8px;min-width:260px;padding:4px 4px 0}
.wa-audio audio{height:36px;flex:1;max-width:280px}
.wa-transcricao{
  font-size:.78rem;color:var(--wa-sec);font-style:italic;border-top:1px dashed var(--border-subtle);
  margin-top:5px;padding:4px 6px 0;white-space:pre-wrap;
}
.wa-transcrever{border:none;background:none;color:var(--wa-green);font-size:.72rem;cursor:pointer;padding:3px 6px 0;text-align:left;display:inline-flex;align-items:center;gap:4px}
.wa-transcrever svg{width:12px;height:12px}
.wa-doc{
  display:flex;align-items:center;gap:10px;background:var(--surface-muted);border-radius:var(--radius-md);
  padding:10px 12px;min-width:240px;
}
.wa-doc-ico{font-size:1.6rem;display:flex;align-items:center}
.wa-doc-ico svg{width:28px;height:28px;color:var(--wa-sec)}
.wa-doc-info{flex:1;min-width:0}
.wa-doc-info b{font-size:.83rem;font-weight:500;display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.wa-doc-info small{color:var(--text-muted);font-size:var(--text-2xs)}
.wa-baixar{
  width:34px;height:34px;border-radius:var(--radius-pill);border:1.5px solid var(--wa-faint);color:var(--wa-sec);
  display:flex;align-items:center;justify-content:center;flex-shrink:0;background:none;cursor:pointer;
}
.wa-baixar:hover{border-color:var(--wa-green);color:var(--wa-green)}
.wa-baixar svg{width:16px;height:16px}

/* cluster de ações da bolha (responder · reagir · encaminhar) */
.wa-acoes-bolha{
  position:absolute;top:50%;transform:translateY(-50%);right:-106px;display:flex;gap:4px;
  opacity:0;transition:opacity var(--dur-fast) var(--ease-standard);z-index:3;
}
.wa-bolha.minha .wa-acoes-bolha{right:auto;left:-106px}
.wa-bolha:hover .wa-acoes-bolha,.wa-bolha:focus-within .wa-acoes-bolha{opacity:1}
.wa-acoes-bolha button{
  width:28px;height:28px;border-radius:var(--radius-pill);border:1px solid var(--wa-border);background:var(--surface-raised);
  color:var(--wa-sec);cursor:pointer;display:flex;align-items:center;justify-content:center;
  box-shadow:var(--shadow-sm);
}
.wa-acoes-bolha button:hover,.wa-acoes-bolha button:focus-visible{color:var(--wa-green);border-color:var(--wa-green)}
.wa-acoes-bolha button svg{width:15px;height:15px}

/* mensagem citada (responder) */
.wa-citado{
  display:flex;flex-direction:column;gap:1px;background:var(--surface-sunken);border-left:4px solid var(--wa-unread);
  border-radius:var(--radius-sm);padding:6px 10px;margin-bottom:5px;cursor:pointer;min-width:0;
}
.wa-citado.minha{border-left-color:var(--wa-green-dark)}
.wa-citado b{font-size:.76rem;color:var(--wa-green);font-weight:700}
.wa-citado.minha b{color:var(--wa-green-dark)}
.wa-citado span{
  font-size:.8rem;color:var(--wa-sec);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:340px;
}
.wa-fwd{display:flex;align-items:center;gap:4px;font-size:.72rem;color:var(--wa-faint);font-style:italic;margin-bottom:3px}
.wa-fwd svg{width:12px;height:12px}

/* barra "respondendo a..." acima do composer */
.wa-resposta-bar{
  background:var(--wa-head);border-top:1px solid var(--wa-border);padding:8px 16px 0;z-index:2;
  display:flex;align-items:center;gap:8px;
}

/* busca dentro da conversa */
.wa-busca-chat{
  background:var(--wa-head);border-top:1px solid var(--wa-border);padding:8px 14px;display:flex;
  gap:6px;align-items:center;position:relative;z-index:5;
}
.wa-busca-chat input{
  flex:1;border:none;background:var(--surface-field);border-radius:var(--radius-md);padding:8px 14px;font-size:.85rem;
}
.wa-busca-chat input:focus-visible{box-shadow:var(--ring-focus);outline:none}
.wa-busca-chat-res{
  position:absolute;top:100%;left:14px;right:14px;background:var(--surface-raised);border-radius:0 0 12px 12px;
  box-shadow:var(--shadow-lg);max-height:280px;overflow-y:auto;z-index:40;
}

/* destaque ao navegar até uma mensagem */
@keyframes wa-flash-anim{0%,60%{background:var(--state-warning-bg);box-shadow:0 0 0 3px var(--state-warning-border)}100%{}}
.wa-bolha.wa-flash,.wa-nota.wa-flash{animation:wa-flash-anim 1.8s ease-out}

/* player de áudio (velocidade + progresso) */
.wa-player{display:flex;align-items:center;gap:7px;min-width:300px;padding:4px 4px 2px}
.wa-player-ico{font-size:1.15rem;display:flex;align-items:center}
.wa-player-ico svg{width:18px;height:18px;color:var(--wa-sec)}
.wa-player-btn{
  width:34px;height:34px;border-radius:var(--radius-pill);border:none;background:var(--wa-green);color:var(--btn-primary-fg);
  cursor:pointer;display:flex;align-items:center;justify-content:center;flex-shrink:0;
}
.wa-player-btn svg{width:16px;height:16px}
.wa-player-meio{flex:1;min-width:120px;display:flex;flex-direction:column;gap:2px}
.wa-player-seek{
  -webkit-appearance:none;appearance:none;width:100%;height:4px;border-radius:2px;background:var(--border-default);
  outline:none;cursor:pointer;
}
.wa-player-seek::-webkit-slider-thumb{
  -webkit-appearance:none;width:13px;height:13px;border-radius:var(--radius-pill);background:var(--wa-green);cursor:pointer;
}
.wa-player-tempo{font-size:var(--text-2xs);color:var(--text-muted);font-variant-numeric:tabular-nums}
.wa-player-vel{
  border:1px solid var(--wa-border);background:var(--btn-secondary-bg);color:var(--wa-sec);border-radius:var(--radius-lg);
  padding:3px 8px;font-size:.72rem;font-weight:700;cursor:pointer;flex-shrink:0;
}
.wa-player-vel:hover{color:var(--wa-green);border-color:var(--wa-green)}
.wa-player audio{display:none}

.wa-reacts{position:absolute;bottom:-13px;left:6px;display:flex;gap:3px;z-index:2}
.wa-bolha.minha .wa-reacts{left:auto;right:6px}
.wa-react-pill{
  background:var(--surface-raised);border:1px solid var(--wa-border);border-radius:var(--radius-lg);padding:1px 7px;
  font-size:.76rem;cursor:pointer;box-shadow:var(--shadow-xs);color:var(--wa-sec);
  white-space:nowrap;
}
.wa-react-pill.minha{border-color:var(--wa-green);background:var(--surface-accent-soft)}
.wa-bolha.com-reacts{margin-bottom:16px}
.wa-react-paleta{
  position:fixed;z-index:300;background:var(--surface-raised);border-radius:var(--radius-pill);padding:6px 10px;display:flex;gap:2px;
  box-shadow:var(--shadow-lg);align-items:center;
}
.wa-react-paleta button{border:none;background:none;font-size:1.45rem;cursor:pointer;padding:4px;border-radius:var(--radius-pill);line-height:1;transition:transform var(--dur-fast) var(--ease-standard)}
.wa-react-paleta button:hover{transform:scale(1.12)}
.wa-react-paleta button.ativa{background:var(--surface-accent-soft)}
.wa-react-paleta button.remover{font-size:.9rem;color:var(--state-danger-fg)}
.wa-react-paleta button.remover svg{width:16px;height:16px}

/* anotação interna */
.wa-nota{
  align-self:center;max-width:76%;background:var(--wa-nota);border:1px solid var(--wa-nota-borda);
  border-radius:var(--radius-md);padding:8px 12px;margin:4px 0;font-size:.82rem;color:var(--state-warning-fg);
  box-shadow:var(--shadow-xs);
}
.wa-nota b{color:var(--state-warning-fg)}
.wa-nota .mencao{background:var(--surface-terra-soft);border-radius:var(--radius-xs);padding:0 3px;font-weight:600}
.wa-nota-meta{font-size:var(--text-2xs);color:var(--state-warning-fg);text-align:right;margin-top:3px}

/* ---------- composer ---------- */
.wa-composer{
  background:var(--wa-head);padding:8px 14px;display:flex;align-items:flex-end;gap:6px;z-index:2;
}
.wa-composer.nota{background:var(--wa-nota)}
.wa-composer textarea{
  flex:1;border:none;background:var(--surface-field);border-radius:var(--radius-md);padding:11px 14px;font-size:.9rem;
  color:var(--wa-text);resize:none;height:42px;min-height:42px;max-height:120px;
  font-family:inherit;line-height:1.4;
}
.wa-composer textarea:focus-visible{box-shadow:var(--ring-focus);outline:none}
.wa-composer.nota textarea{background:var(--surface-field)}
.wa-composer-btns{display:flex;align-items:center}
.wa-enviar{
  width:42px;height:42px;border-radius:var(--radius-pill);border:none;background:var(--wa-green);color:var(--btn-primary-fg);
  cursor:pointer;display:flex;align-items:center;justify-content:center;flex-shrink:0;transition:var(--transition-control);
}
.wa-enviar:hover{background:var(--btn-primary-bg-hover)}
.wa-enviar:focus-visible{box-shadow:var(--ring-focus);outline:none}
.wa-enviar svg{width:20px;height:20px}
.wa-aviso-nota{
  background:var(--state-warning-bg);border-top:1px solid var(--wa-nota-borda);color:var(--state-warning-fg);font-size:.72rem;
  padding:4px 16px;z-index:2;
}

/* anexo pendente */
.wa-anexo-previa{
  background:var(--wa-head);border-top:1px solid var(--wa-border);padding:10px 16px;z-index:2;
  display:flex;align-items:center;gap:12px;
}
.wa-anexo-previa img,.wa-anexo-previa video{max-height:90px;border-radius:var(--radius-md)}
.wa-anexo-info{flex:1;font-size:.82rem;color:var(--wa-sec)}
.wa-anexo-info b{color:var(--wa-text);display:block}

/* gravação de áudio */
.wa-rec{flex:1;display:flex;align-items:center;gap:12px;padding:6px 10px}
.wa-rec-dot{width:12px;height:12px;border-radius:var(--radius-pill);background:var(--state-danger-fg);animation:wa-pulsa 1s infinite}
.wa-rec-tempo{font-weight:700;color:var(--wa-text);font-variant-numeric:tabular-nums}
.wa-rec-dica{color:var(--wa-sec);font-size:.78rem}

/* mensagens agendadas — barra indicadora + popup sobre o composer */
.wa-ag-bar{
  background:var(--wa-head);border-top:1px solid var(--wa-border);padding:7px 16px;z-index:2;
  display:flex;align-items:center;gap:7px;font-size:.8rem;color:var(--wa-sec);cursor:pointer;
}
.wa-ag-bar:hover{background:var(--surface-sunken)}
.wa-ag-bar svg{width:14px;height:14px;color:var(--wa-green)}
.wa-ag-bar b{color:var(--wa-green-dark)}
.wa-ag-ver{margin-left:auto;color:var(--wa-green);font-weight:700;font-size:.76rem}
.wa-ag-pop{
  position:absolute;bottom:64px;left:14px;right:14px;max-width:480px;background:var(--surface-raised);border-radius:var(--radius-lg);
  box-shadow:var(--shadow-lg);z-index:30;max-height:340px;overflow-y:auto;padding:6px 0;
}
.wa-ag-pop-titulo{
  padding:10px 16px 8px;font-size:.78rem;font-weight:700;color:var(--wa-green-dark);
  text-transform:uppercase;letter-spacing:.4px;border-bottom:1px solid var(--wa-border);
  display:flex;align-items:center;gap:6px;position:sticky;top:0;background:var(--surface-raised);
}
.wa-ag-pop-titulo svg{width:14px;height:14px}
.wa-ag-item{padding:10px 16px;border-bottom:1px solid var(--wa-border)}
.wa-ag-item:last-child{border-bottom:none}
.wa-ag-txt{font-size:.85rem;color:var(--wa-text);line-height:1.4;white-space:pre-wrap;word-break:break-word}
.wa-ag-meta{
  font-size:var(--text-2xs);color:var(--text-muted);margin-top:4px;display:flex;align-items:center;gap:5px;
}
.wa-ag-meta svg{width:12px;height:12px;color:var(--wa-green)}
.wa-ag-acoes{display:flex;gap:8px;margin-top:8px}
.wa-ag-acoes .wa-btn{padding:5px 14px;font-size:.78rem}

/* emoji picker */
.wa-emojis{
  position:absolute;bottom:64px;left:14px;right:14px;max-width:420px;background:var(--surface-raised);border-radius:var(--radius-lg);
  box-shadow:var(--shadow-lg);z-index:30;padding:10px;max-height:300px;display:flex;
  flex-direction:column;
}
.wa-emojis-cats{display:flex;gap:2px;border-bottom:1px solid var(--wa-border);padding-bottom:6px;overflow-x:auto}
.wa-emojis-cats button{border:none;background:none;font-size:1.1rem;cursor:pointer;padding:4px 7px;border-radius:var(--radius-sm);opacity:.55}
.wa-emojis-cats button.ativo{opacity:1;background:var(--wa-rail)}
.wa-emojis-grid{overflow-y:auto;display:grid;grid-template-columns:repeat(auto-fill,minmax(34px,1fr));padding-top:6px}
.wa-emojis-grid button{border:none;background:none;font-size:1.35rem;cursor:pointer;padding:3px;border-radius:var(--radius-sm);line-height:1.3}
.wa-emojis-grid button:hover{background:var(--wa-rail)}

/* autocomplete de respostas rápidas e menções */
.wa-sugestoes{
  position:absolute;bottom:64px;left:60px;right:60px;max-width:520px;background:var(--surface-raised);border-radius:var(--radius-md);
  box-shadow:var(--shadow-lg);z-index:30;overflow:hidden;max-height:230px;overflow-y:auto;
}
.wa-sugestao{padding:9px 14px;cursor:pointer;font-size:.84rem;display:flex;gap:8px;align-items:baseline}
.wa-sugestao:hover,.wa-sugestao.foco{background:var(--btn-ghost-bg-hover)}
.wa-sugestao b{color:var(--wa-green);flex-shrink:0}
.wa-sugestao span{color:var(--wa-sec);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* menu do clipe (anexos) */
.wa-menu-anexo{
  position:absolute;bottom:64px;left:14px;background:var(--surface-raised);border-radius:var(--radius-lg);z-index:30;
  box-shadow:var(--shadow-lg);padding:8px;display:flex;flex-direction:column;gap:2px;min-width:200px;
}
.wa-menu-anexo button{
  display:flex;align-items:center;gap:10px;border:none;background:none;padding:9px 12px;cursor:pointer;
  font-size:.86rem;color:var(--wa-text);border-radius:var(--radius-md);text-align:left;
}
.wa-menu-anexo button:hover{background:var(--wa-hover)}
.wa-menu-anexo .ico{font-size:1.1rem;width:18px;height:18px;color:var(--wa-sec)}

/* menu ⋮ */
.wa-menu{
  position:absolute;top:52px;right:12px;background:var(--surface-raised);border-radius:var(--radius-md);z-index:40;
  box-shadow:var(--shadow-lg);padding:6px;display:flex;flex-direction:column;min-width:230px;
}
.wa-menu button{
  border:none;background:none;padding:10px 14px;cursor:pointer;font-size:.85rem;color:var(--wa-text);
  border-radius:var(--radius-md);text-align:left;
}
.wa-menu button:hover{background:var(--btn-ghost-bg-hover)}
.wa-menu button svg{width:15px;height:15px;vertical-align:-2px;margin-right:6px;color:var(--wa-sec)}

/* ---------- drawer (detalhes do contato/grupo) ---------- */
.wa-drawer{
  width:380px;min-width:320px;flex-shrink:0;border-left:1px solid var(--wa-border);background:var(--surface-card);
  display:flex;flex-direction:column;overflow-y:auto;
}
.wa-drawer-head{
  background:var(--wa-head);padding:12px 16px;display:flex;align-items:center;gap:14px;
  font-weight:500;font-size:.95rem;position:sticky;top:0;z-index:3;
}
.wa-drawer-foto{text-align:center;padding:22px 16px 8px}
.wa-drawer-foto .wa-avatar{width:150px;height:150px;margin:0 auto;font-size:3rem}
.wa-drawer-foto .wa-avatar svg{width:64px;height:64px}
.wa-drawer-nome{padding:8px 24px 4px;text-align:center}
.wa-drawer-nome h3{font-weight:500;font-size:1.15rem;display:flex;align-items:center;justify-content:center;gap:6px}
.wa-drawer-nome small{color:var(--wa-sec);font-size:.83rem}
.wa-drawer-tabs{display:flex;border-bottom:1px solid var(--wa-border);margin-top:10px;position:sticky;top:56px;background:var(--surface-card);z-index:3}
.wa-drawer-tabs button{
  flex:1;border:none;background:none;padding:11px 6px;cursor:pointer;font-size:.8rem;font-weight:600;
  color:var(--wa-sec);border-bottom:3px solid transparent;
}
.wa-drawer-tabs button:hover{color:var(--text-heading);background:var(--surface-sunken)}
.wa-drawer-tabs button.ativo{color:var(--wa-green-dark);border-bottom-color:var(--wa-green)}
.wa-drawer-corpo{padding:14px 18px 24px}
.wa-campo{margin-bottom:14px}
.wa-campo label{font-size:.72rem;color:var(--wa-green);font-weight:600;display:block;margin-bottom:4px}
.wa-campo label .chip{margin-left:6px;vertical-align:middle}
.wa-ico-inline svg{width:13px;height:13px;vertical-align:-2px}
.wa-campo select,.wa-campo input{
  width:100%;border:1px solid var(--wa-border);border-radius:var(--radius-md);padding:8px 10px;font-size:.85rem;
  color:var(--wa-text);background:var(--surface-field);
}
.wa-campo select:focus-visible,.wa-campo input:focus-visible{box-shadow:var(--ring-focus);outline:none}
.wa-tags-chips{display:flex;flex-wrap:wrap;gap:6px}
.wa-tag{
  border:1.5px solid var(--wa-border);background:none;border-radius:var(--radius-lg);padding:4px 12px;font-size:.76rem;
  cursor:pointer;color:var(--wa-sec);font-weight:600;
}
.wa-tag:hover{background:var(--surface-sunken);color:var(--text-heading);border-color:var(--check-borda)}
.wa-tag.ativo{color:var(--text-on-brand);border-color:transparent}
.wa-participante{display:flex;align-items:center;gap:10px;padding:7px 0;border-bottom:1px solid var(--wa-border)}
.wa-participante .wa-avatar{width:36px;height:36px;font-size:.8rem}
.wa-participante-info{flex:1;min-width:0;font-size:.85rem}
.wa-participante-info b{font-weight:var(--fw-medium)}
.wa-participante .wa-btn{height:28px;padding:0 10px;font-size:var(--text-xs)}
.wa-participante-info small{color:var(--wa-faint);display:block;font-size:.7rem}
.wa-galeria{display:grid;grid-template-columns:repeat(3,1fr);gap:4px}
.wa-galeria img,.wa-galeria video{width:100%;aspect-ratio:1;object-fit:cover;border-radius:var(--radius-sm);cursor:pointer}
.wa-nota-hist{
  background:var(--wa-nota);border:1px solid var(--wa-nota-borda);border-radius:var(--radius-md);padding:9px 12px;
  margin-bottom:8px;font-size:.82rem;color:var(--state-warning-fg);
}
.wa-btn{
  height:32px;border:1px solid transparent;border-radius:var(--radius-control);padding:0 14px;font-size:.83rem;font-weight:600;
  cursor:pointer;background:var(--btn-primary-bg);color:var(--btn-primary-fg);transition:var(--transition-control);
  display:inline-flex;align-items:center;gap:6px;justify-content:center;white-space:nowrap;
}
.wa-btn svg{width:14px;height:14px}
.wa-btn:hover{background:var(--btn-primary-bg-hover)}
.wa-btn:active{background:var(--btn-primary-bg-active);transform:translateY(1px)}
.wa-btn:focus-visible{box-shadow:var(--ring-focus);outline:none}
.wa-btn.claro{background:var(--btn-secondary-bg);color:var(--btn-secondary-fg);border-color:var(--border-default)}
.wa-btn.claro:hover{background:var(--btn-secondary-bg-hover);border-color:var(--check-borda)}
.wa-btn.claro:active{background:var(--surface-sunken)}
.wa-btn.perigo{background:var(--state-danger-bg);color:var(--state-danger-fg);border-color:var(--state-danger-border)}
.wa-btn.perigo:hover{background:var(--state-danger-bg);border-color:var(--state-danger-fg);filter:brightness(.97)}
.wa-btn.perigo:active{background:var(--state-danger-bg)}
.wa-btn:disabled{opacity:var(--disabled-opacity);cursor:not-allowed;transform:none}

/* ---------- painéis do rail (esquerda) ---------- */
.wa-painel-lista{flex:1;overflow-y:auto;padding:4px 0}
.wa-item{
  padding:12px 18px;border-bottom:1px solid var(--wa-border);cursor:pointer;font-size:.86rem;
}
.wa-item:hover{background:var(--btn-ghost-bg-hover)}
.wa-item b{font-weight:500;display:block}
.wa-item small{color:var(--wa-sec);font-size:.76rem;display:block;margin-top:2px;line-height:1.4}
.wa-item .linha{display:flex;justify-content:space-between;align-items:center;gap:8px}
.wa-secao-titulo{
  padding:14px 18px 6px;font-size:.72rem;font-weight:700;color:var(--wa-green-dark);
  text-transform:uppercase;letter-spacing:.4px;
}
.wa-form-inline{padding:10px 18px;display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.wa-form-inline input[type=text]{
  flex:1;min-width:110px;border:1px solid var(--wa-border);border-radius:var(--radius-md);padding:8px 10px;
  font-size:.84rem;color:var(--wa-text);
}
.wa-form-inline input[type=text]:focus-visible{box-shadow:var(--ring-focus);outline:none}
.wa-form-inline input[type=color]{width:34px;height:34px;border:none;background:none;cursor:pointer;padding:0}
.wa-notif{display:flex;gap:10px;padding:12px 16px;border-bottom:1px solid var(--wa-border);cursor:pointer;align-items:flex-start}
.wa-notif:hover{background:var(--btn-ghost-bg-hover)}
.wa-notif.naolida{background:var(--surface-accent-soft)}
.wa-notif-ico{font-size:1.2rem;flex-shrink:0;display:flex;align-items:center;padding-top:2px}
.wa-notif-ico svg{width:19px;height:19px;color:var(--wa-green)}
.wa-notif-corpo{flex:1;min-width:0;font-size:.83rem;line-height:1.45}
.wa-notif-corpo small{color:var(--wa-faint);font-size:.7rem;display:block;margin-top:2px}

/* ---------- painéis grandes (dashboard/relatórios) ---------- */
.wa-painel-grande{padding:26px 34px;max-width:1080px;width:100%;margin:0 auto}
.wa-painel-grande h2{font-weight:700;font-size:1.3rem;margin-bottom:4px;color:var(--wa-text);display:flex;align-items:center;gap:8px}
.wa-painel-grande h2 svg{width:22px;height:22px;flex-shrink:0;color:var(--wa-green-dark)}
.wa-painel-grande .sub{color:var(--wa-sec);font-size:.85rem;margin-bottom:20px}
.wa-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:12px;margin-bottom:20px}
.wa-card{
  background:var(--surface-card);border:1px solid var(--wa-border);border-radius:var(--radius-lg);padding:16px 18px;
  box-shadow:var(--shadow-xs);
}
.wa-card .num{font-size:1.7rem;font-weight:700;color:var(--wa-text)}
.wa-card .rot{font-size:.75rem;color:var(--wa-sec);margin-top:2px;line-height:1.35}
.wa-card.destaque .num{color:var(--wa-green)}
.wa-bloco{
  background:var(--surface-card);border:1px solid var(--wa-border);border-radius:var(--radius-lg);padding:18px 20px;margin-bottom:16px;
  box-shadow:var(--shadow-xs);
}
.wa-bloco h4{font-size:.92rem;font-weight:700;margin-bottom:12px;color:var(--wa-text)}
.wa-bloco .hbar-label{color:var(--wa-sec)}
.wa-bloco .hbar-val{color:var(--wa-text)}
.wa-bloco .hbar-track{background:var(--border-subtle)}
.wa-fila-item{
  display:grid;grid-template-columns:1fr auto;gap:2px 12px;padding:10px 4px;cursor:pointer;
  border-bottom:1px solid var(--wa-border);align-items:center;font-size:.88rem;
}
.wa-fila-item:hover{background:var(--wa-hover)}
.wa-fila-item small{color:var(--wa-sec);grid-column:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.wa-fila-item .wa-fila-espera{font-weight:700;font-size:.82rem;text-align:right}
.wa-filtros-rel{display:flex;gap:10px;margin-bottom:18px;flex-wrap:wrap;align-items:center}
.wa-filtros-rel select,.wa-filtros-rel input{
  border:1px solid var(--wa-border);border-radius:var(--radius-md);padding:8px 10px;font-size:.84rem;background:var(--surface-field);
  color:var(--wa-text);
}
.wa-filtros-rel select:focus-visible,.wa-filtros-rel input:focus-visible{box-shadow:var(--ring-focus);outline:none}

/* enquete (poll) na bolha */
.wa-enquete{min-width:240px;max-width:330px;padding:2px 2px 0}
.wa-enquete-perg{font-weight:600;font-size:.9rem;margin-bottom:8px}
.wa-enquete-op{
  display:flex;justify-content:space-between;align-items:center;gap:8px;
  border:1.5px solid var(--border-subtle);border-radius:var(--radius-md);padding:7px 11px;margin-bottom:5px;
  font-size:.85rem;background:var(--surface-translucida);
}
.wa-enquete-op.votada{border-color:var(--wa-green);background:var(--surface-accent-soft)}
.wa-enquete-op b{color:var(--wa-green);font-size:.78rem;white-space:nowrap}
.wa-enquete small{color:var(--wa-faint);font-size:.72rem;display:block;margin-top:3px}

/* ---------- kanban ---------- */
.wa-kanban{display:flex;gap:12px;align-items:flex-start;overflow-x:auto;padding-bottom:14px}
.wa-kcol{
  min-width:230px;width:230px;flex-shrink:0;background:var(--surface-sunken);border-radius:var(--radius-lg);padding:8px;
  border:2px dashed transparent;transition:border-color var(--dur-fast) var(--ease-standard);
}
.wa-kcol.alvo{border-color:var(--wa-green)}
.wa-kcol-cab{
  display:flex;align-items:center;gap:7px;font-size:.8rem;font-weight:700;color:var(--wa-text);
  padding:4px 6px 10px;text-transform:uppercase;letter-spacing:.3px;
}
.wa-kcol-cab .chip{text-transform:uppercase}
.wa-kqtd{margin-left:auto;background:var(--surface-card);border-radius:var(--radius-md);padding:1px 8px;font-size:.72rem;color:var(--wa-sec)}
.wa-kcol-corpo{display:flex;flex-direction:column;gap:8px;min-height:60px;max-height:calc(100vh - 250px);overflow-y:auto}
.wa-kcard{
  background:var(--surface-card);border-radius:var(--radius-md);padding:10px 12px;cursor:grab;box-shadow:var(--shadow-xs);
  border:1px solid var(--wa-border);
}
.wa-kcard:active{cursor:grabbing}
.wa-kcard:hover{box-shadow:0 3px 10px var(--border-subtle)}
.wa-kcard-topo{display:flex;justify-content:space-between;gap:6px;align-items:center}
.wa-kcard-topo b{font-weight:600;font-size:.86rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.wa-kcard small{color:var(--wa-sec);font-size:.75rem;display:block;margin:3px 0;line-height:1.35}
.wa-kcard-rodape{display:flex;gap:4px;flex-wrap:wrap;align-items:center;font-size:var(--text-2xs);color:var(--text-muted)}
.wa-kvazio{text-align:center;color:var(--wa-faint);font-size:.75rem;padding:14px}

/* ---------- automações ---------- */
.wa-toggle{position:relative;display:inline-block;width:40px;height:22px;flex-shrink:0;cursor:pointer;margin-top:2px}
.wa-toggle input{opacity:0;width:0;height:0}
.wa-toggle span{
  position:absolute;inset:0;background:var(--control-track-off);border-radius:var(--radius-pill);
  transition:background var(--dur-base) var(--ease-standard);
}
.wa-toggle span:before{
  content:'';position:absolute;width:16px;height:16px;border-radius:var(--radius-pill);background:var(--white);top:3px;left:3px;
  transition:left var(--dur-base) var(--ease-out);box-shadow:var(--shadow-sm);
}
.wa-toggle input:focus-visible+span{box-shadow:var(--ring-focus)}
.wa-toggle input:checked+span{background:var(--wa-green)}
.wa-toggle input:checked+span:before{left:21px}
.wa-auto-linha{display:flex;gap:8px;margin-bottom:8px;align-items:center}
.wa-auto-linha select{max-width:280px;flex-shrink:0}
.wa-auto-linha input{flex:1}

/* lightbox de mídia */
.wa-lightbox{
  position:fixed;inset:0;background:var(--scrim-midia);z-index:200;display:flex;flex-direction:column;
}
.wa-lightbox-top{display:flex;justify-content:flex-end;gap:8px;padding:14px 20px}
.wa-lightbox-top button,.wa-lightbox-top a{
  border:none;background:var(--surface-nav-active);color:var(--white);width:42px;height:42px;border-radius:var(--radius-pill);
  cursor:pointer;font-size:1.1rem;display:flex;align-items:center;justify-content:center;
}
.wa-lightbox-top svg{width:18px;height:18px}
.wa-lightbox img,.wa-lightbox video{max-width:88vw;max-height:78vh;margin:auto;border-radius:var(--radius-sm)}

/* matriz de permissões (admin) */
.wa-matriz{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.wa-matriz-grupo{border:1px solid var(--wa-border);border-radius:var(--radius-md);padding:10px 12px}
.wa-matriz-grupo b{display:block;margin-bottom:6px;font-size:.82rem}
.wa-matriz-grupo b svg{width:14px;height:14px;vertical-align:-2px;margin-right:4px;color:var(--wa-green)}
.wa-matriz-grupo label{display:flex;gap:7px;align-items:center;padding:3px 0;font-size:.8rem;cursor:pointer}
@media (max-width:900px){.wa-matriz{grid-template-columns:1fr}}

/* aviso de motor offline */
#wa-motor-aviso{
  position:fixed;top:10px;left:50%;transform:translateX(-50%);z-index:400;
  background:var(--btn-danger-bg);color:var(--btn-danger-fg);font-size:.82rem;font-weight:600;padding:8px 18px;
  border-radius:var(--radius-md);box-shadow:var(--shadow-lg);max-width:90vw;text-align:center;
}

/* responsivo simples */
@media (max-width: 1100px){ .wa-drawer{position:absolute;right:0;top:0;bottom:0;box-shadow:var(--shadow-lg);z-index:50} }
@media (max-width: 860px){ .wa-left{width:320px} .wa-msgs{padding:12px 3% 8px} }

/* DESIGN.md §5: animações que não repousam param para quem pediu menos movimento */
@media (prefers-reduced-motion:reduce){
  .wa-ico-btn.gravando,.wa-bolha.wa-flash,.wa-nota.wa-flash{animation:none}
  /* também nos estados abertos: as regras :hover/:focus-within redeclaram transition com mais especificidade */
  .wa-rail,.wa-rail:hover,.wa-rail:focus-within,.wa-rail-rotulo,.wa-rail:hover .wa-rail-rotulo,.wa-rail:focus-within .wa-rail-rotulo,
  .wa-rail-badge,.wa-rail:hover .wa-rail-badge,.wa-rail:focus-within .wa-rail-badge{transition:none}
}