[hidden] {
  display: none !important;
}

:root,
[data-theme="dark"] {
  --wa-bg: #0b141a;
  --wa-sidebar-bg: #111b21;
  --wa-header-bg: #202c33;
  --wa-hover: #202c33;
  --wa-active: #2a3942;
  --wa-border: #222d34;
  --wa-text: #e9edef;
  --wa-text-muted: #8696a0;
  --wa-accent: #00a884;
  --wa-accent-strong: #06cf9c;
  --wa-bubble-in: #202c33;
  --wa-bubble-out: #005c4b;
  --wa-tick-read: #53bdeb;
  --wa-danger: #f15c6d;
  --wa-badge-bg: #364147;
  --wa-badge-text: #cbd5e1;
  --wa-bubble-meta-text: rgba(233, 237, 239, 0.6);
  --wa-warning-bg: #3a2a12;
  --wa-warning-text: #ffcf86;
  --wa-vencida-bg: #3a1414;
  --wa-vencida-text: #ffb4b4;
  --wa-vencida-borda: #dc2626;
  --wa-scheme: dark;
}

[data-theme="light"] {
  --wa-bg: #efeae2;
  --wa-sidebar-bg: #ffffff;
  --wa-header-bg: #f0f2f5;
  --wa-hover: #f5f6f6;
  --wa-active: #e9edef;
  --wa-border: #d1d7db;
  --wa-text: #111b21;
  --wa-text-muted: #667781;
  --wa-accent: #00a884;
  --wa-accent-strong: #06966f;
  --wa-bubble-in: #ffffff;
  --wa-bubble-out: #d9fdd3;
  --wa-tick-read: #53bdeb;
  --wa-danger: #d9376e;
  --wa-badge-bg: #e2e5e7;
  --wa-badge-text: #3b4a54;
  --wa-bubble-meta-text: rgba(17, 27, 33, 0.5);
  --wa-warning-bg: #fff3cd;
  --wa-warning-text: #7a5200;
  --wa-vencida-bg: #fdecec;
  --wa-vencida-text: #a01722;
  --wa-vencida-borda: #dc2626;
  --wa-scheme: light;
}

@media (prefers-color-scheme: light) {
  :root:not([data-theme]) {
    --wa-bg: #efeae2;
    --wa-sidebar-bg: #ffffff;
    --wa-header-bg: #f0f2f5;
    --wa-hover: #f5f6f6;
    --wa-active: #e9edef;
    --wa-border: #e9edef;
    --wa-text: #111b21;
    --wa-text-muted: #667781;
    --wa-accent: #00a884;
    --wa-accent-strong: #06966f;
    --wa-bubble-in: #ffffff;
    --wa-bubble-out: #d9fdd3;
    --wa-tick-read: #53bdeb;
    --wa-danger: #d9376e;
    --wa-badge-bg: #e2e5e7;
    --wa-badge-text: #3b4a54;
    --wa-bubble-meta-text: rgba(17, 27, 33, 0.5);
    --wa-warning-bg: #fff3cd;
    --wa-warning-text: #7a5200;
    --wa-vencida-bg: #fdecec;
    --wa-vencida-text: #a01722;
    --wa-vencida-borda: #dc2626;
    --wa-scheme: light;
  }
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: "Segoe UI", -apple-system, Roboto, sans-serif;
  background: var(--wa-bg);
  color: var(--wa-text);
}

.wa-app {
  display: flex;
  height: 100vh;
}

/* ---------- Sidebar ---------- */

.wa-sidebar {
  width: 360px;
  flex-shrink: 0;
  background: var(--wa-sidebar-bg);
  border-right: 1px solid var(--wa-border);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.wa-sidebar-header {
  background: var(--wa-header-bg);
  padding: 10px 14px;
  display: flex;
  align-items: center;
  justify-content: flex-end;
}

.wa-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 15px;
  min-width: 0;
  flex: 1 1 auto;
  overflow: hidden;
}

.wa-brand strong {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.wa-brand-avatar {
  width: 34px;
  height: 34px;
  flex-shrink: 0;
  border-radius: 50%;
  object-fit: cover;
}

.wa-icon-btn {
  /* 44px = alvo minimo recomendado (Apple HIG / Material) pra toque no
     celular - 36px media errava fora do botao com frequencia */
  width: 44px;
  height: 44px;
  /* sem isso, dentro de uma fila flex apertada (ex: header com 7 icones) o
     navegador comprime largura/altura de forma desigual pra caber - um
     circulo de 44px vira oval ou soma tao pouco espaco que fica ilegivel */
  flex-shrink: 0;
  border-radius: 50%;
  border: none;
  background: transparent;
  color: var(--wa-text-muted);
  font-size: 17px;
  cursor: pointer;
}

.wa-icon-btn:hover {
  background: var(--wa-active);
  color: var(--wa-text);
}

.wa-plantao-banner {
  background: var(--wa-warning-bg);
  color: var(--wa-warning-text);
  font-size: 12px;
  padding: 8px 14px;
  border-bottom: 1px solid var(--wa-border);
}

.wa-header-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 4px;
  flex-shrink: 0;
}

/* Essa fila fica dentro da barra lateral, largura FIXA de 360px - com 7
   icones de 44px o calculo bate exatamente 0px de sobra (qualquer variacao
   de fonte/DPI estoura). Quem usa mouse nao precisa do alvo maior (isso e
   coisa de touch) - entao so aqui, so pra quem tem mouse, volta pro tamanho
   compacto. Touch (celular/tablet) mantem 44px em qualquer lugar do app,
   inclusive aqui, porque la a barra e 100% da tela (sobra espaco de sobra). */
@media (pointer: fine) {
  .wa-header-actions .wa-icon-btn {
    width: 36px;
    height: 36px;
  }
}

.wa-agent-row {
  padding: 8px 12px;
  border-bottom: 1px solid var(--wa-border);
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 13px;
}

.wa-agent-row #loggedAgentLabel {
  font-weight: 600;
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.wa-agent-status-select {
  font-size: 12px;
  padding: 3px 6px;
  border-radius: 6px;
  border: 1px solid var(--wa-border);
  background: var(--wa-header-bg);
  color: var(--wa-text);
  flex-shrink: 0;
}

.wa-operador-row {
  padding: 6px 12px;
  border-bottom: 1px solid var(--wa-border);
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
}

.wa-operador-label {
  color: var(--wa-text-muted);
  white-space: nowrap;
}

.wa-operador-row select {
  flex: 1;
  min-width: 0;
  padding: 4px 6px;
  border-radius: 6px;
  border: 1px solid var(--wa-border);
  background: var(--wa-active);
  color: var(--wa-text);
  font-size: 12px;
}

.wa-operador-row .wa-icon-btn {
  width: 26px;
  height: 26px;
  font-size: 13px;
}

.wa-link-btn {
  background: none;
  border: none;
  color: var(--wa-text-muted);
  font-size: 12px;
  cursor: pointer;
  text-decoration: underline;
}

.wa-link-btn:hover {
  color: var(--wa-text);
}

.wa-search {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 8px 12px;
  padding: 6px 12px;
  border-radius: 20px;
  background: var(--wa-header-bg);
}

.wa-search-icon {
  font-size: 13px;
  opacity: 0.7;
}

/* Dica do atalho "/" - o atalho ja existia (junto com Ctrl+K) mas nao tinha
 * nenhuma pista visual, so quem ja soubesse usava. Some com foco/texto pra
 * nao poluir enquanto o campo esta em uso. */
.wa-search-shortcut-hint {
  font-family: inherit;
  font-size: 11px;
  padding: 1px 6px;
  border-radius: 4px;
  border: 1px solid var(--wa-border);
  color: var(--wa-text-muted);
  background: var(--wa-bg);
  flex-shrink: 0;
}

.wa-search input:focus ~ .wa-search-shortcut-hint,
.wa-search-shortcut-hint.wa-oculto {
  display: none;
}

.wa-search input {
  flex: 1;
  border: none;
  background: transparent;
  color: var(--wa-text);
  font-size: 13px;
  outline: none;
}

.wa-metrics {
  padding: 6px 14px;
  font-size: 11px;
  color: var(--wa-text-muted);
  display: flex;
  flex-wrap: wrap;
  gap: 4px 14px;
  border-bottom: 1px solid var(--wa-border);
}

.wa-metrics span b {
  color: var(--wa-text);
}

.wa-senha-tecnica {
  cursor: pointer;
  user-select: none;
}

.wa-senha-tecnica b {
  letter-spacing: 0.5px;
}

.wa-senha-tecnica:hover b {
  text-decoration: underline;
}

.wa-chat-list {
  list-style: none;
  margin: 0;
  padding: 0;
  overflow-y: auto;
  flex: 1;
}

.wa-chat-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 14px;
  cursor: pointer;
  border-bottom: 1px solid var(--wa-border);
}

.wa-chat-item:hover {
  background: var(--wa-hover);
}

.wa-chat-item.active {
  background: var(--wa-active);
}

.wa-avatar {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 600;
  font-size: 16px;
  color: #0b141a;
}

.wa-chat-item .wa-item-main {
  flex: 1;
  min-width: 0;
}

.wa-item-row {
  display: flex;
  align-items: baseline;
  gap: 6px;
}

.wa-item-row .name {
  flex: 1;
  min-width: 0;
  font-size: 14px;
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.wa-item-row .time {
  font-size: 11px;
  color: var(--wa-text-muted);
  flex-shrink: 0;
}

.wa-item-row2 {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  margin-top: 2px;
}

.wa-item-preview {
  font-size: 12.5px;
  color: var(--wa-text-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.wa-badge {
  flex-shrink: 0;
  font-size: 10px;
  padding: 2px 7px;
  border-radius: 10px;
  background: var(--wa-badge-bg);
  color: var(--wa-badge-text);
  white-space: nowrap;
}

/* A cor do texto TEM que vir junto do fundo fixo: sem ela o badge herda
   --wa-badge-text, que no tema claro e escuro (#3b4a54) - dava cinza escuro
   com letra escura, ilegivel. Mesmo padrao dos dois de baixo. */
.wa-badge.BOT { background: #4b5563; color: #e5e7eb; }
.wa-badge.AGUARDANDO { background: #92400e; color: #ffe4b8; }
.wa-badge.EM_ATENDIMENTO { background: #065f46; color: #b7f5df; }

.wa-queue-tag {
  flex-shrink: 0;
  font-size: 10px;
  padding: 2px 7px;
  border-radius: 10px;
  background: var(--wa-accent);
  color: #fff;
  white-space: nowrap;
}

/* ---------- Chat area ---------- */

.wa-chat {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  background: var(--wa-bg);
}

.wa-empty-state {
  margin: auto;
  text-align: center;
  color: var(--wa-text-muted);
  max-width: 380px;
}

.wa-empty-logo {
  font-size: 64px;
  margin-bottom: 12px;
  opacity: 0.6;
}

.wa-empty-state h2 {
  color: var(--wa-text);
  font-weight: 300;
  margin: 0 0 8px;
}

.wa-chat-view {
  display: flex;
  flex-direction: column;
  height: 100%;
  min-width: 0;
}

.wa-chat-header {
  background: var(--wa-header-bg);
  padding: 10px 16px;
  display: flex;
  align-items: center;
  gap: 12px;
  border-bottom: 1px solid var(--wa-border);
}

.wa-chat-header .wa-avatar {
  width: 40px;
  height: 40px;
  font-size: 14px;
}

.wa-chat-header-info {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
}

.wa-chat-header-info strong {
  font-size: 15px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.wa-meta {
  font-size: 12px;
  color: var(--wa-text-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.wa-copy-btn {
  border: none;
  background: transparent;
  color: var(--wa-text-muted);
  cursor: pointer;
  font-size: 12px;
  padding: 0;
  line-height: 1;
  flex-shrink: 0;
}

.wa-copy-btn:hover {
  color: var(--wa-text);
}

.wa-chat-actions {
  display: flex;
  gap: 8px;
}

.wa-chat-actions button,
.wa-modal-actions button {
  padding: 7px 14px;
  border-radius: 6px;
  border: none;
  background: var(--wa-accent);
  color: #062f27;
  font-weight: 600;
  font-size: 13px;
  cursor: pointer;
}

.wa-chat-actions button:hover,
.wa-modal-actions button:hover {
  background: var(--wa-accent-strong);
}

.wa-btn-danger {
  padding: 7px 14px;
  border-radius: 6px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  background: transparent !important;
  color: var(--wa-danger) !important;
  border: 1px solid var(--wa-danger) !important;
}

.wa-btn-danger:hover {
  background: rgba(241, 92, 109, 0.12) !important;
}

.wa-btn-secondary {
  padding: 7px 14px;
  border-radius: 6px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  background: transparent !important;
  color: var(--wa-text) !important;
  border: 1px solid var(--wa-border) !important;
}

.wa-btn-secondary:hover {
  background: var(--wa-hover) !important;
}

.wa-messages-wrap {
  flex: 1;
  overflow-y: auto;
  background-color: var(--wa-bg);
  background-image:
    radial-gradient(circle at 20% 10%, rgba(255,255,255,0.02) 0, transparent 40%),
    radial-gradient(circle at 80% 60%, rgba(255,255,255,0.015) 0, transparent 45%);
}

.wa-messages {
  padding: 16px 8% 16px;
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-height: 100%;
  justify-content: flex-end;
}

.wa-date-separator {
  align-self: center;
  background: var(--wa-header-bg);
  color: var(--wa-text-muted);
  font-size: 11.5px;
  padding: 4px 12px;
  border-radius: 8px;
  margin: 10px 0;
}

.wa-msg-row {
  display: flex;
}

.wa-msg-row.ENTRADA { justify-content: flex-start; }
.wa-msg-row.SAIDA { justify-content: flex-end; }

.wa-bubble {
  max-width: min(65%, 480px);
  padding: 6px 9px 8px;
  border-radius: 8px;
  font-size: 14.2px;
  line-height: 1.35;
  position: relative;
  word-wrap: break-word;
}

.wa-bubble.ENTRADA {
  background: var(--wa-bubble-in);
  border-top-left-radius: 0;
}

.wa-bubble.SAIDA {
  background: var(--wa-bubble-out);
  border-top-right-radius: 0;
}

.wa-bubble .wa-bubble-text {
  margin-right: 54px;
  white-space: pre-wrap;
  display: inline;
}

/* mencao (@numero) dentro da mensagem - e um <button> pra ja vir acessivel
   pelo teclado, mas tem que parecer link no meio do texto */
.wa-bubble .wa-mention {
  background: none;
  border: none;
  padding: 0;
  font: inherit;
  color: var(--wa-tick-read);
  cursor: pointer;
  text-decoration: none;
}

.wa-bubble .wa-mention:hover,
.wa-bubble .wa-mention:focus-visible {
  text-decoration: underline;
}

.wa-bubble .wa-bubble-text code {
  background: rgba(0, 0, 0, 0.15);
  padding: 1px 4px;
  border-radius: 3px;
  font-family: "Courier New", monospace;
  font-size: 0.95em;
}

.wa-bubble .wa-bubble-meta {
  position: absolute;
  right: 9px;
  bottom: 6px;
  font-size: 10.5px;
  color: var(--wa-bubble-meta-text);
  display: flex;
  align-items: center;
  gap: 3px;
  white-space: nowrap;
}

.wa-bubble-reaction {
  position: absolute;
  bottom: -10px;
  left: 6px;
  background: var(--wa-bg);
  border-radius: 999px;
  padding: 1px 5px;
  font-size: 13px;
  line-height: 1.4;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);
}

.wa-tick {
  font-size: 12px;
  letter-spacing: -2px;
}

.wa-tick.lida { color: var(--wa-tick-read); }
.wa-tick.pendente { letter-spacing: normal; opacity: 0.7; }
.wa-tick.falha { letter-spacing: normal; }

.wa-reply-form {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 16px;
  background: var(--wa-header-bg);
}

.wa-recording-indicator {
  font-size: 13px;
  color: var(--wa-text);
  white-space: nowrap;
  display: flex;
  align-items: center;
  gap: 4px;
  animation: wa-recording-pulse 1s ease-in-out infinite;
}

@keyframes wa-recording-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.4; }
}

.wa-reply-form input {
  min-width: 0;
  padding: 11px 16px;
  border-radius: 22px;
  border: none;
  background: var(--wa-active);
  color: var(--wa-text);
  font-size: 14px;
  outline: none;
}

.wa-reply-text-wrap {
  position: relative;
  flex: 1;
  min-width: 0;
}

/* Lista de campanhas de prospeccao: cresce com o conteudo, sem rolagem
   interna. Cada card pode abrir editor, importador, previa e a lista de
   contatos - dentro de uma caixa de 220px isso vira uma fresta. */
.wa-prospeccao-lista {
  list-style: none;
  margin: 0;
  padding: 0;
}

/* Texto de apoio ao lado de um checkbox. Precisa do <span> em volta do texto:
   num flex container CADA filho vira um item, entao <strong> e <code> soltos
   no meio da frase viravam colunas separadas e a frase quebrava em pedacos
   empilhados. */
.wa-check-hint {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  line-height: 1.5;
}

.wa-check-hint input[type="checkbox"] {
  margin-top: 3px;
  flex-shrink: 0;
}

.wa-reply-text-wrap input,
.wa-reply-text-wrap textarea {
  width: 100%;
  box-sizing: border-box;
}

/* O campo de mensagem virou textarea (pra preservar quebra de linha das
   respostas rapidas), mas continua parecendo e se comportando como a caixa
   de uma linha de antes: sem alca de redimensionar e crescendo sozinho ate
   um limite, em vez de virar uma caixa grande e fixa. */
.wa-reply-text-wrap textarea {
  resize: none;
  overflow-y: auto;
  max-height: 120px;
  line-height: 1.4;
  font-family: inherit;
  font-size: inherit;
}

.wa-reply-break {
  display: none;
}

.wa-send-btn {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  border: none;
  background: var(--wa-accent);
  color: #062f27;
  font-size: 17px;
  cursor: pointer;
  flex-shrink: 0;
}

.wa-send-btn:hover {
  background: var(--wa-accent-strong);
}

/* ---------- MSL panel ---------- */

.msl-panel {
  width: 300px;
  flex-shrink: 0;
  background: var(--wa-sidebar-bg);
  border-left: 1px solid var(--wa-border);
  padding: 16px;
  overflow-y: auto;
}

.msl-panel h2 {
  font-size: 14px;
  margin: 0 0 12px;
  color: var(--wa-accent-strong);
}

.msl-panel .aviso {
  font-size: 13px;
  color: var(--wa-text-muted);
}

.msl-cliente {
  font-size: 13px;
  margin-bottom: 16px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--wa-border);
}

.msl-cliente strong {
  display: block;
  font-size: 14px;
  margin-bottom: 4px;
}

.msl-section-title {
  font-size: 11px;
  text-transform: uppercase;
  color: var(--wa-text-muted);
  margin: 12px 0 6px;
}

.msl-card {
  background: var(--wa-header-bg);
  border-radius: 8px;
  padding: 8px 10px;
  margin-bottom: 6px;
  font-size: 12px;
}

.msl-card .titulo {
  font-weight: 600;
}

.msl-card .status {
  display: inline-block;
  margin-top: 4px;
  padding: 1px 6px;
  border-radius: 8px;
  background: var(--wa-badge-bg);
  color: var(--wa-badge-text);
  font-size: 10px;
}

.msl-card .status.vencida {
  background: #7f1d1d;
  color: #ffd7d7;
}

/* Fatura vencida: o card inteiro muda de cor (o selo sozinho passava
 * despercebido no meio da lista de faturas em aberto). */
.msl-card.vencida {
  background: var(--wa-vencida-bg);
  border-left: 3px solid var(--wa-vencida-borda);
}

.msl-card.vencida .titulo {
  color: var(--wa-vencida-text);
}

/* Contrato perto do fim (30 dias) - aviso, nao erro: ainda esta valendo,
 * mas e a hora de falar de renovacao. */
.msl-card.a-vencer {
  background: var(--wa-warning-bg);
  border-left: 3px solid var(--wa-warning-text);
}

.msl-card.a-vencer .titulo {
  color: var(--wa-warning-text);
}

.msl-card .status.a-vencer {
  background: var(--wa-warning-text);
  color: var(--wa-warning-bg);
}

.wa-fatura-pagamento-row {
  display: flex;
  gap: 6px;
  margin-top: 8px;
}

.wa-fatura-pagamento-row button {
  flex: 1;
  border: 1px solid var(--wa-border);
  background: transparent;
  color: var(--wa-text);
  border-radius: 6px;
  padding: 4px 6px;
  font-size: 11px;
  cursor: pointer;
}

.wa-fatura-pagamento-row button:hover {
  background: var(--wa-hover);
}

.wa-fatura-pagamento-row button:disabled {
  opacity: 0.5;
  cursor: default;
}

/* ---------- Modal (plantao) ---------- */

.wa-modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.55);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 50;
}

.wa-modal-overlay[hidden] {
  display: none;
}

/* Tela de login: fundo solido, nao pode deixar transparecer a lista de
   conversas/filtros/etc por tras antes do login (privacidade). */
#authOverlay {
  background: var(--wa-bg);
  z-index: 200;
}

.wa-assistente-modal-card {
  width: 560px;
}

.wa-assistente-atalhos {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 10px;
}

.wa-assistente-atalhos button {
  font-size: 12.5px;
  padding: 5px 10px;
  border-radius: 14px;
  border: 1px solid var(--wa-border);
  background: var(--wa-header-bg);
  color: var(--wa-text);
  cursor: pointer;
}

.wa-assistente-atalhos button:hover {
  background: var(--wa-hover);
}

.wa-assistente-historico {
  max-height: 360px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin: 14px 0;
  padding-right: 4px;
}

.wa-assistente-msg {
  max-width: 85%;
  padding: 8px 12px;
  border-radius: 10px;
  font-size: 13.5px;
  line-height: 1.45;
  white-space: pre-wrap;
}

.wa-assistente-msg.user {
  align-self: flex-end;
  background: var(--wa-bubble-out);
  color: var(--wa-text);
}

.wa-assistente-msg.assistant {
  align-self: flex-start;
  background: var(--wa-header-bg);
  border: 1px solid var(--wa-border);
}

.wa-assistente-msg.pendente {
  opacity: 0.6;
}

.wa-assistente-form {
  display: flex;
  gap: 8px;
  align-items: flex-end;
}

.wa-assistente-imagem-preview {
  position: relative;
  display: inline-block;
  margin-bottom: 8px;
}

.wa-assistente-imagem-preview img {
  max-height: 80px;
  border-radius: 6px;
  border: 1px solid var(--wa-border);
  display: block;
}

.wa-assistente-imagem-preview button {
  position: absolute;
  top: -8px;
  right: -8px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: none;
  background: var(--wa-danger, #e74c3c);
  color: #fff;
  cursor: pointer;
  line-height: 1;
}

.wa-assistente-form textarea {
  flex: 1;
  resize: none;
  font-family: inherit;
  padding: 8px 10px;
  border-radius: 8px;
  border: 1px solid var(--wa-border);
  background: var(--wa-bg);
  color: var(--wa-text);
}

.wa-ocr-crop-card {
  width: 640px;
}

.wa-ocr-crop-wrap {
  position: relative;
  margin: 12px 0;
  max-height: 60vh;
  overflow: auto;
  border: 1px solid var(--wa-border);
  border-radius: 8px;
  user-select: none;
  cursor: crosshair;
}

.wa-ocr-crop-wrap img {
  display: block;
  max-width: 100%;
  pointer-events: none;
}

.wa-ocr-crop-selection {
  position: absolute;
  border: 2px dashed #00a884;
  background: rgba(0, 168, 132, 0.2);
  pointer-events: none;
}

.wa-modal-card {
  width: 420px;
  max-width: 92vw;
  background: var(--wa-header-bg);
  border-radius: 10px;
  padding: 22px;
}

.wa-modal-card h2 {
  margin: 0 0 8px;
  font-size: 17px;
}

.wa-modal-hint {
  font-size: 12.5px;
  color: var(--wa-text-muted);
  line-height: 1.5;
  margin: 0 0 16px;
}

.wa-onboarding-list {
  margin: 0 0 16px;
  padding-left: 18px;
  font-size: 13px;
  line-height: 1.7;
}

.wa-onboarding-list kbd {
  font-family: inherit;
  font-size: 11px;
  padding: 1px 6px;
  border-radius: 4px;
  border: 1px solid var(--wa-border);
  background: var(--wa-header-bg);
}

.wa-modal-toggle {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13.5px;
  margin-bottom: 14px;
}

.wa-modal-field {
  display: block;
  font-size: 12px;
  color: var(--wa-text-muted);
  margin-bottom: 12px;
}

#scheduleUseAvisoPadrao {
  display: block;
  margin-bottom: 12px;
  text-align: left;
}

.wa-schedule-presets {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 12px;
}

.wa-schedule-presets button {
  flex: 1 1 auto;
  padding: 6px 8px;
  border-radius: 8px;
  border: 1px solid var(--wa-border);
  background: var(--wa-active);
  color: var(--wa-text);
  font-size: 12.5px;
  cursor: pointer;
  white-space: nowrap;
}

.wa-schedule-presets button:hover {
  background: var(--wa-hover, var(--wa-active));
}

.wa-modal-field input,
.wa-modal-field select,
.wa-modal-field textarea {
  display: block;
  width: 100%;
  margin-top: 5px;
  padding: 8px 10px;
  border-radius: 8px;
  border: 1px solid var(--wa-border);
  background: var(--wa-active);
  color: var(--wa-text);
  font-size: 13px;
  font-family: inherit;
}

.wa-modal-field textarea {
  resize: vertical;
}

#ocrResultText {
  display: block;
  width: 100%;
  padding: 10px;
  border-radius: 8px;
  border: 1px solid var(--wa-border);
  background: var(--wa-active);
  color: var(--wa-text);
  font-size: 13px;
  font-family: inherit;
  resize: vertical;
  margin-bottom: 14px;
}

.msl-open-ticket-btn {
  display: block;
  width: 100%;
  margin-top: 14px;
  padding: 9px;
  border-radius: 8px;
  border: none;
  background: var(--wa-accent);
  color: #062f27;
  font-weight: 600;
  font-size: 13px;
  cursor: pointer;
}

.msl-open-ticket-btn:hover {
  background: var(--wa-accent-strong);
}

.wa-ticket-detail {
  font-size: 13px;
  margin-bottom: 14px;
  max-height: 260px;
  overflow-y: auto;
}

.wa-ticket-detail .wa-ticket-msg {
  background: var(--wa-active);
  border-radius: 8px;
  padding: 8px 10px;
  margin-bottom: 8px;
}

.wa-ticket-detail .wa-ticket-msg.equipe {
  background: #0e7490;
  color: #e0f7fa;
}

.wa-ticket-detail .autor {
  font-size: 11px;
  color: var(--wa-text-muted);
  margin-bottom: 3px;
}

.wa-modal-actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 8px;
}

.wa-auth-error {
  background: rgba(241, 92, 109, 0.12);
  color: var(--wa-danger);
  font-size: 12.5px;
  padding: 8px 10px;
  border-radius: 6px;
  margin-bottom: 12px;
}

.wa-auth-toggle {
  text-align: center;
  margin: 14px 0 0;
}

.wa-auth-toggle a {
  color: var(--wa-accent-strong);
  font-size: 12.5px;
  text-decoration: none;
}

.wa-auth-toggle a:hover {
  text-decoration: underline;
}

.wa-accounts-list {
  list-style: none;
  margin: 0 0 14px;
  padding: 0;
  max-height: 220px;
  overflow-y: auto;
}

.wa-accounts-list li {
  padding: 8px 10px;
  border-radius: 8px;
  background: var(--wa-active);
  margin-bottom: 8px;
  font-size: 13px;
}

.wa-accounts-list .row {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.wa-qr-img {
  display: block;
  width: 160px;
  height: 160px;
  margin: 8px auto 0;
  border-radius: 6px;
  background: #fff;
  padding: 6px;
}

.wa-account-actions {
  display: flex;
  gap: 6px;
  margin-top: 8px;
  flex-wrap: wrap;
}

.wa-account-actions button {
  padding: 5px 10px;
  font-size: 12px;
  border-radius: 6px;
  border: 1px solid var(--wa-border);
  background: var(--wa-header-bg);
  color: var(--wa-text);
  cursor: pointer;
}

.wa-account-actions button:hover {
  background: var(--wa-hover);
  border-color: var(--wa-accent);
}

.wa-account-actions button.perigo {
  color: var(--wa-danger);
  border-color: var(--wa-danger);
  background: transparent;
}

.wa-account-actions button.perigo:hover {
  background: rgba(241, 92, 109, 0.12);
}

/* ---------- Area de administracao ---------- */

.wa-admin-view {
  position: fixed;
  inset: 0;
  z-index: 30;
  display: flex;
  flex-direction: column;
  background: var(--wa-bg);
}

.wa-admin-header {
  background: var(--wa-header-bg);
  padding: 10px 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid var(--wa-border);
}

.wa-admin-body {
  flex: 1;
  display: flex;
  overflow: hidden;
}

.wa-admin-nav {
  width: 220px;
  flex-shrink: 0;
  background: var(--wa-sidebar-bg);
  border-right: 1px solid var(--wa-border);
  display: flex;
  flex-direction: column;
  padding: 12px 0;
  /* A lista de abas passou de uma tela de altura e as ultimas ficavam
     inalcancaveis: o .wa-admin-nav-scroll tem overflow-y, mas no desktop ele
     e "display: contents" (some da arvore de layout), entao a rolagem tinha
     que estar aqui. min-height: 0 e obrigatorio - sem isso um filho flex
     nunca encolhe abaixo do conteudo e o overflow nao chega a acontecer. */
  overflow-y: auto;
  min-height: 0;
}

.wa-admin-nav-btn {
  text-align: left;
  padding: 12px 20px;
  border: none;
  background: transparent;
  color: var(--wa-text-muted);
  font-size: 14px;
  cursor: pointer;
}

/* Rotulo separador dos grupos do menu (Atendimento/IA/Integracoes/etc) -
   so texto, nao clicavel. Escondido no layout mobile (media query abaixo):
   la o nav vira uma faixa horizontal de abas rolavel, onde um rotulo de
   texto no meio quebraria a rolagem por toque - o agrupamento visual so
   faz sentido na lista vertical do desktop. */
.wa-admin-nav-group-label {
  padding: 16px 20px 4px;
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--wa-text-muted);
  opacity: 0.7;
}

.wa-admin-nav-group-label:first-child {
  padding-top: 4px;
}

.wa-admin-nav-btn:hover {
  background: var(--wa-hover);
  color: var(--wa-text);
}

.wa-admin-nav-btn.active {
  color: var(--wa-accent-strong);
  background: var(--wa-active);
  border-left: 3px solid var(--wa-accent-strong);
}

.wa-admin-content {
  flex: 1;
  overflow-y: auto;
  overflow-x: auto;
  padding: 28px 36px;
}

.wa-admin-nav-scroll {
  display: contents;
}

.wa-admin-nav-toggle {
  display: none;
}

@media (max-width: 768px) {
  /* Area de admin nao tinha nenhum ajuste mobile - nav lateral fixa de
     220px + tabelas largas cortavam colunas (ex: "Status") sem nenhum
     jeito de rolar. Empilha nav acima do conteudo (vira uma faixa de
     abas rolavel na horizontal) e deixa o conteudo em si rolar na
     horizontal quando uma tabela nao couber, em vez de cortar. Um botao
     de expandir/recolher deixa ver todas as abas de uma vez (quebrando
     em varias linhas) em vez de precisar rolar na horizontal. */
  .wa-admin-body {
    flex-direction: column;
  }

  .wa-admin-nav {
    width: 100%;
    flex-direction: row;
    align-items: center;
    padding: 6px 8px;
    border-right: none;
    border-bottom: 1px solid var(--wa-border);
  }

  .wa-admin-nav-scroll {
    display: flex;
    flex: 1;
    overflow-x: auto;
    gap: 2px;
  }

  .wa-admin-nav-group-label {
    display: none;
  }

  .wa-admin-nav.expanded .wa-admin-nav-scroll {
    flex-wrap: wrap;
    overflow-x: visible;
  }

  .wa-admin-nav-btn {
    white-space: nowrap;
    padding: 8px 14px;
  }

  .wa-admin-nav-btn.active {
    border-left: none;
    border-bottom: 3px solid var(--wa-accent-strong);
  }

  .wa-admin-nav-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 28px;
    height: 28px;
    margin-left: 4px;
    border: 1px solid var(--wa-border);
    background: transparent;
    color: var(--wa-text-muted);
    border-radius: 50%;
    font-size: 12px;
    cursor: pointer;
  }

  .wa-admin-nav-toggle:hover {
    background: var(--wa-hover);
    color: var(--wa-text);
  }

  .wa-admin-content {
    padding: 16px;
  }

  /* colunas menos essenciais somem em telas estreitas, pra precisar rolar
     menos pro lado dentro do card (ver .wa-mobile-hide abaixo). */
  .wa-mobile-hide {
    display: none;
  }

  /* aviso de que da pra arrastar o card pro lado - so aparece quando o
     card realmente tem uma tabela (nao em cards de formulario simples) e
     so no mobile, onde a barra de rolagem nativa costuma ficar invisivel
     ate encostar o dedo (diferente do desktop, que sempre mostra uma). */
  .wa-admin-card:has(.wa-admin-table)::after {
    content: "⇄ arraste pro lado pra ver mais";
    display: block;
    margin-top: 8px;
    font-size: 11px;
    color: var(--wa-text-muted);
    text-align: center;
  }
}

.wa-admin-section-header {
  margin-bottom: 18px;
}

.wa-admin-section-header h2 {
  margin: 0 0 4px;
  font-size: 19px;
  font-weight: 500;
}

.wa-admin-hint {
  font-size: 12.5px;
  color: var(--wa-text-muted);
  margin: 0;
}

.wa-chart-wrap {
  background: var(--wa-header-bg);
  border: 1px solid var(--wa-border);
  border-radius: 8px;
  padding: 12px;
  margin-bottom: 10px;
  overflow-x: auto;
}

.wa-chart-svg {
  width: 100%;
  height: 160px;
  display: block;
}

.wa-sla-resumo {
  display: flex;
  gap: 12px;
  margin-bottom: 14px;
}

.wa-sla-card {
  background: var(--wa-header-bg);
  border: 1px solid var(--wa-border);
  border-radius: 8px;
  padding: 12px 18px;
}

.wa-sla-valor {
  font-size: 24px;
  font-weight: 700;
  color: var(--wa-accent);
}

.wa-relatorio-ia {
  background: var(--wa-header-bg);
  border: 1px solid var(--wa-border);
  border-radius: 8px;
  padding: 14px 16px;
  margin-top: 12px;
  white-space: pre-wrap;
  font-size: 13.5px;
  line-height: 1.5;
}

/* CHECKLIST anti "linha quebrada" pra qualquer tabela nova de Admin (4
   bugs reais achados em sequencia construindo a tela do TeamViewer,
   27-28/07/2026 - sempre conferir os 4 antes de considerar uma tabela
   pronta):
   1. Toda <th>/<td> precisa de wa-col-nowrap (conteudo curto/fixo, ex:
      numero, badge, botao isolado) OU wa-col-flex (a UNICA coluna que deve
      esticar - geralmente a que tem texto livre/input principal). Sem
      isso, o "auto table layout" do navegador espalha o espaco vazio de
      forma imprevisivel (colunas erradas ficam largas, botoes empurrados
      pra fora da tela).
   2. NUNCA `display:flex` direto num <td> (ex: pra alinhar input+botao
      lado a lado numa celula) - isso quebra o modelo de tabela do
      navegador e a linha "vaza" pro conteudo da proxima. Sempre um <div
      style="display:flex"> DENTRO do <td>, nunca no <td> em si.
   3. Botao dentro desse <div style="display:flex"> (ao lado de um input
      que estica) precisa de white-space:nowrap + flex-shrink:0 - senao,
      quando o espaco fica apertado, o TEXTO do botao quebra em 2 linhas e
      SO aquela linha da tabela fica mais alta que as outras (sintoma
      confuso: parece aleatorio, mas e sempre a linha com o texto de botao
      mais "espremido" no momento).
   4. Mesma armadilha do item 2, mas via CLASSE em vez de style inline:
      classes como .wa-meta ja tem `display:inline-flex` embutido (pra uso
      normal como <span> solto no meio de texto) - aplicar essa classe
      DIRETO num <td> (ex: <td class="wa-meta">) reproduz o bug do item 2
      escondido. Sempre `<td><span class="wa-meta">...</span></td>`,
      nunca a classe direto no <td>. Vale pra qualquer classe existente
      que tenha display:flex/inline-flex - conferir antes de aplicar numa
      celula de tabela. */
.wa-admin-table {
  width: 100%;
  border: none;
  /* "separate" em vez de "collapse": dentro de um card com rolagem lateral
     (.wa-admin-card, overflow-x:auto), bordas colapsadas do Chrome
     desalinham por sub-pixel dependendo da posicao do scroll (bug conhecido
     de renderizacao) - só aparecia nas tabelas que realmente precisam rolar
     pro lado (Atendentes, Auditoria). border-spacing:0 mantem o visual
     identico ao collapse quando NAO ha rolagem. */
  border-collapse: separate;
  border-spacing: 0;
  font-size: 13.5px;
  margin-bottom: 20px;
}

/* Modificador p/ tabelas "nome + status + acoes" (Filas, Tags, Atendentes...):
   sem largura explicita, o "auto table layout" espalha o espaco vazio de
   forma imprevisivel - normalmente sobra um vao enorme ANTES dos botoes de
   acao, que com justify-content:flex-end ficam empurrados pro canto direito
   distante. Fazendo a 1a coluna (nome) absorver 100% do espaco sobrando, as
   demais (status/acoes) ficam compactas coladas nela. So usar em tabelas
   onde a 1a coluna e mesmo a que deve esticar - ver uso em index.html. */
.wa-admin-table--compact th:not(:first-child),
.wa-admin-table--compact td:not(:first-child) {
  white-space: nowrap;
}

.wa-admin-table--compact th:first-child,
.wa-admin-table--compact td:first-child {
  width: 100%;
}

/* Versao "manual" do mesmo truque acima, pra tabelas onde a coluna que deve
   esticar NAO e a 1a (ex: Auditoria - "Detalhes" e a ultima; Avaliacoes -
   "Cliente" e a 2a). Marca explicitamente qual coluna absorve o espaco
   (wa-col-flex) e quais ficam compactas (wa-col-nowrap), em vez de assumir
   posicao fixa. */
.wa-admin-table th.wa-col-nowrap,
.wa-admin-table td.wa-col-nowrap {
  white-space: nowrap;
}

.wa-admin-table th.wa-col-flex,
.wa-admin-table td.wa-col-flex {
  width: 100%;
}

.wa-admin-table th {
  text-align: left;
  color: var(--wa-text-muted);
  font-weight: 500;
  font-size: 11.5px;
  text-transform: uppercase;
  padding: 8px 12px;
  /* border-collapse:separate (ver .wa-admin-table) deixa de esconder a
     borda padrao do navegador nos outros 3 lados da celula - sem zerar
     explicitamente, sobrava uma linha vertical indevida dos 2 lados de
     colunas especificas (achado real em producao). */
  border: none;
  border-bottom: 1px solid var(--wa-border);
}

.wa-admin-table td {
  padding: 10px 12px;
  border: none;
  border-bottom: 1px solid var(--wa-border);
  /* top, nao middle: quando uma linha fica mais alta que as outras (ex:
     atendente com nota de 2 linhas em "Adicionar nota"), alinhar ao centro
     cria um vao vazio irregular ANTES do conteudo das celulas mais curtas
     da mesma linha (a data "Desde" ficava flutuando longe da borda de
     cima) - alinhando ao topo, o conteudo de todas as celulas comeca
     sempre na mesma altura, sobra espaco (se sobrar) so embaixo. */
  vertical-align: top;
}

.wa-admin-table tr:hover td {
  background: var(--wa-hover);
}

/* Input de texto solto dentro de uma celula (ex: CNPJ do TeamViewer) - sem
   isso o navegador usa a largura padrao (~20 caracteres), sobrando um vao
   vazio grande na coluna "wa-col-flex" que ja ocupa 100% da celula. */
.wa-admin-table td > input[type="text"] {
  width: 100%;
  box-sizing: border-box;
}

.wa-admin-badge {
  display: inline-block;
  font-size: 10.5px;
  padding: 2px 8px;
  border-radius: 10px;
  background: var(--wa-badge-bg);
  color: var(--wa-badge-text);
}

.wa-admin-badge.ativo { background: #065f46; color: #b7f5df; }
.wa-admin-badge.inativo { background: #4b5563; color: #d1d5db; }
.wa-admin-badge.perigo { background: #7f1d1d; color: #fecaca; }
.wa-admin-badge.cancelado { background: #7f1d1d; color: #fecaca; }

.wa-sefaz-timeline {
  display: flex;
  flex-direction: column;
  gap: 3px;
  max-height: 420px;
  overflow-y: auto;
  font-size: 11px;
}

.wa-sefaz-timeline-header {
  display: flex;
  align-items: center;
  gap: 2px;
  padding-left: 34px;
  font-size: 10px;
  color: var(--wa-text-muted);
  margin-bottom: 2px;
}

.wa-sefaz-timeline-header span {
  width: 12px;
  text-align: center;
}

.wa-sefaz-timeline-row {
  display: flex;
  align-items: center;
  gap: 6px;
}

.wa-sefaz-timeline-uf {
  width: 26px;
  flex-shrink: 0;
  font-weight: 600;
  color: var(--wa-text-muted);
}

.wa-sefaz-timeline-cells {
  display: flex;
  gap: 2px;
}

.wa-sefaz-cell {
  width: 12px;
  height: 12px;
  border-radius: 2px;
  background: #374151;
}

.wa-sefaz-cell.ok { background: #10b981; }
.wa-sefaz-cell.problema { background: #ef4444; }

.wa-admin-agent-note {
  display: block;
  max-width: 260px;
  font-size: 11.5px;
  font-style: italic;
  color: var(--wa-text-muted);
  margin-top: 2px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.wa-admin-badge.admin { background: #5b21b6; color: #e9d8fd; }

.wa-admin-table-actions {
  display: flex;
  gap: 6px;
  justify-content: flex-end;
}

.wa-admin-table-actions button {
  padding: 5px 10px;
  font-size: 12px;
  border-radius: 6px;
  border: 1px solid var(--wa-border);
  background: var(--wa-active);
  color: var(--wa-text);
  cursor: pointer;
  white-space: nowrap;
}

.wa-admin-table-actions button:hover {
  background: var(--wa-hover);
  border-color: var(--wa-accent);
}

.wa-admin-table-actions button.perigo {
  color: var(--wa-danger);
  border-color: var(--wa-danger);
  background: transparent;
}

.wa-admin-table-actions button.perigo:hover {
  background: rgba(241, 92, 109, 0.12);
}

.wa-admin-table-actions button:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

.wa-admin-table-actions button:disabled:hover {
  background: transparent;
}

.wa-admin-inline-form {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.wa-admin-inline-form input,
.wa-admin-inline-form select {
  padding: 8px 10px;
  border-radius: 8px;
  border: 1px solid var(--wa-border);
  background: var(--wa-header-bg);
  color: var(--wa-text);
  font-size: 13px;
}

.wa-admin-inline-form span {
  color: var(--wa-text-muted);
  font-size: 12.5px;
}

.wa-admin-inline-form button {
  padding: 8px 14px;
  border-radius: 8px;
  border: none;
  background: var(--wa-accent);
  color: #062f27;
  font-weight: 600;
  font-size: 13px;
  cursor: pointer;
}

.wa-admin-inline-form button:hover {
  background: var(--wa-accent-strong);
}

.wa-admin-card {
  border: 1px solid var(--wa-border);
  border-radius: 10px;
  padding: 18px 20px;
  max-width: 640px;
  /* tabela larga (muitos botoes de acao, ex: Atendentes) rola dentro do
     proprio card em vez de estourar a borda ou depender so do scroll da
     pagina - sem isso o card ficava com borda cortada e botoes some. */
  overflow-x: auto;
}

.wa-admin-day-group {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 7px 0;
  border-bottom: 1px solid var(--wa-border);
}

.wa-admin-day-group:last-of-type {
  border-bottom: none;
}

.wa-admin-day-title {
  flex: 0 0 78px;
  font-size: 11.5px;
  color: var(--wa-text-muted);
  text-transform: uppercase;
}

.wa-admin-day-chips {
  flex: 1;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
}

.wa-admin-range-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--wa-active);
  border-radius: 16px;
  padding: 5px 8px 5px 12px;
  font-size: 12.5px;
}

.wa-admin-range-chip button {
  border: none;
  background: transparent;
  color: var(--wa-danger);
  cursor: pointer;
  font-size: 14px;
  line-height: 1;
}

/* ---------- Toasts ---------- */

.wa-toast-stack {
  position: fixed;
  left: 50%;
  bottom: 24px;
  transform: translateX(-50%);
  z-index: 200;
  display: flex;
  flex-direction: column;
  gap: 8px;
  align-items: center;
  pointer-events: none;
}

.wa-toast {
  pointer-events: auto;
  background: var(--wa-header-bg);
  color: var(--wa-text);
  border: 1px solid var(--wa-border);
  border-left: 4px solid var(--wa-accent);
  border-radius: 8px;
  padding: 10px 16px;
  font-size: 13px;
  max-width: 420px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3);
  animation: wa-toast-in 0.15s ease-out;
}

.wa-toast.error { border-left-color: var(--wa-danger); }

.wa-toast-action {
  display: block;
  margin-top: 8px;
  padding: 6px 12px;
  border: none;
  border-radius: 6px;
  background: var(--wa-accent);
  color: #062f27;
  font-weight: 600;
  font-size: 12.5px;
  cursor: pointer;
}

.wa-toast-action:hover { background: var(--wa-accent-strong); }

/* chama atencao pro botao de ativar notificacao ate o atendente ativar */
.wa-icon-btn.wa-attention {
  animation: wa-attention-pulse 1.8s ease-in-out infinite;
  border-radius: 50%;
}

@keyframes wa-attention-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(0, 168, 132, 0.55); }
  50% { box-shadow: 0 0 0 6px rgba(0, 168, 132, 0); }
}

@keyframes wa-toast-in {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}

/* ---------- Alarme de conexao (queda/travada) ---------- */
/* Alerta forte de proposito: fixo no topo, acima de tudo (inclusive
   modais), nao some sozinho - so fecha quando o atendente clica "Entendi". */

.wa-conn-alarm {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 999;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 6px 16px;
  padding: 14px 20px;
  background: #b3261e;
  color: #fff;
  box-shadow: 0 2px 20px rgba(0, 0, 0, 0.45);
  animation: wa-conn-alarm-in 0.2s ease-out, wa-conn-alarm-blink 1s ease-in-out infinite;
}

.wa-conn-alarm-title {
  font-weight: 800;
  font-size: 14px;
  letter-spacing: 0.3px;
}

.wa-conn-alarm-msg {
  font-size: 13px;
  opacity: 0.95;
}

.wa-conn-alarm-close {
  border: 1px solid rgba(255, 255, 255, 0.7);
  background: rgba(255, 255, 255, 0.12);
  color: #fff;
  font-weight: 700;
  font-size: 12.5px;
  padding: 6px 14px;
  border-radius: 6px;
  cursor: pointer;
}

.wa-conn-alarm-close:hover { background: rgba(255, 255, 255, 0.25); }

@keyframes wa-conn-alarm-in {
  from { transform: translateY(-100%); }
  to { transform: translateY(0); }
}

@keyframes wa-conn-alarm-blink {
  0%, 100% { background: #b3261e; }
  50% { background: #7a1913; }
}

/* ---------- Aviso de atualizacao do app ---------- */
/* Positivo/convidativo de proposito (verde da marca), pra nao parecer um
   erro/alarme - so avisa que ha recursos novos, nao e um problema. */

.wa-update-banner {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 998;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 6px 16px;
  padding: 12px 20px;
  background: var(--wa-accent);
  color: #062f27;
  box-shadow: 0 -2px 20px rgba(0, 0, 0, 0.3);
  animation: wa-update-banner-in 0.2s ease-out;
}

.wa-update-banner-title { font-weight: 800; font-size: 14px; }
.wa-update-banner-msg { font-size: 13px; opacity: 0.9; }

.wa-update-banner-btn {
  border: none;
  background: #062f27;
  color: var(--wa-accent);
  font-weight: 700;
  font-size: 12.5px;
  padding: 7px 16px;
  border-radius: 6px;
  cursor: pointer;
}

.wa-update-banner-btn:hover { opacity: 0.85; }

@keyframes wa-update-banner-in {
  from { transform: translateY(100%); }
  to { transform: translateY(0); }
}

/* ---------- Skeleton loading ---------- */

.wa-skeleton {
  background: linear-gradient(90deg, var(--wa-hover) 25%, var(--wa-active) 37%, var(--wa-hover) 63%);
  background-size: 400% 100%;
  animation: wa-skeleton-shimmer 1.4s ease infinite;
  border-radius: 4px;
}

@keyframes wa-skeleton-shimmer {
  0% { background-position: 100% 50%; }
  100% { background-position: 0 50%; }
}

.wa-chat-item.wa-skeleton-item {
  cursor: default;
}

.wa-chat-item.wa-skeleton-item .wa-avatar {
  background: var(--wa-hover);
}

.wa-skeleton-line {
  height: 10px;
  margin: 5px 0;
}

.wa-skeleton-bubble {
  height: 38px;
  border-radius: 8px;
  margin: 6px 0;
}

/* ---------- Responsivo ---------- */

.msl-panel-close {
  display: none;
}

@media (max-width: 1024px) {
  .msl-panel {
    position: fixed;
    inset: 0 0 0 auto;
    width: 320px;
    max-width: 85vw;
    z-index: 40;
    box-shadow: -8px 0 24px rgba(0, 0, 0, 0.3);
  }

  .msl-panel[hidden] {
    display: none;
  }

  /* sem isso, o painel virava um beco sem saida no celular: cobria a
     tela inteira (inclusive os botoes do cabecalho: Plantao/Admin/
     Contas) sem nenhum jeito de fechar - nem clique fora, nem Esc
     (a classe .msl-panel nao e .wa-modal-overlay, entao o handler
     global de Esc nao pega ela). */
  .msl-panel-close {
    display: block;
    position: absolute;
    top: 10px;
    right: 10px;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    border: none;
    background: var(--wa-hover);
    color: var(--wa-text);
    font-size: 20px;
    line-height: 1;
    cursor: pointer;
  }

  .msl-panel-close:hover {
    background: var(--wa-active);
  }
}

#btnBackToList {
  display: none;
}

.wa-chat-header-actions-mount {
  display: none;
}

@media (max-width: 768px) {
  .wa-sidebar {
    width: 100%;
  }

  .wa-app:not(.chat-open) .wa-chat {
    display: none;
  }

  .wa-app.chat-open .wa-sidebar {
    display: none;
  }

  #btnBackToList {
    display: inline-flex;
  }

  /* no celular, abrir uma conversa esconde a .wa-sidebar inteira - e os
     botoes de Plantao/Admin/Contas/Tema/Som vivem dentro dela, entao
     ficavam inacessiveis ate voltar pra lista. O JS move o mesmo elemento
     (nao duplica) pra essa segunda faixa embaixo do cabecalho do chat
     quando a tela e estreita e a conversa esta aberta. Comeca recolhida
     (so o botao "Acoes" aparece) pra nao ocupar espaco vertical o tempo
     todo; expande sob demanda. */
  .wa-chat-header-actions-mount:not(:empty) {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    flex-wrap: wrap;
    gap: 4px;
    padding: 4px 10px;
    border-bottom: 1px solid var(--wa-border);
    background: var(--wa-header-bg);
  }

  .wa-chat-header-actions-mount .wa-header-actions {
    display: none;
    flex-wrap: wrap;
    gap: 4px;
  }

  .wa-chat-header-actions-mount.expanded .wa-header-actions {
    display: flex;
  }
}

.wa-bar-toggle {
  display: none;
}

@media (max-width: 768px) {
  .wa-bar-toggle {
    display: inline-flex;
    align-items: center;
    border: 1px solid var(--wa-border);
    background: transparent;
    color: var(--wa-text-muted);
    border-radius: 12px;
    padding: 3px 10px;
    font-size: 12px;
    cursor: pointer;
  }

  .wa-bar-toggle:hover {
    background: var(--wa-hover);
    color: var(--wa-text);
  }

  /* Com 7-8 botoes de icone no rodape do chat, a caixa de digitar (flex:1,
     min-width:0) ficava espremida quase sumindo em telas estreitas -
     forca os icones pra 1a linha e input+enviar pra linha de baixo,
     sempre com largura cheia, via um marcador de quebra invisivel. */
  .wa-reply-form {
    flex-wrap: wrap;
  }

  .wa-reply-break {
    display: block;
    flex-basis: 100%;
    height: 0;
  }
}

/* ---------- Filtros de status ---------- */

.wa-status-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: 8px 14px;
  border-bottom: 1px solid var(--wa-border);
}

.wa-filter-chip {
  border: 1px solid var(--wa-border);
  background: transparent;
  color: var(--wa-text-muted);
  border-radius: 14px;
  padding: 4px 12px;
  font-size: 12px;
  cursor: pointer;
}

.wa-filter-chip:hover {
  background: var(--wa-hover);
}

.wa-filter-chip.active {
  background: var(--wa-accent);
  border-color: var(--wa-accent);
  color: #062f27;
  font-weight: 600;
}

.wa-extra-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: 6px 14px;
  border-bottom: 1px solid var(--wa-border);
}

.wa-extra-filters select {
  flex: 1;
  min-width: 90px;
  font-size: 12px;
  padding: 4px 6px;
  border-radius: 8px;
  border: 1px solid var(--wa-border);
  background: var(--wa-header-bg);
  color: var(--wa-text);
}

.wa-pin-btn {
  border: none;
  background: transparent;
  cursor: pointer;
  font-size: 12px;
  padding: 0 2px 0 0;
  opacity: 0.6;
  flex-shrink: 0;
}

.wa-pin-btn:hover { opacity: 1; }

.wa-chat-item.pinned { background: var(--wa-hover); }
.wa-chat-item.waiting-long { border-left: 3px solid #d29922; }

/* ---------- Contador de nao lidas ---------- */

.wa-unread-badge {
  background: var(--wa-accent);
  color: #062f27;
  font-size: 11px;
  font-weight: 700;
  min-width: 18px;
  height: 18px;
  border-radius: 9px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 5px;
  flex-shrink: 0;
}

/* ---------- Carregar mensagens anteriores ---------- */

.wa-load-older {
  display: block;
  margin: 10px auto;
  padding: 6px 16px;
  border-radius: 14px;
  border: 1px solid var(--wa-border);
  background: var(--wa-header-bg);
  color: var(--wa-text-muted);
  font-size: 12px;
  cursor: pointer;
}

.wa-load-older:hover {
  background: var(--wa-hover);
  color: var(--wa-text);
}

/* ---------- Emoji picker ---------- */

.wa-emoji-wrap {
  position: relative;
  flex-shrink: 0;
}

.wa-emoji-picker {
  position: absolute;
  bottom: 48px;
  left: 0;
  width: 280px;
  max-height: 220px;
  overflow-y: auto;
  background: var(--wa-header-bg);
  border: 1px solid var(--wa-border);
  border-radius: 10px;
  padding: 8px;
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 2px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.35);
  z-index: 60;
}

.wa-emoji-picker button {
  border: none;
  background: transparent;
  font-size: 19px;
  padding: 4px;
  cursor: pointer;
  border-radius: 6px;
  line-height: 1;
}

.wa-emoji-picker button:hover {
  background: var(--wa-hover);
}

/* Picker de reacao rapida (👍❤️😂...) numa mensagem - 1 elemento so, reposicionado
   via JS perto do botao "Reagir" clicado (posicao dinamica, varia por bolha). */
.wa-reaction-picker {
  position: fixed;
  display: flex;
  gap: 2px;
  background: var(--wa-header-bg);
  border: 1px solid var(--wa-border);
  border-radius: 24px;
  padding: 6px 8px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.35);
  z-index: 70;
}

.wa-reaction-picker button {
  border: none;
  background: transparent;
  font-size: 20px;
  padding: 4px;
  cursor: pointer;
  border-radius: 50%;
  line-height: 1;
  transition: transform 0.1s ease;
}

.wa-reaction-picker button:hover {
  background: var(--wa-hover);
  transform: scale(1.2);
}

.wa-quick-reply-picker {
  display: flex;
  flex-direction: column;
  width: 320px;
  max-height: 280px;
  gap: 2px;
}

@media (max-width: 768px) {
  /* largura fixa de 320px estourava a tela em celulares (o botao fica no
     meio da barra de composicao, entao "left:0" nao garante que caiba) -
     vira um painel fixo ancorado nas bordas da tela, largura sempre igual
     a viewport menos as margens. */
  .wa-quick-reply-picker {
    position: fixed;
    left: 8px;
    right: 8px;
    bottom: 56px;
    width: auto;
  }
}

.wa-quick-reply-picker button {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  width: 100%;
  text-align: left;
  font-size: 13px;
  padding: 8px 10px;
}

.wa-quick-reply-picker button strong {
  color: var(--wa-accent-strong);
  font-size: 12px;
}

.wa-quick-reply-picker button span {
  color: var(--wa-text-muted);
  white-space: normal;
}

.wa-quick-reply-empty {
  padding: 10px;
  color: var(--wa-text-muted);
  font-size: 13px;
}

.wa-slash-quick-reply-picker {
  position: absolute;
  bottom: calc(100% + 8px);
  left: 0;
  width: 100%;
  max-width: 420px;
}

.wa-quick-reply-picker button.wa-quick-reply-active {
  background: var(--wa-hover);
}

.wa-quick-reply-search {
  width: 100%;
  box-sizing: border-box;
  padding: 6px 8px;
  border: 1px solid var(--wa-border);
  border-radius: 6px;
  background: var(--wa-bg);
  color: var(--wa-text);
  font-size: 13px;
  margin-bottom: 4px;
  position: sticky;
  top: 0;
  z-index: 1;
}

/* ---------- Busca de CNPJ ---------- */

.wa-cnpj-lookup {
  margin-bottom: 14px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--wa-border);
}

.wa-cnpj-lookup-row {
  display: flex;
  gap: 6px;
}

.wa-cnpj-lookup-row input {
  flex: 1;
}

.wa-cnpj-result {
  margin-top: 8px;
  padding: 10px;
  border-radius: 8px;
  background: var(--wa-active);
  font-size: 13px;
  line-height: 1.5;
}

.wa-cnpj-result button {
  margin-top: 8px;
}

.wa-cnpj-perfex-box {
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px dashed var(--wa-border);
}

.wa-cnpj-perfex-box button {
  display: block;
  width: 100%;
}

.wa-cnpj-vincular-opcoes {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.wa-cnpj-vincular-opcoes button {
  flex: 1 1 160px;
  width: auto;
}

/* ---------- Dispositivos TeamViewer (painel de contato) ---------- */

.wa-tv-device-card {
  border: 1px solid var(--wa-border);
  border-radius: 8px;
  padding: 10px;
  margin-bottom: 8px;
}

.wa-tv-device-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
}

.wa-tv-device-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
  margin-top: 8px;
}

/* mesma altura/alinhamento pros dois lados da grade, independente do
   tamanho do texto (antes, com flex-wrap, "Copiar senha"/"Ver senha"/
   "Trocar senha" quebravam cada um pra sua propria linha com um vazio
   enorme do lado, porque o texto deles nao fechava par de forma previsivel) */
.wa-tv-device-actions > a,
.wa-tv-device-actions > button {
  width: 100%;
  box-sizing: border-box;
  margin: 0;
  text-decoration: none;
  text-align: center;
}

.wa-tv-btn-conectar {
  background: var(--wa-accent) !important;
  color: #fff !important;
  border-color: var(--wa-accent) !important;
}

/* ultimo botao de uma linha impar (Trocar senha / Cadastrar senha) ocupa
   as 2 colunas em vez de ficar sozinho, alinhado so a esquerda */
.wa-tv-btn-full {
  grid-column: 1 / -1;
}

.wa-tv-senha-area:not(:empty) {
  margin-top: 8px;
}

/* ---------- Tags de contato ---------- */

.wa-contact-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 8px 0 10px;
}

.wa-contact-tag-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--wa-active);
  border-radius: 12px;
  padding: 3px 6px 3px 10px;
  font-size: 12px;
}

.wa-contact-tag-chip button {
  border: none;
  background: transparent;
  color: var(--wa-danger);
  cursor: pointer;
  font-size: 13px;
  line-height: 1;
  padding: 0;
}

.wa-tag-add-row {
  display: flex;
  gap: 6px;
  margin-bottom: 16px;
}

.wa-tag-add-row .wa-btn-secondary {
  padding: 6px 12px;
}

.wa-tag-add-row select {
  flex: 1;
  padding: 6px 8px;
  border-radius: 8px;
  border: 1px solid var(--wa-border);
  background: var(--wa-active);
  color: var(--wa-text);
  font-size: 12.5px;
}

/* ---------- Acoes de mensagem (responder/encaminhar/apagar) ---------- */

.wa-bubble-actions {
  position: absolute;
  top: -14px;
  right: 6px;
  display: none;
  gap: 2px;
  background: var(--wa-header-bg);
  border: 1px solid var(--wa-border);
  border-radius: 8px;
  padding: 2px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
}

.wa-bubble:hover .wa-bubble-actions {
  display: flex;
}

.wa-bubble-actions button {
  border: none;
  background: transparent;
  color: var(--wa-text-muted);
  font-size: 13px;
  cursor: pointer;
  padding: 4px 6px;
  border-radius: 6px;
}

.wa-bubble-actions button:hover {
  background: var(--wa-hover);
  color: var(--wa-text);
}

.wa-bubble-quoted {
  border-left: 3px solid var(--wa-accent);
  background: rgba(0, 0, 0, 0.12);
  border-radius: 6px;
  padding: 4px 8px;
  margin-bottom: 4px;
  font-size: 12.5px;
  color: var(--wa-text-muted);
  max-height: 40px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.wa-bubble-deleted {
  font-style: italic;
  color: var(--wa-text-muted);
}

.wa-reply-quote-preview {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: var(--wa-header-bg);
  border-top: 1px solid var(--wa-border);
  padding: 8px 16px;
  font-size: 12.5px;
}

.wa-reply-quote-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
  overflow: hidden;
}

.wa-reply-quote-text strong {
  color: var(--wa-accent-strong);
  font-size: 11.5px;
}

.wa-reply-quote-text span {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  color: var(--wa-text-muted);
}

#btnCancelReply {
  border: none;
  background: transparent;
  color: var(--wa-text-muted);
  font-size: 18px;
  cursor: pointer;
  flex-shrink: 0;
  margin-left: 10px;
}

#forwardList li {
  cursor: pointer;
}

#forwardList li:hover {
  background: var(--wa-hover);
}

/* ---------- Midia nas bolhas ---------- */

.wa-bubble-media-img {
  display: block;
  max-width: 260px;
  max-height: 260px;
  border-radius: 6px;
  margin-bottom: 4px;
  cursor: pointer;
}

.wa-bubble-media-audio {
  display: block;
  margin-bottom: 4px;
  max-width: 260px;
}

.wa-bubble-media-video {
  display: block;
  max-width: 260px;
  max-height: 260px;
  border-radius: 6px;
  margin-bottom: 4px;
}

.wa-bubble-media-doc {
  display: flex;
  align-items: center;
  gap: 8px;
  background: rgba(0, 0, 0, 0.15);
  border-radius: 6px;
  padding: 8px 10px;
  margin-bottom: 4px;
  text-decoration: none;
  color: inherit;
}

.wa-bubble-media-doc .icon {
  font-size: 22px;
}

.wa-bubble-media-doc .info {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.wa-bubble-media-doc .filename {
  font-size: 13px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 200px;
}

.wa-bubble-media-doc .filesize {
  font-size: 11px;
  color: var(--wa-text-muted);
}

.wa-bubble-media-loading {
  font-size: 12px;
  color: var(--wa-text-muted);
  font-style: italic;
  margin-bottom: 4px;
}

/* ---------- Zona de perigo (reset geral) ---------- */

.wa-danger-zone {
  border: 1px solid var(--wa-danger);
  border-radius: 10px;
  padding: 18px 20px;
  max-width: 520px;
  background: rgba(241, 92, 109, 0.06);
}

.wa-danger-zone h3 {
  margin: 0 0 10px;
  color: var(--wa-danger);
  font-size: 15px;
}

.wa-danger-zone .wa-admin-hint {
  margin-bottom: 16px;
}

.wa-checkbox-row {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  margin: 12px 0 8px;
  cursor: pointer;
}

.wa-checkbox-row input {
  width: auto;
}

/* ---------- Lightbox de imagem ---------- */

.wa-lightbox-overlay {
  background: rgba(0, 0, 0, 0.85);
  justify-content: center;
  align-items: center;
}

.wa-lightbox-overlay img {
  max-width: 92vw;
  max-height: 92vh;
  border-radius: 4px;
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.5);
}

.wa-lightbox-close {
  position: absolute;
  top: 18px;
  right: 24px;
  background: rgba(255, 255, 255, 0.12);
  border: none;
  color: #fff;
  font-size: 28px;
  line-height: 1;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  cursor: pointer;
}

.wa-lightbox-close:hover {
  background: rgba(255, 255, 255, 0.22);
}

/* ------------------------------------------------------------------
   Campanhas de prospeccao e Base de leads
   ------------------------------------------------------------------ */

.wa-campanha {
  max-width: none;
  margin-bottom: 14px;
  /* o card padrao rola no eixo X por causa de tabela larga; aqui o conteudo
     quebra em varias linhas, e o overflow so escondia a sombra do foco */
  overflow-x: visible;
}

.wa-campanha-topo {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
  flex-wrap: wrap;
}

.wa-campanha-titulo {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  font-size: 15px;
}

.wa-campanha-acoes {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}

.wa-campanha-acoes button {
  font-size: 11.5px;
  padding: 5px 10px;
}

/* acao secundaria (arquivar): presente, sem competir com Ligar/Editar */
.wa-btn-discreto {
  opacity: 0.62;
}
.wa-btn-discreto:hover {
  opacity: 1;
}

.wa-admin-badge.oficial {
  background: #1e3a8a;
  color: #c7d7fe;
}

/* Parametros da campanha como etiquetas: em texto corrido separado por
   "middot" ninguem achava o dado que procurava. */
.wa-campanha-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 10px 0 12px;
}

.wa-campanha-chips span {
  font-size: 11px;
  padding: 3px 9px;
  border-radius: 999px;
  border: 1px solid var(--wa-border);
  color: var(--wa-text-muted);
  white-space: nowrap;
}

.wa-campanha-chips code {
  font-size: 10.5px;
}

.wa-campanha-progresso {
  height: 5px;
  border-radius: 999px;
  background: var(--wa-border);
  overflow: hidden;
  margin-bottom: 10px;
}

.wa-campanha-progresso > div {
  height: 100%;
  background: #059669;
  transition: width 0.4s ease;
}

/* Placar: numero grande em cima, rotulo pequeno embaixo - le-se de relance,
   ao contrario da linha unica separada por barras que existia antes. */
.wa-campanha-numeros {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(88px, 1fr));
  gap: 8px;
}

.wa-campanha-numeros > div {
  border: 1px solid var(--wa-border);
  border-radius: 8px;
  padding: 8px 10px;
  text-align: center;
}

.wa-campanha-numeros strong {
  display: block;
  font-size: 17px;
  line-height: 1.15;
}

.wa-campanha-numeros .wa-campanha-de {
  font-size: 11px;
  font-weight: 400;
  color: var(--wa-text-muted);
}

.wa-campanha-numeros span {
  font-size: 10.5px;
  color: var(--wa-text-muted);
}

.wa-campanha-numeros .destaque {
  border-color: #059669;
}

.wa-campanha-numeros .destaque strong {
  color: #10b981;
}

/* ---- Base de leads ---- */

.wa-mina-resumo {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 10px;
}

.wa-mina-num {
  border: 1px solid var(--wa-border);
  border-radius: 8px;
  padding: 12px 14px;
}

.wa-mina-num strong {
  display: block;
  font-size: 20px;
  line-height: 1.2;
}

.wa-mina-num span {
  font-size: 11px;
  color: var(--wa-text-muted);
}

.wa-mina-cidades {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-top: 10px;
  max-height: 260px;
  overflow-y: auto;
}

.wa-mina-cidade {
  display: flex;
  align-items: center;
  gap: 10px;
  text-align: left;
  padding: 8px 12px;
  border: 1px solid var(--wa-border);
  border-radius: 8px;
  background: none;
  color: inherit;
  cursor: pointer;
  font: inherit;
}

.wa-mina-cidade:hover {
  border-color: #059669;
}

.wa-mina-cidade-nome {
  flex: 1;
  font-size: 13px;
}

.wa-mina-progresso {
  margin-top: 16px;
  padding: 14px;
  border: 1px solid var(--wa-border);
  border-radius: 10px;
}

.wa-mina-progresso-topo {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 10px;
}

.wa-mina-barra {
  height: 8px;
  border-radius: 999px;
  background: var(--wa-border);
  overflow: hidden;
}

.wa-mina-barra > div {
  height: 100%;
  background: #059669;
  transition: width 0.6s ease;
}

.wa-mina-barra-acoes {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 12px;
}

.wa-mina-receita {
  display: flex;
  align-items: flex-end;
  gap: 24px;
  flex-wrap: wrap;
}

.wa-mina-receita > div > span {
  display: block;
  font-size: 10.5px;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.wa-mina-receita-acao {
  display: flex;
  gap: 8px;
  align-items: center;
  margin-left: auto;
}

/* ---- Previa da mensagem de cobranca (Admin > Financeiro > Cobranca) ----

   Mostra o texto do jeito que o CLIENTE vai ver: fundo de conversa, balao de
   saida, negrito/italico ja aplicados e a assinatura do operador que o envio
   acrescenta sozinho (ver formatarPrefixoMensagem no backend). Sem isso a
   revisao era feita sobre o texto cru, com asterisco na tela e sem a linha da
   assinatura - ou seja, sobre uma coisa diferente da que ia sair. */
.wa-cobranca-preview {
  background: var(--wa-bg);
  border: 1px solid var(--wa-border);
  border-radius: 10px;
  padding: 12px;
  margin-top: 8px;
  display: flex;
  justify-content: flex-end;
}

.wa-cobranca-preview .wa-bubble {
  max-width: min(92%, 560px);
  padding: 8px 11px 10px;
}

/* aqui o balao e o conteudo inteiro do bloco (nao ha coluna de horario
   ocupando o canto), entao o texto pode usar a largura toda */
.wa-cobranca-preview .wa-bubble-text {
  margin-right: 0;
  display: block;
}

.wa-cobranca-preview .wa-cobranca-assinatura {
  display: block;
  margin-bottom: 6px;
}

.wa-cobranca-preview-vazio {
  color: var(--wa-text-muted);
  font-size: 12px;
}

/* ---- Layout de duas colunas da tela de Cobranca ----

   O card padrao do Admin tem max-width 640px (formulario de configuracao le-se
   melhor estreito). Aqui nao serve: a tela e' "lista de cobrancas + mensagem
   da cobranca selecionada" ao mesmo tempo, e com a mensagem embaixo da lista
   era preciso rolar a pagina inteira a cada cliente conferido. */
.wa-admin-card--largo {
  max-width: 1180px;
  /* O card padrao tem overflow-x:auto (tabela larga rola dentro dele). Aqui
     isso PRECISA sair: ancestral com overflow cria um contexto de rolagem
     proprio e o position:sticky do painel gruda nele - ou seja, para de
     grudar. Quem rola na horizontal aqui e o wrapper da tabela, nao o card. */
  overflow: visible;
}

.wa-cobranca-split {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(340px, 400px);
  gap: 16px;
  align-items: start;
}

/* A mensagem acompanha a rolagem da lista - com 15 clientes, o que se faz o
   tempo todo e' descer a lista lendo a mensagem de cada um. */
.wa-cobranca-painel {
  position: sticky;
  top: 0;
  max-height: calc(100vh - 150px);
  overflow-y: auto;
  border: 1px solid var(--wa-border);
  border-radius: 10px;
  padding: 12px 14px;
  background: var(--wa-sidebar-bg);
}

.wa-cobranca-painel-vazio {
  color: var(--wa-text-muted);
  font-size: 12.5px;
  text-align: center;
  padding: 28px 8px;
}

/* Lista de alvos do lote: linha clicavel, uma por cliente. */
.wa-cobranca-item {
  border: 1px solid var(--wa-border);
  border-left: 3px solid transparent;
  border-radius: 8px;
  padding: 8px 10px;
  margin-bottom: 6px;
  cursor: pointer;
  background: none;
  width: 100%;
  text-align: left;
  color: inherit;
  font: inherit;
  display: block;
}

.wa-cobranca-item:hover {
  background: var(--wa-hover);
}

.wa-cobranca-item.selecionado {
  border-left-color: var(--wa-accent);
  background: var(--wa-hover);
}

.wa-cobranca-item.fora {
  opacity: 0.55;
}

.wa-cobranca-item-topo {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  align-items: baseline;
}

.wa-cobranca-item-nome {
  font-size: 13.5px;
  font-weight: 600;
}

.wa-cobranca-item-valor {
  font-size: 13px;
  white-space: nowrap;
}

.wa-cobranca-item-meta {
  font-size: 11.5px;
  color: var(--wa-text-muted);
  margin-top: 2px;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
}

@media (max-width: 1100px) {
  .wa-cobranca-split {
    grid-template-columns: 1fr;
  }

  .wa-cobranca-painel {
    position: static;
    max-height: none;
  }
}

/* linha da previa escolhida - o painel do lado mostra a mensagem dela */
.wa-admin-table tr.selecionado > td {
  background: var(--wa-hover);
  box-shadow: inset 3px 0 0 var(--wa-accent);
}

/* linha da previa desmarcada - nao entra "na fila" do lote */
.wa-admin-table tr.fora > td {
  opacity: 0.5;
}
.wa-admin-table tr.fora > td:first-child {
  opacity: 1;
}

/* Acoes do alvo: sao ate 6 botoes num painel de ~400px - sem wrap, os do fim
   saem pela borda (o painel rola na vertical, nao na horizontal). */
.wa-cobranca-painel .wa-admin-table-actions {
  flex-wrap: wrap;
  justify-content: flex-start;
}

/* ---------- Atendimentos anteriores (historico da pessoa) ---------- */

.wa-historico-item {
  cursor: pointer;
}

.wa-historico-item:hover {
  background: var(--wa-hover, var(--wa-active));
}

.wa-historico-protocolo {
  display: inline-block;
  margin: 2px 0;
  font-size: 11.5px;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  color: var(--wa-text-muted);
}

.wa-historico-preview {
  margin-top: 4px;
  font-size: 12.5px;
  color: var(--wa-text-muted);
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

/* leitura de um atendimento inteiro: mais largo que o modal padrao (420px),
   que e de formulario */
.wa-historico-card {
  width: 720px;
  display: flex;
  flex-direction: column;
  max-height: 86vh;
}

.wa-historico-modal-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
  margin-bottom: 12px;
}

.wa-historico-mensagens {
  flex: 1;
  overflow-y: auto;
  /* .wa-messages empurra tudo pro rodape (chat ao vivo); aqui a leitura
     comeca do inicio do atendimento */
  justify-content: flex-start;
  min-height: 0;
  padding: 12px;
  border-radius: 8px;
  background-color: var(--wa-bg);
}

/* Previa das mensagens do agendamento (modal Agendar) - o atendente le o que
 * o cliente vai receber antes de aprovar; o texto vem da mesma fonte do
 * envio (ver appointmentMessages.ts). */
.wa-previa {
  border: 1px solid var(--wa-border);
  border-radius: 8px;
  padding: 10px 12px;
  margin: 0 0 16px;
  background: var(--wa-bg);
}

.wa-previa-titulo {
  font-size: 12px;
  color: var(--wa-text-muted);
  margin-bottom: 8px;
}

.wa-previa-linha + .wa-previa-linha {
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid var(--wa-border);
}

.wa-previa-quando {
  display: inline-block;
  font-size: 10.5px;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  color: var(--wa-accent);
  margin-bottom: 3px;
}

.wa-previa-texto {
  margin: 0;
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--wa-text);
  white-space: pre-wrap;
}

/* Modal de agendamento e o mais alto do painel (4 campos + a previa das duas
 * mensagens) - no celular precisa rolar por dentro, senao os botoes ficam
 * fora da tela e nao da pra confirmar. */
#appointmentModal .wa-modal-card {
  max-height: calc(100vh - 32px);
  overflow-y: auto;
}

/* ---------- Secoes do painel lateral direito (msl-panel) ----------
   Mesmo desenho pra todo bloco: cabecalho (titulo recolhivel + acao
   opcional) e corpo. Antes cada bloco tinha seu proprio style inline e
   espacamento, e o painel foi virando uma pilha desalinhada conforme
   ganhou TeamViewer, agenda, historico e etiquetas. */
.msl-secao {
  border-top: 1px solid var(--wa-border);
  padding-top: 14px;
  margin-top: 14px;
}

.msl-secao:first-of-type {
  border-top: 0;
  padding-top: 0;
  margin-top: 0;
}

.msl-secao[hidden] {
  display: none;
}

.msl-secao-cabecalho {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 10px;
}

.msl-secao-titulo {
  margin: 0;
  min-width: 0;
}

.msl-secao-toggle {
  display: flex;
  align-items: center;
  gap: 6px;
  width: 100%;
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--wa-accent-strong);
  cursor: pointer;
  text-align: left;
}

.msl-secao-seta {
  display: inline-block;
  font-size: 10px;
  color: var(--wa-text-muted);
  transition: transform 0.15s ease;
}

.msl-secao.fechada .msl-secao-seta {
  transform: rotate(-90deg);
}

.msl-secao.fechada .msl-secao-corpo {
  display: none;
}

/* acao do cabecalho (ex: "+ Agendar") - compacta e sem quebrar linha, pra
   nao empurrar o titulo nem virar um bloco de 2 linhas */
.msl-secao-acao {
  flex-shrink: 0;
  padding: 4px 9px;
  font-size: 11.5px;
  white-space: nowrap;
}

.msl-secao-btn-largo {
  width: 100%;
}

/* o painel ja separa por secao: os campos nao precisam mais de margem
   propria brigando com o espacamento do bloco */
.msl-secao-corpo > .wa-modal-field:last-child,
.msl-secao-corpo > .wa-cnpj-lookup:last-child {
  margin-bottom: 0;
}

/* Agenda do painel lateral: as linhas de detalhe (horario, sessao, "marcado
   em outra conversa") sao frases, nao rotulos curtos - com o nowrap padrao
   do .wa-meta o nome da conta ficava cortado na borda do painel. */
#appointmentConversaList .wa-meta {
  display: block;
  white-space: normal;
  overflow: visible;
  overflow-wrap: anywhere;
}