/* style.css — visual do painel (tema claro, estilo corporativo).
   Organização: variáveis → layout geral → sidebar → conteúdo → conversas → extras. */

:root {
  /* Neutros do painel interno Caxiense */
  --fundo: #f3f4f7;          /* fundo geral da área de conteúdo */
  --superficie: #ffffff;     /* fundo dos cards */
  --entrada: #f7f8fb;        /* fundo de inputs */
  --borda: #e7e9f1;
  --borda-forte: #d7dbe6;
  --texto: #0a0d15;
  --texto-suave: #5b6473;
  --acento: #173f9f;
  --acento-escuro: #12347e;
  --acento-suave: #edf2ff;
  --acento-borda: #c8d5fa;
  --acento-grad: linear-gradient(180deg, #2859c2 0%, #173f9f 100%);
  /* Sombras suaves (padrão oauth-hub) */
  --sombra-sm: 0 1px 2px rgba(12, 17, 32, 0.06);
  --sombra: 0 4px 16px -6px rgba(12, 17, 32, 0.12), 0 1px 2px rgba(12, 17, 32, 0.05);

  --sidebar-fundo: #0c1b4a;
  --sidebar-texto: #98a2b3;
  --sidebar-texto-ativo: #ffffff;

  /* cores de status */
  --st-conectado: #15966c;
  --st-aguardando: #f79009;
  --st-desconectado: #f04438;
  --st-iniciando: #667085;

  /* séries do gráfico de atividade (par validado para daltonismo e contraste) */
  --serie-recebidas: #173f9f;
  --serie-enviadas: #4c5fd7;
}

/* ══════════════ ACESSO CAXIENSE ══════════════ */
.auth-shell {
  min-height: 100vh;
  display: grid;
  place-items: center;
  position: relative;
  overflow: hidden;
  padding: 32px 20px 72px;
  color: #fff;
  background: #153da6;
  isolation: isolate;
}
.auth-shell::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -2;
  background: radial-gradient(circle at 12% 15%, rgba(255,255,255, .12), transparent 32%), radial-gradient(circle at 92% 88%, rgba(72, 120, 220, .3), transparent 30%), #153da6;
  animation: auth-atmosfera 18s ease-in-out infinite alternate;
}
.auth-shell::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  opacity: .42;
  background-image: linear-gradient(112deg, transparent 0 49%, rgba(255,255,255,.07) 49.1% 49.35%, transparent 49.45% 100%);
  background-size: 220px 220px;
  transform: skewY(-6deg) scale(1.25);
  animation: auth-linhas 24s ease-in-out infinite alternate;
}
.auth-decor { position: absolute; inset: 0; pointer-events: none; z-index: -1; }
.auth-decor span { position: absolute; display: block; border: 1px solid rgba(255,255,255, .16); transform: rotate(30deg); }
.auth-decor span:nth-child(1) { width: 290px; height: 290px; left: -180px; top: 14%; border-radius: 52px; }
.auth-decor span:nth-child(2) { width: 160px; height: 160px; right: 8%; top: 8%; border-radius: 28px; border-color: rgba(255,255,255, .2); }
.auth-decor span:nth-child(3) { width: 430px; height: 430px; right: -260px; bottom: -180px; border-radius: 80px; }
@keyframes auth-atmosfera { 0% { transform: scale(1) translate3d(0, 0, 0); filter: saturate(1); } 100% { transform: scale(1.08) translate3d(-1.5%, 1%, 0); filter: saturate(1.1); } }
@keyframes auth-linhas { 0% { transform: skewY(-6deg) scale(1.25) translate3d(0, 0, 0); } 100% { transform: skewY(-6deg) scale(1.25) translate3d(2%, -1%, 0); } }
@keyframes auth-orbita { 0%, 100% { transform: rotate(30deg) translate3d(0, 0, 0); opacity: .45; } 50% { transform: rotate(34deg) translate3d(12px, -10px, 0); opacity: .8; } }
.auth-decor span { animation: auth-orbita 13s ease-in-out infinite; }
.auth-decor span:nth-child(2) { animation-delay: -4s; animation-duration: 16s; }
.auth-decor span:nth-child(3) { animation-delay: -8s; animation-duration: 19s; }
@media (prefers-reduced-motion: reduce) { .auth-shell::before, .auth-shell::after, .auth-decor span { animation: none; } }
.auth-panel { width: min(100%, 460px); padding: 42px 44px 34px; border: 1px solid rgba(255,255,255,.2); border-radius: 22px; background: rgba(13, 48, 143, .88); box-shadow: 0 24px 70px rgba(5, 22, 79, .28), 0 1px 0 rgba(255,255,255,.12) inset; backdrop-filter: blur(12px); }
.auth-brand { display: flex; align-items: center; gap: 12px; margin-bottom: 48px; }
.auth-brand-logo { display: block; width: min(100%, 230px); height: auto; }
.auth-copy h1 { font-size: 30px; line-height: 1.15; letter-spacing: -.035em; }
.auth-copy > p:last-child { max-width: 36ch; margin-top: 12px; color: #dbe5ff; font-size: 14px; line-height: 1.55; }
.auth-form { display: grid; gap: 9px; margin-top: 30px; }
.auth-form label { color: #edf2ff; font-size: 13px; font-weight: 600; }
.auth-input-wrap { display: flex; align-items: center; gap: 10px; min-height: 50px; padding: 0 13px; border: 1px solid rgba(255,255,255, .35); border-radius: 10px; background: rgba(3, 22, 82, .3); transition: border-color .18s, box-shadow .18s, background .18s; }
.auth-input-wrap:focus-within { border-color: #fff; background: rgba(3, 22, 82, .5); box-shadow: 0 0 0 3px rgba(255,255,255, .14); }
.auth-input-wrap > .lucide { width: 17px; height: 17px; color: #b9caff; }
.auth-input-wrap input { min-width: 0; flex: 1; border: 0; outline: 0; color: #fff; background: transparent; font: inherit; }
.auth-input-wrap input::placeholder { color: #b9caff; }
.auth-input-wrap button { display: grid; place-items: center; width: 28px; height: 28px; padding: 0; border: 0; color: #c5d2f8; background: transparent; cursor: pointer; }
.auth-input-wrap button:hover { color: #fff; }
.auth-error { margin-top: 3px; padding: 10px 12px; border-radius: 8px; color: #ffd8d4; background: rgba(181, 54, 45, .2); border: 1px solid rgba(255, 139, 128, .3); font-size: 13px; line-height: 1.4; }
.auth-submit { display: flex; align-items: center; justify-content: center; gap: 10px; min-height: 50px; margin-top: 10px; border: 0; border-radius: 10px; color: #15337f; background: #fff; font: inherit; font-weight: 750; cursor: pointer; box-shadow: 0 8px 20px rgba(5, 22, 79, .22); transition: transform .18s, background .18s, box-shadow .18s; }
.auth-submit:hover { background: #eef3ff; transform: translateY(-1px); box-shadow: 0 12px 24px rgba(5, 22, 79, .28); }
.auth-submit:focus-visible, .botao-sair:focus-visible, .auth-input-wrap button:focus-visible { outline: 3px solid rgba(255,255,255, .5); outline-offset: 3px; }
.auth-submit:disabled { opacity: .7; cursor: wait; transform: none; }
.auth-submit.carregando span::after { content: " …"; }
.auth-security { display: flex; align-items: center; justify-content: center; gap: 7px; margin-top: 26px; color: #c5d2f8; font-size: 11px; }
.auth-security .lucide { width: 14px; height: 14px; color: #fff; }
.auth-footer { position: absolute; bottom: 22px; display: flex; flex-wrap: wrap; justify-content: center; gap: 9px; color: #c1d0fb; font-size: 11px; }
.auth-footer-separator { color: #91a9e6; }
.auth-policy-link { border: 0; padding: 0; color: #fff; background: transparent; font: inherit; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.auth-policy-link:hover { color: #dbe5ff; }

/* ══════════════ TERMOS, PRIVACIDADE E AUDITORIA ══════════════ */
.policy-shell { min-height: 100vh; display: grid; place-items: center; padding: 28px 20px; background: radial-gradient(circle at 10% 10%, #eaf0ff, transparent 32%), var(--fundo); }
.policy-panel { width: min(100%, 650px); padding: 34px 38px 28px; border: 1px solid var(--borda); border-radius: 18px; background: var(--superficie); box-shadow: 0 18px 50px rgba(12, 17, 32, .12); }
.policy-panel-top { display: flex; align-items: center; gap: 10px; margin-bottom: 20px; }.policy-symbol { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 12px; color: var(--acento); background: var(--acento-suave); }.policy-symbol .lucide { width: 21px; }.policy-kicker { color: var(--acento); font-size: 11px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }.policy-panel h1 { max-width: 18ch; font-size: 28px; letter-spacing: -.035em; line-height: 1.08; }.policy-lead { margin-top: 10px; color: var(--texto-suave); line-height: 1.5; }.policy-tabs { display: flex; gap: 7px; margin: 24px 0 12px; border-bottom: 1px solid var(--borda); }.policy-tab { padding: 9px 12px; border: 0; border-bottom: 2px solid transparent; color: var(--texto-suave); background: transparent; font: inherit; font-weight: 700; cursor: pointer; }.policy-tab.ativo { border-bottom-color: var(--acento); color: var(--acento); }.policy-scroll { max-height: 225px; overflow: auto; padding: 17px 18px; border: 1px solid var(--borda); border-radius: 11px; color: var(--texto-suave); background: #fafbfe; line-height: 1.55; }.policy-scroll h2 { margin-bottom: 7px; color: var(--texto); font-size: 15px; }.policy-scroll ul { padding-left: 19px; margin-top: 9px; }.policy-scroll li + li { margin-top: 7px; }.policy-consent { display: flex; align-items: flex-start; gap: 10px; margin-top: 18px; color: var(--texto); font-size: 13px; line-height: 1.45; cursor: pointer; }.policy-consent input { flex: 0 0 auto; width: 17px; height: 17px; margin-top: 1px; accent-color: var(--acento); }.policy-actions { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin-top: 19px; }.policy-version { display: block; margin-top: 17px; color: var(--texto-suave); font-size: 11px; }.policy-info-modal { position: fixed; inset: 0; z-index: 30; display: grid; place-items: center; padding: 20px; }.policy-info-backdrop { position: absolute; inset: 0; background: rgba(8, 21, 60, .58); }.policy-info-card { position: relative; width: min(100%, 600px); max-height: min(78vh, 620px); overflow: auto; padding: 32px 34px; border-radius: 16px; background: #fff; box-shadow: 0 24px 70px rgba(4, 18, 65, .3); }.policy-info-card h2 { margin: 7px 0 17px; font-size: 25px; }.policy-info-body { color: var(--texto-suave); line-height: 1.65; }.policy-info-body h3 { color: var(--texto); }.policy-info-body p + p { margin-top: 13px; }.policy-info-close { position: absolute; top: 17px; right: 17px; display: grid; place-items: center; width: 33px; height: 33px; border: 0; border-radius: 8px; color: var(--texto-suave); background: #f2f4f8; cursor: pointer; }.policy-audit-hero { display: flex; align-items: center; justify-content: space-between; gap: 20px; color: #fff; background: linear-gradient(135deg, #173f9f, #2859c2); }.policy-audit-hero .evidencia-kicker { color: #dbe5ff; }.policy-audit-hero h2 { margin-top: 8px; font-size: 24px; }.policy-audit-hero p { margin-top: 7px; color: #f0f4ff; }.policy-audit-badge { display: inline-flex; align-items: center; gap: 7px; padding: 9px 11px; border: 1px solid rgba(255,255,255,.25); border-radius: 9px; color: #fff; background: rgba(0,0,0,.12); font-size: 12px; font-weight: 700; white-space: nowrap; }.politica-tabela td { vertical-align: middle; }.politica-tabela td small { display: block; margin-top: 3px; color: var(--texto-suave); }.politica-tabela a { display: inline-flex; align-items: center; gap: 6px; color: var(--acento); text-decoration: none; }.politica-tabela a .lucide { width: 14px; }
@media (max-width: 620px) { .policy-panel { padding: 28px 22px 24px; }.policy-actions { align-items: stretch; flex-direction: column-reverse; }.policy-actions > * { width: 100%; justify-content: center; }.policy-audit-hero { align-items: flex-start; flex-direction: column; }.policy-info-card { padding: 27px 22px; } }
.botao-sair { display: grid; place-items: center; width: 27px; height: 27px; margin-left: auto; border: 1px solid rgba(255,255,255,.12); border-radius: 7px; color: var(--sidebar-texto); background: transparent; cursor: pointer; }
.botao-sair:hover { color: #fff; background: rgba(255,255,255,.08); }
.botao-sair .lucide { width: 15px; height: 15px; }

* { margin: 0; padding: 0; box-sizing: border-box; }

body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
  font-size: 14px;
  color: var(--texto);
  background: var(--fundo);
}

/* Ícones do Lucide viram <svg class="lucide"> — tamanho padrão aqui */
.lucide { width: 18px; height: 18px; flex-shrink: 0; }

.oculto { display: none !important; }

/* ══════════════ EVIDÊNCIA DE CONSULTA ══════════════ */
.evidencia-hero { display: flex; align-items: center; justify-content: space-between; gap: 24px; margin: 0 28px 18px; padding: 28px 30px; border: 1px solid #c8d5fa; border-radius: 16px; color: #fff; background: linear-gradient(130deg, #173f9f 0%, #2859c2 62%, #3b6ed2 100%); box-shadow: 0 12px 28px rgba(23,63,159,.15); }
.evidencia-hero-copy { max-width: 680px; }
.evidencia-kicker { display: inline-flex; align-items: center; gap: 7px; margin-bottom: 10px; color: #dbe5ff; font-size: 11px; font-weight: 750; letter-spacing: .08em; text-transform: uppercase; }
.evidencia-kicker .lucide { width: 15px; height: 15px; }
.evidencia-hero h2 { font-size: clamp(22px, 3vw, 31px); letter-spacing: -.04em; line-height: 1.08; }
.evidencia-hero p { max-width: 64ch; margin-top: 10px; color: #fff; line-height: 1.5; }
.evidencia-hero-mark { display: grid; place-items: center; width: 84px; height: 84px; border: 1px solid rgba(255,255,255,.3); border-radius: 22px; color: #fff; background: rgba(8,35,105,.2); transform: rotate(4deg); }
.evidencia-hero-mark .lucide { width: 30px; height: 30px; }
.evidencia-hero-mark span { margin-top: -12px; font-size: 10px; font-weight: 800; letter-spacing: .1em; }
.evidencia-layout { display: grid; grid-template-columns: minmax(0, 1fr) 250px; gap: 16px; margin: 0 28px 18px; }
.evidencia-pesquisa-card { margin: 0; }
.evidencia-pesquisa-card .card-cabecalho { align-items: flex-start; }
.evidencia-icone { display: grid; place-items: center; flex: 0 0 38px; width: 38px; height: 38px; border-radius: 11px; color: var(--acento); background: var(--acento-suave); }
.evidencia-icone.verde { color: #167a5a; background: #e9f8f1; }
.evidencia-icone .lucide { width: 19px; height: 19px; }
.evidencia-form { display: grid; gap: 8px; margin-top: 22px; }
.evidencia-form > label { font-size: 12px; font-weight: 750; color: var(--texto); }
.evidencia-busca-wrap { display: flex; align-items: center; gap: 10px; min-height: 50px; padding: 0 8px 0 14px; border: 1px solid var(--borda-forte); border-radius: 11px; background: var(--entrada); transition: border-color .18s, box-shadow .18s, background .18s; }
.evidencia-busca-wrap:focus-within { border-color: var(--acento); background: #fff; box-shadow: 0 0 0 3px rgba(23,63,159,.12); }
.evidencia-busca-wrap > .lucide { color: var(--texto-suave); width: 17px; }
.evidencia-busca-wrap input { min-width: 0; flex: 1; border: 0; outline: 0; color: var(--texto); background: transparent; font: inherit; }
.evidencia-busca-wrap .botao-primario { min-height: 36px; white-space: nowrap; }
.evidencia-ajuda { display: flex; align-items: center; gap: 5px; color: var(--texto-suave); font-size: 11px; }
.evidencia-ajuda .lucide { width: 13px; height: 13px; }
.evidencia-resumo-card { display: flex; flex-direction: column; justify-content: center; min-height: 176px; padding: 22px; border: 1px solid #dfe5f2; border-radius: 14px; background: linear-gradient(160deg, #fbfcff, #f0f4ff); }
.evidencia-resumo-label { color: var(--texto-suave); font-size: 11px; font-weight: 750; letter-spacing: .07em; text-transform: uppercase; }
.evidencia-resumo-card strong { margin: 8px 0 4px; color: var(--acento); font-size: 42px; letter-spacing: -.06em; }
.evidencia-resumo-card span:last-child { color: var(--texto-suave); line-height: 1.45; }
.evidencia-feedback { margin-top: 13px; color: var(--texto-suave); font-size: 12px; }
.evidencia-feedback.sucesso { color: #167a5a; }.evidencia-feedback.erro { color: #b42318; }
.evidencia-resultados-card { margin: 0 28px 18px; }
.evidencia-resultados-topo { display: flex; align-items: center; justify-content: space-between; gap: 18px; margin-bottom: 15px; }
.evidencia-resultados-topo .card-cabecalho { margin-bottom: 0; }
.evidencia-lista { display: grid; gap: 9px; }
.evidencia-item { display: flex; align-items: center; gap: 12px; padding: 13px 14px; border: 1px solid var(--borda); border-radius: 11px; background: #fcfdff; }
.evidencia-item-avatar { display: grid; place-items: center; flex: 0 0 36px; width: 36px; height: 36px; border-radius: 50%; color: var(--acento); background: var(--acento-suave); }
.evidencia-item-corpo { min-width: 0; flex: 1; }.evidencia-item-topo { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }.evidencia-item-topo strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }.evidencia-item-topo span, .evidencia-item-corpo p, .evidencia-item-corpo small { color: var(--texto-suave); font-size: 11px; }.evidencia-item-corpo p { margin-top: 2px; }.evidencia-item-corpo small { display: block; margin-top: 4px; }.evidencia-item-status { display: inline-flex; align-items: center; gap: 5px; color: #167a5a; font-size: 11px; font-weight: 700; white-space: nowrap; }.evidencia-item-status .lucide { width: 14px; }
.evidencia-sucesso { display: flex; align-items: center; gap: 14px; margin: 0 28px 26px; border-color: #b7e5d3; background: #f0fbf6; }.evidencia-sucesso-icone { display: grid; place-items: center; flex: 0 0 42px; width: 42px; height: 42px; border-radius: 13px; color: #167a5a; background: #d7f4e6; }.evidencia-sucesso h2 { margin: 2px 0 3px; font-size: 16px; }.evidencia-sucesso p { color: var(--texto-suave); font-size: 12px; }.evidencia-sucesso-acoes { display: flex; gap: 8px; margin-left: auto; }.evidencia-sucesso-acoes a { text-decoration: none; }
@media (max-width: 820px) { .evidencia-layout { grid-template-columns: 1fr; }.evidencia-resumo-card { min-height: 110px; }.evidencia-resultados-topo, .evidencia-sucesso { align-items: flex-start; flex-wrap: wrap; }.evidencia-sucesso-acoes { width: 100%; margin-left: 56px; }.evidencia-hero { margin-left: 14px; margin-right: 14px; }.evidencia-layout, .evidencia-resultados-card, .evidencia-sucesso { margin-left: 14px; margin-right: 14px; } }
@media (max-width: 560px) { .evidencia-hero-mark { display: none; }.evidencia-busca-wrap { flex-wrap: wrap; padding: 9px 10px; }.evidencia-busca-wrap input { flex-basis: calc(100% - 32px); }.evidencia-busca-wrap .botao-primario { width: 100%; }.evidencia-item-status { display: none; } }

/* ══════════════ LAYOUT GERAL: sidebar fixa + conteúdo ══════════════ */

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

/* ══════════════ SIDEBAR ══════════════ */

.sidebar {
  width: 248px;
  background: var(--sidebar-fundo);
  color: var(--sidebar-texto);
  display: flex;
  flex-direction: column;
  padding: 20px 12px;
}

.marca {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
  padding: 6px 10px 18px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

/* Logo oficial da Caxiense */
.marca-logo-caxiense { width: min(100%, 174px); height: auto; display: block; }
.marca small { font-size: 11.5px; color: var(--sidebar-texto); letter-spacing: 0.02em; }

.menu { display: flex; flex-direction: column; gap: 4px; margin-top: 16px; flex: 1; }

.menu-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border: none;
  border-radius: 8px;
  background: transparent;
  color: var(--sidebar-texto);
  font: inherit;
  cursor: pointer;
  text-align: left;
}

.menu-item:hover { background: rgba(255, 255, 255, 0.06); color: var(--sidebar-texto-ativo); }
.menu-item.ativo { background: rgba(255, 255, 255, 0.1); color: var(--sidebar-texto-ativo); }

.sidebar-rodape {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 10px 4px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  font-size: 13px;
}

 .sidebar-usuario { display: flex; align-items: center; gap: 9px; margin: 12px 4px 8px; padding: 10px; border: 1px solid rgba(255,255,255,.1); border-radius: 10px; background: rgba(255,255,255,.04); }
.sidebar-usuario-avatar { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 8px; color: #10200f; background: #b1ed32; }
.sidebar-usuario-avatar .lucide { width: 15px; height: 15px; }
.sidebar-usuario-dados { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.sidebar-usuario-dados strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: #f4f8f5; font-size: 12px; }
.sidebar-usuario-dados small { color: var(--sidebar-texto); font-size: 11px; }

/* Bolinha de status (sidebar) — a cor muda pelo atributo data-status */
.ponto-status { width: 9px; height: 9px; border-radius: 50%; background: var(--st-iniciando); }
.ponto-status[data-status="conectado"] { background: var(--st-conectado); }
.ponto-status[data-status="aguardando_qr"] { background: var(--st-aguardando); }
.ponto-status[data-status="desconectado"] { background: var(--st-desconectado); }

/* ══════════════ CONTEÚDO ══════════════ */

.conteudo { flex: 1; display: flex; flex-direction: column; overflow: hidden; }

.topo {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 28px;
  background: var(--superficie);
  border-bottom: 1px solid var(--borda);
}

.topo h1 { font-size: 17px; font-weight: 600; }

.topo-acoes { display: flex; align-items: center; gap: 10px; }

.notificacao-primeiro-acesso {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 0 28px 18px;
  padding: 14px 16px;
  border: 1px solid var(--acento-borda);
  border-radius: 12px;
  background: var(--acento-suave);
  color: var(--acento-escuro);
}
.notificacao-primeiro-acesso-icone { display: grid; place-items: center; flex: 0 0 36px; width: 36px; height: 36px; border-radius: 10px; background: #fff; color: var(--acento); }
.notificacao-primeiro-acesso-icone .lucide { width: 18px; height: 18px; }
.notificacao-primeiro-acesso h2 { margin: 0 0 3px; font-size: 14px; }
.notificacao-primeiro-acesso p { margin: 0; color: var(--texto-suave); font-size: 12.5px; line-height: 1.45; }
.notificacao-primeiro-acesso-acoes { display: flex; align-items: center; gap: 10px; margin-left: auto; flex-shrink: 0; }
.notificacao-primeiro-acesso-acoes .botao-primario { white-space: nowrap; }
@media (max-width: 700px) {
  .notificacao-primeiro-acesso { align-items: flex-start; flex-wrap: wrap; margin: 0 14px 14px; }
  .notificacao-primeiro-acesso > div:nth-child(2) { flex: 1 1 calc(100% - 52px); }
  .notificacao-primeiro-acesso-acoes { width: 100%; justify-content: flex-end; margin-left: 50px; }
}

/* Botão do modo privado (olho) */
.botao-privado {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border: 1px solid var(--borda);
  border-radius: 8px;
  background: var(--superficie);
  color: var(--texto-suave);
  cursor: pointer;
}
.botao-privado:hover { color: var(--texto); background: #f9fafb; }
.botao-privado.ativo { color: var(--acento-escuro); border-color: var(--acento-borda); background: var(--acento-suave); }
.botao-privado .lucide { width: 16px; height: 16px; }

/* ══ MODO PRIVADO: borra dados sensíveis (para gravar tela) ══ */
body.privado .chat-nome,
body.privado .chat-previa,
body.privado .chat-avatar-img,
body.privado .bolha > *:not(.bolha-hora),
body.privado #campo-numero,
body.privado #campo-numero-codigo,
body.privado .codigo,
body.privado #numero-conectado,
body.privado .grupo-textos,
body.privado .autorizado-numero,
body.privado .conta-textos,
body.privado .conta-foto {
  filter: blur(5px);
}
/* Mídias e QR levam blur mais forte (imagem grande "vaza" com blur fraco;
   e um QR legível na tela permite sequestrar a sessão) */
body.privado .bolha-midia { filter: blur(12px); }
body.privado #imagem-qr { filter: blur(14px); }

/* "Pill" de status no topo — muda de cor conforme o data-status */
.pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 12px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 500;
  background: #f2f4f7;
  color: var(--st-iniciando);
}
.pill .lucide { width: 15px; height: 15px; }
.pill[data-status="conectado"] { background: #ecfdf3; color: #067647; }
.pill[data-status="aguardando_qr"] { background: #fffaeb; color: #b54708; }
.pill[data-status="desconectado"] { background: #fef3f2; color: #b42318; }

/* min-height: 0 é essencial: sem ele, o flexbox deixa a view crescer além
   da tela em vez de criar scroll interno (e o rodapé do chat some) */
.view { flex: 1; min-height: 0; overflow-y: auto; padding: 24px 28px; }

/* ══════════════ CARDS (visão geral e comandos) ══════════════ */

.grade-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 16px;
  margin-bottom: 16px;
}

.card {
  background: var(--superficie);
  border: 1px solid var(--borda);
  border-radius: 14px;
  padding: 20px;
  box-shadow: var(--sombra-sm);
}

.card-cabecalho {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 12px;
  color: var(--texto);
}
.card-cabecalho .lucide { color: var(--acento-escuro); }
.card-cabecalho h2 { font-size: 14px; font-weight: 600; }

.card-texto { color: var(--texto-suave); line-height: 1.5; }
.card-suporte { color: var(--texto-suave); font-size: 13px; margin-top: 4px; }
.metrica { font-size: 34px; font-weight: 750; color: var(--acento-escuro); letter-spacing: -1px; font-variant-numeric: tabular-nums; }
.metrica.atualizando { animation: metrica-pulse .42s ease-out; }
@keyframes metrica-pulse { 0% { transform: translateY(3px); opacity: .45; } 100% { transform: translateY(0); opacity: 1; } }

/* Visão operacional: status e leitura rápida */
#view-visao-geral { background: linear-gradient(180deg, #f6f8fd 0%, var(--fundo) 34%); }
#view-visao-geral .grade-cards { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
#view-visao-geral .grade-cards .card { min-height: 138px; transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease; }
#view-visao-geral .grade-cards .card:hover { transform: translateY(-2px); box-shadow: 0 10px 26px rgba(21, 54, 126, .1); border-color: #c4d1f0; }
#view-visao-geral .grade-cards .card:first-child { grid-column: span 2; background: linear-gradient(135deg, #12347e, #1f50b5); color: #fff; border-color: transparent; }
#view-visao-geral .grade-cards .card:first-child .card-cabecalho,
#view-visao-geral .grade-cards .card:first-child .card-cabecalho .lucide,
#view-visao-geral .grade-cards .card:first-child .card-texto,
#view-visao-geral .grade-cards .card:first-child .card-suporte { color: #fff; }
#view-visao-geral .grade-cards .card:nth-child(5) { border-color: #f4c8c4; background: #fffafa; }
.dashboard-bloco-cabecalho { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin: 24px 0 12px; }
.dashboard-bloco-cabecalho h2 { font-size: 17px; color: var(--texto); }
.dashboard-bloco-cabecalho p { margin-top: 4px; color: var(--texto-suave); font-size: 13px; }
.dashboard-acoes { display: flex; gap: 8px; flex-wrap: wrap; }
.botao-resetar-indicadores { color: #b42318; border-color: #fecdca; }
.botao-resetar-indicadores:hover { background: #fef3f2; }
.indicadores-pnr { margin-bottom: 16px; }
.indicador-card { min-height: 138px; }
.indicador-card .metrica { color: var(--acento-escuro); }
.indicador-card .card-cabecalho.status-negativo,
.indicador-card .card-cabecalho.status-negativo .lucide { color: #b42318; }
.indicador-card .card-cabecalho.status-positivo,
.indicador-card .card-cabecalho.status-positivo .lucide { color: #067647; }
.transicoes-pnr { margin-bottom: 16px; }
.grade-transicoes { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 10px; }
.grade-transicoes span { display: flex; flex-direction: column; gap: 8px; padding: 12px; border: 1px solid var(--borda); border-radius: 10px; color: var(--texto-suave); font-size: 12px; }
.grade-transicoes strong { color: var(--acento-escuro); font-size: 22px; font-variant-numeric: tabular-nums; }
.dashboard-graficos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin-bottom: 16px; }
.grafico-operacional { display: flex; align-items: end; gap: 5px; min-height: 150px; padding-top: 18px; border-bottom: 1px solid var(--borda); }
.grafico-operacional .barra-operacional { display: flex; flex: 1; flex-direction: column; justify-content: end; align-items: center; min-width: 0; height: 132px; gap: 5px; }
.grafico-operacional .barra-operacional i { display: block; width: 100%; max-width: 28px; min-height: 3px; border-radius: 5px 5px 0 0; background: var(--acento); }
.grafico-operacional .barra-operacional small { max-width: 42px; overflow: hidden; color: var(--texto-suave); font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }
.grafico-operacional .barra-operacional b { color: var(--texto); font-size: 10px; font-variant-numeric: tabular-nums; }

.filtro-atendimento { display: flex; align-items: center; gap: 8px; margin: 10px 12px; padding: 9px 10px; border: 1px solid var(--borda); border-radius: 8px; color: var(--texto-suave); background: #fff; }
.filtro-atendimento .lucide { width: 15px; height: 15px; flex: 0 0 auto; }
.filtro-atendimento select { width: 100%; border: 0; outline: 0; background: transparent; color: var(--texto); font: inherit; font-size: 12px; }
.cabecalho-chat { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 62px; padding: 12px 18px; border-bottom: 1px solid var(--borda); background: #fff; }
.cabecalho-chat > div:first-child { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.cabecalho-chat strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cabecalho-chat span { color: var(--texto-suave); font-size: 11.5px; }
.acoes-atendimento { display: flex; gap: 7px; flex-wrap: wrap; justify-content: flex-end; }
.botao-finalizar { color: #b42318; border-color: #fecdca; }
.botao-finalizar:hover { background: #fef3f2; }
.abrir-imagem { display: block; padding: 0; border: 0; background: transparent; cursor: zoom-in; }
.media-viewer { width: min(760px, calc(100vw - 32px)); max-width: none; padding: 0; border: 0; border-radius: 16px; overflow: hidden; background: #101828; color: #fff; box-shadow: 0 24px 80px rgba(16, 24, 40, .38); }
.media-viewer::backdrop { background: rgba(16, 24, 40, .72); backdrop-filter: blur(4px); }
.media-viewer-topo, .media-viewer-acoes { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 16px; }
.media-viewer-topo button { display: grid; place-items: center; width: 32px; height: 32px; border: 0; border-radius: 8px; color: #fff; background: rgba(255,255,255,.12); cursor: pointer; }
.media-viewer-topo button:hover { background: rgba(255,255,255,.2); }
.media-viewer-topo .lucide { width: 16px; height: 16px; }
.media-viewer img { display: block; width: 100%; max-height: min(70vh, 680px); object-fit: contain; background: #080b12; }
.media-viewer-acoes { justify-content: flex-end; background: #101828; }
.botao-primario { display: inline-flex; align-items: center; gap: 7px; padding: 9px 13px; border-radius: 8px; color: #fff; background: var(--acento); text-decoration: none; font-weight: 650; font-size: 13px; }
.botao-primario:hover { background: var(--acento-escuro); }
.botao-primario .lucide { width: 15px; height: 15px; }

/* Gráfico de atividade (padrão de chart do oauth-hub: barras SVG) */
.grafico-meta { display: flex; align-items: baseline; gap: 12px; margin-bottom: 8px; flex-wrap: wrap; }
.grafico-total { font-size: 26px; font-weight: 750; letter-spacing: -0.6px; line-height: 1; font-variant-numeric: tabular-nums; }
.grafico-legenda { font-size: 12px; color: var(--texto-suave); }
.grafico svg { display: block; width: 100%; height: 90px; }
.grafico .barra { opacity: 0.85; transition: opacity 0.15s; }
.grafico .barra:hover { opacity: 1; }
.grafico .barra-recebidas { fill: var(--serie-recebidas); }
.grafico .barra-enviadas { fill: var(--serie-enviadas); }
.grafico .barra.vazia { fill: var(--borda-forte); opacity: 0.5; }
.grafico-eixo { display: flex; justify-content: space-between; font-size: 10.5px; color: var(--texto-suave); margin-top: 6px; font-variant-numeric: tabular-nums; }

/* Legenda das séries (o texto fica em cinza; a cor mora só no quadradinho) */
.grafico-series { display: inline-flex; gap: 14px; margin-left: auto; font-size: 12px; color: var(--texto-suave); }
.serie { display: inline-flex; align-items: center; gap: 5px; }
.serie-cor { width: 8px; height: 8px; border-radius: 2px; display: inline-block; }
.serie-cor.serie-recebidas { background: var(--serie-recebidas); }
.serie-cor.serie-enviadas { background: var(--serie-enviadas); }

/* Faixa de mini-métricas das últimas 24h, embaixo do gráfico */
.grafico-stats {
  display: flex;
  gap: 22px;
  flex-wrap: wrap;
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--borda);
}
.gstat { display: flex; flex-direction: column; }
.gstat-valor { font-size: 16px; font-weight: 650; font-variant-numeric: tabular-nums; }
.gstat-rotulo { font-size: 11.5px; color: var(--texto-suave); }

/* Botões de gerenciar a conexão (desconectar / reconectar) */
.conexao-acoes { display: flex; gap: 8px; margin-top: 12px; }
.conexao-acoes .botao-suave .lucide { color: inherit; }
#botao-desconectar:hover { border-color: #f5c2c4; background: #fef3f2; color: #b42318; }
#botao-reconectar:hover { border-color: var(--acento-borda); background: var(--acento-suave); color: var(--acento-escuro); }

.numero-conectado {
  margin-top: 10px;
  padding: 8px 12px;
  background: var(--acento-suave);
  color: var(--acento-escuro);
  border-radius: 8px;
  font-weight: 500;
}

/* Card do QR — fica no TOPO da Visão geral e ganha borda de destaque:
   quando é preciso parear, essa é a única coisa que importa na tela */
.card-qr { border-color: var(--acento-borda); box-shadow: 0 0 0 3px var(--acento-suave); }

/* Os cards de conexão abrem a página: espaçam por baixo, nunca por cima
   (a margem herdada de .card + .card contaria mesmo com o irmão oculto) */
#view-visao-geral #card-qr,
#view-visao-geral #card-conectado { margin-top: 0; margin-bottom: 16px; }

.qr-linha { display: flex; gap: 28px; align-items: center; flex-wrap: wrap; }

.qr-area {
  width: 232px;
  height: 232px;
  border: 1px solid var(--borda);
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #fff;
}
.qr-area img { width: 216px; height: 216px; }

.qr-aguardando {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  color: var(--texto-suave);
}
.qr-aguardando .lucide { width: 26px; height: 26px; animation: girar 1s linear infinite; }
@keyframes girar { to { transform: rotate(360deg); } }

.qr-passos { padding-left: 20px; color: var(--texto-suave); line-height: 2; }

/* Pareamento por código (alternativa ao QR) */
.pareamento-codigo { margin-top: 18px; padding-top: 14px; border-top: 1px dashed var(--borda); max-width: 560px; }
.pareamento-codigo .linha-adicionar { margin: 10px 0 12px; }
.codigo-gerado {
  border: 1px solid var(--acento-borda);
  background: var(--acento-suave);
  border-radius: 10px;
  padding: 14px 16px;
}
.codigo {
  display: block;
  font-family: ui-monospace, "Cascadia Code", Consolas, monospace;
  font-size: 26px;
  font-weight: 700;
  letter-spacing: 4px;
  color: var(--acento-escuro);
  margin-bottom: 6px;
}

/* Card "conectado" */
.card-conectado { display: flex; gap: 14px; align-items: flex-start; }
.card-conectado > .lucide { width: 26px; height: 26px; color: var(--st-conectado); margin-top: 2px; }
.card-conectado h2 { font-size: 15px; margin-bottom: 4px; }
.card-conectado p { color: var(--texto-suave); line-height: 1.5; }

/* Dados da conta dentro do card "conectado" (foto, nome, número) */
.conta-info { flex: 1; min-width: 0; }
.conta-linha {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 10px 0 12px;
  padding: 12px 14px;
  background: var(--acento-suave);
  border: 1px solid var(--acento-borda);
  border-radius: 10px;
}
.conta-foto { width: 44px; height: 44px; border-radius: 50%; object-fit: cover; flex-shrink: 0; }
.conta-foto-padrao {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--superficie);
  border: 1px solid var(--acento-borda);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.conta-foto-padrao .lucide { width: 20px; height: 20px; color: var(--acento-escuro); margin: 0; }
.conta-textos { display: flex; flex-direction: column; min-width: 0; }
.conta-textos strong { font-size: 14.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.conta-numero { color: var(--acento-escuro); font-weight: 500; font-variant-numeric: tabular-nums; }
.conta-detalhes { color: var(--texto-suave); font-size: 12px; margin-top: 2px; }

/* Tabela de comandos */
.tabela-comandos { width: 100%; border-collapse: collapse; margin-top: 14px; }
.tabela-comandos th, .tabela-comandos td {
  text-align: left;
  padding: 10px 12px;
  border-bottom: 1px solid var(--borda);
}
.tabela-comandos th { font-size: 12px; text-transform: uppercase; letter-spacing: 0.4px; color: var(--texto-suave); }
.tabela-comandos td { color: var(--texto); }

code {
  background: #f2f4f7;
  border: 1px solid var(--borda);
  border-radius: 6px;
  padding: 2px 6px;
  font-size: 13px;
  font-family: ui-monospace, "Cascadia Code", Consolas, monospace;
}

.aviso {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin-top: 16px;
  padding: 12px 14px;
  background: #fffaeb;
  border: 1px solid #fedf89;
  border-radius: 8px;
  color: #b54708;
  line-height: 1.45;
}
.aviso .lucide { width: 16px; height: 16px; margin-top: 2px; }

/* ══════════════ ABA CONVERSAS ══════════════ */

/* A aba Conversas é "tela cheia": a página não rola — quem rola é a lista
   de chats e a área de mensagens, cada uma com seu próprio scroll */
#view-conversas { display: flex; overflow: hidden; }

.conversas {
  display: grid;
  grid-template-columns: minmax(320px, 31%) minmax(0, 1fr);
  /* a linha única do grid não pode passar da altura disponível —
     é isso que dá scroll interno à lista e prende o compositor no rodapé */
  grid-template-rows: minmax(0, 1fr);
  gap: 0;
  flex: 1;
  min-height: 0;
  min-width: 0;
  background: var(--superficie);
  border: 1px solid var(--borda);
  border-radius: 12px;
  overflow: hidden;
}

.lista-chats { min-height: 0; border-right: 1px solid var(--borda); overflow-y: auto; overflow-x: hidden; }

.lista-chats-topo {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 12px 10px 16px;
  border-bottom: 1px solid var(--borda);
  font-weight: 600;
}
.lista-chats-topo .lucide { color: var(--acento); }

/* Busca de conversas */
.busca-chats {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px 8px 16px;
  border-bottom: 1px solid var(--borda);
}
.busca-chats .lucide { width: 14px; height: 14px; color: var(--texto-suave); }
.busca-chats input {
  flex: 1;
  border: none;
  outline: none;
  background: transparent;
  font: inherit;
  font-size: 13px;
  color: var(--texto);
}

/* Bolinha de não lidas no item do chat */
.badge-naolidas {
  margin-left: auto;
  min-width: 20px;
  height: 20px;
  padding: 0 6px;
  border-radius: 999px;
  background: var(--acento);
  color: #fff;
  font-size: 11.5px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

/* Botão de limpar histórico (2 cliques: o primeiro pede confirmação) */
.botao-limpar {
  margin-left: auto;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border: none;
  border-radius: 7px;
  background: transparent;
  color: var(--texto-suave);
  cursor: pointer;
}
.botao-limpar:hover { background: #fef3f2; color: #b42318; }
.botao-limpar.confirmar { background: #b42318; color: #fff; }
.botao-limpar .lucide { width: 15px; height: 15px; }

.chat-item {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 12px 16px;
  border: none;
  border-bottom: 1px solid var(--borda);
  background: transparent;
  font: inherit;
  cursor: pointer;
  text-align: left;
}
.chat-item:hover { background: #f9fafb; }
.chat-item.ativo { background: var(--acento-suave); }

.chat-avatar {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: #f2f4f7;
  color: var(--texto-suave);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.chat-avatar .lucide { width: 16px; height: 16px; }

/* Foto de perfil real (quando o WhatsApp fornece) */
.chat-avatar-img {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
}

/* Prévia "digitando..." na lista */
.chat-previa.digitando-previa { color: var(--acento-escuro); font-style: italic; }

/* Ícones pequenos de fixado/silenciado ao lado do nome */
.mini-icone { width: 12px !important; height: 12px !important; color: var(--texto-suave); margin-left: 4px; vertical-align: -1px; }

/* Menu de contexto (clique direito no chat) */
.menu-contexto {
  position: fixed;
  z-index: 60;
  min-width: 175px;
  background: var(--superficie);
  border: 1px solid var(--borda);
  border-radius: 10px;
  box-shadow: var(--sombra);
  padding: 6px;
}
.menu-contexto button {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  border: none;
  background: transparent;
  padding: 8px 10px;
  border-radius: 7px;
  font: inherit;
  font-size: 13px;
  color: var(--texto);
  cursor: pointer;
  text-align: left;
}
.menu-contexto button:hover { background: var(--acento-suave); color: var(--acento-escuro); }
.menu-contexto .lucide { width: 15px; height: 15px; }

/* Coluna flex: obriga nome e prévia a respeitarem a largura e cortarem com "..." */
.chat-info { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.chat-nome { font-weight: 550; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.chat-previa { color: var(--texto-suave); font-size: 12.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.lista-vazia, .mensagens-vazio { padding: 18px; color: var(--texto-suave); line-height: 1.5; }

/* Painel de mensagens */
.painel-chat { display: flex; flex-direction: column; min-width: 0; min-height: 0; }

.mensagens {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: 18px;
  background: #f0f2f5;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.bolha {
  position: relative;
  max-width: 72%;
  padding: 8px 12px;
  border-radius: 10px;
  background: var(--superficie);
  border: 1px solid var(--borda);
  align-self: flex-start;
  line-height: 1.4;
  word-wrap: break-word;
}

/* ── Formatação estilo WhatsApp dentro das bolhas ──
   *negrito*, _itálico_, ~riscado~, `código`, ```bloco``` e "> citação" */
.bolha-texto strong { font-weight: 650; }
.bolha-texto del { text-decoration: line-through; }
.bolha-mono,
.bolha-codigo {
  font-family: ui-monospace, "Cascadia Code", Consolas, monospace;
  font-size: 12px;
  background: rgba(13, 27, 18, 0.07);
  border-radius: 6px;
}
.bolha-mono { padding: 1px 5px; }
.bolha-codigo {
  display: block;
  margin: 6px 0;
  padding: 10px 12px;
  line-height: 1.55;
  white-space: pre-wrap;   /* preserva a indentação e quebra linhas longas */
  word-break: break-word;  /* nada de estourar a largura da bolha */
}
.bolha-citacao {
  display: block;
  margin: 2px 0;
  padding-left: 9px;
  border-left: 3px solid var(--acento-borda);
  color: var(--texto-suave);
}

/* Ações da bolha (reagir, responder, apagar): aparecem no hover */
.bolha-acoes {
  position: absolute;
  top: -11px;
  right: -6px;
  display: flex;
  gap: 4px;
  opacity: 0;
  transition: opacity 0.12s;
  z-index: 1;
}
.bolha:hover .bolha-acoes { opacity: 1; }
.bolha-acao {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  border: 1px solid var(--borda);
  background: var(--superficie);
  color: var(--texto-suave);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}
.bolha-acao:hover { color: var(--acento-escuro); border-color: var(--acento-borda); }
.bolha-acao .lucide { width: 13px; height: 13px; }
.bolha-apagar:hover { color: #b42318; border-color: #f5c2c4; }
.bolha-apagar.confirmar { background: #b42318; border-color: #b42318; color: #fff; }

/* Etiqueta "editada" ao lado do horário da bolha */
.bolha-editada { font-style: italic; margin-right: 5px; opacity: 0.85; }

/* Seletor de reações (emojis rápidos) */
.menu-reacoes {
  position: fixed;
  z-index: 60;
  display: flex;
  gap: 2px;
  align-items: center;
  background: var(--superficie);
  border: 1px solid var(--borda);
  border-radius: 999px;
  box-shadow: var(--sombra);
  padding: 4px 6px;
}
.menu-reacoes button {
  border: none;
  background: transparent;
  font-size: 18px;
  line-height: 1;
  padding: 5px 6px;
  border-radius: 50%;
  cursor: pointer;
  transition: transform 0.1s;
}
.menu-reacoes button:hover { background: var(--acento-suave); transform: scale(1.15); }
.menu-reacoes .remover-reacao { display: flex; align-items: center; color: var(--texto-suave); }
.menu-reacoes .remover-reacao .lucide { width: 15px; height: 15px; }

.menu-compositor {
  position: absolute;
  z-index: 55;
  display: flex;
  flex-wrap: wrap;
  gap: 2px;
  max-width: 280px;
  padding: 8px;
  background: #fff;
  border: 1px solid #dfe5e7;
  border-radius: 12px;
  box-shadow: 0 8px 24px rgba(11, 20, 26, .16);
}
.menu-compositor button {
  border: 0;
  border-radius: 8px;
  background: transparent;
  cursor: pointer;
}
.menu-compositor button:hover { background: #f0f2f5; }
#menu-compositor-emojis { left: 18px; bottom: 68px; font-size: 23px; }
#menu-compositor-emojis button { width: 38px; height: 38px; }
.menu-anexos { right: 70px; bottom: 68px; display: grid; min-width: 150px; padding: 6px; }
.menu-anexos button { display: flex; align-items: center; gap: 10px; padding: 10px; color: #37474f; font-size: 13px; text-align: left; }
.menu-anexos .lucide { width: 17px; height: 17px; color: #008069; }

/* Reações agrupadas embaixo da bolha */
.bolha-reacoes {
  display: inline-flex;
  gap: 4px;
  margin-top: 4px;
  background: #f2f4f7;
  border: 1px solid var(--borda);
  border-radius: 999px;
  padding: 2px 8px;
  font-size: 13px;
  width: fit-content;
}
.bolha.minha .bolha-reacoes { background: rgba(255, 255, 255, 0.18); border-color: transparent; color: #fff; }

/* Mensagem apagada para todos */
.mensagem-apagada { font-style: italic; color: var(--texto-suave); font-size: 13px; }
.bolha.minha .mensagem-apagada { color: rgba(255, 255, 255, 0.8); }
.bolha.minha {
  align-self: flex-end;
  background: var(--acento);
  border-color: var(--acento);
  color: #fff;
}
.bolha-nome { font-size: 12px; font-weight: 600; color: var(--acento-escuro); margin-bottom: 2px; }
.bolha-hora {
  font-size: 11px;
  color: var(--texto-suave);
  margin-top: 3px;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 3px;
}
.bolha.minha .bolha-hora { color: rgba(255, 255, 255, 0.75); }

/* Tiques de recibo nas mensagens enviadas: ✓ enviado, ✓✓ entregue, ✓✓ azul lido */
.ticks { width: 14px; height: 14px; opacity: 0.85; }
.ticks.lido { color: #53bdeb; opacity: 1; }

/* Barra "respondendo a..." acima do compositor */
.respondendo {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 14px;
  background: var(--acento-suave);
  border-top: 1px solid var(--acento-borda);
}
.respondendo > .lucide { width: 15px; height: 15px; color: var(--acento-escuro); flex-shrink: 0; }
.respondendo-info { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.respondendo-info strong { font-size: 12px; color: var(--acento-escuro); }
.respondendo-info span { font-size: 12.5px; color: var(--texto-suave); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#cancelar-resposta {
  border: none;
  background: transparent;
  cursor: pointer;
  color: var(--texto-suave);
  padding: 4px;
  border-radius: 6px;
  display: flex;
}
#cancelar-resposta:hover { color: #b42318; background: #fef3f2; }
#cancelar-resposta .lucide { width: 15px; height: 15px; }

/* Barra "digitando..." acima do compositor */
.digitando {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 18px;
  background: #f0f2f5;
  color: var(--acento-escuro);
  font-size: 12.5px;
  font-style: italic;
  border-top: 1px solid var(--borda);
}
.pontinhos { display: inline-flex; gap: 3px; }
.pontinhos span {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--acento);
  animation: pulsar 1.2s infinite;
}
.pontinhos span:nth-child(2) { animation-delay: 0.2s; }
.pontinhos span:nth-child(3) { animation-delay: 0.4s; }
@keyframes pulsar { 0%, 60%, 100% { opacity: 0.25; } 30% { opacity: 1; } }

/* Mídias dentro da bolha */
.bolha-midia {
  display: block;
  max-width: 280px;
  max-height: 280px;
  width: auto;
  border-radius: 8px;
  margin-bottom: 4px;
}
.bolha-midia.figurinha { max-width: 130px; max-height: 130px; background: transparent; }
.bolha-audio { width: 250px; max-width: 100%; display: block; margin-bottom: 4px; }
.bolha-doc {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 12px;
  border: 1px solid var(--borda);
  border-radius: 8px;
  background: #f9fafb;
  color: var(--texto);
  text-decoration: none;
  font-weight: 500;
  margin-bottom: 4px;
}
.bolha-doc .lucide { width: 15px; height: 15px; color: var(--acento-escuro); }
.bolha.minha .bolha-doc { background: rgba(255, 255, 255, 0.15); border-color: transparent; color: #fff; }
.bolha.minha .bolha-doc .lucide { color: #fff; }

/* Formulário de envio */
.compositor {
  display: flex;
  gap: 8px;
  padding: 12px;
  border-top: 1px solid var(--borda);
  background: var(--superficie);
}

.compositor input {
  border: 1px solid var(--borda);
  border-radius: 9px;
  padding: 10px 12px;
  font: inherit;
  outline: none;
  background: var(--entrada);
}
.compositor input:focus { border-color: var(--acento); background: #fff; box-shadow: 0 0 0 3px rgba(22, 163, 56, 0.16); }
#campo-numero { width: 250px; }
#campo-texto { flex: 1; }

.compositor button {
  width: 42px;
  border: none;
  border-radius: 9px;
  background: var(--acento-grad);
  box-shadow: var(--acento-glow);
  color: #fff;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.12s;
}
.compositor button:hover { transform: translateY(-1px); }

/* Clipe de anexo: botão secundário, discreto ao lado do enviar */
.compositor .botao-anexo {
  background: var(--entrada);
  color: var(--texto-suave);
  box-shadow: none;
  border: 1px solid var(--borda);
}
.compositor .botao-anexo:hover {
  transform: none;
  color: var(--acento-escuro);
  border-color: var(--acento-borda);
  background: var(--acento-suave);
}

/* ══════════════ ABA CONFIGURAÇÕES ══════════════ */

.opcoes-modo { display: flex; flex-direction: column; gap: 10px; margin: 16px 0; }

.opcao-radio {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 14px;
  border: 1px solid var(--borda);
  border-radius: 10px;
  cursor: pointer;
}
.opcao-radio:hover { background: #f9fafb; }
.opcao-radio:has(input:checked) { border-color: var(--acento); background: var(--acento-suave); }
.opcao-radio input { margin-top: 3px; accent-color: var(--acento); }
.opcao-textos strong { display: block; }
.opcao-textos small { color: var(--texto-suave); }

.bloco-autorizados {
  border: 1px solid var(--borda);
  border-radius: 10px;
  padding: 16px;
  margin-bottom: 16px;
}
.bloco-autorizados h3 { font-size: 13px; font-weight: 600; margin-bottom: 10px; }

/* Esmaecida quando o modo é "Todos" (a lista não está em uso) */
.bloco-autorizados.desabilitado { opacity: 0.5; }

.linha-adicionar { display: flex; gap: 8px; margin-bottom: 12px; }
.linha-adicionar input {
  flex: 1;
  border: 1px solid var(--borda);
  border-radius: 9px;
  padding: 9px 12px;
  font: inherit;
  outline: none;
  background: var(--entrada);
}
.linha-adicionar input:focus { border-color: var(--acento); background: #fff; box-shadow: 0 0 0 3px rgba(22, 163, 56, 0.16); }
.linha-adicionar button {
  display: flex;
  align-items: center;
  gap: 6px;
  border: none;
  border-radius: 9px;
  padding: 0 14px;
  background: var(--acento-grad);
  box-shadow: var(--acento-glow);
  color: #fff;
  font: inherit;
  cursor: pointer;
  transition: transform 0.12s;
}
.linha-adicionar button:hover { transform: translateY(-1px); }
.linha-adicionar .lucide { width: 16px; height: 16px; }

.autorizados { list-style: none; display: flex; flex-direction: column; gap: 6px; }

.autorizado {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 12px;
  border: 1px solid var(--borda);
  border-radius: 8px;
  background: #f9fafb;
}
.autorizado-numero { display: flex; align-items: center; gap: 8px; font-weight: 500; }
.autorizado-numero .lucide { width: 15px; height: 15px; color: var(--acento); }

.remover-autorizado {
  display: flex;
  align-items: center;
  border: none;
  background: transparent;
  color: var(--texto-suave);
  cursor: pointer;
  padding: 4px;
  border-radius: 6px;
}
.remover-autorizado:hover { background: #fef3f2; color: #b42318; }
.remover-autorizado .lucide { width: 15px; height: 15px; }

/* Espaço entre cards empilhados nas abas */
.view .card + .card { margin-top: 16px; }

/* ══════════════ ABA CONFIGURAÇÕES: grade em 2 colunas ══════════════ */
/* Cards lado a lado — a página fica curta mesmo com muitos grupos */
#view-configuracoes { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; align-content: start; }
#view-configuracoes .card + .card { margin-top: 0; } /* o gap do grid já espaça */
@media (max-width: 1100px) { #view-configuracoes { grid-template-columns: 1fr; } }

/* Listas longas rolam DENTRO do próprio bloco, sem esticar a página */
.autorizados { max-height: 190px; overflow-y: auto; }
.lista-grupos { max-height: 240px; overflow-y: auto; }

/* Busca dentro do bloco de grupos */
.busca-grupos {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 10px;
  border: 1px solid var(--borda);
  border-radius: 8px;
  margin-bottom: 10px;
  background: var(--entrada);
}
.busca-grupos .lucide { width: 14px; height: 14px; color: var(--texto-suave); }
.busca-grupos input { flex: 1; border: none; outline: none; background: transparent; font: inherit; font-size: 13px; color: var(--texto); }

.grupos-topo {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
}
.grupos-topo h3 { margin-bottom: 0; }

/* Botão secundário (discreto), usado no "Atualizar lista" */
.botao-suave {
  display: flex;
  align-items: center;
  gap: 6px;
  border: 1px solid var(--borda);
  border-radius: 8px;
  padding: 7px 12px;
  background: var(--superficie);
  color: var(--texto);
  font: inherit;
  font-size: 13px;
  cursor: pointer;
}
.botao-suave:hover { background: #f9fafb; }
.botao-suave .lucide { width: 14px; height: 14px; }

.lista-grupos { list-style: none; display: flex; flex-direction: column; gap: 6px; }

.grupo-linha {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  border: 1px solid var(--borda);
  border-radius: 8px;
  background: #f9fafb;
  cursor: pointer;
}
.grupo-linha:hover { background: #f2f4f7; }
.grupo-linha input { accent-color: var(--acento); width: 15px; height: 15px; }
.grupo-textos { display: flex; flex-direction: column; min-width: 0; }
.grupo-nome { font-weight: 500; }
.grupo-id { color: var(--texto-suave); font-size: 11.5px; overflow: hidden; text-overflow: ellipsis; }

/* Interruptores (card de Notificações) */
.opcao-switch { display: flex; align-items: center; gap: 10px; cursor: pointer; margin-top: 10px; }
.opcao-switch input { width: 16px; height: 16px; accent-color: var(--acento); }

/* Linha da foto de perfil (aba Configurações) */
.linha-foto-perfil { display: flex; align-items: center; gap: 12px; margin-top: 12px; flex-wrap: wrap; }

/* ══════════════ ABA DOCS & IA ══════════════ */

.passos-docs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  margin-top: 14px;
}
@media (max-width: 900px) { .passos-docs { grid-template-columns: 1fr; } }

.passo-doc { border: 1px solid var(--borda); border-radius: 10px; padding: 16px; }
.passo-doc h3 { display: flex; align-items: center; gap: 8px; font-size: 13.5px; margin-bottom: 8px; }
.passo-doc h3 .lucide { width: 15px; height: 15px; color: var(--acento-escuro); }
.passo-doc p { color: var(--texto-suave); font-size: 13px; line-height: 1.5; }

/* Blocos de código (comandos de terminal, JSON de configuração) */
.view pre {
  margin-top: 10px;
  background: #101828;
  color: #d7e0ec;
  border-radius: 8px;
  padding: 12px 14px;
  overflow-x: auto;
  font-family: ui-monospace, "Cascadia Code", Consolas, monospace;
  font-size: 12.5px;
  line-height: 1.6;
}

/* Caixa de dica (verde), irmã da .aviso (âmbar) */
.dica {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin-top: 16px;
  padding: 12px 14px;
  background: var(--acento-suave);
  border: 1px solid var(--acento-borda);
  border-radius: 8px;
  color: var(--acento-escuro);
  line-height: 1.45;
}
.dica .lucide { width: 16px; height: 16px; margin-top: 2px; }

.lista-links { list-style: none; display: flex; flex-direction: column; gap: 8px; margin-top: 6px; }
.lista-links a {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--texto);
  text-decoration: none;
  padding: 10px 12px;
  border: 1px solid var(--borda);
  border-radius: 8px;
  font-weight: 500;
}
.lista-links a:hover { border-color: var(--acento-borda); background: var(--acento-suave); }
.lista-links .lucide { width: 15px; height: 15px; color: var(--acento-escuro); }
.lista-links small { color: var(--texto-suave); margin-left: auto; font-weight: 400; }

/* ══════════════ RESUMO DA OPERAÇÃO ══════════════ */
.operacao-resumo {
  margin: 12px 4px 4px;
  padding: 14px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.03);
  color: #fff;
}
.operacao-resumo-icone { display: grid; place-items: center; width: 30px; height: 30px; margin-bottom: 10px; border-radius: 8px; color: #173f9f; background: #fff; }
.operacao-resumo-icone .lucide { width: 16px; height: 16px; }
.operacao-resumo strong { display: block; font-size: 12px; }
.operacao-resumo p { margin-top: 5px; color: #b9c8ed; font-size: 11.5px; line-height: 1.45; }

.rodape-app {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 8px;
  padding: 10px 28px;
  border-top: 1px solid var(--borda);
  background: var(--superficie);
  color: var(--texto-suave);
  font-size: 12.5px;
}
.rodape-app a {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--texto-suave);
  text-decoration: none;
}
.rodape-app a:hover { color: var(--acento-escuro); }
.rodape-app img { height: 15px; }
.rodape-sep { color: var(--borda); }

/* ══════════════ TOAST (erro em vermelho, sucesso em verde) ══════════════ */

.toast {
  position: fixed;
  right: 20px;
  bottom: 20px;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 16px;
  background: #fef3f2;
  border: 1px solid #fecdca;
  border-radius: 10px;
  color: #b42318;
  box-shadow: 0 4px 12px rgba(16, 24, 40, 0.1);
  max-width: 380px;
  z-index: 50;
}

.toast.sucesso {
  background: #ecfdf3;
  border-color: #a6f4c5;
  color: #067647;
}

/* ══════════════ TELAS PEQUENAS ══════════════ */

@media (max-width: 900px) {
  .grade-transicoes { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .dashboard-graficos { grid-template-columns: 1fr; }
  #view-visao-geral .grade-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  #view-visao-geral .grade-cards .card:first-child { grid-column: span 2; }
  .sidebar { width: 64px; padding: 16px 8px; }
  .operacao-resumo { display: none; }
  .marca small, .menu-item span, .sidebar-rodape span:last-child { display: none; }
  .marca { align-items: center; border: none; padding: 0 0 12px; }
  .marca-logo { height: 20px; }
  .menu-item { justify-content: center; }
  .sidebar-usuario { justify-content: center; padding: 8px 0; border: 0; background: transparent; }
  .sidebar-usuario-dados { display: none; }
  .sidebar-rodape { justify-content: center; }
  .conversas { grid-template-columns: 1fr; }
  .lista-chats { display: none; } /* no celular, o foco é a conversa aberta */
  #campo-numero { width: 140px; }
}

@media (max-width: 560px) {
  .dashboard-bloco-cabecalho { align-items: flex-start; flex-direction: column; }
  .grade-transicoes { grid-template-columns: 1fr; }
  #view-visao-geral .grade-cards { grid-template-columns: 1fr; }
  #view-visao-geral .grade-cards .card:first-child { grid-column: span 1; }
  .cabecalho-chat { align-items: flex-start; flex-direction: column; }
  .acoes-atendimento { width: 100%; justify-content: flex-start; }
}

/* ── Disparos operacionais ───────────────────────────────────────────── */
.disparo-hero { display:flex; justify-content:space-between; gap:24px; align-items:flex-start; padding:28px 30px; margin-bottom:16px; border:1px solid #d7eadf; border-radius:18px; background:linear-gradient(120deg,#f3fbf6,#eef7f8); }
.disparo-hero.cliente { border-color:#d9e4f4; background:linear-gradient(120deg,#f3f7ff,#f3fbf8); }
.disparo-hero h2 { margin:5px 0 7px; color:#16352a; font-size:26px; letter-spacing:-.03em; }
.disparo-hero p { max-width:680px; margin:0; color:#5d7068; font-size:14px; }
.eyebrow { color:#168458; font-size:10px; font-weight:800; letter-spacing:.14em; }
.disparo-status { display:inline-flex; align-items:center; gap:7px; white-space:nowrap; padding:8px 11px; border-radius:999px; background:#fff; color:#13754e; font-size:11px; font-weight:700; box-shadow:0 1px 3px #16352a12; }
.disparo-status .lucide { width:15px; height:15px; }
.disparo-metricas { display:grid; grid-template-columns:repeat(4,1fr); gap:12px; margin-bottom:16px; }
.disparo-metrica { min-height:102px; padding:17px; border:1px solid #e2e9e5; border-radius:14px; background:#fff; box-shadow:0 2px 8px #183b2a08; }
.disparo-metrica span,.disparo-metrica small { display:block; color:#71827b; font-size:11px; }
.disparo-metrica strong { display:block; margin:8px 0 3px; color:#17382b; font-size:26px; letter-spacing:-.04em; }
.disparo-layout { display:grid; grid-template-columns:1.25fr .75fr; gap:16px; margin-bottom:16px; }
.disparo-card { min-width:0; }
.disparo-card-topo { display:flex; justify-content:space-between; gap:16px; align-items:flex-start; }
.disparo-card-topo .card-suporte { margin-bottom:0; }
.base-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(190px,1fr)); gap:8px; margin-top:18px; }
.base-option { display:flex; align-items:center; gap:10px; min-width:0; padding:12px; border:1px solid #e1e9e5; border-radius:11px; cursor:pointer; transition:.16s ease; }
.base-option:hover { border-color:#9bcab2; background:#f8fcfa; }
.base-option input { accent-color:#168458; }
.base-option span { min-width:0; flex:1; }
.base-option strong,.base-option small { display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.base-option small { margin-top:3px; color:#71827b; font-size:10px; }
.base-option b { color:#168458; font-size:13px; }
.campo-disparo { display:grid; gap:7px; margin:18px 0 14px; color:#40564b; font-size:12px; font-weight:700; }
.campo-disparo select { width:100%; padding:11px; border:1px solid #d7e2dc; border-radius:9px; background:#fff; color:#233f32; font:inherit; }
.disparo-aviso { margin:14px 0; }
.disparo-cta { width:100%; justify-content:center; }
.disparo-contador { color:#168458; font-size:12px; font-weight:700; }
.tabela-scroll { overflow-x:auto; margin-top:10px; }
.tabela-disparo { width:100%; border-collapse:collapse; font-size:12px; }
.tabela-disparo th { padding:10px 8px; border-bottom:1px solid #dce7e1; color:#6b7e74; font-size:10px; text-align:left; text-transform:uppercase; letter-spacing:.06em; }
.tabela-disparo td { padding:12px 8px; border-bottom:1px solid #edf1ef; color:#30493c; white-space:nowrap; }
.tabela-disparo td strong,.tabela-disparo td small { display:block; }
.tabela-disparo td small { margin-top:3px; color:#829188; font-size:10px; }
.tabela-disparo input { accent-color:#168458; }
.linha-bloqueada { background:#fcfdfc; opacity:.62; }
.status-disparo { padding:4px 7px; border-radius:6px; background:#eef7f1; color:#19734d; font-size:10px; }
.elegibilidade { display:inline-flex; align-items:center; gap:4px; font-size:10px; font-weight:700; }
.elegibilidade.ok { color:#19734d; }.elegibilidade.bloqueada { color:#ae6d33; }.elegibilidade .lucide { width:14px; height:14px; }
.template-preview { display:grid; gap:6px; margin:18px 0; padding:16px; border:1px dashed #b7cfe8; border-radius:11px; background:#f7faff; }
.template-preview strong { color:#213d63; }.template-preview small { color:#71829a; font-size:11px; }.template-tag { color:#4873a8; font-size:10px; font-weight:800; letter-spacing:.08em; text-transform:uppercase; }
@media (max-width:900px) { .disparo-layout { grid-template-columns:1fr; } .disparo-metricas { grid-template-columns:repeat(2,1fr); } }
@media (max-width:560px) { .disparo-hero { display:block; padding:22px; } .disparo-status { margin-top:18px; } .disparo-metricas { gap:8px; } .disparo-metrica { min-height:88px; padding:12px; } .disparo-metrica strong { font-size:22px; } .disparo-card-topo { display:block; } .disparo-card-topo > button,.disparo-contador { margin-top:12px; } }

/* ══════════════ ACESSO E GESTÃO DE ATENDENTES ═══════════════════════════ */
.password-change-shell { min-height:100vh; display:grid; place-items:center; padding:24px; background:var(--fundo, #f5f8f6); }
.password-change-panel { width:min(100%, 480px); padding:32px; border:1px solid var(--borda, #dce7e1); border-radius:16px; background:#fff; box-shadow:0 12px 40px rgba(35,63,50,.08); }
.password-change-panel .auth-copy > p:last-child { color:var(--texto-suave); }
.password-change-panel .auth-form label { color:var(--texto); }
.password-change-panel .auth-input-wrap { border-color:var(--borda-forte); background:var(--entrada); }
.password-change-panel .auth-input-wrap:focus-within { border-color:var(--acento); background:#fff; box-shadow:0 0 0 3px rgba(23,63,159,.12); }
.password-change-panel .auth-input-wrap > .lucide { color:var(--acento); }
.password-change-panel .auth-input-wrap input { color:var(--texto); }
.password-change-panel .auth-input-wrap input::placeholder { color:#667085; }
.password-change-panel .auth-input-wrap button { color:var(--acento); }
.password-change-panel .auth-error { color:#8a2f26; background:#fff0ed; border-color:#f5b8b0; }
.password-change-panel .auth-submit { color:#fff; background:var(--acento); }
.password-change-panel .auth-submit:hover { color:#fff; background:var(--acento-escuro); }
.password-change-icon { display:grid; place-items:center; width:46px; height:46px; margin-bottom:22px; border-radius:13px; color:var(--acento-escuro, #168458); background:var(--acento-suave, #eef7f1); }
.password-change-icon .lucide { width:22px; height:22px; }
.password-rules { margin:8px 0 0; color:var(--texto-suave, #6b7e74); font-size:12px; }
.page-heading { display:flex; align-items:flex-start; justify-content:space-between; gap:20px; margin-bottom:18px; }
.page-heading h2 { margin:0; color:var(--texto, #233f32); font-size:25px; letter-spacing:-.02em; }
.page-heading p { margin:7px 0 0; color:var(--texto-suave, #6b7e74); }
.user-summary-grid { display:grid; grid-template-columns:repeat(4, minmax(0, 1fr)); gap:12px; margin-bottom:16px; }
.user-summary-item { display:flex; align-items:center; gap:12px; min-height:82px; padding:16px; border:1px solid var(--borda, #dce7e1); border-radius:13px; background:#fff; }
.user-summary-item > .lucide { width:20px; height:20px; color:var(--acento-escuro, #168458); }
.user-summary-item span { display:grid; gap:3px; }
.user-summary-item strong { color:var(--texto, #233f32); font-size:23px; line-height:1; font-variant-numeric:tabular-nums; }
.user-summary-item small { color:var(--texto-suave, #6b7e74); font-size:11px; }
.user-toolbar { display:flex; align-items:center; gap:10px; margin-bottom:15px; }
.campo-busca-inline { display:flex; align-items:center; flex:1; gap:8px; min-width:220px; padding:0 12px; border:1px solid var(--borda, #dce7e1); border-radius:9px; background:#fff; }
.campo-busca-inline:focus-within { border-color:#8bc4a5; box-shadow:0 0 0 3px rgba(22,132,88,.11); }
.campo-busca-inline .lucide { width:16px; color:var(--texto-suave, #6b7e74); }
.campo-busca-inline input { width:100%; min-height:40px; border:0; outline:0; color:var(--texto, #233f32); background:transparent; font:inherit; }
.user-toolbar select { min-height:40px; padding:0 10px; border:1px solid var(--borda, #dce7e1); border-radius:9px; color:var(--texto, #233f32); background:#fff; font:inherit; }
.user-form { margin-bottom:16px; }
.form-grid-2 { display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:14px; }
.form-grid-2 label { display:grid; gap:6px; color:var(--texto, #233f32); font-size:13px; font-weight:650; }
.form-grid-2 input, .form-grid-2 select { min-height:42px; padding:0 12px; border:1px solid var(--borda, #dce7e1); border-radius:9px; color:var(--texto, #233f32); background:#fff; font:inherit; }
.form-grid-2 input:focus, .form-grid-2 select:focus, .user-toolbar select:focus { outline:2px solid #168458; outline-offset:2px; }
.check-inline { display:flex; align-items:center; gap:8px; margin-top:14px; color:var(--texto, #233f32); font-size:13px; }
.check-inline input { accent-color:#168458; }
.bases-fieldset { margin:20px 0 0; padding:15px; border:1px solid var(--borda, #dce7e1); border-radius:11px; }
.bases-fieldset legend { padding:0 6px; color:var(--texto, #233f32); font-size:13px; font-weight:700; }
.bases-fieldset .card-suporte { margin:0 0 12px; }
.base-select-grid { display:grid; grid-template-columns:repeat(auto-fit, minmax(150px, 1fr)); gap:8px; }
.base-select-option { display:flex; align-items:center; gap:8px; padding:10px; border:1px solid #e1e9e5; border-radius:9px; color:var(--texto, #233f32); cursor:pointer; font-size:12px; }
.base-select-option:hover { border-color:#9bcab2; background:#f8fcfa; }
.base-select-option input { accent-color:#168458; }
.form-acoes { display:flex; justify-content:flex-end; gap:9px; margin-top:18px; }
.temporary-password-result { display:flex; align-items:center; justify-content:space-between; gap:20px; margin-bottom:16px; border-color:#a6f4c5; background:#f2fff7; }
.temporary-password-result h2 { margin:3px 0 5px; color:#135f3d; font-size:17px; }
.temporary-password-result p { margin:0; color:#4b745f; font-size:12px; }
.status-kicker { color:#168458; font-size:11px; font-weight:800; letter-spacing:.08em; text-transform:uppercase; }
.temporary-password-result code { padding:10px 12px; border:1px dashed #84cba4; border-radius:8px; color:#135f3d; background:#fff; font-size:16px; letter-spacing:.08em; }
.tabela-usuarios { width:100%; border-collapse:collapse; font-size:12px; }
.tabela-usuarios th { padding:10px 8px; border-bottom:1px solid #dce7e1; color:#6b7e74; font-size:10px; text-align:left; text-transform:uppercase; letter-spacing:.06em; }
.tabela-usuarios td { padding:13px 8px; border-bottom:1px solid #edf1ef; color:#30493c; vertical-align:middle; }
.tabela-usuarios td strong, .tabela-usuarios td small { display:block; }
.tabela-usuarios td small { margin-top:3px; color:#829188; font-size:11px; }
.profile-badge, .user-status, .base-badges span { display:inline-flex; align-items:center; width:max-content; padding:4px 7px; border-radius:6px; font-size:11px; font-weight:700; }
.profile-badge.atendente_motorista { color:#2e5c83; background:#edf5ff; }
.profile-badge.atendente_cliente { color:#66508e; background:#f4efff; }
.user-status.ativo { color:#19734d; background:#eef7f1; }.user-status.inativo { color:#8a4b3f; background:#fff0ed; }
.base-badges { display:flex; flex-wrap:wrap; gap:4px; max-width:260px; }.base-badges span { color:#466b59; background:#f0f6f2; font-weight:600; }.base-badges .base-empty { color:#8a6d3b; background:#fff7e7; }
.user-actions { display:flex; gap:6px; justify-content:flex-end; white-space:nowrap; }.user-actions .botao-suave { min-height:30px; padding:0 9px; font-size:11px; }.botao-texto { border:0; padding:4px; color:#168458; background:transparent; cursor:pointer; font:inherit; font-size:11px; }.botao-texto:hover { text-decoration:underline; }
.sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
.sidebar-usuario-dados em { display:block; overflow:hidden; color:rgba(255,255,255,.65); font-size:10px; font-style:normal; text-overflow:ellipsis; white-space:nowrap; }
@media (max-width:900px) { .user-summary-grid { grid-template-columns:repeat(2, minmax(0, 1fr)); }.user-toolbar { align-items:stretch; flex-wrap:wrap; }.campo-busca-inline { flex-basis:100%; }.user-toolbar select { flex:1; }.temporary-password-result { align-items:flex-start; flex-direction:column; } }
@media (max-width:560px) { .page-heading { align-items:stretch; flex-direction:column; }.page-heading .botao-primario { width:100%; justify-content:center; }.form-grid-2 { grid-template-columns:1fr; }.user-summary-grid { grid-template-columns:1fr 1fr; }.tabela-usuarios { min-width:760px; }.temporary-password-result code { width:100%; text-align:center; }.temporary-password-result .botao-suave { width:100%; justify-content:center; } }

/* ══════════════ KIT WHATSAPP FIEL · ROTA REAL ══════════════
   Tokens scoped à rota para não contaminar login, visão geral ou configurações. */
#view-conversas {
  --wa-green: #1daa61;
  --wa-green-strong: #008069;
  --wa-green-hover: #159653;
  --wa-green-soft: #d9fdd3;
  --wa-bg: #fff;
  --wa-chat-bg: #f5f1eb;
  --wa-incoming: #fff;
  --wa-outgoing: #d9fdd3;
  --wa-text: #111b21;
  --wa-text-secondary: #667781;
  --wa-icon: #54656f;
  --wa-line: #e9edef;
  --wa-hover: #f5f6f6;
  --wa-selected: #f1f2f2;
  --wa-search: #f5f5f5;
  --wa-unread: #25d366;
  --wa-read: #53bdeb;
  --wa-header-height: 70px;
  --wa-font: 'Segoe UI', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  font-family: var(--wa-font);
  background: var(--wa-chat-bg);
  color: var(--wa-text);
}
#view-conversas .conversas { grid-template-columns: minmax(320px, 31.2%) minmax(0, 1fr); border: 1px solid #e4e7e9; border-radius: 0; background: #fff; }
#view-conversas .lista-chats { border-right: 1px solid #dedede; background: #fff; scrollbar-color: #aebac1 transparent; }
#view-conversas .lista-chats-topo { height: 70px; padding: 0 23px; }
#view-conversas .whatsapp-titulo { color: #1daa61; font-size: 22px; line-height: 1; letter-spacing: -.5px; }
#view-conversas .whatsapp-acoes { gap: 12px; }
#view-conversas .botao-menu-whatsapp, #view-conversas .lista-chats-topo .botao-limpar { width: 40px; height: 40px; color: #111b21; }
#view-conversas .botao-menu-whatsapp:hover, #view-conversas .lista-chats-topo .botao-limpar:hover { color: #111b21; background: #f5f6f6; }
#view-conversas .busca-chats { height: 40px; margin: 0 23px 10px; padding: 0 17px; gap: 15px; border: 0; border-radius: 24px; background: #f5f5f5; }
#view-conversas .busca-chats::before { display: none; }
#view-conversas .busca-chats .lucide { width: 16px; height: 16px; margin: 0; color: #54656f; }
#view-conversas .busca-chats input { height: 100%; padding: 0; font-size: 14px; }
#view-conversas .busca-chats:focus-within { box-shadow: inset 0 0 0 1px #a5d8b8; }
#view-conversas .wa-filtros { padding: 0 23px 13px; gap: 8px; }
#view-conversas .wa-filtro { padding: 6px 12px; border-color: #d2d5d7; color: #54656f; line-height: 18px; font-size: 14px; transition: background 140ms, border-color 140ms; }
#view-conversas .wa-filtro.ativo { border-color: #a7d4ae; background: #d9fdd3; color: #173929; }
#view-conversas .wa-filtro:hover { background: #f5f6f6; }
#view-conversas .filtro-atendimento { display: none; }
#view-conversas .chat-item { height: 76px; min-height: 76px; margin: 0 12px; padding: 10px 12px; border: 0; border-radius: 10px; gap: 14px; }
#view-conversas .chat-item:hover { background: #f5f6f6; }
#view-conversas .chat-item.ativo { background: #f1f2f2; }
#view-conversas .chat-avatar, #view-conversas .chat-avatar-img { width: 48px; height: 48px; }
#view-conversas .chat-avatar { background: #dfe5e7; color: #809198; }
#view-conversas .chat-info { flex: 1; }
#view-conversas .chat-nome { font-size: 16px; font-weight: 400; }
#view-conversas .chat-previa { margin-top: 5px; color: #667781; font-size: 13px; }
#view-conversas .chat-item:has(.badge-naolidas) .chat-nome { font-weight: 600; }
#view-conversas .badge-naolidas { min-width: 20px; height: 20px; padding: 0 5px; border-radius: 11px; background: #25d366; color: #084b32; font-size: 11px; }
#view-conversas .painel-chat { min-width: 0; min-height: 0; background: #f5f1eb; }
#view-conversas .cabecalho-chat { height: 70px; min-height: 70px; padding: 0 18px 0 16px; gap: 14px; background: #fff; border-bottom: 1px solid #e9edef; }
#view-conversas .botao-voltar-chats { display: none; }
#view-conversas .chat-cabecalho-avatar { width: 40px; height: 40px; background: #dfe5e7; color: #809198; }
#view-conversas .chat-cabecalho-avatar-img { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; }
#view-conversas .cabecalho-contato { gap: 14px; flex: 1; }
#view-conversas .cabecalho-contato-textos { gap: 1px; }
#view-conversas .cabecalho-chat strong { color: #111b21; font-size: 16px; font-weight: 400; }
#view-conversas .cabecalho-chat span { color: #737b7f; font-size: 12px; }
#view-conversas .cabecalho-acoes { gap: 14px; }
#view-conversas .acoes-whatsapp { gap: 14px; }
#view-conversas .acoes-whatsapp button { color: #54656f; }
#view-conversas .acoes-whatsapp button:hover { color: #008069; background: #f5f6f6; }
#view-conversas .painel-chat { position: relative; }
#view-conversas .busca-conversa {
  position: absolute;
  z-index: 12;
  top: 78px;
  right: 18px;
  display: flex;
  align-items: center;
  gap: 8px;
  width: min(360px, calc(100% - 36px));
  padding: 7px 10px;
  border: 1px solid #dfe5e7;
  border-radius: 10px;
  background: #fff;
  box-shadow: 0 6px 18px rgba(11, 20, 26, .14);
}
#view-conversas .busca-conversa .lucide { width: 17px; height: 17px; color: #54656f; flex: 0 0 auto; }
#view-conversas .busca-conversa input { min-width: 0; flex: 1; border: 0; outline: 0; color: #111b21; font: inherit; }
#view-conversas .busca-conversa span { color: #667781; font-size: 11px; white-space: nowrap; }
#view-conversas .busca-conversa button { width: 28px; height: 28px; border: 0; border-radius: 50%; background: transparent; color: #54656f; cursor: pointer; }
#view-conversas .menu-chat-acoes {
  position: absolute;
  z-index: 14;
  top: 56px;
  right: 18px;
  display: grid;
  min-width: 220px;
  padding: 6px;
  border: 1px solid #dfe5e7;
  border-radius: 10px;
  background: #fff;
  box-shadow: 0 8px 24px rgba(11, 20, 26, .16);
}
#view-conversas .menu-chat-acoes button { display: flex; align-items: center; gap: 10px; padding: 10px; border: 0; border-radius: 7px; background: transparent; color: #37474f; cursor: pointer; text-align: left; font: inherit; }
#view-conversas .menu-chat-acoes button:hover { background: #f0f2f5; color: #008069; }
#view-conversas .menu-chat-acoes .lucide { width: 17px; height: 17px; }
#view-conversas .menu-chat-acoes #menu-finalizar-chat .lucide { color: #b42318; }
#view-conversas .acoes-atendimento .botao-suave { min-height: 32px; border: 1px solid #badacb; border-radius: 17px; color: #008069; background: #fff; font-size: 12px; }
#view-conversas .acoes-atendimento .botao-suave:hover { color: #008069; background: #f0faf2; }
#view-conversas .botao-finalizar { color: #008069; border-color: #badacb; }
#view-conversas .mensagens { position: relative; padding: 20px clamp(24px, 4.3vw, 80px) 26px clamp(24px, 3.1vw, 58px); gap: 4px; background-color: #f5f1eb; background-image: url('wa-kit/assets/wallpaper-reference.png'); background-repeat: repeat; background-size: 540px 1240px; background-position: 0 0; scrollbar-color: #aebac1 transparent; }
#view-conversas .bolha { max-width: min(80%, 790px); min-width: 74px; padding: 7px 8px 4px; margin: 0 0 4px; border: 0; border-radius: 8px; background: #fff; color: #111b21; box-shadow: 0 1px 1px rgba(11,20,26,.13); font-size: 14px; line-height: 1.4; }
#view-conversas .bolha.minha { background: #d9fdd3; color: #111b21; }
#view-conversas .bolha-nome { margin: 0 20px 3px 0; color: #008069; font-size: 13px; font-weight: 600; }
#view-conversas .bolha-texto { white-space: pre-wrap; font-size: 14px; line-height: 19px; min-width: 20px; padding: 0 6px 1px 1px; }
#view-conversas .bolha-hora { color: #7b8284; font-size: 10px; line-height: 14px; }
#view-conversas .bolha.minha .bolha-hora { color: #7b8284; }
#view-conversas .bolha-citacao { border-left-color: #008069; color: #667781; }
#view-conversas .ticks.lido { color: #53bdeb; }
#view-conversas .bolha-reacoes { border-color: #e9edef; background: #fff; color: #111b21; }
#view-conversas .bolha.minha .bolha-reacoes { border-color: #c5e6bf; background: #d9fdd3; color: #111b21; }
#view-conversas .bolha-midia { max-width: min(100%, 420px); max-height: 420px; border-radius: 6px; }
#view-conversas .bolha-doc { border-color: #e9edef; background: #fff; color: #111b21; }
#view-conversas .bolha.minha .bolha-doc { border-color: #c5e6bf; background: rgba(255,255,255,.35); color: #111b21; }
#view-conversas .digitando { background: transparent; border: 0; color: #667781; }
#view-conversas .respondendo { background: #f5f6f6; border-top: 1px solid #e9edef; }
#view-conversas .compositor { min-height: 62px; padding: 9px 18px; gap: 10px; align-items: center; background: #f0f2f5; border-top: 0; }
#view-conversas .compositor textarea { flex: 1; min-width: 0; min-height: 44px; max-height: 140px; resize: none; overflow-y: auto; padding: 12px 18px; border: 0; border-radius: 24px; outline: 0; background: #fff; color: #111b21; font: inherit; line-height: 20px; }
#view-conversas .compositor textarea:focus { box-shadow: inset 0 0 0 1px #a5d8b8; }
#view-conversas .compositor input[type='hidden'] { display: none; }
#view-conversas .compositor button { width: 40px; min-height: 40px; border-radius: 50%; background: transparent; color: #54656f; box-shadow: none; transition: background 140ms, transform 140ms; }
#view-conversas .compositor button:hover { transform: none; background: #e9edef; color: #008069; }
#view-conversas .compositor .botao-anexo { background: transparent; border: 0; color: #54656f; }
#view-conversas .compositor > button[type='submit'] { background: #1daa61; color: #fff; }
#view-conversas .compositor > button[type='submit']:hover { background: #159653; color: #fff; }
#view-conversas .botao-emoji .lucide, #view-conversas .botao-anexo .lucide, #view-conversas .compositor > button[type='submit'] .lucide { width: 21px; height: 21px; }
#view-conversas :focus-visible { outline: 2px solid #008069; outline-offset: 3px; }
#view-conversas ::selection { color: #fff; background: #008069; }
#view-conversas .abrir-imagem { border-radius: 6px; }
#view-conversas .abrir-imagem:focus-visible { outline: 2px solid #008069; }

@media (prefers-reduced-motion: reduce) {
  #view-conversas *, #view-conversas *::before, #view-conversas *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
}

@media (max-width: 760px) {
  #view-conversas .conversas { grid-template-columns: 1fr; }
  #view-conversas .lista-chats { display: none; }
  #view-conversas.mobile-mostrar-lista .lista-chats { display: flex; }
  #view-conversas.mobile-mostrar-lista .painel-chat { display: none; }
  #view-conversas:not(.mobile-mostrar-lista) .botao-voltar-chats { display: grid; place-items: center; width: 34px; height: 34px; flex: 0 0 auto; border: 0; border-radius: 50%; background: transparent; color: #54656f; }
  #view-conversas:not(.mobile-mostrar-lista) .botao-voltar-chats:hover { background: #f5f6f6; }
  #view-conversas .cabecalho-chat { padding: 0 10px; }
  #view-conversas .cabecalho-acoes { gap: 4px; }
  #view-conversas .acoes-whatsapp { display: none; }
  #view-conversas .acoes-atendimento .botao-suave span { display: none; }
  #view-conversas .acoes-atendimento .botao-suave { width: 34px; padding: 0; }
  #view-conversas .mensagens { padding: 16px 12px 20px; }
  #view-conversas .bolha { max-width: 88%; }
  #view-conversas .compositor { padding: 8px 10px; }
}

/* ══════════════ CONVERSAS · LINGUAGEM WHATSAPP WEB ══════════════
   Esta superfície prioriza a operação de atendimento: densidade, leitura
   rápida, separadores discretos e as cores familiares do WhatsApp Web. */
#view-conversas {
  --wa-ink: #111b21;
  --wa-muted: #667781;
  --wa-divider: #e9edef;
  --wa-panel: #fff;
  --wa-surface: #f0f2f5;
  --wa-green: #00a884;
  --wa-outgoing: #d9fdd3;
  --wa-incoming: #fff;
  --wa-selected: #f0f2f5;
  padding: 0;
  background: var(--wa-surface);
  color: var(--wa-ink);
  font-family: "Segoe UI", Helvetica, Arial, sans-serif;
}
#view-conversas .conversas {
  border: 1px solid #d7dde1;
  border-radius: 8px;
  background: var(--wa-panel);
  box-shadow: 0 1px 2px rgba(11, 20, 26, .08);
}
#view-conversas .lista-chats {
  border-right: 1px solid var(--wa-divider);
  background: var(--wa-panel);
  scrollbar-color: #aebac1 transparent;
}
#view-conversas .lista-chats-topo {
  height: 64px;
  box-sizing: border-box;
  padding: 0 14px 0 16px;
  border-bottom: 1px solid var(--wa-divider);
  color: var(--wa-ink);
  font-size: 20px;
  font-weight: 700;
}
#view-conversas .whatsapp-titulo { color: #00a884; letter-spacing: -.3px; }
#view-conversas .whatsapp-acoes { display: flex; align-items: center; gap: 8px; margin-left: auto; }
#view-conversas .botao-menu-whatsapp,
#view-conversas .lista-chats-topo .botao-limpar { display: grid; place-items: center; width: 30px; height: 30px; border: 0; border-radius: 50%; background: transparent; color: #111b21; cursor: pointer; }
#view-conversas .botao-menu-whatsapp:hover,
#view-conversas .lista-chats-topo .botao-limpar:hover { color: #00a884; background: #f0f2f5; }
#view-conversas .botao-menu-whatsapp .lucide,
#view-conversas .lista-chats-topo .botao-limpar .lucide { width: 18px; height: 18px; }
#view-conversas .botao-limpar { width: 28px; height: 28px; color: #54656f; }
#view-conversas .botao-limpar:hover { color: #54656f; background: #f0f2f5; }
#view-conversas .busca-chats {
  margin: 0;
  padding: 8px 12px;
  border-bottom: 1px solid var(--wa-divider);
  background: var(--wa-panel);
}
#view-conversas .busca-chats::before {
  content: "";
  position: absolute;
  inset: 5px 10px;
  border-radius: 8px;
  background: #f0f2f5;
  z-index: 0;
}
#view-conversas .busca-chats { position: relative; }
#view-conversas .busca-chats > * { position: relative; z-index: 1; }
#view-conversas .busca-chats .lucide { width: 16px; height: 16px; margin-left: 7px; color: #54656f; }
#view-conversas .busca-chats input {
  height: 30px;
  padding: 0 8px;
  color: var(--wa-ink);
  font-size: 13px;
}
#view-conversas .busca-chats input::placeholder { color: #667781; }
#view-conversas .filtro-atendimento {
  display: none;
  margin: 8px 10px;
  padding: 8px 10px;
  border: 1px solid var(--wa-divider);
  border-radius: 8px;
  background: #fff;
  color: #54656f;
}
#view-conversas .filtro-atendimento .lucide { width: 16px; height: 16px; }
#view-conversas .filtro-atendimento select { color: var(--wa-ink); font-size: 12.5px; }
#view-conversas .wa-filtros { display: flex; gap: 7px; padding: 2px 14px 10px; overflow-x: auto; scrollbar-width: none; }
#view-conversas .wa-filtros::-webkit-scrollbar { display: none; }
#view-conversas .wa-filtro { flex: 0 0 auto; padding: 7px 13px; border: 1px solid #d8e0e4; border-radius: 999px; background: #fff; color: #54656f; cursor: pointer; font: inherit; font-size: 12px; }
#view-conversas .wa-filtro:hover { background: #f0f2f5; }
#view-conversas .wa-filtro.ativo { border-color: #9bd5b3; background: #d9fdd3; color: #075e54; font-weight: 600; }
#view-conversas .chat-item {
  min-height: 70px;
  box-sizing: border-box;
  gap: 12px;
  padding: 10px 14px 10px 16px;
  border-bottom: 1px solid var(--wa-divider);
  color: var(--wa-ink);
}
#view-conversas .chat-item:hover { background: #f5f6f6; }
#view-conversas .chat-item.ativo { background: var(--wa-selected); }
#view-conversas .chat-avatar,
#view-conversas .chat-avatar-img {
  width: 42px;
  height: 42px;
}
#view-conversas .chat-avatar { background: #dfe5e7; color: #667781; }
#view-conversas .chat-avatar .lucide { width: 20px; height: 20px; }
#view-conversas .chat-info { gap: 4px; }
#view-conversas .chat-nome { font-size: 14px; font-weight: 500; }
#view-conversas .chat-previa { color: var(--wa-muted); font-size: 12.5px; }
#view-conversas .chat-previa.digitando-previa { color: var(--wa-green); }
#view-conversas .badge-naolidas { min-width: 20px; height: 20px; padding: 0 5px; background: #25d366; color: #084b32; font-size: 11px; }
#view-conversas .painel-chat { background: var(--wa-surface); }
#view-conversas .cabecalho-chat {
  min-height: 48px;
  box-sizing: border-box;
  padding: 8px 14px;
  border-bottom: 1px solid var(--wa-divider);
  background: var(--wa-panel);
}
#view-conversas .cabecalho-chat strong { font-size: 14px; font-weight: 600; color: var(--wa-ink); }
#view-conversas .cabecalho-chat span { color: var(--wa-muted); font-size: 11px; }
#view-conversas .cabecalho-grupo #chat-cabecalho-avatar { background: #fce4dc; color: #c45d3b; }
#view-conversas .cabecalho-grupo #chat-cabecalho-status { color: #667781; font-size: 12px; }
#view-conversas .cabecalho-grupo .acoes-atendimento { display: none; }
#view-conversas .cabecalho-contato { display: flex; align-items: center; gap: 10px; min-width: 0; }
#view-conversas .chat-cabecalho-avatar { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: #dfe5e7; color: #667781; }
#view-conversas .chat-cabecalho-avatar .lucide { width: 20px; height: 20px; }
#view-conversas .cabecalho-contato-textos { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
#view-conversas .cabecalho-acoes { display: flex; align-items: center; gap: 16px; margin-left: auto; }
#view-conversas .acoes-whatsapp { display: flex; align-items: center; gap: 16px; }
#view-conversas .acoes-whatsapp button { display: grid; place-items: center; width: 28px; height: 28px; border: 0; border-radius: 50%; background: transparent; color: #111b21; cursor: pointer; }
#view-conversas .acoes-whatsapp button:hover { background: #f0f2f5; color: #00a884; }
#view-conversas .acoes-whatsapp .lucide { width: 19px; height: 19px; }
#view-conversas .acoes-atendimento { gap: 6px; }
#view-conversas .acoes-atendimento .botao-suave {
  min-height: 30px;
  padding: 0 10px;
  border-color: #d8e0e4;
  border-radius: 6px;
  color: #54656f;
  background: #fff;
  box-shadow: none;
  font-size: 12px;
}
#view-conversas .acoes-atendimento .botao-suave:hover { background: #f0f2f5; }
#view-conversas .mensagens {
  padding: 18px 5.2%;
  gap: 3px;
  background-color: var(--wa-surface);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180' viewBox='0 0 180 180' fill='none' stroke='%23d9d2c7' stroke-width='1.3' opacity='.34'%3E%3Cpath d='M17 32c13-13 22 8 34-4s20 1 31-8 16 10 27 2 23 4 35-8M8 101c13-10 21 6 34-3 9-7 21 6 32-4s21 8 35-3 22 5 40-7M52 4c-3 12 11 17 3 29s5 20-4 31m76-37c-8 9 5 18-2 28s7 20-2 31m-42 82c-8-12 8-18 0-30s8-19-1-31'/%3E%3Ccircle cx='150' cy='72' r='12'/%3E%3Cpath d='m143 72 7-7 7 7-7 7z'/%3E%3C/svg%3E");
  background-size: 180px 180px;
  scrollbar-color: #aebac1 transparent;
}

/* Contato individual: cabeçalho limpo no padrão do WhatsApp Web. */
#view-conversas .cabecalho-chat:not(.cabecalho-grupo) { height: 70px; min-height: 70px; padding: 0 18px 0 16px; gap: 14px; }
#view-conversas .cabecalho-chat:not(.cabecalho-grupo) #chat-cabecalho-status { display: none; }
#view-conversas .cabecalho-chat:not(.cabecalho-grupo) .acoes-atendimento { display: none; }
#view-conversas .cabecalho-chat:not(.cabecalho-grupo) .cabecalho-chat strong { color: #111b21; font-size: 16px; font-weight: 400; }
#view-conversas .cabecalho-chat:not(.cabecalho-grupo) .chat-cabecalho-avatar,
#view-conversas .cabecalho-chat:not(.cabecalho-grupo) .chat-cabecalho-avatar-img { width: 40px; height: 40px; }

#view-atendimento-cliente { min-height: 0; overflow: hidden; padding: 24px 0 0; }

.meta-config-form { display: grid; gap: 8px; margin: 14px 0; }
.meta-config-form label, .meta-config-card > label { color: var(--texto-suave); font-size: 12px; font-weight: 600; }
.meta-config-form input, .meta-config-card input { min-width: 0; border: 1px solid var(--borda); border-radius: 8px; padding: 11px 12px; background: var(--fundo-input, #fff); color: var(--texto); font: inherit; }
.meta-config-form input:focus, .meta-config-card input:focus { border-color: #25d366; box-shadow: 0 0 0 3px rgba(37,211,102,.12); }
.meta-token-linha { display: flex; gap: 8px; align-items: center; }
.meta-token-linha input { flex: 1; }
.meta-token-linha button { flex: 0 0 auto; white-space: nowrap; }
.meta-config-aviso { margin-top: 12px; }
#view-atendimento-cliente .meta-atendimento-shell { display: grid; grid-template-columns: minmax(300px, 31.2%) minmax(0, 1fr); height: min(820px, calc(100vh - 90px)); min-height: 480px; border: 1px solid #e3e7e9; background: #fff; }
#view-atendimento-cliente .meta-atendimento-lista { min-width: 0; overflow: hidden; border-right: 1px solid #e9edef; }
#view-atendimento-cliente .meta-atendimento-lista { position: relative; }
#view-atendimento-cliente .meta-atendimento-lista-topo { display: flex; align-items: center; gap: 12px; min-height: 70px; padding: 0 18px; border-bottom: 1px solid #e9edef; }
#view-atendimento-cliente .meta-whatsapp-titulo { color: #1daa61; font-size: 22px; line-height: 1; letter-spacing: -.5px; }
#view-atendimento-cliente .meta-whatsapp-acoes { display: flex; gap: 12px; margin-left: auto; }
#view-atendimento-cliente .meta-whatsapp-acoes button { display: grid; place-items: center; width: 40px; height: 40px; border: 0; border-radius: 50%; background: transparent; color: #111b21; }
#view-atendimento-cliente .meta-whatsapp-acoes button:hover { background: #f5f6f6; }
#view-atendimento-cliente .meta-atendimento-busca { display: flex; align-items: center; gap: 15px; height: 40px; margin: 0 14px 10px; padding: 0 17px; border-radius: 24px; background: #f5f5f5; color: #54656f; }
#view-atendimento-cliente .meta-atendimento-busca input { width: 100%; border: 0; outline: 0; background: transparent; color: #111b21; font: inherit; font-size: 13px; }
#view-atendimento-cliente .meta-wa-filtros { display: flex; align-items: center; gap: 8px; overflow: hidden; padding: 0 14px 13px; }
#view-atendimento-cliente .meta-wa-filtros button { flex: 0 0 auto; min-height: 34px; padding: 6px 12px; border: 1px solid #d2d5d7; border-radius: 18px; background: #fff; color: #54656f; font: inherit; font-size: 12px; white-space: nowrap; }
#view-atendimento-cliente .meta-wa-filtros button.ativo { border-color: #a7d4ae; background: #d9fdd3; color: #173929; }
#view-atendimento-cliente .meta-wa-filtros button.mais { display: grid; place-items: center; width: 36px; padding: 6px; }
#view-atendimento-cliente .meta-popover { position: absolute; z-index: 20; top: 154px; left: 14px; display: grid; gap: 9px; width: 240px; padding: 14px; border: 1px solid #d9dee1; border-radius: 10px; background: #fff; box-shadow: 0 8px 24px rgba(17,27,33,.18); color: #111b21; font-size: 12px; }
#view-atendimento-cliente .meta-popover label, #view-atendimento-cliente .modal-cartao label { display: grid; gap: 5px; color: #54656f; font-size: 12px; }
#view-atendimento-cliente .meta-popover select, #view-atendimento-cliente .modal-cartao input, #view-atendimento-cliente .modal-cartao select { min-height: 36px; padding: 7px 9px; border: 1px solid #d2d5d7; border-radius: 7px; background: #fff; color: #111b21; font: inherit; }
#view-atendimento-cliente .meta-busca-conversa { display: flex; align-items: center; gap: 8px; padding: 7px 14px; border-bottom: 1px solid #e9edef; background: #f5f6f6; color: #54656f; }
#view-atendimento-cliente .meta-busca-conversa input { flex: 1; min-width: 0; border: 0; outline: 0; background: transparent; font: inherit; }
#view-atendimento-cliente .meta-busca-conversa button { border: 0; background: transparent; color: inherit; cursor: pointer; }
#view-atendimento-cliente .meta-menu-acoes { position: absolute; z-index: 20; top: 58px; right: 14px; display: grid; min-width: 190px; padding: 6px; border: 1px solid #d9dee1; border-radius: 9px; background: #fff; box-shadow: 0 8px 24px rgba(17,27,33,.18); }
#view-atendimento-cliente .meta-menu-acoes button { display: flex; align-items: center; gap: 9px; padding: 10px; border: 0; background: transparent; color: #111b21; text-align: left; cursor: pointer; font: inherit; }
#view-atendimento-cliente .meta-menu-acoes button:hover { background: #f5f6f6; }
.modal-overlay { position: fixed; z-index: 100; inset: 0; display: grid; place-items: center; padding: 20px; background: rgba(17,27,33,.42); }
.modal-cartao { position: relative; display: grid; gap: 16px; width: min(520px, calc(100vw - 32px)); padding: 30px; border: 1px solid #e2e8ec; border-radius: 16px; background: #fff; box-shadow: 0 18px 48px rgba(17,27,33,.24); }
.modal-cartao h2 { margin: 0; padding-right: 28px; color: #111b21; font-size: 21px; line-height: 1.2; letter-spacing: -.02em; }
.modal-cartao > .card-suporte { margin: -6px 0 2px; color: #667781; font-size: 13px; line-height: 1.45; }
.modal-cartao label { display: grid; gap: 7px; color: #37474f; font-size: 13px; font-weight: 600; }
.modal-cartao input, .modal-cartao select { width: 100%; min-height: 42px; box-sizing: border-box; padding: 9px 12px; border: 1px solid #cbd5da; border-radius: 8px; outline: 0; background: #fff; color: #111b21; font: inherit; font-size: 14px; transition: border-color .16s ease, box-shadow .16s ease; }
.modal-cartao input:focus, .modal-cartao select:focus { border-color: #0b57d0; box-shadow: 0 0 0 3px rgba(11,87,208,.14); }
.modal-fechar { position: absolute; top: 14px; right: 14px; display: grid; place-items: center; width: 34px; height: 34px; border: 0; border-radius: 50%; background: transparent; color: #54656f; cursor: pointer; }
.modal-fechar:hover { background: #f0f2f5; color: #111b21; }
.meta-template-variaveis { display: grid; gap: 10px; padding: 14px; border: 1px solid #e2e8ec; border-radius: 10px; background: #f8fafb; }
.meta-template-variaveis label { font-weight: 500; }
.modal-cartao .botao-primario { min-height: 44px; justify-content: center; margin-top: 2px; }
.confirmacao-cartao { width: min(430px, calc(100vw - 32px)); padding: 28px; border: 1px solid #e2e8ec; border-radius: 18px; background: #fff; box-shadow: 0 20px 55px rgba(17,27,33,.26); text-align: center; animation: confirmacao-entrada .18s ease-out; }
.confirmacao-icone { display: grid; place-items: center; width: 52px; height: 52px; margin: 0 auto 16px; border-radius: 16px; background: #fff4d6; color: #9a6700; }
.confirmacao-icone .lucide { width: 25px; height: 25px; }
.confirmacao-cartao h2 { margin: 0; color: #111b21; font-size: 20px; letter-spacing: -.02em; }
.confirmacao-cartao p { margin: 10px 0 22px; color: #54656f; font-size: 14px; line-height: 1.5; }
.confirmacao-acoes { display: flex; justify-content: flex-end; gap: 10px; }
.confirmacao-acoes button { min-height: 42px; padding: 9px 16px; border-radius: 9px; font-weight: 700; cursor: pointer; }
.confirmacao-acoes .botao-suave { border: 1px solid #d2d5d7; background: #fff; color: #37474f; }
.confirmacao-acoes .botao-suave:hover { background: #f5f6f6; }
.confirmacao-acoes .botao-confirmar-perigo { border: 1px solid #c0392b; background: #c0392b; color: #fff; }
.confirmacao-acoes .botao-confirmar-perigo:hover { background: #a93226; }
@keyframes confirmacao-entrada { from { opacity: 0; transform: translateY(8px) scale(.98); } to { opacity: 1; transform: translateY(0) scale(1); } }
#view-atendimento-cliente .meta-wa-acessos { display: grid; gap: 2px; padding: 5px 14px 10px; border-bottom: 1px solid #e9edef; }
#view-atendimento-cliente .meta-wa-acessos button { display: flex; align-items: center; gap: 17px; min-height: 43px; padding: 0 15px; border: 0; background: transparent; color: #54656f; font: inherit; font-size: 14px; text-align: left; }
#view-atendimento-cliente .meta-wa-acessos button:hover { background: #f5f6f6; }
#view-atendimento-cliente .meta-wa-acessos .lucide { width: 20px; height: 20px; }
#view-atendimento-cliente .meta-wa-operacionais { display: flex; gap: 8px; padding: 4px 14px 7px; border-bottom: 1px solid #e9edef; }
#view-atendimento-cliente .meta-wa-operacionais button { padding: 0; border: 0; background: transparent; color: #667781; font: inherit; font-size: 11px; }
#view-atendimento-cliente .meta-chats { overflow: auto; height: calc(100% - 290px); }
#view-atendimento-cliente .meta-chat-item { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 68px; padding: 10px 14px; border: 0; border-bottom: 1px solid #f0f2f5; background: #fff; text-align: left; cursor: pointer; }
#view-atendimento-cliente .meta-chat-item:hover, #view-atendimento-cliente .meta-chat-item.ativo { background: #f1f2f2; }
#view-atendimento-cliente .meta-chat-item > span:last-child { display: grid; gap: 4px; min-width: 0; }
#view-atendimento-cliente .meta-chat-item strong, #view-atendimento-cliente .meta-chat-item small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#view-atendimento-cliente .meta-chat-item strong { color: #111b21; font-size: 14px; font-weight: 500; }
#view-atendimento-cliente .meta-chat-item small { color: #667781; font-size: 12px; }
#view-atendimento-cliente .meta-chat-item.nao-lida { background: #fff7f5; }
#view-atendimento-cliente .meta-chat-item.nao-lida strong { font-weight: 700; }
#view-atendimento-cliente .meta-tag { display: inline-block; margin-left: 5px; padding: 2px 5px; border-radius: 5px; font-size: 10px; font-style: normal; font-weight: 700; }
#view-atendimento-cliente .meta-tag-base { display: inline-block; margin-left: 5px; padding: 2px 5px; border: 1px solid #cfe0f5; border-radius: 5px; color: #245b92; background: #eef6ff; font-size: 10px; font-style: normal; font-weight: 700; }
#view-atendimento-cliente .meta-tag.recebeu { color: #176b3a; background: #d9fdd3; }
#view-atendimento-cliente .meta-tag.nao-recebeu { color: #a52c22; background: #ffd9d5; }
#view-atendimento-cliente .meta-chat-avatar { display: grid; place-items: center; flex: 0 0 auto; width: 40px; height: 40px; border-radius: 50%; background: #d9fdd3; color: #008069; }
#view-atendimento-cliente .meta-chat-cabecalho { display: flex; align-items: center; gap: 12px; min-height: 70px; padding: 0 16px; border-bottom: 1px solid #e9edef; }
#view-atendimento-cliente .meta-atendimento-chat { position: relative; display: flex; flex-direction: column; min-width: 0; min-height: 0; overflow: hidden; }
#view-atendimento-cliente .meta-chat-cabecalho > div:nth-child(2) { display: grid; gap: 3px; min-width: 0; }
#view-atendimento-cliente .meta-chat-cabecalho strong { color: #111b21; font-size: 16px; font-weight: 500; }
#view-atendimento-cliente .meta-chat-cabecalho small { display: none; }
#view-atendimento-cliente .meta-janela-expirada { display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 38px; padding: 7px 14px; border-top: 1px solid #f2d39a; border-bottom: 1px solid #f2d39a; background: #fff4d6; color: #6b4e16; font-size: 13px; font-weight: 600; line-height: 1.35; text-align: center; white-space: normal; }
#view-atendimento-cliente .meta-janela-expirada .lucide { width: 16px; height: 16px; flex: 0 0 auto; }
#view-atendimento-cliente .meta-chat-acoes { display: flex !important; flex-direction: row !important; gap: 10px !important; margin-left: auto; }
#view-atendimento-cliente .meta-chat-acoes button { display: grid; place-items: center; width: 32px; height: 32px; border: 0; border-radius: 50%; background: transparent; color: #111b21; }
#view-atendimento-cliente .meta-chat-acoes button:hover { background: #f0f2f5; }
#view-atendimento-cliente .meta-chat-acoes .lucide { width: 20px; height: 20px; stroke-width: 2; }
#view-atendimento-cliente .meta-mensagens { display: flex; flex: 1 1 auto; flex-direction: column; gap: 4px; min-height: 0; height: auto; overflow-x: hidden; overflow-y: auto; overscroll-behavior: contain; padding: 18px 5%; background: #f5f1eb url('wa-kit/assets/wallpaper-reference.png') repeat; background-size: 540px 1240px; }
#view-atendimento-cliente .meta-bolha { align-self: flex-start; max-width: min(78%, 640px); padding: 7px 10px 5px; border-radius: 8px; background: #fff; color: #111b21; box-shadow: 0 1px 1px rgba(11,20,26,.12); font-size: 14px; line-height: 1.35; }
#view-atendimento-cliente .meta-bolha.minha { align-self: flex-end; background: #d9fdd3; }
#view-atendimento-cliente .meta-bolha strong { display: block; margin-bottom: 3px; color: #008069; font-size: 12px; }
#view-atendimento-cliente .meta-bolha small { display: block; margin-top: 3px; color: #667781; font-size: 10px; text-align: right; }
#view-atendimento-cliente .meta-bolha .bolha-doc.documento-pdf { display: flex; align-items: center; gap: 10px; width: min(360px, 100%); box-sizing: border-box; margin: -1px 0 2px; padding: 8px 10px; border: 0; border-radius: 6px; background: rgba(255,255,255,.34); color: #111b21; text-decoration: none; }
#view-atendimento-cliente .meta-bolha .documento-pdf-icone { display: grid; place-items: end center; flex: 0 0 28px; width: 28px; height: 34px; padding-bottom: 4px; box-sizing: border-box; border-radius: 2px; background: #e3232e; color: #fff; font-size: 8px; font-weight: 800; line-height: 1; position: relative; }
#view-atendimento-cliente .meta-bolha .documento-pdf-icone::before { content: ''; position: absolute; top: 0; right: 0; border-top: 8px solid rgba(255,255,255,.7); border-left: 8px solid transparent; }
#view-atendimento-cliente .meta-bolha .documento-dados { display: grid; min-width: 0; flex: 1; gap: 3px; }
#view-atendimento-cliente .meta-bolha .documento-dados strong { display: block; min-width: 0; margin: 0; overflow-wrap: anywhere; color: #111b21; font-size: 14px; font-weight: 500; line-height: 1.2; }
#view-atendimento-cliente .meta-bolha .documento-dados small { margin: 0; color: #667781; font-size: 12px; line-height: 1.2; text-align: left; }
#view-atendimento-cliente .meta-bolha.minha .bolha-doc.documento-pdf { background: rgba(255,255,255,.34); }
#view-atendimento-cliente .meta-tiques { display: inline-flex; vertical-align: -2px; margin-left: 3px; color: #667781; cursor: help; }
#view-atendimento-cliente .meta-tiques .lucide { width: 13px; height: 13px; stroke-width: 2.2; }
#view-atendimento-cliente .meta-tiques.lido { color: #53bdeb; }
#view-atendimento-cliente .meta-tiques.falhou { color: #e53935; }
#view-atendimento-cliente .meta-compositor { position: relative; z-index: 10; display: flex; flex: 0 0 auto; gap: 6px; align-items: center; min-height: 62px; padding: 8px 14px; background: #f0f2f5; }
#view-atendimento-cliente .meta-compositor.meta-compositor-gravando #meta-anexar,
#view-atendimento-cliente .meta-compositor.meta-compositor-gravando #meta-emoji,
#view-atendimento-cliente .meta-compositor.meta-compositor-gravando #meta-texto { display: none; }
#view-atendimento-cliente .meta-compositor input[type='hidden'] { display: none; }
#view-atendimento-cliente .meta-compositor textarea { flex: 1; min-width: 0; height: 42px; max-height: 120px; resize: none; border: 0; border-radius: 22px; outline: 0; background: #fff; color: #111b21; font: inherit; padding: 11px 16px; line-height: 20px; }
#view-atendimento-cliente .meta-compositor-acao { display: grid; place-items: center; flex: 0 0 34px; width: 34px; height: 42px; border: 0; border-radius: 50%; background: transparent; color: #54656f; }
#view-atendimento-cliente .meta-compositor-acao:hover { background: #e9edef; color: #111b21; }
#view-atendimento-cliente .meta-compositor-enviar { display: grid; place-items: center; flex: 0 0 42px; width: 42px; height: 42px; border: 0; border-radius: 50%; background: transparent; color: #111b21; }
#view-atendimento-cliente .meta-compositor-enviar:hover { background: #e9edef; }
#view-atendimento-cliente .meta-compositor-enviar.gravando-enviar { background: #1daa61; color: #fff; box-shadow: 0 2px 5px rgba(17, 27, 33, .16); }
#view-atendimento-cliente .meta-compositor-enviar.gravando-enviar:hover { background: #159653; }
#view-atendimento-cliente .meta-gravacao { display: flex; align-items: center; flex: 1; min-width: 0; gap: 10px; height: 42px; color: #111b21; }
#view-atendimento-cliente .meta-gravacao-acao { display: grid; place-items: center; flex: 0 0 34px; width: 34px; height: 34px; padding: 0; border: 0; border-radius: 50%; background: transparent; color: #111b21; cursor: pointer; }
#view-atendimento-cliente .meta-gravacao-acao:hover { background: #e9edef; }
#view-atendimento-cliente .meta-gravacao-ponto { flex: 0 0 10px; width: 10px; height: 10px; border-radius: 50%; background: #c1123f; animation: meta-pulso-gravacao 1.15s ease-in-out infinite; }
#view-atendimento-cliente .meta-gravacao-tempo { min-width: 38px; font-variant-numeric: tabular-nums; font-size: 17px; letter-spacing: .01em; }
#view-atendimento-cliente .meta-gravacao-ondas { display: flex; align-items: center; justify-content: center; flex: 1; min-width: 54px; height: 28px; gap: 2px; overflow: hidden; }
#view-atendimento-cliente .meta-gravacao-ondas i { display: block; width: 2px; height: 8px; border-radius: 2px; background: #667781; transform: scaleY(.5); transform-origin: center; transition: transform 80ms ease; }
#view-atendimento-cliente .meta-gravacao.pausada .meta-gravacao-ponto { animation-play-state: paused; opacity: .45; }
#view-atendimento-cliente .meta-gravacao.pausada .meta-gravacao-ondas i { transform: scaleY(.5) !important; opacity: .55; }
@keyframes meta-pulso-gravacao { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: .45; transform: scale(.82); } }
#view-atendimento-cliente .meta-compositor-menu { position: absolute; z-index: 20; bottom: 64px; left: 12px; display: grid; grid-template-columns: repeat(8, 1fr); gap: 3px; width: min(360px, calc(100% - 24px)); max-height: 230px; overflow-y: auto; padding: 9px; border: 1px solid #d9dee1; border-radius: 10px; background: #fff; box-shadow: 0 8px 24px rgba(17,27,33,.18); }
#view-atendimento-cliente .meta-compositor-menu button { display: inline-flex; align-items: center; gap: 6px; min-width: 34px; min-height: 32px; padding: 6px 8px; border: 0; border-radius: 7px; background: transparent; color: #111b21; cursor: pointer; font: inherit; }
#view-atendimento-cliente .meta-compositor-menu button:hover { background: #f0f2f5; }
#view-atendimento-cliente #meta-menu-anexos { display: flex; align-items: center; width: min(460px, calc(100% - 24px)); gap: 6px; }
#view-atendimento-cliente #meta-menu-anexos button { justify-content: center; min-width: 0; white-space: nowrap; flex: 0 0 auto; }
#view-atendimento-cliente #meta-menu-anexos button:last-child { flex: 1 1 auto; }
#view-atendimento-cliente .meta-wa-operacionais button.ativo { color: #008069; font-weight: 700; }
@media (max-width: 760px) { #view-atendimento-cliente .meta-atendimento-shell { grid-template-columns: 1fr; height: calc(100vh - 130px); } #view-atendimento-cliente .meta-atendimento-lista { display: none; } #view-atendimento-cliente .meta-chat-cabecalho { min-height: 62px; } }

#view-conversas .botao-nova-conversa {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border: 0;
  border-radius: 50%;
  background: #1daa61;
  color: #fff;
  cursor: pointer;
}
#view-conversas .botao-nova-conversa:hover { background: #159653; }
#view-conversas .botao-nova-conversa .lucide { width: 21px; height: 21px; }
#view-conversas .botao-nova-conversa .lucide { stroke: currentColor !important; color: #fff !important; }
#view-conversas .lista-chats-topo .botao-limpar { display: none; }
#view-conversas .wa-filtros { flex-wrap: nowrap; }
#view-conversas .wa-filtro { white-space: nowrap; }
#view-conversas .wa-filtro-mais { width: 36px; min-width: 36px; padding: 6px; display: grid; place-items: center; }
#view-conversas .filtro-contagem,
#view-conversas .acesso-contagem { color: inherit; font-size: 11px; }
#view-conversas .wa-acessos-especiais {
  display: grid;
  gap: 2px;
  padding: 5px 14px 10px;
  border-bottom: 1px solid #e9edef;
}
#view-conversas .wa-acesso-especial {
  display: flex;
  align-items: center;
  gap: 17px;
  min-height: 43px;
  padding: 0 15px;
  border: 0;
  background: transparent;
  color: #54656f;
  cursor: pointer;
  font: inherit;
  font-size: 14px;
  text-align: left;
}
#view-conversas .wa-acesso-especial:hover,
#view-conversas .wa-acesso-especial.ativo { background: #f5f6f6; }
#view-conversas .wa-acesso-especial .lucide { width: 20px; height: 20px; color: #667781; }
#view-conversas .acesso-contagem { margin-left: auto; }
#view-conversas .wa-filtros-operacionais {
  display: flex;
  gap: 6px;
  padding: 0 14px 8px;
  overflow-x: auto;
  scrollbar-width: none;
}
#view-conversas .wa-filtros-operacionais::-webkit-scrollbar { display: none; }
#view-conversas .wa-filtro-operacional {
  border: 0;
  background: transparent;
  color: #667781;
  cursor: pointer;
  font: inherit;
  font-size: 11px;
}
#view-conversas .wa-filtro-operacional:hover,
#view-conversas .wa-filtro-operacional.ativo { color: #008069; }
#view-conversas .bolha {
  max-width: min(68%, 520px);
  margin: 2px 0;
  padding: 6px 8px 5px;
  border: 0;
  border-radius: 7px;
  background: var(--wa-incoming);
  color: var(--wa-ink);
  box-shadow: 0 1px 1px rgba(11, 20, 26, .13);
  font-size: 14px;
  line-height: 1.35;
}
#view-conversas .bolha.minha {
  background: var(--wa-outgoing);
  border: 0;
  color: var(--wa-ink);
}
#view-conversas .bolha-texto { white-space: normal; overflow-wrap: anywhere; }
#view-conversas .bolha-nome { margin-bottom: 3px; color: #008069; font-size: 12.5px; font-weight: 500; }
#view-conversas .bolha-hora { margin-top: 2px; color: #667781; font-size: 10.5px; }
#view-conversas .bolha.minha .bolha-hora { color: #667781; }
#view-conversas .separador-data, #view-atendimento-cliente .separador-data { display: flex; justify-content: center; align-items: center; width: 100%; margin: 12px 0 8px; }
#view-conversas .separador-data span, #view-atendimento-cliente .separador-data span { padding: 5px 10px; border-radius: 7px; background: #fff; color: #667781; box-shadow: 0 1px 1px rgba(11,20,26,.08); font-size: 11px; line-height: 14px; }
#view-conversas .bolha.minha .ticks.lido { color: #53bdeb; }
#view-conversas .bolha-midia { max-width: 360px; max-height: 360px; border-radius: 6px; }
#view-conversas .midia-indisponivel {
  display: inline-flex;
  align-items: center;
  min-height: 34px;
  padding: 0 10px;
  border-radius: 6px;
  background: rgba(255,255,255,.72);
  color: #667781;
  font-size: 12px;
}
#view-conversas .bolha-doc { border-color: #d8e0e4; border-radius: 6px; background: #f7f8f8; color: var(--wa-ink); }
#view-conversas .bolha.minha .bolha-doc { border-color: #c5e6bf; background: rgba(255,255,255,.35); color: var(--wa-ink); }
#view-conversas .mensagens-vazio { color: var(--wa-muted); font-size: 13px; }
#view-conversas .digitando { padding: 5px 5.2%; border-top: 1px solid var(--wa-divider); background: var(--wa-surface); color: #54656f; }
#view-conversas .respondendo { border-top: 1px solid #d8e0e4; background: #f7f8f8; }
#view-conversas .compositor {
  gap: 8px;
  padding: 9px 12px;
  border-top: 1px solid var(--wa-divider);
  background: #f0f2f5;
}
#view-conversas .compositor input {
  min-height: 38px;
  box-sizing: border-box;
  border: 0;
  border-radius: 8px;
  background: #fff;
  color: var(--wa-ink);
  box-shadow: none;
  font-size: 13px;
}
#view-conversas .compositor input:focus { border: 0; background: #fff; box-shadow: inset 0 0 0 1px #c8d1d5; }
#view-conversas #campo-numero { width: 250px; }
#view-conversas .compositor button {
  width: 40px;
  min-height: 38px;
  border-radius: 8px;
  background: #1daa61;
  box-shadow: none;
}
#view-conversas .compositor button:hover { background: #159653; transform: none; }
#view-conversas .compositor .botao-emoji { background: transparent; color: #54656f; }
#view-conversas .compositor .botao-emoji:hover { background: #e9edef; color: #37474f; }
#view-conversas .compositor .botao-anexo { background: #fff; color: #54656f; border: 0; }
#view-conversas .compositor .botao-anexo:hover { background: #e9edef; color: #37474f; }
#view-conversas ::selection { color: #fff; background: #00a884; }

.bolha-interativa { margin-top: 8px; display: flex; flex-direction: column; gap: 4px; min-width: 180px; }
.botao-interativo, .lista-botao { display: block; padding: 7px 10px; border: 1px solid #d8e2e8; border-radius: 6px; color: #087f75; background: #fff; text-align: center; font-size: 12px; font-weight: 600; }
.lista-interativa { border: 1px solid #d8e2e8; border-radius: 7px; overflow: hidden; background: #fff; gap: 0; }
.lista-interativa .lista-botao { border: 0; border-bottom: 1px solid #e8edf0; border-radius: 0; background: #f5f8fa; }
.lista-item { padding: 7px 10px; border-bottom: 1px solid #edf1f3; }
.lista-item:last-child { border-bottom: 0; }
.lista-item strong, .lista-item small { display: block; }
.lista-item small { margin-top: 2px; color: #667781; font-size: 11px; }
#view-conversas :focus-visible { outline: 2px solid #00a884; outline-offset: 2px; }

/* O asset do kit deve vencer qualquer textura legada da inbox. */
#view-conversas .mensagens {
  background-color: #f5f1eb;
  background-image: url('wa-kit/assets/wallpaper-reference.png');
  background-repeat: repeat;
  background-size: 540px 1240px;
  background-position: 0 0;
}

@media (max-width: 900px) {
  #view-conversas .conversas { border-radius: 0; border-left: 0; border-right: 0; }
  #view-conversas .compositor { flex-wrap: wrap; }
  #view-conversas #campo-numero { width: 180px; }
  #view-conversas .cabecalho-acoes { gap: 8px; }
  #view-conversas .acoes-whatsapp { gap: 6px; }
}

@media (max-width: 560px) {
  .auth-shell { padding: 20px 16px 64px; place-items: start center; }
  .auth-panel { margin-top: 8vh; padding: 30px 24px 26px; border-radius: 18px; }
  .auth-brand { margin-bottom: 38px; }
  .auth-copy h1 { font-size: 27px; }
  .auth-footer { left: 16px; right: 16px; bottom: 18px; text-align: center; }
  .auth-footer-separator { display: none; }
}