/* ============================================================================
   GlaudZap — camada de tokens
   Marca glaud: #3e63ff · #0533c6 · #002047 · #93aac1 · #ffffff · #000000
   Tipografia: Poppins (self-hosted em /fonts — ver fonts/poppins.css)

   REGRA: nenhum componente usa cor literal. Se você precisar de uma cor nova,
   crie o token aqui nos DOIS temas. Cor literal em regra de componente é bug —
   ela não acompanha a troca de tema.
   ============================================================================ */
@import url('/fonts/poppins.css');

:root {
  /* Diz ao NAVEGADOR em que tema desenhar o que é dele: o calendário do
     input[type=date], as setinhas do input[type=number], a lista aberta do
     select, o autofill. Sem esta linha ele desenha tudo em claro sempre — e no
     tema escuro aparecia caixa branca com ícone escuro no meio do modal.
     Não substitui o CSS dos campos: é a camada que o CSS não alcança. */
  color-scheme: light;

  /* ---- Marca (valores do manual; não usar direto nos componentes) ---- */
  --g-blue:      #3e63ff;
  --g-blue-deep: #0533c6;
  --g-navy:      #002047;
  --g-steel:     #93aac1;

  /* ---- TEMA CLARO ----
     O azul PROFUNDO é o primário aqui (9,1:1 com texto branco) e o #3e63ff
     entra como hover. No tema escuro isso se inverte. */
  --brand:             #0533c6;
  --brand-solid:       #0533c6;
  --brand-solid-hover: #3e63ff;
  --brand-soft:        #eef2ff;
  --brand-soft-bd:     #d3ddff;
  --on-brand:          #ffffff;   /* texto/ícone sobre preenchimento de marca */
  --on-brand-hover:    rgba(255,255,255,.18);
  --ring:              #0533c640;

  --bg:        #f1f4fb;
  --surface:   #ffffff;
  --surface-2: #f7f9fd;
  --surface-3: #eaeff8;
  --bd:        #e2e8f3;
  --bd-strong: #c9d5e7;

  --fg:   #002047;
  --fg-2: #4a5d70;   /* 6,8:1 no branco */
  /* O #93aac1 do manual dá 2,1:1 sobre branco — reprova AA como texto. No tema
     claro ele fica decorativo (--g-steel) e o terciário usa este aço escuro. */
  --fg-3: #5c6f82;

  --chat-bg:       #edf1f9;
  --bubble-out:    #0533c6;
  --bubble-out-fg: #ffffff;
  --bubble-in:     #ffffff;
  --bubble-in-fg:  #002047;
  --tick-read:     #a8beff;
  /* Tique de LIDA dentro da bolha azul: contorno branco + miolo no azul
     COMPLEMENTAR — sempre o azul do OUTRO tema, nunca o da bolha.
     Aqui a bolha é o azul profundo (#0533c6), então o miolo é o azul claro.
     Se o miolo fosse a mesma cor da bolha, o tique existiria só como contorno. */
  --tick-read-fill:   #3e63ff;
  --tick-read-stroke: #ffffff;

  /* realce de seleção de texto: 9.5:1 */
  --sel-bg: #b3c4ff;
  --sel-fg: #002047;

  --avatar-bg: #eaeff8;
  --avatar-fg: #4a5d70;

  --ok:   #0d7d55;  --ok-soft:   #e4f6ee;  --ok-bd:   #b7e3d0;
  --warn: #9a5b00;  --warn-soft: #fff4e2;  --warn-bd: #f2ddb4;
  --err:  #c02626;  --err-soft:  #fdecea;  --err-bd:  #f5c9c5;
  --info: #0b6aa8;  --info-soft: #e6f2fb;  --info-bd: #bcdcf1;

  --hover:       rgba(0,32,71,.06);
  --hover-forte: rgba(0,32,71,.11);
  --overlay:       rgba(0,32,71,.55);
  --overlay-forte: rgba(0,32,71,.92);
  --shadow-cor: rgba(0,32,71,.14);
  --shadow-1: 0 1px 2px rgba(0,32,71,.07), 0 1px 3px rgba(0,32,71,.05);
  --shadow-2: 0 4px 16px rgba(0,32,71,.10);
  --shadow-3: 0 16px 48px rgba(0,32,71,.20);

  /* Altura ÚNICA de todo cabeçalho de coluna (lista de conversas, perfil da
     conversa, sidebar de disparos). Antes cada um tinha só padding próprio —
     14px na lista, 10px no perfil — e as colunas fechavam em 68px e 62px. Os
     6px de diferença deixavam as bordas de baixo desencontradas na horizontal,
     que é a primeira coisa que se vê ao abrir o painel. Token em vez de número
     repetido: coluna nova entra alinhada sem ninguém precisar lembrar disso. */
  --header-h: 64px;
}

/* ---- TEMA ESCURO (base = navy #002047 da marca) ----
   Duplicado de propósito: o bloco @media atende quem deixou "seguir o sistema"
   e o [data-theme="dark"] atende a escolha explícita no seletor. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;   /* controles nativos seguem o tema — ver :root */

    --brand:             #7e97ff;
    --brand-solid:       #3e63ff;
    --brand-solid-hover: #6b86ff;
    --brand-soft:        #14243f;
    --brand-soft-bd:     #2b4478;
    --on-brand:          #ffffff;
    --on-brand-hover:    rgba(255,255,255,.16);
    --ring:              #7e97ff45;

    --bg:        #050b16;
    --surface:   #0b1626;
    --surface-2: #101f34;
    --surface-3: #172a44;
    --bd:        #1d3452;
    --bd-strong: #2b4568;

    --fg:   #e9eef7;
    --fg-2: #a9bbd0;
    --fg-3: #93aac1;

    --chat-bg:       #070f1c;
    --bubble-out:    #3e63ff;
    --bubble-out-fg: #ffffff;
    --bubble-in:     #14243c;
    --bubble-in-fg:  #e9eef7;
    --tick-read:     #c9dfff;   /* claro o bastante p/ a bolha azul: 3,4:1 */
    /* Espelho do tema claro: aqui a bolha é o azul claro (#3e63ff), então o
       miolo do tique vai no azul profundo. A regra é sempre a mesma — miolo no
       azul do outro tema, para contrastar com a bolha em vez de sumir nela. */
    --tick-read-fill:   #0533c6;
    --tick-read-stroke: #ffffff;

    --sel-bg: #3554e0;
    --sel-fg: #ffffff;

    --avatar-bg: #1d3452;
    --avatar-fg: #a9bbd0;

    --ok:   #3ddc97;  --ok-soft:   #0c2b20;  --ok-bd:   #1d5340;
    --warn: #fbbf4c;  --warn-soft: #2c2210;  --warn-bd: #5b451a;
    --err:  #f8827c;  --err-soft:  #2d1413;  --err-bd:  #5e2825;
    --info: #6cb2f0;  --info-soft: #0c2135;  --info-bd: #1f4568;

    --hover:       rgba(255,255,255,.07);
    --hover-forte: rgba(255,255,255,.12);
    --overlay:       rgba(0,0,0,.68);
    --overlay-forte: rgba(0,0,0,.94);
    --shadow-cor: rgba(0,0,0,.6);
    --shadow-1: 0 1px 2px rgba(0,0,0,.5);
    --shadow-2: 0 4px 18px rgba(0,0,0,.55);
    --shadow-3: 0 18px 52px rgba(0,0,0,.7);
  }
}
:root[data-theme="dark"] {
  color-scheme: dark;   /* controles nativos seguem o tema — ver :root */

  --brand:             #7e97ff;
  --brand-solid:       #3e63ff;
  --brand-solid-hover: #6b86ff;
  --brand-soft:        #14243f;
  --brand-soft-bd:     #2b4478;
  --on-brand:          #ffffff;
  --on-brand-hover:    rgba(255,255,255,.16);
  --ring:              #7e97ff45;

  --bg:        #050b16;
  --surface:   #0b1626;
  --surface-2: #101f34;
  --surface-3: #172a44;
  --bd:        #1d3452;
  --bd-strong: #2b4568;

  --fg:   #e9eef7;
  --fg-2: #a9bbd0;
  --fg-3: #93aac1;

  --chat-bg:       #070f1c;
  --bubble-out:    #3e63ff;
  --bubble-out-fg: #ffffff;
  --bubble-in:     #14243c;
  --bubble-in-fg:  #e9eef7;
  --tick-read:     #c9dfff;   /* claro o bastante p/ a bolha azul: 3,4:1 */

  --sel-bg: #3554e0;
  --sel-fg: #ffffff;

  --avatar-bg: #1d3452;
  --avatar-fg: #a9bbd0;

  --ok:   #3ddc97;  --ok-soft:   #0c2b20;  --ok-bd:   #1d5340;
  --warn: #fbbf4c;  --warn-soft: #2c2210;  --warn-bd: #5b451a;
  --err:  #f8827c;  --err-soft:  #2d1413;  --err-bd:  #5e2825;
  --info: #6cb2f0;  --info-soft: #0c2135;  --info-bd: #1f4568;

  --hover:       rgba(255,255,255,.07);
  --hover-forte: rgba(255,255,255,.12);
  --overlay:       rgba(0,0,0,.68);
  --overlay-forte: rgba(0,0,0,.94);
  --shadow-cor: rgba(0,0,0,.6);
  --shadow-1: 0 1px 2px rgba(0,0,0,.5);
  --shadow-2: 0 4px 18px rgba(0,0,0,.55);
  --shadow-3: 0 18px 52px rgba(0,0,0,.7);
}

/* Durante a troca de tema, mata toda transição: sem isso a tela inteira
   interpola de um tema para o outro por 150ms, o que fica horrível. */
:root.trocando-tema, :root.trocando-tema *,
:root.trocando-tema *::before, :root.trocando-tema *::after {
  transition: none !important;
  animation: none !important;
}

/* AVISO: nunca escreva `transition: .15s` (= transition-property: all). Com
   cores vindas de custom properties, o Chrome congela o valor do primeiro
   paint e o tema escuro não aplica naquele elemento. Liste as propriedades. */

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

html, body { height: 100%; }

body {
  font-family: 'Poppins', 'Segoe UI', system-ui, -apple-system, sans-serif;
  color: var(--fg);
  background: var(--bg);
  overflow: hidden;
  /* coluna: a barra de aviso (quando aparece) empurra o app para baixo
     em vez de cobrir o cabeçalho da conversa */
  display: flex;
  flex-direction: column;
}

.hidden { display: none !important; }

/* `color: inherit` é essencial: sem isso todo <button> cai no `buttontext` do
   navegador (quase preto) e o ícone dentro dele não acompanha o tema. Foi o que
   deixou o botão de emoji e o de atualizar invisíveis no tema escuro. */
button { cursor: pointer; font-family: inherit; color: inherit; }

/* ===================== LOGIN ===================== */
#login-view {
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(180deg, var(--brand-solid) 0 220px, var(--bg) 220px);
}

.login-card {
  background: var(--surface);
  border-radius: 12px;
  box-shadow: var(--shadow-3);
  padding: 40px 36px;
  width: min(380px, 92vw);
  text-align: center;
}

.login-logo { font-size: 52px; margin-bottom: 8px; }
.login-card h1 { font-size: 22px; margin-bottom: 4px; }
.login-sub { color: var(--fg-2); font-size: 14px; margin-bottom: 24px; }

#login-form input {
  width: 100%;
  padding: 12px 14px;
  border: 1px solid var(--bd);
  border-radius: 8px;
  font-size: 15px;
  margin-bottom: 12px;
  outline: none;
}
#login-form input:focus { border-color: var(--brand-solid); }

#login-form button {
  width: 100%;
  padding: 12px;
  background: var(--brand-solid);
  color: var(--on-brand);
  border: none;
  border-radius: 8px;
  font-size: 15px;
  font-weight: 600;
}
#login-form button:hover { background: var(--brand-solid-hover); }
#login-form button:disabled { opacity: .6; cursor: default; }

.login-error { color: var(--err); font-size: 13px; margin-top: 12px; }

/* ===================== LAYOUT ===================== */
/* Coluna: a barra de topo da marca fica acima da área de trabalho */
#app-view {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
}

/* ---------- barra de topo: "glaudZap" presente em toda tela ---------- */
#topbar {
  height: 44px;
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 0 16px;
  background: var(--surface);
  border-bottom: 1px solid var(--bd);
}
#topbar .topbar-sep { width: 1px; height: 18px; background: var(--bd); }
#topbar .topbar-ctx { font-size: 12.5px; font-weight: 500; color: var(--fg-2); }
#topbar .topbar-right { margin-left: auto; display: flex; align-items: center; gap: 8px; }

/* Link para o sistema irmão. Os mesmos valores da .c-link-zap do GlaudCRM, que
   é o link no sentido contrário — se um dia divergirem, a ida e a volta deixam
   de parecer a mesma porta. */
#topbar .topbar-link-crm {
  display: flex; align-items: center; gap: 6px;
  padding: 5px 10px; border-radius: 8px;
  color: var(--fg-2); text-decoration: none; font-size: 12.5px; font-weight: 500;
  transition: background-color .15s, color .15s;
}
#topbar .topbar-link-crm:hover { background: var(--hover); color: var(--fg); }
#topbar .topbar-link-crm .ic-app {
  width: 18px; height: 18px; flex: none; border-radius: 22.37%; display: inline-block;
}

/* linha app = rail + view (o que antes era o #app-view inteiro) */
#app-linha {
  display: flex;
  flex: 1;
  min-height: 0;
}

/* barra de navegação — agora superfície, não mais o verde cheio */
#nav-rail {
  width: 60px;
  min-width: 60px;
  background: var(--surface);
  border-right: 1px solid var(--bd);
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 10px 0;
  gap: 4px;
}

.nav-btn {
  width: 44px;
  height: 44px;
  border: none;
  background: transparent;
  color: var(--fg-2);
  font-size: 22px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  transition: background-color .15s ease, color .15s ease;
}
.nav-btn:hover { background: var(--surface-3); color: var(--fg); }
.nav-btn.active { background: var(--brand-soft); color: var(--brand); }
.nav-btn.active svg { stroke-width: 2.2; }

/* contador de não lidas em cima do ícone de conversas */
.nav-btn .nav-dot {
  position: absolute;
  top: 6px; right: 6px;
  min-width: 17px; height: 17px;
  padding: 0 4px;
  border-radius: 999px;
  background: var(--err);
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  display: flex; align-items: center; justify-content: center;
  border: 2px solid var(--surface);
}

.nav-spacer { flex: 1; }

.view { flex: 1; display: flex; min-width: 0; }
.view.hidden { display: none; }

/* ===================== SIDEBAR ===================== */
#sidebar {
  width: 380px;
  min-width: 300px;
  background: var(--surface);
  border-right: 1px solid var(--bd);
  display: flex;
  flex-direction: column;
}

.sidebar-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  /* padding menor que a altura do token: quem manda na altura é o --header-h,
     e o conteúdo fica centrado. Assim este cabeçalho fecha exatamente na mesma
     linha que o .chat-header ao lado. */
  padding: 10px 16px;
  min-height: var(--header-h);
  background: var(--bg);
  border-bottom: 1px solid var(--bd);
}

.sidebar-title { font-weight: 700; font-size: 17px; }

.sidebar-actions button {
  background: none;
  border: none;
  font-size: 18px;
  color: var(--fg-2);
  padding: 6px 10px;
  border-radius: 50%;
}
.sidebar-actions button:hover { background: var(--hover); }

.search-wrap { padding: 8px 12px; border-bottom: 1px solid var(--bd); }

#search-input {
  width: 100%;
  padding: 9px 34px 9px 14px; /* espaço à direita pro ✕ de limpar */
  background: var(--bg);
  border: none;
  border-radius: 8px;
  font-size: 14px;
  outline: none;
}

/* ---- campo de busca com botão de limpar (conversas e templates) ---- */
.search-field { position: relative; display: flex; align-items: center; }

/* dentro de modal o input já vem com margin-bottom: passa a margem pro wrapper,
   senão o ✕ centralizado sai do lugar */
.search-field input { margin-bottom: 0 !important; padding-right: 38px !important; }
.modal-body .search-field { margin-bottom: 12px; }

.search-clear {
  position: absolute;
  right: 6px;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  background: none;
  border: none;
  border-radius: 50%;
  color: var(--fg-2);
  font-size: 12px;
  line-height: 1;
  cursor: pointer;
}
.search-clear:hover { background: var(--hover); color: var(--fg); }

.busca-contagem { font-size: 12.5px; color: var(--fg-2); margin-bottom: 10px; }

/* ---- filtros da lista de conversas ---- */
.conv-filtros {
  flex: 0 0 auto;
  padding: 8px 12px;
  border-bottom: 1px solid var(--bd);
}

/* rolagem horizontal: são 10 filtros, não cabem na largura da sidebar */
.conv-chips {
  display: flex;
  gap: 6px;
  overflow-x: auto;
  scrollbar-width: thin;
  padding-bottom: 4px;
}
.conv-chips::-webkit-scrollbar { height: 4px; }
.conv-chips::-webkit-scrollbar-thumb { background: var(--bd-strong); border-radius: 4px; }

.conv-chip {
  flex: 0 0 auto;
  padding: 5px 12px;
  border: 1px solid var(--bd);
  background: var(--surface);
  color: var(--fg-2);
  border-radius: 999px;
  font-size: 12.5px;
  font-weight: 600;
  white-space: nowrap;
}
.conv-chip:hover { border-color: var(--brand-solid); color: var(--brand); }
.conv-chip.active {
  background: var(--brand-solid);
  border-color: var(--brand-solid);
  color: var(--on-brand);
}

.conv-campanha {
  width: 100%;
  margin-top: 6px;
  padding: 7px 10px;
  border: 1px solid var(--bd);
  border-radius: 8px;
  font-size: 12.5px;
  font-family: inherit;
  color: var(--fg-2);
  background: var(--surface);
  outline: none;
}
.conv-campanha:focus { border-color: var(--brand-solid); }
.conv-campanha.ativa {
  border-color: var(--brand-solid);
  color: var(--brand);
  font-weight: 600;
}

.conv-carregar-mais {
  display: block;
  width: calc(100% - 24px);
  margin: 10px 12px 16px;
  padding: 9px;
  border: 1px solid var(--bd);
  background: var(--surface);
  border-radius: 8px;
  font-size: 13px;
  font-weight: 600;
  color: var(--brand);
}
.conv-carregar-mais:hover { background: var(--brand-soft); border-color: var(--brand-solid); }
.conv-carregar-mais:disabled { opacity: .6; cursor: default; }

#conversation-list { flex: 1; overflow-y: auto; }

.conv-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 11px 14px;
  cursor: pointer;
  border-bottom: 1px solid var(--surface-2);
}
.conv-item:hover { background: var(--surface-2); }
.conv-item.active { background: var(--bg); }

.avatar {
  width: 46px;
  height: 46px;
  min-width: 46px;
  border-radius: 50%;
  background: var(--avatar-bg);
  color: var(--avatar-fg);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 600;
  font-size: 17px;
}

.conv-main { flex: 1; min-width: 0; }

.conv-top {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 8px;
}

.conv-name {
  font-weight: 500;
  font-size: 15px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.conv-time { font-size: 12px; color: var(--fg-2); white-space: nowrap; }
.conv-time.unread-time { color: var(--brand); font-weight: 600; }

/* número sempre visível na lista, embaixo do nome */
.conv-phone {
  font-size: 11.5px;
  color: var(--fg-2);
  letter-spacing: .2px;
  margin-top: 1px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

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

.conv-preview {
  font-size: 13.5px;
  color: var(--fg-2);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  flex: 1;
}

.conv-badges { display: flex; align-items: center; gap: 6px; }

.unread-badge {
  background: var(--brand-solid);
  color: var(--on-brand);
  font-size: 11.5px;
  font-weight: 700;
  border-radius: 999px;
  min-width: 20px;
  height: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 6px;
}

.window-dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  display: inline-block;
}
.window-dot.open { background: var(--brand-solid); }
.window-dot.closed { background: var(--bd-strong); }

.conv-empty-state {
  padding: 40px 24px;
  text-align: center;
  color: var(--fg-2);
  font-size: 14px;
}

/* ===================== CHAT ===================== */
#chat-area { flex: 1; display: flex; flex-direction: column; min-width: 0; }

#chat-empty {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bg);
  border-bottom: 6px solid var(--brand-solid);
}

.chat-empty-inner { text-align: center; color: var(--fg-2); padding: 24px; }
.chat-empty-icon { font-size: 64px; margin-bottom: 12px; }
/* O mesmo raio do ícone do aplicativo (squircle da marca), para o "g" aqui ser
   reconhecido como o mesmo desenho do rail e da barra de topo. */
.chat-empty-icon img { width: 64px; height: 64px; border-radius: 22.37%; display: block; margin: 0 auto; }
.chat-empty-inner h2 { color: var(--fg); font-weight: 400; margin-bottom: 8px; }
.chat-empty-hint { font-size: 13px; margin-top: 8px; }

#chat-panel { flex: 1; display: flex; flex-direction: column; min-height: 0; }

.chat-header {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 16px;
  min-height: var(--header-h);   /* mesma altura da lista ao lado — ver --header-h */
  background: var(--bg);
  border-bottom: 1px solid var(--bd);
}

#chat-back {
  display: none;
  background: none;
  border: none;
  font-size: 20px;
  color: var(--fg-2);
}

.chat-avatar {
  width: 40px;
  height: 40px;
  min-width: 40px;
  border-radius: 50%;
  background: var(--avatar-bg);
  color: var(--avatar-fg);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 600;
}

.chat-header-info { min-width: 0; }

#chat-name { font-weight: 600; font-size: 15.5px; }

#chat-window-status { font-size: 12.5px; color: var(--fg-2); }
/* Era emoji (🟢/⚪) no content: não acompanhava o tema e destoava da bolinha
   da lista de conversas. Agora é a mesma forma, pelos mesmos tokens. */
#chat-window-status::before {
  content: "";
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  margin-right: 6px;
  vertical-align: 1px;
}
#chat-window-status.open::before   { background: var(--brand-solid); }
#chat-window-status.closed::before { background: var(--bd-strong); }

#messages-container {
  flex: 1;
  overflow-y: auto;
  background: var(--chat-bg);
  padding: 16px 6% 12px;
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.day-divider {
  align-self: center;
  background: var(--surface);
  color: var(--fg-2);
  font-size: 12px;
  padding: 5px 12px;
  border-radius: 8px;
  margin: 12px 0 8px;
  box-shadow: 0 1px 1px var(--hover);
}

.msg {
  max-width: min(65%, 480px);
  padding: 6px 9px 7px;
  border-radius: 8px;
  box-shadow: 0 1px 1px var(--hover);
  position: relative;
  font-size: 14.2px;
  line-height: 1.35;
  word-wrap: break-word;
  white-space: pre-wrap;
}

/* ---- texto formatado (negrito, itálico, tachado, mono, citação) ---- */
.msg-corpo b, .preview-body b, .template-item-body b { font-weight: 700; }
.msg-corpo i, .preview-body i, .template-item-body i { font-style: italic; }
.msg-corpo s, .preview-body s, .template-item-body s { text-decoration: line-through; }

.fmt-mono {
  font-family: ui-monospace, "Cascadia Mono", Consolas, monospace;
  font-size: .92em;
  background: var(--hover);
  border-radius: 4px;
  padding: 1px 5px;
  white-space: pre-wrap;
  word-break: break-word;
}
pre.fmt-mono { display: block; margin: 4px 0; padding: 7px 9px; }

.fmt-citacao {
  display: block;
  border-left: 3px solid var(--bd-strong);
  padding-left: 9px;
  margin: 2px 0;
  opacity: .85;
}

.msg.in  { align-self: flex-start; background: var(--bubble-in); border-top-left-radius: 0; }
.msg.out { align-self: flex-end;   background: var(--bubble-out);   border-top-right-radius: 0; }

.msg-template-tag {
  font-size: 11px;
  color: var(--brand);
  font-weight: 600;
  margin-bottom: 2px;
}

.msg-meta {
  float: right;
  margin: 6px 0 0 10px;
  font-size: 11px;
  color: var(--fg-2);
  display: flex;
  align-items: center;
  gap: 3px;
  user-select: none;
}

.ticks { letter-spacing: -2px; }
/* Base legível em superfície clara. O azul-pálido do tique só vale DENTRO da
   bolha de saída, onde o fundo é azul saturado — ver .msg.out .ticks.read. */
.ticks.read { color: var(--brand); }
.ticks.failed { color: var(--err); letter-spacing: 0; }

.msg-error-detail {
  clear: both;
  font-size: 11.5px;
  color: var(--err);
  margin-top: 4px;
}

.msg-error-why {
  background: none;
  border: none;
  color: var(--err);
  font-size: 11.5px;
  font-weight: 700;
  text-decoration: underline;
  padding: 0 2px;
}

/* cabeçalho de TEXTO do template dentro da bolha */
.msg-header-text {
  font-weight: 700;
  font-size: 14px;
  margin-bottom: 4px;
  padding-bottom: 4px;
  border-bottom: 1px solid var(--hover);
  white-space: pre-wrap;
}

/* mídias dentro da bolha */
.msg img.msg-image, .msg video {
  max-width: 100%;
  max-height: 340px;
  border-radius: 6px;
  display: block;
  cursor: pointer;
  margin-bottom: 3px;
}
.msg video { cursor: default; }
.msg audio { max-width: 260px; display: block; margin: 2px 0; }

.doc-card {
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--hover);
  border-radius: 7px;
  padding: 10px 12px;
  margin-bottom: 3px;
  text-decoration: none;
  color: var(--fg);
}
.doc-card:hover { background: var(--hover); }
.doc-icon { font-size: 26px; }
.doc-name { font-size: 13.5px; word-break: break-all; }
.doc-hint { font-size: 11.5px; color: var(--fg-2); }

.media-unavailable {
  font-size: 13px;
  color: var(--fg-2);
  font-style: italic;
}

.load-older {
  align-self: center;
  background: var(--surface);
  border: 1px solid var(--bd);
  border-radius: 999px;
  color: var(--brand);
  font-size: 12.5px;
  padding: 6px 14px;
  margin-bottom: 6px;
}

/* barra de janela fechada */
#window-closed-bar {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  flex-wrap: wrap;
  background: var(--warn-soft);
  border-top: 1px solid var(--warn-bd);
  color: var(--warn);
  font-size: 13.5px;
  padding: 10px 16px;
}

#window-closed-bar button {
  background: var(--brand-solid);
  border: none;
  color: var(--on-brand);
  font-weight: 600;
  font-size: 13.5px;
  border-radius: 999px;
  padding: 8px 16px;
}
#window-closed-bar button:hover { background: var(--brand-solid-hover); }

/* ===================== EMOJIS ===================== */
#chat-panel { position: relative; }

#emoji-panel {
  position: absolute;
  bottom: 68px;
  left: 12px;
  width: min(340px, calc(100% - 24px));
  background: var(--surface);
  border: 1px solid var(--bd);
  border-radius: 12px;
  box-shadow: var(--shadow-2);
  z-index: 30;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.emoji-tabs {
  display: flex;
  gap: 2px;
  padding: 6px 6px 0;
  border-bottom: 1px solid var(--bd);
  overflow-x: auto;
}

.emoji-tab {
  background: none;
  border: none;
  font-size: 17px;
  padding: 6px 7px;
  border-radius: 8px 8px 0 0;
  line-height: 1;
  flex: 0 0 auto;
}
.emoji-tab:hover { background: var(--hover); }
.emoji-tab.active { background: var(--brand-soft); }

.emoji-grid {
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  gap: 2px;
  padding: 8px;
  max-height: 230px;
  overflow-y: auto;
}

.emoji-grupo-nome {
  grid-column: 1 / -1;
  font-size: 11.5px;
  font-weight: 600;
  color: var(--fg-2);
  padding: 2px 2px 4px;
}

.emoji-item {
  background: none;
  border: none;
  font-size: 22px;
  line-height: 1;
  padding: 5px 0;
  border-radius: 8px;
}
.emoji-item:hover { background: var(--hover); }

.emoji-vazio {
  grid-column: 1 / -1;
  font-size: 13px;
  color: var(--fg-2);
  text-align: center;
  padding: 18px 8px;
}

#emoji-btn {
  background: none;
  border: none;
  font-size: 22px;
  /* sem isto o <svg> herda a cor do pai e desaparece no tema escuro */
  color: var(--fg-2);
  width: 44px;
  height: 44px;
  min-width: 44px;
  border-radius: 50%;
  line-height: 1;
}
#emoji-btn:hover { background: var(--hover); }
#emoji-btn.ativo { background: var(--brand-soft); }
#emoji-btn:disabled { opacity: .5; cursor: default; }

/* ===================== ANEXO AGUARDANDO ENVIO ===================== */
#attach-preview {
  padding: 8px 16px 0;
  background: var(--bg);
}

.anexo-card {
  display: flex;
  align-items: center;
  gap: 12px;
  background: var(--surface);
  border: 1px solid var(--bd);
  border-left: 3px solid var(--brand-solid);
  border-radius: 10px;
  padding: 8px 10px;
}

.anexo-mini {
  width: 44px;
  height: 44px;
  min-width: 44px;
  border-radius: 6px;
  object-fit: cover;
  background: var(--overlay-forte);
}

.anexo-icone {
  width: 44px;
  height: 44px;
  min-width: 44px;
  border-radius: 6px;
  background: var(--bg);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
}

.anexo-info { flex: 1; min-width: 0; }

.anexo-nome {
  font-size: 13.5px;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.anexo-meta { font-size: 11.5px; color: var(--fg-2); }

#anexo-remover {
  background: none;
  border: none;
  color: var(--fg-2);
  font-size: 15px;
  width: 30px;
  height: 30px;
  border-radius: 50%;
}
#anexo-remover:hover { background: var(--hover); color: var(--err); }

/* composer */
/* ---- barra de formatação acima do campo ---- */
#fmt-bar {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 5px 16px 0;
  background: var(--bg);
}

.fmt-btn {
  min-width: 30px;
  height: 26px;
  padding: 0 8px;
  border: 1px solid transparent;
  background: none;
  border-radius: 6px;
  font-size: 13px;
  color: var(--fg-2);
  line-height: 1;
}
.fmt-btn:hover { background: var(--hover); color: var(--fg); }
.fmt-btn.ativo { background: var(--brand-solid); border-color: var(--brand-solid); color: var(--on-brand); }

.fmt-sep {
  width: 1px;
  height: 16px;
  background: var(--bd);
  margin: 0 4px;
}

/* .fmt-dica removida: a observação sobre sublinhado saiu da interface. */

#fmt-preview {
  margin: 8px 16px 0;
  padding: 9px 12px;
  background: var(--bubble-out);
  border: 1px solid var(--ok-bd);
  border-radius: 8px;
  font-size: 14.2px;
  line-height: 1.35;
  max-height: 160px;
  overflow-y: auto;
  word-wrap: break-word;
}
.fmt-preview-rotulo {
  display: block;
  font-size: 11.5px;
  font-weight: 600;
  color: var(--brand);
  margin-bottom: 5px;
}
.fmt-preview-vazio { color: var(--fg-2); font-style: italic; }

#composer {
  display: flex;
  align-items: flex-end;
  gap: 10px;
  padding: 10px 16px;
  background: var(--bg);
}

#composer-input {
  flex: 1;
  resize: none;
  border: none;
  border-radius: 8px;
  padding: 11px 14px;
  font-size: 14.5px;
  font-family: inherit;
  outline: none;
  max-height: 120px;
  background: var(--surface);
}
#composer-input:disabled { background: var(--surface-3); color: var(--fg-2); }

#attach-btn {
  background: none;
  border: none;
  font-size: 22px;
  color: var(--fg-2);
  width: 44px;
  height: 44px;
  min-width: 44px;
  border-radius: 50%;
}
#attach-btn:hover { background: var(--hover); }
#attach-btn:disabled { opacity: .5; cursor: default; }

#send-btn {
  background: var(--brand-solid);
  color: var(--on-brand);
  border: none;
  border-radius: 50%;
  width: 44px;
  height: 44px;
  min-width: 44px;
  font-size: 18px;
}
#send-btn:hover { background: var(--brand-solid-hover); }
#send-btn:disabled { background: var(--surface-3); color: var(--fg-3); cursor: default; }

/* ===================== MODAIS ===================== */
.modal-overlay {
  position: fixed;
  inset: 0;
  background: var(--overlay);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 50;
  padding: 16px;
}

.modal {
  background: var(--surface);
  border-radius: 12px;
  width: min(560px, 96vw);
  max-height: 86vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.modal-small { width: min(400px, 96vw); }
/* Modal de duas colunas com campos dentro (administração de funis e etapas).
   Em 560px os select de tipo cortavam o texto ("em ab", "em abe") e o nome do
   funil virava "S". */
.modal-wide { width: min(880px, 96vw); }

.modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 14px 18px;
  background: var(--brand-solid);
  color: var(--on-brand);
}
.modal-header h3 { font-size: 16px; font-weight: 600; }

.modal-close {
  background: none;
  border: none;
  color: var(--on-brand);
  font-size: 16px;
  padding: 4px 8px;
}

.modal-body { padding: 18px; overflow-y: auto; }

.modal-info { font-size: 14px; color: var(--fg-2); margin-bottom: 12px; }
.modal-error { color: var(--err); }
.modal-hint { font-size: 12.5px; color: var(--fg-2); margin-top: 14px; }

/* A lista de tipos aqui era só tel e text. Todo campo de OUTRO tipo dentro de
   modal ficava sem borda, sem padding e sem raio — o número aparecia como um
   risquinho e a data como caixa nativa do sistema. Vale para o valor e o
   próximo passo do CRM e para o agendamento do disparo, que já era assim. */
.modal-body input[type="tel"],
.modal-body input[type="text"],
.modal-body input[type="number"],
.modal-body input[type="date"],
.modal-body input[type="datetime-local"] {
  width: 100%;
  padding: 11px 13px;
  border: 1px solid var(--bd);
  border-radius: 8px;
  font-size: 15px;
  font-family: inherit;
  line-height: 1.5;
  outline: none;
  margin-bottom: 12px;
}

/* A caixa interna do date/datetime no Chrome (::-webkit-datetime-edit) tem
   altura própria e ignora o line-height de fora: o campo saía 2px mais alto que
   o vizinho da mesma linha (a data fica ao lado do select de Responsável).
   Compenso no padding vertical em vez de fixar altura em pixel, que quebraria
   se a fonte mudar. */
.modal-body input[type="date"],
.modal-body input[type="datetime-local"] {
  padding-top: 10px;
  padding-bottom: 10px;
}
.modal-body input:focus { border-color: var(--brand-solid); }

#newchat-start, #template-send-btn, #contact-save-btn, #erro-ok-btn {
  width: 100%;
  padding: 11px;
  background: var(--brand-solid);
  color: var(--on-brand);
  border: none;
  border-radius: 8px;
  font-size: 14.5px;
  font-weight: 600;
  margin-top: 6px;
}
#newchat-start:hover, #template-send-btn:hover,
#contact-save-btn:hover, #erro-ok-btn:hover { background: var(--brand-solid-hover); }
#template-send-btn:disabled, #newchat-start:disabled,
#contact-save-btn:disabled { opacity: .6; cursor: default; }

/* ---------- modal de erro explicado ---------- */
.modal-header.erro-header { background: var(--err); }

.erro-curto {
  font-size: 15px;
  font-weight: 700;
  color: var(--err);
  margin-bottom: 14px;
}

.erro-bloco { margin-bottom: 12px; }

.erro-rotulo {
  display: block;
  font-size: 11.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .4px;
  color: var(--fg-2);
  margin-bottom: 3px;
}
.erro-bloco p { font-size: 13.5px; line-height: 1.45; }

.erro-tecnico {
  font-size: 11.5px;
  color: var(--fg-2);
  background: var(--bg);
  border-radius: 6px;
  padding: 8px 10px;
  margin: 14px 0 4px;
  word-break: break-word;
}

/* lista de templates */
.template-item {
  border: 1px solid var(--bd);
  border-radius: 10px;
  padding: 12px 14px;
  margin-bottom: 10px;
  cursor: pointer;
}
.template-item:hover { border-color: var(--brand-solid); background: var(--brand-soft); }

.template-item.disabled {
  opacity: .55;
  cursor: not-allowed;
  background: var(--surface-2);
}

.template-item-top {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 4px;
}

.template-item-name { font-weight: 600; font-size: 14px; word-break: break-all; }

.template-cat {
  font-size: 11px;
  font-weight: 700;
  border-radius: 6px;
  padding: 2px 8px;
  white-space: nowrap;
  background: var(--brand-soft);
  color: var(--brand);
  align-self: flex-start;
}
.template-cat.MARKETING { background: var(--err-soft); color: var(--err); }

.template-item-body { font-size: 13px; color: var(--fg-2); white-space: pre-wrap; }
.template-item-warn { font-size: 12px; color: var(--err); margin-top: 6px; }

/* cabeçalho do template na lista */
.template-item-header {
  font-size: 12.5px;
  font-weight: 600;
  color: var(--brand);
  background: var(--brand-soft);
  border-radius: 6px;
  padding: 5px 8px;
  margin-bottom: 6px;
  white-space: pre-wrap;
}

/* prévia: cabeçalho x corpo */
.preview-header {
  font-weight: 700;
  margin-bottom: 8px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--hover);
  white-space: pre-wrap;
}
.preview-header-midia { font-weight: 600; color: var(--brand); font-size: 13px; }
.preview-body { white-space: pre-wrap; }

.link-btn {
  background: none;
  border: none;
  color: var(--brand);
  font-size: 13.5px;
  padding: 0;
  margin-bottom: 12px;
}

.template-detail-name { font-weight: 700; margin-bottom: 12px; word-break: break-all; }

#template-params label {
  display: block;
  font-size: 13px;
  color: var(--fg-2);
  margin-bottom: 4px;
}

#template-params input {
  width: 100%;
  padding: 9px 12px;
  border: 1px solid var(--bd);
  border-radius: 8px;
  font-size: 14px;
  margin-bottom: 10px;
  outline: none;
}
#template-params input:focus { border-color: var(--brand-solid); }

.template-preview-label { font-size: 13px; color: var(--fg-2); margin: 8px 0 6px; }

.template-preview {
  background: var(--chat-bg);
  border-radius: 8px;
  padding: 12px;
  font-size: 14px;
  white-space: pre-wrap;
  margin-bottom: 14px;
}

/* lightbox */
#lightbox { cursor: zoom-out; }
#lightbox img {
  max-width: 92vw;
  max-height: 92vh;
  border-radius: 6px;
  box-shadow: 0 8px 40px var(--hover);
}

/* barra "ativar avisos" (som/notificação bloqueados pelo navegador) */
/* barra de conexão: aparece quando o painel para de atualizar
   (sem internet, servidor fora, ou a aba ficou suspensa pelo navegador) */
#conexao-bar {
  flex: 0 0 auto;
  z-index: 61;
  text-align: center;
  background: var(--err-soft);
  border-bottom: 1px solid var(--err-bd);
  color: var(--err);
  font-size: 13.5px;
  font-weight: 600;
  padding: 8px 16px;
}

#alerta-avisos {
  position: relative; /* âncora do ✕; fica no fluxo e empurra o app pra baixo */
  flex: 0 0 auto;
  z-index: 60;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  flex-wrap: wrap;
  background: var(--warn-soft);
  border-bottom: 1px solid var(--warn-bd);
  color: var(--warn);
  font-size: 13.5px;
  padding: 10px 44px 10px 16px;
  box-shadow: 0 2px 10px var(--hover);
}

#alerta-avisos-btn {
  background: var(--brand-solid);
  border: none;
  color: var(--on-brand);
  font-weight: 600;
  font-size: 13px;
  border-radius: 999px;
  padding: 7px 16px;
  white-space: nowrap;
}
#alerta-avisos-btn:hover { background: var(--brand-solid-hover); }

#alerta-avisos-x {
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: none;
  color: var(--warn);
  font-size: 14px;
  padding: 6px 8px;
  border-radius: 50%;
}
#alerta-avisos-x:hover { background: var(--hover); }

/* toast */
#toast {
  position: fixed;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--toast-bg);
  color: var(--on-brand);
  font-size: 13.5px;
  padding: 11px 18px;
  border-radius: 8px;
  z-index: 100;
  max-width: 90vw;
  box-shadow: var(--shadow-2);
}

/* ações extras do cabeçalho de modal (ex.: 🔄 recarregar templates) */
.modal-header-actions { display: flex; align-items: center; gap: 2px; }

#template-refresh {
  background: none;
  border: none;
  color: var(--on-brand);
  font-size: 15px;
  padding: 4px 8px;
  border-radius: 50%;
}
#template-refresh:hover { background: var(--on-brand-hover); }
#template-refresh:disabled { opacity: .6; cursor: default; }

/* ações do cabeçalho da conversa */
.chat-header-actions {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 2px;
}

/* menu ⋯ do cabeçalho da conversa */
.menu-wrap { position: relative; }

#more-btn {
  background: none;
  border: none;
  font-size: 22px;
  line-height: 1;
  color: var(--fg-2);
  width: 36px;
  height: 36px;
  border-radius: 50%;
}
#more-btn:hover { background: var(--hover); }

.menu {
  position: absolute;
  right: 0;
  top: calc(100% + 6px);
  min-width: 226px;
  background: var(--surface);
  border: 1px solid var(--bd);
  border-radius: 10px;
  box-shadow: var(--shadow-2);
  padding: 6px;
  z-index: 40;
}

.menu-item {
  display: block;
  width: 100%;
  text-align: left;
  background: none;
  border: none;
  font-size: 13.5px;
  color: var(--fg);
  padding: 9px 10px;
  border-radius: 7px;
  white-space: nowrap;
}
.menu-item:hover { background: var(--bg); }
.menu-item.danger { color: var(--err); }
.menu-item.danger:hover { background: var(--err-soft); }

.menu-sep { height: 1px; background: var(--bd); margin: 5px 4px; }

/* botão de ver arquivadas (sidebar) */
#archived-btn.ativo {
  background: var(--brand-solid);
  color: var(--on-brand);
}

/* botão assumir conversa (humano toma o atendimento) */
#assumir-btn {
  background: var(--warn-soft);
  border: 1px solid var(--warn-bd);
  color: var(--warn);
  font-size: 12.5px;
  font-weight: 600;
  padding: 7px 12px;
  border-radius: 999px;
  white-space: nowrap;
}
#assumir-btn:hover { background: var(--warn-soft); }

/* Caminho de volta: devolver a conversa ao agente. Sem esta regra o botão caía
   no controle NATIVO do sistema — fundo branco e texto escuro, ilegível no tema
   escuro e destoando de tudo. Mesma pílula do "Assumir", em tokens de marca:
   assumir é um alerta (a equipe toma a conversa), devolver é uma ação neutra. */
#devolver-btn {
  background: var(--brand-soft);
  border: 1px solid var(--brand-soft-bd);
  color: var(--brand);
  font-size: 12.5px;
  font-weight: 600;
  padding: 7px 12px;
  border-radius: 999px;
  white-space: nowrap;
  width: auto;
}
#devolver-btn:hover { background: var(--brand-soft); border-color: var(--brand); }

/* marcadores na lista: contato salvo e conversa duplicada */
.conv-saved { font-size: 11px; margin-left: 4px; opacity: .75; }
.conv-dup { font-size: 11px; margin-left: 4px; }

/* barra de conversa duplicada (mesmo número, 12 x 13 dígitos) */
#duplicado-bar {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  flex-wrap: wrap;
  background: var(--warn-soft);
  border-bottom: 1px solid var(--warn-bd);
  color: var(--warn);
  font-size: 12.5px;
  line-height: 1.4;
  padding: 9px 16px;
}

#duplicado-merge-btn {
  background: var(--brand-solid);
  border: none;
  color: var(--on-brand);
  font-weight: 600;
  font-size: 12.5px;
  border-radius: 999px;
  padding: 7px 15px;
  white-space: nowrap;
}
#duplicado-merge-btn:hover { background: var(--brand-solid-hover); }
#duplicado-merge-btn:disabled { opacity: .6; cursor: default; }

/* ===================== DISPAROS ===================== */
#campaign-sidebar {
  width: 380px;
  min-width: 300px;
  background: var(--surface);
  border-right: 1px solid var(--bd);
  display: flex;
  flex-direction: column;
}

#campaign-list { flex: 1; overflow-y: auto; }

/* ---- relógio do teto de 24h (Saúde do número) ----
   Frases, e não uma grade de números: a versão anterior tinha quatro números na
   mesma linha e não se sabia qual olhar. Sem molduras por linha, porque cada
   uma é uma frase — emoldurar frase faz parecer tabela de novo. */
.teto-bloco .admin-nota { margin: 0 0 12px; }

.teto-frases {
  list-style: none;
  margin: 16px 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
  font-size: 14px;
}
.teto-agora { font-size: 16px; font-weight: 600; }
/* Só o número FUTURO fica verde. O saldo de agora não: pintar de verde um "29
   de 300" diria que está tudo bem justamente quando não está. */
.teto-num { color: var(--ok); }

/* A etiqueta que liga a frase ao marcador do gráfico. Sem ela, cinco lotes eram
   cinco tracinhos idênticos e não dava para saber qual era qual. */
.teto-tag {
  display: inline-grid;
  place-items: center;
  width: 19px;
  height: 19px;
  border-radius: 50%;
  background: var(--warn);
  color: #241a00;
  font-size: 10.5px;
  font-weight: 800;
  margin-right: 7px;
  vertical-align: -4px;
}
.teto-tag.aperto { background: var(--err); color: #2b0f0e; }
.teto-aperto { color: var(--warn); }
.teto-aperto b { color: var(--warn); }

.teto-virada {
  display: flex;
  align-items: center;
  gap: 9px;
  margin: 3px 0;
  color: var(--fg-3);
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: .05em;
  text-transform: uppercase;
}
.teto-virada::before, .teto-virada::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--bd);
}

/* O teto sai da configuração (DAILY_TEMPLATE_LIMIT) e fica sempre à vista, aqui
   e no topo do eixo Y: subiu o limite, sobem os dois. */
.teto-topo {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin: 0 0 12px;
  padding: 8px 12px;
  background: var(--surface-2);
  border: 1px solid var(--bd);
  border-radius: 10px;
}
.teto-topo .v { font-size: 20px; font-weight: 700; font-variant-numeric: tabular-nums; }
.teto-topo .r { font-size: 12.5px; color: var(--fg-2); }
.teto-topo .sep { flex: 1; }
.teto-topo .usado { font-size: 12.5px; color: var(--fg-2); }

/* ---- o gráfico ---- */
.teto-g { display: grid; grid-template-columns: 44px 1fr; gap: 0; }
.teto-g-y { position: relative; height: 180px; }
.teto-g-y span {
  position: absolute;
  right: 9px;
  transform: translateY(-50%);
  font-size: 10.5px;
  color: var(--fg-3);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.teto-g-y span.topo { color: var(--fg-2); font-weight: 700; }

/* A altura fixa vive no canvas, e não no plot: com ela no plot, as linhas de
   dia e de hora saíam do fluxo e caíam por cima da legenda. */
.teto-g-plot { position: relative; }
.teto-g-canvas { position: relative; height: 180px; }
.teto-g-canvas svg {
  width: 100%;
  height: 180px;
  display: block;
  background: var(--surface-2);
  border: 1px solid var(--bd);
  border-radius: 10px;
}

.tg-faixa { fill: var(--fg); opacity: .028; }
/* A faixa da reserva fica rente ao chao: tudo abaixo dela e cota que o disparo
   em lote nao encosta, guardada para o lead do trafego. */
.tg-reserva { fill: var(--warn); opacity: .10; }
.tg-reserva-linha { stroke: var(--warn); stroke-width: 1; stroke-dasharray: 4 3; opacity: .6; }
.tg-grade { stroke: var(--bd); stroke-width: 1; opacity: .5; }
.tg-teto { stroke: var(--fg-3); stroke-width: 1.5; stroke-dasharray: 5 4; opacity: .8; }
.tg-virada { stroke: var(--bd-strong); stroke-width: 2; }
.tg-agora { stroke: var(--fg-2); stroke-width: 2; opacity: .8; }
.tg-area { fill: var(--brand-soft); stroke: none; }
.tg-linha {
  fill: none;
  stroke: var(--brand);
  stroke-width: 2.2;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
}
/* O passado é o mesmo dado, mas já aconteceu: tracejado e mais apagado, para a
   projeção continuar sendo a leitura principal. */
.tg-linha.passado {
  stroke: var(--fg-3);
  stroke-width: 1.8;
  stroke-dasharray: 4 3;
  opacity: .85;
}
.tg-haste { stroke: var(--warn); stroke-width: 1; stroke-dasharray: 3 3; opacity: .55; }
.tg-haste.aperto { stroke: var(--err); }

/* Camada de cima, SEM esticamento. Dentro do SVG o marcador herda o
   preserveAspectRatio="none" e sai achatado em elipse — vector-effect conserta
   a espessura do traço, não a forma. Aqui ele é círculo de verdade, e ainda
   ganha foco de teclado e toque. */
.teto-g-marcas { position: absolute; inset: 0; pointer-events: none; }
.teto-marca {
  position: absolute;
  transform: translate(-50%, -50%);
  pointer-events: auto;
  width: 20px;
  height: 20px;
  padding: 0;
  border-radius: 50%;
  border: 2px solid var(--surface-2);
  background: var(--warn);
  color: #241a00;
  font: 800 11px/1 inherit;
  display: grid;
  place-items: center;
  cursor: pointer;
  box-shadow: var(--shadow-1);
  transition: transform .12s;
}
.teto-marca:hover, .teto-marca:focus-visible {
  transform: translate(-50%, -50%) scale(1.25);
  outline: none;
}
.teto-marca.aperto { background: var(--err); color: #2b0f0e; }

.teto-g-dica {
  position: absolute;
  z-index: 5;
  min-width: 190px;
  max-width: 260px;
  padding: 9px 11px;
  background: var(--surface-3);
  border: 1px solid var(--bd-strong);
  border-radius: 10px;
  font-size: 12px;
  line-height: 1.45;
  color: var(--fg-2);
  box-shadow: var(--shadow-2);
  pointer-events: none;
}
.teto-g-dica b { color: var(--fg); }
.teto-g-dica::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -6px;
  width: 10px;
  height: 10px;
  background: var(--surface-3);
  border-right: 1px solid var(--bd-strong);
  border-bottom: 1px solid var(--bd-strong);
  transform: translateX(-50%) rotate(45deg);
}

/* A regua que segue o mouse pelo grafico. Mora na camada de cima, junto dos
   marcadores, para nao depender do esticamento do SVG. */
.teto-g-regua {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 0;
  border-left: 1px dashed var(--fg-2);
  opacity: .65;
  pointer-events: none;
}
.teto-dica-nota {
  display: inline-block;
  margin-top: 3px;
  font-size: 10.5px;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--fg-3);
}

.teto-g-dias { display: flex; margin-top: 7px; }
.teto-g-dias div {
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--fg-3);
  text-align: center;
  border-top: 2px solid var(--bd);
  padding-top: 5px;
}
.teto-g-horas {
  display: flex;
  justify-content: space-between;
  font-size: 10.5px;
  color: var(--fg-2);
  margin-top: 6px;
  font-variant-numeric: tabular-nums;
}
.teto-g-leg {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  align-items: center;
  font-size: 11.5px;
  color: var(--fg-2);
  margin-top: 12px;
  padding-top: 11px;
  border-top: 1px solid var(--bd);
}
.teto-g-leg i { display: inline-block; vertical-align: middle; margin-right: 6px; }
.tgl-linha { width: 16px; height: 3px; border-radius: 2px; background: var(--brand); }
.tgl-passado { width: 16px; height: 0; border-top: 2px dashed var(--fg-3); }
.tgl-lote { width: 14px; height: 14px; border-radius: 50%; background: var(--warn); }
.tgl-teto { width: 16px; height: 0; border-top: 2px dashed var(--fg-3); }
.tgl-reserva { width: 14px; height: 9px; border-radius: 2px; background: var(--warn); opacity: .35; }
.teto-reserva-nota { font-size: 12.5px; color: var(--fg-2); margin-top: -3px; }

/* No celular a sidebar some e o bloco fica estreito: o eixo Y encolhe e a
   legenda quebra em coluna em vez de espremer quatro itens numa linha. */
@media (max-width: 700px) {
  .teto-g { grid-template-columns: 32px 1fr; }
  .teto-g-leg { gap: 8px 14px; }
  .teto-topo { flex-wrap: wrap; }
  .teto-topo .sep { display: none; }
}

.teto-cheio {

  margin-top: 2px;
  padding-top: 8px;
  border-top: 1px dashed var(--bd);
  color: var(--fg-2);
  font-size: 13px;
}

/* "Escolher…": os dois campos de data, lado a lado e sem estourar a sidebar. */
.camp-datas {
  display: flex;
  gap: 8px;
  margin-top: 8px;
}
.camp-datas label {
  flex: 1 1 0;
  min-width: 0;
  font-size: 11.5px;
  font-weight: 600;
  color: var(--fg-2);
}
.camp-datas input {
  width: 100%;
  margin-top: 3px;
  padding: 6px 8px;
  border: 1px solid var(--bd);
  border-radius: 8px;
  background: var(--surface);
  color: var(--fg);
  font: inherit;
  font-size: 12.5px;
}

/* Cabeçalho de mês na rolagem da lista. Gruda no topo para a pessoa saber em
   que mês está depois de rolar meio ano de disparos. */
.camp-mes {
  position: sticky;
  top: 0;
  z-index: 1;
  padding: 7px 14px 5px;
  background: var(--surface-2);
  border-bottom: 1px solid var(--bd);
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--fg-2);
}

.camp-item-data { font-size: 12px; color: var(--fg-2); margin-top: 2px; }

.camp-vazio {
  padding: 24px 16px;
  text-align: center;
  color: var(--fg-2);
  font-size: 13px;
}

.camp-item {
  padding: 12px 14px;
  border-bottom: 1px solid var(--surface-2);
  cursor: pointer;
}
.camp-item:hover { background: var(--surface-2); }
.camp-item.active { background: var(--bg); }

.camp-item-top {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 8px;
}
.camp-item-name {
  font-weight: 600;
  font-size: 14.5px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.camp-item-sub { font-size: 12.5px; color: var(--fg-2); margin-top: 3px; }
.camp-mini-bar {
  height: 5px;
  background: var(--surface-3);
  border-radius: 3px;
  margin-top: 8px;
  overflow: hidden;
}
.camp-mini-bar > span { display: block; height: 100%; background: var(--brand-solid); }

.status-badge {
  font-size: 11px;
  font-weight: 700;
  padding: 2px 9px;
  border-radius: 999px;
  white-space: nowrap;
}
.status-badge.running    { background: var(--info-soft); color: var(--info); }
.status-badge.scheduled  { background: var(--warn-soft); color: var(--warn); }
.status-badge.paused     { background: var(--surface-3); color: var(--fg-2); }
.status-badge.completed  { background: var(--ok-soft); color: var(--ok); }
.status-badge.cancelled  { background: var(--err-soft); color: var(--err); }

/* detalhe da campanha */
#campaign-detail-area { flex: 1; display: flex; flex-direction: column; min-width: 0; background: var(--bg); }
#campaign-empty { flex: 1; display: flex; align-items: center; justify-content: center; border-bottom: 6px solid var(--brand-solid); }
#campaign-detail { flex: 1; display: flex; flex-direction: column; min-height: 0; }

.camp-detail-header {
  background: var(--surface);
  padding: 16px 20px;
  border-bottom: 1px solid var(--bd);
}
.camp-detail-title {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.camp-detail-title h2 { font-size: 18px; }
.camp-detail-meta { font-size: 13px; color: var(--fg-2); margin-top: 6px; }

/* cabeçalho do template usado na campanha */
.camp-detail-tpl-header {
  font-size: 12.5px;
  font-weight: 600;
  color: var(--brand);
  background: var(--brand-soft);
  border-radius: 6px;
  padding: 6px 9px;
  margin-top: 8px;
  white-space: pre-wrap;
}

.camp-progress {
  height: 8px;
  background: var(--surface-3);
  border-radius: 4px;
  overflow: hidden;
  margin: 14px 0 6px;
}
.camp-progress > span { display: block; height: 100%; background: var(--brand-solid); transition: width .4s; }

.camp-counts {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 12px;
}
.count-chip {
  background: var(--bg);
  border: 1px solid var(--bd);
  border-radius: 8px;
  padding: 6px 12px;
  font-size: 13px;
}
.count-chip b { font-size: 16px; display: block; }
.count-chip.falhas b { color: var(--err); }
/* --tick-read é o azul-pálido do tique SOBRE a bolha azul; num chip de fundo
   claro ele dá 1,7:1 e some. Aqui vale a semântica: entregue = sucesso,
   lida = marca. */
.count-chip.lidos b { color: var(--brand); }
.count-chip.entregues b { color: var(--ok); }

.camp-actions { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 14px; }
.camp-actions button {
  border: 1px solid var(--bd);
  background: var(--surface);
  border-radius: 8px;
  padding: 7px 14px;
  font-size: 13px;
  font-weight: 600;
  color: var(--fg);
}
.camp-actions button:hover { background: var(--bg); }
.camp-actions button.danger { color: var(--err); border-color: var(--err-bd); }
.camp-actions button.primary { background: var(--brand-solid); color: var(--on-brand); border-color: var(--brand-solid); }

.camp-filter-bar {
  padding: 10px 20px;
  background: var(--surface);
  border-bottom: 1px solid var(--bd);
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 13px;
}
.camp-filter-bar select {
  padding: 6px 10px;
  border: 1px solid var(--bd);
  border-radius: 8px;
  font-size: 13px;
}

.camp-recipients {
  flex: 1;
  overflow-y: auto;
  padding: 0 20px 20px;
}
.rec-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.rec-table th, .rec-table td {
  text-align: left;
  padding: 9px 10px;
  border-bottom: 1px solid var(--bd);
  vertical-align: top;
}
.rec-table th { position: sticky; top: 0; background: var(--bg); font-weight: 600; }
.rec-body { color: var(--fg-2); max-width: 380px; }
.rec-error { color: var(--err); font-size: 12px; }

.rec-status {
  font-size: 11.5px;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 999px;
  white-space: nowrap;
}
.rec-status.read      { background: var(--info-soft); color: var(--info); }
.rec-status.delivered { background: var(--ok-soft); color: var(--ok); }
.rec-status.sent      { background: var(--surface-3); color: var(--fg-2); }
.rec-status.queued, .rec-status.sending { background: var(--warn-soft); color: var(--warn); }
.rec-status.failed    { background: var(--err-soft); color: var(--err); }
.rec-status.skipped_optout, .rec-status.invalid, .rec-status.cancelled { background: var(--surface-3); color: var(--fg-2); }
/* pulados por trava anti-spam do painel — âmbar, não cinza: é decisão nossa,
   e a equipe precisa notar que o disparo foi menor de propósito */
.rec-status.skipped_cooldown, .rec-status.skipped_sem_resposta {
  background: var(--warn-soft);
  color: var(--warn);
}

/* saldo do teto diário no topo da janela de campanha */
.limite-barra {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 12px;
  border-radius: 8px;
  font-size: 12.5px;
  margin-bottom: 14px;
  background: var(--brand-soft);
  border: 1px solid var(--brand-soft-bd);
  color: var(--brand);
}
.limite-barra.atencao { background: var(--warn-soft); border-color: var(--warn-bd); color: var(--warn); }
.limite-barra.esgotado { background: var(--err-soft); border-color: var(--err-bd); color: var(--err); }
.limite-barra b { font-weight: 700; }

.obrigatorio { color: var(--err); font-weight: 700; }

/* ===================== PERFIL DO LEAD (gaveta) ===================== */
/* o cabeçalho vira botão: clicar no nome abre o perfil, como no WhatsApp */
.chat-identidade {
  display: flex;
  align-items: center;
  gap: 12px;
  flex: 1;
  min-width: 0;
  background: none;
  border: none;
  padding: 2px 6px;
  margin: -2px -6px;
  border-radius: 8px;
  text-align: left;
  font: inherit;
  color: inherit;
}
.chat-identidade:hover { background: var(--hover); }

#lead-drawer {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: min(420px, 100%);
  background: var(--surface);
  border-left: 1px solid var(--bd);
  box-shadow: -6px 0 24px var(--shadow-cor);
  z-index: 40;
  display: flex;
  flex-direction: column;
}

.lead-drawer-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 13px 16px;
  background: var(--brand-solid);
  color: var(--on-brand);
  font-weight: 600;
  font-size: 14.5px;
  flex: 0 0 auto;
}
#lead-fechar { background: none; border: none; color: var(--on-brand); font-size: 15px; padding: 4px 8px; }
#lead-fechar:hover { background: var(--on-brand-hover); border-radius: 50%; }

#lead-corpo { flex: 1; overflow-y: auto; padding: 16px; }

.lead-vazio { font-size: 13.5px; color: var(--fg-2); line-height: 1.5; padding: 12px 2px; }
.lead-topo { margin-bottom: 14px; }
.lead-nome { font-size: 17px; font-weight: 700; }
.lead-fone { font-size: 13px; color: var(--fg-2); margin-top: 2px; }
.lead-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.lead-chip {
  font-size: 11.5px;
  font-weight: 600;
  background: var(--bg);
  border-radius: 999px;
  padding: 4px 10px;
  color: var(--fg-2);
}

.lead-alerta {
  font-size: 13px;
  font-weight: 600;
  border-radius: 8px;
  padding: 10px 12px;
  margin-bottom: 14px;
  background: var(--surface-3);
  color: var(--fg-2);
}
.lead-alerta.pos { background: var(--ok-soft); color: var(--ok); }
.lead-alerta.neg { background: var(--err-soft); color: var(--err); }

.lead-secao { margin-bottom: 18px; }
.lead-secao h4 {
  font-size: 11.5px;
  text-transform: uppercase;
  letter-spacing: .4px;
  color: var(--fg-2);
  margin-bottom: 7px;
}
.lead-secao p { font-size: 13.5px; line-height: 1.5; }

.lead-acao p {
  background: var(--brand-soft);
  border-radius: 8px;
  padding: 11px 13px;
  font-weight: 600;
  color: var(--brand);
}

.lead-bloco { display: flex; flex-direction: column; gap: 6px; }
.lead-linha {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  font-size: 13px;
  border-bottom: 1px solid var(--surface-2);
  padding-bottom: 5px;
}
.lead-linha span { color: var(--fg-2); flex: 0 0 auto; }
.lead-linha b { text-align: right; font-weight: 600; }

.lead-alertas { list-style: none; display: flex; flex-direction: column; gap: 6px; }
.lead-alertas li {
  font-size: 12.5px;
  border-left: 3px solid var(--bd);
  padding: 3px 0 3px 9px;
}
.lead-alertas li.pos { border-left-color: var(--brand-solid); }
.lead-alertas li.neg { border-left-color: var(--err); }
.lead-alertas small { color: var(--fg-2); margin-left: 6px; }

.lead-evento {
  font-size: 12.8px;
  line-height: 1.45;
  border-left: 2px solid var(--bd);
  padding: 0 0 12px 11px;
  margin-left: 3px;
}
.lead-evento-topo {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  color: var(--fg-2);
  font-size: 11.5px;
  margin-bottom: 3px;
}
.lead-evo { font-weight: 600; }
.lead-evento-acao { color: var(--brand); font-weight: 600; margin-top: 3px; }

.lead-agendor {
  font-family: ui-monospace, Consolas, monospace;
  font-size: 12px;
  line-height: 1.45;
  background: var(--bg);
  border-radius: 8px;
  padding: 11px;
  white-space: pre-wrap;
  word-break: break-word;
  max-height: 260px;
  overflow-y: auto;
  margin-bottom: 9px;
}

.lead-rodape { font-size: 11px; color: var(--fg-2); text-align: center; padding-top: 6px; }

/* mobile: a gaveta ocupa a tela toda */
@media (max-width: 700px) {
  #lead-drawer { width: 100%; border-left: none; }
}

/* ===================== TELA DE ADMINISTRAÇÃO ===================== */
.admin-abas {
  display: flex;
  gap: 4px;
  padding: 0 22px;
  background: var(--surface);
  border-bottom: 1px solid var(--bd);
  flex: 0 0 auto;
}
.admin-aba {
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  padding: 10px 14px;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--fg-2);
}
.admin-aba:hover { color: var(--fg); }
.admin-aba.active { color: var(--brand); border-bottom-color: var(--brand-solid); }

.lead-chips-gestor { margin-bottom: 10px; }
.lead-tabela tr[data-conv] { cursor: pointer; }
.lead-tabela tr[data-conv]:hover { background: var(--brand-soft); }
.lead-td-sub { font-size: 11.5px; color: var(--fg-2); }
.lead-pill {
  display: inline-block;
  font-size: 11.5px;
  font-weight: 600;
  border-radius: 6px;
  padding: 2px 8px;
  background: var(--surface-3);
  color: var(--fg-2);
}
.lead-pill.pos { background: var(--ok-soft); color: var(--ok); }
.lead-pill.neg { background: var(--err-soft); color: var(--err); }

#admin-area { flex: 1; display: flex; flex-direction: column; overflow: hidden; background: var(--bg); }

.admin-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  padding: 16px 22px;
  background: var(--surface);
  border-bottom: 1px solid var(--bd);
}
.admin-header h2 { font-size: 18px; }
/* `min(100%, ...)` e não um `ch` seco: em tela larga o texto cresce com a
   janela em vez de parar na metade dela, e em tela estreita ele nunca passa da
   caixa. O teto continua existindo porque linha muito longa faz o olho perder
   o começo da seguinte — mas 60ch parava cedo demais num monitor de 1366. */
.admin-sub { font-size: 12.5px; color: var(--fg-2); margin-top: 3px; max-width: min(100%, 96ch); }
.admin-header-acoes { display: flex; align-items: center; gap: 8px; }
#admin-janela {
  padding: 7px 10px; border: 1px solid var(--bd); border-radius: 8px;
  font-size: 13px; font-family: inherit; background: var(--surface); outline: none;
}
#admin-refresh {
  background: none; border: 1px solid var(--bd); border-radius: 8px;
  color: var(--fg-2);
  font-size: 15px; padding: 6px 10px;
  display: flex; align-items: center;
}
#admin-refresh:hover { color: var(--fg); }
#admin-refresh:hover { background: var(--surface-3); }
#admin-refresh:disabled { opacity: .5; cursor: default; }

.admin-conteudo { flex: 1; overflow-y: auto; padding: 18px 22px 40px; }

/* ===================== MEU PERFIL =====================
   `flex: 1` é o que faltava e quebrava a tela: dentro de `.view { display:flex }`
   um <main> sem isso não cresce, e o conteúdo ficava numa coluna estreita com
   metade da janela vazia ao lado. As mesmas regras de #admin-area. */
#perfil-area { flex: 1; display: flex; flex-direction: column; overflow: hidden; background: var(--bg); }
#perfil-corpo { flex: 1; overflow-y: auto; padding: 18px 22px 40px; }

.perfil-topo { display: flex; align-items: center; gap: 14px; margin-bottom: 18px; }
.perfil-topo h3 { font-size: 17px; font-weight: 600; }
.perfil-avatar {
  width: 46px; height: 46px; flex: none; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: var(--brand-soft); color: var(--brand);
  font-size: 15px; font-weight: 700; letter-spacing: .02em;
}

/* Duas colunas onde couber, uma quando não couber. `minmax(0, 1fr)` e não
   `1fr`: sem o zero, uma tabela larga dentro de um bloco empurra a coluna e
   estoura a grade em vez de rolar dentro dela. */
.perfil-grade { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 380px), 1fr)); gap: 18px; align-items: start; }
.perfil-coluna { display: flex; flex-direction: column; }
.perfil-coluna .admin-bloco { margin-bottom: 18px; }

.perfil-numeros { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 14px; }
.perfil-numeros .rot { display: block; font-size: 11.5px; color: var(--fg-2); }
.perfil-numeros .num { display: block; font-size: 19px; font-weight: 600; letter-spacing: -.3px; margin-top: 3px; font-variant-numeric: tabular-nums; }
.perfil-numeros .sub { display: block; font-size: 11.5px; color: var(--fg-3); margin-top: 2px; }

.perfil-sistema {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 12px; border: 1px solid var(--bd); border-radius: 10px;
  background: var(--surface-2); margin-bottom: 8px;
}
.perfil-sistema.atual { border-color: var(--brand-soft-bd); background: var(--brand-soft); }
.perfil-sistema img { width: 26px; height: 26px; border-radius: 22.37%; flex: none; }
.perfil-sistema > :nth-child(2) { flex: 1; min-width: 0; }
.perfil-sistema .nome { font-size: 13.5px; font-weight: 600; }
.perfil-sistema .sub { font-size: 11.5px; color: var(--fg-2); margin-top: 1px; }
.perfil-sistema a.secondary-btn { text-decoration: none; }

.metricas-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 12px;
  margin-bottom: 22px;
}

.metrica {
  background: var(--surface);
  border: 1px solid var(--bd);
  border-left: 4px solid var(--bd);
  border-radius: 10px;
  padding: 13px 15px;
}
.metrica.bom     { border-left-color: var(--brand-solid); }
.metrica.atencao { border-left-color: var(--warn); }
.metrica.ruim    { border-left-color: var(--err); }

.metrica-valor { font-size: 26px; font-weight: 700; line-height: 1.1; }
.metrica-valor small { font-size: 15px; font-weight: 600; color: var(--fg-2); }
.metrica-rotulo { font-size: 12.5px; font-weight: 600; margin-top: 4px; }
.metrica-dica { font-size: 11.5px; color: var(--fg-2); margin-top: 3px; }

.admin-bloco {
  background: var(--surface);
  border: 1px solid var(--bd);
  border-radius: 10px;
  padding: 16px 18px;
  margin-bottom: 18px;
}
.admin-bloco h3 { font-size: 15px; margin-bottom: 4px; }
.admin-nota { font-size: 12px; color: var(--fg-2); margin-bottom: 14px; max-width: min(100%, 110ch); }

.admin-tabela { width: 100%; border-collapse: collapse; font-size: 13px; }
.admin-tabela th {
  text-align: left; font-size: 11.5px; text-transform: uppercase;
  letter-spacing: .3px; color: var(--fg-2);
  border-bottom: 1px solid var(--bd); padding: 6px 8px;
}
.admin-tabela td { padding: 8px; border-bottom: 1px solid var(--surface-2); }
.admin-tabela td.num, .admin-tabela th.num { text-align: right; }
.admin-tabela tr:last-child td { border-bottom: none; }

.pct { font-weight: 700; border-radius: 6px; padding: 2px 8px; }
.pct.bom     { background: var(--ok-soft); color: var(--ok); }
.pct.atencao { background: var(--warn-soft); color: var(--warn); }
.pct.ruim    { background: var(--err-soft); color: var(--err); }

/* gráfico de barras (SVG puro) */
.gr-wrap { width: 100%; }
.gr-svg {
  width: 100%; height: 150px; display: block;
  background: linear-gradient(to top, var(--surface-2) 0 1px, transparent 1px);
  border-bottom: 1px solid var(--bd);
}
.gr-eixo, .gr-legenda {
  display: flex; justify-content: space-between;
  font-size: 11.5px; color: var(--fg-2); margin-top: 6px;
}
.gr-legenda { justify-content: flex-start; gap: 16px; margin-top: 10px; }
.gr-legenda i { display: inline-block; width: 10px; height: 10px; border-radius: 2px; margin-right: 5px; }

.admin-rodape { font-size: 11.5px; color: var(--fg-2); text-align: center; padding: 4px 0 10px; }

/* ---------------- filtro do bloco "Campanhas" ----------------
   Busca por nome + período + total ponderado do que está filtrado. Os chips de
   período são os mesmos `.conv-chip` da lista de conversas e de Disparos, e o
   `De`/`Até` reusa `.camp-datas`: filtrar por período é a mesma ideia em três
   telas, e uma segunda aparência só faria o painel parecer dois produtos. */
.cmp-filtros { display: flex; flex-direction: column; gap: 10px; margin-bottom: 14px; }
.cmp-linha { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.cmp-linha .search-field { flex: 1 1 260px; min-width: 0; }
.cmp-linha .search-field input {
  width: 100%; padding: 7px 10px; border: 1px solid var(--bd); border-radius: 8px;
  background: var(--surface); color: var(--fg); font: inherit; font-size: 13px; outline: none;
}
.cmp-linha .search-field input:focus { border-color: var(--brand-solid); box-shadow: 0 0 0 3px var(--ring); }
.cmp-ordem {
  padding: 7px 10px; border: 1px solid var(--bd); border-radius: 8px;
  font-size: 13px; font-family: inherit; background: var(--surface); color: var(--fg); outline: none;
}
.cmp-chips { display: flex; gap: 6px; flex-wrap: wrap; }
.cmp-zero {
  display: flex; align-items: center; gap: 6px;
  font-size: 12.5px; font-weight: 500; color: var(--fg-2); white-space: nowrap;
}
.cmp-zero input { accent-color: var(--brand-solid); width: 15px; height: 15px; margin: 0; }

/* faixa de total do que está filtrado */
.cmp-resumo {
  display: flex; align-items: stretch; flex-wrap: wrap;
  border: 1px solid var(--brand-soft-bd); background: var(--brand-soft);
  border-radius: 10px; padding: 2px; margin-bottom: 12px;
}
.cmp-resumo-item { flex: 1 1 120px; min-width: 110px; padding: 9px 12px; }
.cmp-resumo-item + .cmp-resumo-item { border-left: 1px solid var(--brand-soft-bd); }
.cmp-resumo-rot {
  display: block; font-size: 10.5px; font-weight: 700;
  letter-spacing: .05em; text-transform: uppercase; color: var(--fg-2);
}
.cmp-resumo-val { display: block; font-size: 19px; font-weight: 700; color: var(--fg); line-height: 1.25; }
.cmp-resumo-ctx { flex: 1 1 100%; padding: 2px 12px 8px; font-size: 11.5px; color: var(--fg-2); }

/* pé da tabela: quantas de quantas, e carregar mais */
.cmp-pe {
  display: flex; align-items: center; justify-content: space-between;
  gap: 10px; flex-wrap: wrap; margin-top: 12px;
}
.cmp-pe span { font-size: 12px; color: var(--fg-2); }
.cmp-mais {
  padding: 7px 14px; border: 1px solid var(--bd-strong); border-radius: 8px;
  background: var(--surface); color: var(--brand);
  font: inherit; font-size: 12.5px; font-weight: 600;
}
.cmp-mais:hover { border-color: var(--brand-solid); background: var(--brand-soft); }
.cmp-mais[disabled] { opacity: .45; }
.cmp-vazio { padding: 18px 8px; font-size: 13px; color: var(--fg-2); }
.cmp-vazio b { color: var(--fg); }
/* campanha agendada: existe na lista, mas não tem taxa para ranquear */
.admin-tabela tr.cmp-sem-envio td { color: var(--fg-3); }
.cmp-agenda {
  font-size: 11px; font-weight: 600; color: var(--warn);
  background: var(--warn-soft); border-radius: 6px; padding: 1px 7px;
}

@media (max-width: 700px) {
  .admin-header { padding: 12px 14px; }
  .admin-conteudo { padding: 14px 14px 30px; }
  .admin-tabela { font-size: 12px; }
}

/* No celular a faixa de total quebra em 2x2. A borda-esquerda de "irmão
   seguinte" deixaria um traço solto no começo da segunda linha, então ali o
   desenho vira malha: o fundo da faixa aparece pelo gap de 1px e é ele que faz
   o fio entre os quatro números. */
@media (max-width: 600px) {
  .cmp-resumo { gap: 1px; background: var(--brand-soft-bd); }
  .cmp-resumo-item { flex: 1 1 calc(50% - 1px); background: var(--brand-soft); }
  .cmp-resumo-item + .cmp-resumo-item { border-left: none; }
  .cmp-resumo-ctx { background: var(--brand-soft); padding-top: 8px; }
}

/* ===================== FORM CAMPANHA ===================== */
.modal-large { width: min(680px, 96vw); }

.field-label {
  display: block;
  font-size: 13px;
  font-weight: 600;
  color: var(--fg);
  margin: 14px 0 5px;
}

/* Mesmas métricas do input acima (era padding 10px/12px e fonte 14px, o que
   deixava todo select 3px mais baixo e com texto menor que o input ao lado —
   visível em qualquer linha que misture os dois, como Etapa + Valor na ficha do
   CRM ou Template + agendamento no disparo). */
.modal-body select, .modal-body textarea {
  width: 100%;
  padding: 11px 13px;
  border: 1px solid var(--bd);
  border-radius: 8px;
  font-size: 15px;
  font-family: inherit;
  line-height: 1.5;
  outline: none;
}
.modal-body select:focus, .modal-body textarea:focus { border-color: var(--brand-solid); }
.modal-body textarea { resize: vertical; }

/* modelo preenchível + retorno da leitura do arquivo */
.camp-modelo-btn { margin: 4px 0 10px; }

.camp-arquivo-info {
  margin-top: 8px;
  padding: 8px 10px;
  border-radius: 8px;
  font-size: 12.5px;
  background: var(--brand-soft);
  color: var(--brand);
  border: 1px solid var(--brand-soft-bd);
}
.camp-arquivo-info.erro {
  background: var(--err-soft);
  color: var(--err);
  border-color: var(--err-bd);
}

.camp-source-tabs { display: flex; gap: 8px; margin-bottom: 8px; }
.camp-tab {
  flex: 1;
  padding: 8px;
  border: 1px solid var(--bd);
  background: var(--surface);
  border-radius: 8px;
  font-size: 13px;
  font-weight: 600;
  color: var(--fg-2);
}
.camp-tab.active { background: var(--brand-solid); color: var(--on-brand); border-color: var(--brand-solid); }

.secondary-btn {
  margin-top: 10px;
  padding: 9px 16px;
  background: var(--surface);
  border: 1px solid var(--brand-solid);
  color: var(--brand);
  border-radius: 8px;
  font-size: 13.5px;
  font-weight: 600;
}
.secondary-btn:hover { background: var(--brand-soft); }

.camp-summary { font-size: 13.5px; margin: 12px 0 8px; }
.camp-summary b.ok { color: var(--brand); }
.camp-summary b.bad { color: var(--err); }
.camp-summary b.skip { color: var(--warn); }
.camp-summary b.warn { color: var(--warn); }

/* aviso de frequência de marketing (prevenção do 131049) */
.mkt-warn {
  font-size: 12.5px;
  line-height: 1.45;
  border-radius: 8px;
  padding: 10px 12px;
  margin: 10px 0 4px;
  border: 1px solid;
}
.mkt-warn.alerta   { background: var(--warn-soft); border-color: var(--warn-bd); color: var(--warn); }
.mkt-warn.bloqueio { background: var(--err-soft); border-color: var(--err-bd); color: var(--err); }

.camp-preview-table-wrap { max-height: 220px; overflow: auto; border: 1px solid var(--bd); border-radius: 8px; }
#camp-preview-table { width: 100%; border-collapse: collapse; font-size: 12.5px; }
#camp-preview-table th, #camp-preview-table td { padding: 6px 9px; border-bottom: 1px solid var(--bd); text-align: left; }
#camp-preview-table th { background: var(--bg); position: sticky; top: 0; }

.camp-checkbox { display: flex; align-items: center; gap: 8px; font-size: 14px; margin: 16px 0 8px; cursor: pointer; }
.camp-checkbox input { width: auto; }

#camp-schedule-at { width: 100%; padding: 10px 12px; border: 1px solid var(--bd); border-radius: 8px; font-size: 14px; margin-bottom: 4px; }

/* O Salvar do modal de edicao usa o mesmo desenho do Criar disparo: sao os
   dois botoes que fecham um formulario de campanha, e desenho diferente para a
   mesma acao faria a tela parecer dois paineis colados. */
#camp-create-btn,
#camp-edit-salvar {
  width: 100%;
  padding: 12px;
  background: var(--brand-solid);
  color: var(--on-brand);
  border: none;
  border-radius: 8px;
  font-size: 15px;
  font-weight: 600;
  margin-top: 16px;
}
#camp-create-btn:hover,
#camp-edit-salvar:hover { background: var(--brand-solid-hover); }
#camp-create-btn:disabled,
#camp-edit-salvar:disabled {
  background: var(--surface-3);
  color: var(--fg-2);
  cursor: default;
}

/* descadastros */
.opt-out-add { display: flex; gap: 8px; margin-bottom: 16px; }
.opt-out-add input { flex: 1; margin-bottom: 0 !important; }
.opt-out-add button {
  background: var(--brand-solid);
  color: var(--on-brand);
  border: none;
  border-radius: 8px;
  padding: 0 18px;
  font-weight: 600;
  font-size: 14px;
}
.opt-out-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 4px;
  border-bottom: 1px solid var(--bd);
  font-size: 14px;
}
.opt-out-row button {
  background: none;
  border: none;
  color: var(--err);
  font-size: 13px;
  cursor: pointer;
}
.opt-out-empty { color: var(--fg-2); font-size: 13.5px; text-align: center; padding: 20px; }

/* ===================== MOBILE ===================== */
@media (max-width: 760px) {
  #sidebar, #campaign-sidebar { width: 100%; min-width: 0; }
  #chat-area, #campaign-detail-area { display: none; }

  body.mobile-chat-open #sidebar,
  body.mobile-chat-open #campaign-sidebar { display: none; }
  body.mobile-chat-open #chat-area,
  body.mobile-chat-open #campaign-detail-area { display: flex; }

  #chat-back { display: block; }
  #messages-container { padding: 12px 3%; }
  .msg { max-width: 82%; }
}

/* ============================================================================
   GLAUDZAP — componentes da nova identidade
   Este bloco vem por último de propósito: sobrescreve, por ordem de cascata,
   as regras herdadas do tema WhatsApp que precisavam de ajuste real (e não só
   de troca de cor).
   ============================================================================ */

/* ---------------------------- ÍCONES (sprite SVG) ---------------------------
   Substituem 100% dos emojis de interface. Herdam currentColor, então
   funcionam nos dois temas sem regra extra. Emoji continua existindo apenas
   como CONTEÚDO: mensagem digitada pela equipe e o seletor de emojis. */
svg.ic {
  width: 20px; height: 20px;
  flex: none;
  stroke: currentColor;
  fill: none;
  stroke-width: 1.9;
  stroke-linecap: round;
  stroke-linejoin: round;
  vertical-align: -.22em;
}
svg.ic.xs { width: 13px; height: 13px; stroke-width: 2.2; }
svg.ic.sm { width: 16px; height: 16px; stroke-width: 2; }
svg.ic.lg { width: 26px; height: 26px; stroke-width: 1.7; }
svg.ic.xl { width: 44px; height: 44px; stroke-width: 1.4; }
button svg.ic { pointer-events: none; }

/* ------------------------------- LOCKUP -------------------------------------
   Medido em img/glaud-azul.png (2922x986): a linha de base do wordmark fica a
   75,05% da altura da imagem, com 24,85% de descida (a perna do "g").

   Precisa ser formatação INLINE, não flex: o baseline de uma <img> inline é a
   borda inferior da sua margem, então a margem negativa move o baseline para
   cima, até o glifo, e o "Zap" na mesma linha herda exatamente esse baseline.
   Em flexbox o Chrome sintetiza o baseline pela border box e ignora a margem
   negativa, desalinhando em 0,2485 x altura. */
.lockup {
  --lk: 19px;
  display: inline-block;
  white-space: nowrap;
  padding-bottom: calc(var(--lk) * .2485);
  line-height: 1;
}
.lockup img {
  height: var(--lk);
  width: auto;
  vertical-align: baseline;
  margin-bottom: calc(var(--lk) * -.2485);
  margin-right: calc(var(--lk) * .15);
}
.lockup .zap {
  /* 1,05 x a altura da imagem casa a altura-x da Poppins (0,548) com a do
     wordmark (0,568) e o cap-height do Z com o ascendente do "d". */
  font-size: calc(var(--lk) * 1.05);
  font-weight: 600;
  letter-spacing: -.025em;
  color: var(--fg);
  line-height: 1;
}
/* no tema escuro entra a versão branca do wordmark (troca de <img>, não filtro,
   para não sujar o azul da marca) */
.lockup .lk-claro { display: inline; }
.lockup .lk-escuro { display: none; }
:root[data-theme="dark"] .lockup .lk-claro { display: none; }
:root[data-theme="dark"] .lockup .lk-escuro { display: inline; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .lockup .lk-claro { display: none; }
  :root:not([data-theme="light"]) .lockup .lk-escuro { display: inline; }
}

/* ícone "g" no topo da barra de navegação */
.rail-logo {
  width: 38px; height: 38px;
  border-radius: 11px;
  overflow: hidden;
  margin-bottom: 10px;
  flex: none;
  box-shadow: var(--shadow-1);
}
.rail-logo img { width: 100%; height: 100%; display: block; }

/* número conectado, no canto da barra de topo */
.topbar-num {
  display: flex; align-items: center; gap: 6px;
  font-size: 11.5px; font-weight: 400;
  color: var(--fg-2);
  padding: 4px 10px;
  border-radius: 999px;
  background: var(--surface-2);
  border: 1px solid var(--bd);
}
.topbar-num svg.ic { color: var(--ok); }

/* --------------------------- SELETOR DE TEMA -------------------------------
   Mora só no rodapé da barra lateral — nunca na barra de topo. */
/* o menu se posiciona pelo wrapper, nao pelo botao */
.tema-wrap { position: relative; display: flex; }
#tema-menu {
  position: absolute;
  left: calc(100% + 8px);
  bottom: 0;
  z-index: 60;
  min-width: 172px;
  background: var(--surface);
  border: 1px solid var(--bd);
  border-radius: 10px;
  box-shadow: var(--shadow-3);
  padding: 5px;
}
#tema-menu button {
  display: flex; align-items: center; gap: 9px;
  width: 100%;
  padding: 8px 10px;
  border: none;
  background: none;
  border-radius: 6px;
  font-size: 13px;
  font-family: inherit;
  color: var(--fg);
  text-align: left;
  transition: background-color .15s ease, color .15s ease;
}
#tema-menu button:hover { background: var(--surface-3); }
#tema-menu button.ativo { background: var(--brand-soft); color: var(--brand); font-weight: 600; }
#tema-menu button svg.ic { color: var(--fg-2); }
#tema-menu button.ativo svg.ic { color: var(--brand); stroke-width: 2.2; }

/* -------------------- BOLHA DE SAÍDA: agora é azul sólido -------------------
   Era verde-claro com texto escuro. Virou azul com texto branco, então tudo
   que vive dentro dela precisa de cor "sobre marca". */
.msg.out { color: var(--bubble-out-fg); }
.msg.out .msg-meta,
.msg.out .msg-template-tag,
.msg.out .msg-header-text { color: rgba(255,255,255,.82); }
/* LIDA: setinha no azul do balão, cercada por uma borda branca forte. O azul
   sozinho seria invisível (é a MESMA cor do fundo da bolha) — quem faz a leitura
   é o contorno. Então "enviada/entregue" fica branco translúcido e "lida" salta
   como um par de tiques desenhados.

   O contorno é text-shadow em 8 direções, não -webkit-text-stroke: o stroke é
   centrado na borda do glifo e comeria o miolo azul de um tique de 12px, que
   acabaria parecendo só um tique branco gordo. O text-shadow cresce para FORA e
   preserva o azul inteiro.

   E o letter-spacing volta de -2px para -0,5px só aqui: com contorno, -2px
   fundia os dois tiques num borrão claro. */
.msg.out .ticks.read {
  color: var(--tick-read-fill);
  letter-spacing: -0.5px;
  text-shadow:
     1px  0   0 var(--tick-read-stroke),
    -1px  0   0 var(--tick-read-stroke),
     0    1px 0 var(--tick-read-stroke),
     0   -1px 0 var(--tick-read-stroke),
     1px  1px 0 var(--tick-read-stroke),
    -1px  1px 0 var(--tick-read-stroke),
     1px -1px 0 var(--tick-read-stroke),
    -1px -1px 0 var(--tick-read-stroke);
}
.msg.out a { color: #fff; text-decoration: underline; }
.msg.out .fmt-citacao { border-left-color: rgba(255,255,255,.45); }
.msg.out .doc-card { background: rgba(0,32,71,.24); }
.msg.out .doc-card:hover { background: rgba(0,32,71,.34); }
.msg.in { color: var(--bubble-in-fg); }

/* o erro dentro da bolha precisa da própria superfície: vermelho sobre azul
   dá 1,25:1 e fica ilegível */
.msg .msg-error-detail {
  background: var(--err-soft);
  border: 1px solid var(--err-bd);
  border-radius: 6px;
  padding: 5px 8px;
  margin-top: 6px;
  color: var(--err);
}
.msg .msg-error-why { color: var(--err); }

/* prévia da formatação = prévia da bolha de saída, mesma regra */
#fmt-preview { color: var(--bubble-out-fg); }
#fmt-preview .fmt-preview-rotulo { color: rgba(255,255,255,.82); }
#fmt-preview .fmt-preview-vazio { color: rgba(255,255,255,.7); }
#fmt-preview .fmt-citacao { border-left-color: rgba(255,255,255,.45); }

/* --------------------------- LOGIN (nova cara) ----------------------------- */
#login-view {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(900px 520px at 50% -14%, var(--brand-soft), transparent 68%),
    var(--bg);
}
/* pétala da marca ao fundo */
#login-view::after {
  content: "";
  position: absolute;
  width: 460px; height: 460px;
  right: -170px; bottom: -190px;
  opacity: .10;
  background: var(--brand-solid);
  border-radius: 100% 100% 100% 0;
  transform: rotate(-12deg);
  pointer-events: none;
}
.login-card {
  position: relative;
  z-index: 1;
  border: 1px solid var(--bd);
  border-radius: 20px;
}
.login-card .lockup { --lk: 34px; }
.login-logo { display: none; }   /* o emoji saiu; quem identifica é o lockup */

/* ------------------- LEADS: alternar entre tabela e cards ------------------- */
.leads-barra {
  display: flex; align-items: center; gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 12px;
}
.leads-barra .conv-chips { flex: 1; min-width: 220px; margin: 0; }
.visao-seg {
  display: flex; gap: 2px;
  background: var(--surface-3);
  padding: 3px;
  border-radius: 10px;
  flex: none;
}
.visao-seg button {
  display: flex; align-items: center; gap: 6px;
  padding: 6px 12px;
  border: none;
  background: none;
  border-radius: 6px;
  font-size: 12px;
  font-weight: 500;
  font-family: inherit;
  color: var(--fg-2);
  transition: background-color .15s ease, color .15s ease;
}
.visao-seg button:hover { color: var(--fg); }
.visao-seg button.ativo {
  background: var(--surface);
  color: var(--brand);
  font-weight: 600;
  box-shadow: var(--shadow-1);
}
.visao-seg button.ativo svg.ic { stroke-width: 2.2; }

/* cards de lead (formato novo; a tabela continua sendo o padrão) */
.lead-card {
  background: var(--surface);
  border: 1px solid var(--bd);
  border-left: 3px solid var(--bd-strong);
  border-radius: 10px;
  padding: 14px 16px;
  margin-bottom: 10px;
  cursor: pointer;
  transition: background-color .15s ease, border-color .15s ease;
}
.lead-card:hover { background: var(--surface-2); border-color: var(--bd-strong); }
.lead-card.neg { border-left-color: var(--err); }
.lead-card.pos { border-left-color: var(--ok); }
.lead-card-topo { display: flex; align-items: center; gap: 9px; margin-bottom: 4px; }
.lead-card-topo h4 { font-size: 13.5px; font-weight: 600; flex: 1; }
.lead-card-fone { font-size: 11.5px; color: var(--fg-3); font-weight: 300; margin-bottom: 8px; }
.lead-card-txt { font-size: 12.5px; color: var(--fg-2); font-weight: 300; margin-bottom: 10px; }
.lead-card-chips { display: flex; gap: 6px; flex-wrap: wrap; }
.lead-card-chips .lchip {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 3px 9px;
  border-radius: 999px;
  font-size: 11px;
  background: var(--surface-2);
  border: 1px solid var(--bd);
  color: var(--fg-2);
}
.lead-card-chips .lchip svg.ic { color: var(--fg-3); }
.lead-card-chips .lchip.hot { background: var(--err-soft); border-color: var(--err-bd); color: var(--err); }
.lead-card-chips .lchip.hot svg.ic { color: var(--err); }
.lead-card-chips .lchip.up { background: var(--ok-soft); border-color: var(--ok-bd); color: var(--ok); }
.lead-card-chips .lchip.up svg.ic { color: var(--ok); }

/* ---------------------------- AJUSTES FINAIS ------------------------------- */
/* foco visível e na cor da marca em tudo que recebe teclado */
input:focus-visible, textarea:focus-visible, select:focus-visible, button:focus-visible {
  outline: 2px solid var(--brand);
  outline-offset: 2px;
}
input:focus, textarea:focus, select:focus { box-shadow: 0 0 0 3px var(--ring); }

/* campos herdam a superfície do tema (antes eram brancos fixos) */
#login-form input, .modal-body input, .modal-body select, .modal-body textarea,
#composer-input, #search-input, .conv-campanha, #admin-janela {
  background: var(--surface-2);
  color: var(--fg);
  border-color: var(--bd);
}
::placeholder { color: var(--fg-3); opacity: 1; }

/* barras de rolagem discretas, nos dois temas */
* { scrollbar-color: var(--bd-strong) transparent; scrollbar-width: thin; }
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-thumb { background: var(--bd-strong); border-radius: 4px; }
::-webkit-scrollbar-track { background: transparent; }

/* Classes de ÚNICO token para os ícones.
   Motivo: o markup injetado pelo app.js precisa caber dentro de strings JS de
   qualquer tipo ('...', "...", `...`). Com classe de um só token dá para
   escrever o SVG sem nenhuma aspa:
     <svg class=ic-sm><use href=#i-save></use></svg>
   Assim não há risco de fechar a string que envolve o markup. */
svg[class^="ic-"], svg[class*=" ic-"] {
  flex: none;
  stroke: currentColor;
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
  vertical-align: -.22em;
}
svg.ic-xs { width: 13px; height: 13px; stroke-width: 2.2; }
svg.ic-sm { width: 16px; height: 16px; stroke-width: 2; }
svg.ic-md { width: 20px; height: 20px; stroke-width: 1.9; }
svg.ic-lg { width: 26px; height: 26px; stroke-width: 1.7; }
svg.ic-xl { width: 44px; height: 44px; stroke-width: 1.4; }
button svg[class^="ic-"] { pointer-events: none; }

/* o ícone dentro da bolha de saída herda o branco da bolha */
.msg.out svg[class^="ic-"] { color: inherit; }
/* ícone de anexo/documento em tamanho maior */
.doc-icon svg[class^="ic-"], .anexo-icone svg[class^="ic-"] { width: 24px; height: 24px; }

/* ---------------------------- SELEÇÃO DE TEXTO -----------------------------
   Sem regra própria, o navegador usa o azul do sistema: no tema escuro fica
   azul-sobre-azul e no claro quase não se percebe. Aqui o realce é explícito
   nos dois temas, com contraste alto. */
::selection      { background: var(--sel-bg); color: var(--sel-fg); }
::-moz-selection { background: var(--sel-bg); color: var(--sel-fg); }

/* Dentro da bolha de saída o fundo já é azul saturado: um realce azul
   desapareceria. Ali a seleção inverte — fundo branco, texto azul. */
.msg.out ::selection,
.msg.out::selection,
#fmt-preview ::selection,
#fmt-preview::selection { background: #ffffff; color: var(--g-blue-deep); }

/* ============================================================================
   GLAUDZAP — logins por pessoa e disparo a partir da base
   ============================================================================ */

/* -------------------------- LOGIN COM USUÁRIO ------------------------------ */
#login-usuario { text-transform: lowercase; }
.login-bootstrap {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin-top: 16px;
  padding: 10px 12px;
  border-radius: 8px;
  background: var(--info-soft);
  border: 1px solid var(--info-bd);
  color: var(--info);
  font-size: 11.5px;
  font-weight: 300;
  line-height: 1.5;
  text-align: left;
}
.login-bootstrap svg.ic { flex: none; margin-top: 1px; }

/* quem está logado, no canto da barra de topo */
.topbar-eu {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 11.5px;
  color: var(--fg-2);
  padding: 4px 10px;
  border-radius: 999px;
  background: var(--brand-soft);
  border: 1px solid var(--brand-soft-bd);
}
/* Virou <button>: precisa de cursor e de foco visível, senão parece etiqueta e
   ninguém descobre que abre o perfil. `font: inherit` porque botão traz a
   fonte do sistema e sairia diferente do resto da barra. */
.topbar-eu { cursor: pointer; font-family: inherit; transition: background-color .15s; }
.topbar-eu:hover { background: var(--brand-soft-bd); }
.topbar-eu:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
.topbar-eu svg.ic { color: var(--brand); }
.topbar-eu b { font-weight: 600; color: var(--brand); }

/* ---------------- AUTORIA DENTRO DA BOLHA DE SAÍDA ------------------------- */
/* Linha pequena no topo da bolha, estilo grupo do WhatsApp. Só aparece nas
   mensagens que o painel enviou com um login identificado — o cliente nunca vê
   isto, é registro interno. */
.msg-autor {
  display: block;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .01em;
  margin-bottom: 3px;
  color: rgba(255, 255, 255, .9);
}
.msg.in .msg-autor { color: var(--brand); }

/* --------------------------- ABA EQUIPE ----------------------------------- */
.equipe-topo {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 14px;
}
.equipe-topo h3 { font-size: 15px; flex: 1; }
.usuario-linha {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  background: var(--surface);
  border: 1px solid var(--bd);
  border-radius: 10px;
  margin-bottom: 8px;
}
.usuario-linha.inativo { opacity: .6; }
.usuario-av {
  width: 36px; height: 36px;
  flex: none;
  border-radius: 50%;
  background: var(--avatar-bg);
  color: var(--avatar-fg);
  display: flex; align-items: center; justify-content: center;
  font-weight: 600; font-size: 13px;
}
.usuario-info { flex: 1; min-width: 0; }
.usuario-nome { font-size: 13.5px; font-weight: 600; display: flex; align-items: center; gap: 7px; }
.usuario-login { font-size: 11.5px; color: var(--fg-3); font-weight: 300; }

/* Telefone da pessoa: é para onde o fluxo do n8n manda o aviso de "o lead
   respondeu" (docs/17). Quem não tem cadastrado não recebe nada, então a
   pendência precisa ser visível na lista — não escondida atrás de um clique. */
.usuario-tel {
  font-size: 11.5px;
  color: var(--fg-3);
  font-weight: 300;
  margin-top: 2px;
  display: flex;
  align-items: center;
  gap: 5px;
}
.usuario-tel .tel-pendente {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  color: var(--warn);
  font-weight: 500;
}

.usuario-acoes { display: flex; gap: 6px; flex: none; }
.usuario-acoes button {
  font-size: 12px;
  padding: 6px 11px;
  border-radius: 8px;
  border: 1px solid var(--bd);
  background: var(--surface-2);
  color: var(--fg);
  font-family: inherit;
  display: flex; align-items: center; gap: 6px;
  transition: background-color .15s ease, border-color .15s ease, color .15s ease;
}
.usuario-acoes button:hover { background: var(--surface-3); border-color: var(--bd-strong); }
/* Botão do que está faltando. Amarelo e não vermelho de propósito: é
   pendência de cadastro, não erro — a pessoa continua trabalhando. */
.usuario-acoes button.pendente { color: var(--warn); border-color: var(--warn); background: var(--warn-soft); }
.usuario-acoes button.pendente:hover { background: var(--warn); color: var(--on-brand); }
.usuario-acoes button.danger { color: var(--err); border-color: var(--err-bd); background: var(--err-soft); }
.usuario-acoes button.danger:hover { background: var(--err); color: #fff; }
.tag-eu {
  font-size: 10px; font-weight: 700;
  letter-spacing: .05em; text-transform: uppercase;
  padding: 2px 7px; border-radius: 999px;
  background: var(--brand-soft); color: var(--brand);
  border: 1px solid var(--brand-soft-bd);
}
/* Etiqueta de nível. Três pesos visuais, e nenhum deles vermelho: nível não é
   alerta, é atribuição. Vermelho aqui competiria com "desativado", que é a
   única coisa nesta lista que a pessoa precisa notar de longe. */
.tag-papel {
  font-size: 10px; font-weight: 600;
  letter-spacing: .04em;
  padding: 2px 7px; border-radius: 999px;
  border: 1px solid var(--bd);
  background: var(--surface-3); color: var(--fg-2);
}
.tag-papel-admin { background: var(--brand-soft); color: var(--brand); border-color: var(--brand-soft-bd); }
.tag-papel-gestor { background: var(--info-soft); color: var(--info); border-color: var(--info-bd); }

/* Quem não administra vê a lista e nenhum botão — este é o texto que ocupa
   o lugar deles, para a linha não terminar num vazio inexplicado. */
.usuario-so-leitura { font-size: 11.5px; color: var(--fg-3); font-style: italic; }

.tag-inativo {
  font-size: 10px; font-weight: 600;
  padding: 2px 7px; border-radius: 999px;
  background: var(--surface-3); color: var(--fg-2); border: 1px solid var(--bd);
}
/* formulário de novo usuário / troca de senha */
.equipe-form {
  background: var(--surface);
  border: 1px solid var(--bd);
  border-radius: 10px;
  padding: 16px;
  margin-bottom: 16px;
}
.equipe-form .campos {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 10px;
  margin-bottom: 12px;
}
.equipe-form label { display: block; font-size: 11.5px; font-weight: 500; color: var(--fg-2); margin-bottom: 5px; }
.equipe-form input {
  width: 100%;
  padding: 9px 11px;
  background: var(--surface-2);
  border: 1px solid var(--bd);
  border-radius: 8px;
  font-size: 13px;
  outline: none;
}
.equipe-form .acoes { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.equipe-aviso {
  display: flex; align-items: flex-start; gap: 8px;
  font-size: 11.5px; font-weight: 300; line-height: 1.5;
  padding: 10px 12px; border-radius: 8px; margin-top: 12px;
  background: var(--warn-soft); border: 1px solid var(--warn-bd); color: var(--warn);
}
.equipe-aviso svg.ic { flex: none; margin-top: 1px; }

/* --------------------- DISPARO A PARTIR DA BASE ---------------------------- */
.base-filtros {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 10px;
  margin: 12px 0;
}
.base-filtro span {
  display: block;
  font-size: 11px; font-weight: 500; color: var(--fg-2);
  margin-bottom: 4px;
}
.base-filtro select {
  width: 100%;
  padding: 8px 10px;
  background: var(--surface-2);
  border: 1px solid var(--bd);
  border-radius: 8px;
  font-size: 12.5px;
  outline: none;
}
.base-interesse {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  padding: 10px 12px;
  background: var(--surface-2);
  border: 1px solid var(--bd);
  border-radius: 8px;
  margin-bottom: 12px;
}
.base-interesse-rot { font-size: 11px; font-weight: 500; color: var(--fg-2); }
.base-chk {
  display: flex; align-items: center; gap: 6px;
  font-size: 12.5px; cursor: pointer;
}
.base-chk input { accent-color: var(--brand-solid); width: 15px; height: 15px; cursor: pointer; }
.base-busca { display: flex; gap: 8px; align-items: center; margin-bottom: 12px; }
.base-busca .search-field { flex: 1; }
.base-resumo {
  display: flex; align-items: center; gap: 8px;
  padding: 10px 12px; border-radius: 8px; margin-bottom: 12px;
  font-size: 12.5px;
  background: var(--brand-soft);
  border: 1px solid var(--brand-soft-bd);
  color: var(--brand);
}
.base-resumo b { font-weight: 700; }
.base-resumo.vazio { background: var(--warn-soft); border-color: var(--warn-bd); color: var(--warn); }

/* mapeamento dos parâmetros do template */
.base-params {
  background: var(--surface-2);
  border: 1px solid var(--bd);
  border-radius: 8px;
  padding: 12px 14px;
  margin-bottom: 12px;
}
.base-params h4 { font-size: 12.5px; margin-bottom: 4px; }
.base-params .nota { font-size: 11.5px; color: var(--fg-2); font-weight: 300; margin-bottom: 10px; }
.base-param-linha {
  display: flex; align-items: center; gap: 8px; margin-bottom: 8px; flex-wrap: wrap;
}
.base-param-linha .rot {
  font-size: 12px; font-weight: 600; color: var(--brand);
  min-width: 46px;
}
.base-param-linha select, .base-param-linha input {
  padding: 7px 10px;
  background: var(--surface);
  border: 1px solid var(--bd);
  border-radius: 8px;
  font-size: 12.5px;
  outline: none;
}
.base-param-linha input { flex: 1; min-width: 140px; }

.base-lista-wrap { border: 1px solid var(--bd); border-radius: 8px; overflow: hidden; }
.base-lista-acoes {
  display: flex; align-items: center; gap: 12px;
  padding: 8px 12px;
  background: var(--surface-2);
  border-bottom: 1px solid var(--bd);
}
.base-contagem { margin-left: auto; font-size: 12px; font-weight: 600; color: var(--brand); }
.base-lista { max-height: 260px; overflow-y: auto; background: var(--surface); }
.base-item {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 12px;
  border-bottom: 1px solid var(--bd);
  font-size: 12.5px;
  cursor: pointer;
}
.base-item:last-child { border-bottom: none; }
.base-item:hover { background: var(--surface-2); }
.base-item input { accent-color: var(--brand-solid); width: 15px; height: 15px; flex: none; cursor: pointer; }
.base-item-nome { font-weight: 500; }
.base-item-sub { font-size: 11px; color: var(--fg-3); font-weight: 300; }
.base-item-tags { margin-left: auto; display: flex; gap: 5px; flex: none; }
.base-tag {
  font-size: 10px; font-weight: 600;
  padding: 2px 7px; border-radius: 999px;
  background: var(--surface-3); color: var(--fg-2); border: 1px solid var(--bd);
}
.base-tag.aberta { background: var(--ok-soft); color: var(--ok); border-color: var(--ok-bd); }
.base-tag.alto { background: var(--err-soft); color: var(--err); border-color: var(--err-bd); }
.base-tag.neg { background: var(--err-soft); color: var(--err); border-color: var(--err-bd); }
.base-tag.pos { background: var(--ok-soft); color: var(--ok); border-color: var(--ok-bd); }
.base-param-chave {
  font-size: 11px;
  color: var(--fg-3);
  font-weight: 300;
  min-width: 92px;
}

/* Aviso de assinatura na barra de formatação. Ocupa o lugar da antiga dica do
   sublinhado: a equipe precisa saber que o nome dela vai NA mensagem, não só no
   painel — senão a primeira reação é achar que o cliente está vendo um registro
   interno por engano. */
.fmt-assinatura {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 11px;
  font-weight: 500;
  color: var(--brand);
  background: var(--brand-soft);
  border: 1px solid var(--brand-soft-bd);
  padding: 3px 9px;
  border-radius: 999px;
  white-space: nowrap;
}

/* ==================== PROGRESSO DO ENVIO DE ARQUIVO ====================
   Arquivo grande levava vários segundos sem sinal nenhum na tela e a pessoa
   não sabia se tinha travado. Agora o próprio cartão de anexo mostra o que
   está acontecendo, em duas etapas de natureza diferente:
     - barra com porcentagem  -> bytes subindo do navegador para o painel
     - barra indeterminada    -> painel repassando à Meta (não há como medir) */
.anexo-barra {
  height: 4px;
  margin-top: 6px;
  border-radius: 999px;
  background: var(--surface-3);
  overflow: hidden;
}
.anexo-barra > span {
  display: block;
  height: 100%;
  width: 0;
  border-radius: 999px;
  background: var(--brand-solid);
  transition: width .18s ease-out;
}
/* Etapa 2: sem porcentagem para mostrar, então a barra "corre" para deixar
   claro que algo continua acontecendo — em vez de travar em 100% e parecer
   pendurada. */
.anexo-barra.indeterminada > span {
  width: 100% !important;
  transition: none;
  background: linear-gradient(
    90deg,
    var(--surface-3) 0%,
    var(--brand-solid) 40%,
    var(--brand-solid) 60%,
    var(--surface-3) 100%
  );
  background-size: 220% 100%;
  animation: anexo-correndo 1.1s linear infinite;
}
@keyframes anexo-correndo {
  from { background-position: 120% 0; }
  to   { background-position: -120% 0; }
}
.anexo-bytes { color: var(--fg-3); font-weight: 300; }
.anexo-meta b { font-weight: 600; color: var(--brand); }
.anexo-meta svg[class^="ic-"] { vertical-align: -.15em; color: var(--brand); }

/* durante o envio o cartão fica em destaque e o arquivo não pode ser trocado */
.anexo-card.enviando { border-color: var(--brand-soft-bd); background: var(--brand-soft); }
.anexo-card.enviando .anexo-mini,
.anexo-card.enviando .anexo-icone { opacity: .65; }
/* o ✕ passa a cancelar o envio, então precisa parecer uma ação diferente */
#anexo-remover.cancelar { color: var(--err); }
#anexo-remover.cancelar:hover { background: var(--err-soft); }

/* botão de enviar girando enquanto trabalha */
#send-btn.enviando { pointer-events: none; }
#send-btn.enviando svg[class^="ic-"] { animation: send-girando .9s linear infinite; }
@keyframes send-girando {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

/* Quem escolheu reduzir animações no sistema não deve ver nada girando. A
   informação continua: a porcentagem é texto, não depende de movimento. */
@media (prefers-reduced-motion: reduce) {
  .anexo-barra.indeterminada > span { animation: none; background: var(--brand-solid); }
  #send-btn.enviando svg[class^="ic-"] { animation: none; }
  .anexo-barra > span { transition: none; }
}
/* Aviso de que demorar é esperado — aparece depois de 3s ainda em voo. Não
   adivinha etapa nenhuma: só evita que a tela pareça travada. */
.anexo-lento { color: var(--fg-3); font-weight: 300; font-style: italic; }

/* ============================================================
   CRM — funil de oportunidades
   ------------------------------------------------------------
   Kanban de colunas fixas com rolagem horizontal. Cada coluna rola sozinha na
   vertical: com 200 leads importados, uma coluna longa não pode empurrar a
   página inteira e esconder as outras etapas.
   ============================================================ */
/* .view já traz flex/flex:1; aqui só o min-height, que é o que permite as
   colunas rolarem sozinhas em vez de esticar a página. */
#crm-view { min-height: 0; }
#crm-area { flex: 1; display: flex; flex-direction: column; min-width: 0; min-height: 0; }

.crm-topo { gap: 16px; flex-wrap: wrap; }
.crm-topo-esq { display: flex; align-items: baseline; gap: 10px; min-width: 0; }
.crm-topo-esq h2 { font-size: 16px; font-weight: 600; }
.crm-resumo { font-size: 12.5px; color: var(--fg-2); }
.crm-topo-dir { display: flex; align-items: center; gap: 10px; }
.crm-filtro { display: flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--fg-2); }

/* O estilo base de select no painel mora em `.modal-body select` — ou seja, só
   vale dentro de modal. A barra do CRM não é modal, então estes select caíam no
   controle NATIVO do sistema: branco no tema escuro e com a seta do Windows.
   Mesmas declarações do modelo já usado em `.base-filtro select`. */
/* Especificidade calibrada de propósito: `.modal-body select` é 0-1-1 e
   `.modal-body input[type="text"]` é 0-2-1. Um `.crm-admin-tipo` solto (0-1-0)
   perdia e o select da lista herdava a métrica GRANDE do formulário — 47px de
   altura e fonte 15 numa lista de 7 linhas. O modal de administração é um painel
   denso, não um formulário: controle compacto é o certo lá. */
.crm-filtro select,
.crm-admin-item .crm-admin-tipo,
.crm-admin-novo select,
.crm-admin-novo input[type="text"] {
  padding: 6px 10px;
  background: var(--surface-2);
  color: var(--fg);
  border: 1px solid var(--bd);
  border-radius: 8px;
  font-size: 13px;
  font-family: inherit;
  line-height: 1.5;
  outline: none;
}
.crm-filtro select:hover,
.crm-admin-item .crm-admin-tipo:hover,
.crm-admin-novo select:hover,
.crm-admin-novo input[type="text"]:hover { border-color: var(--bd-strong); }

/* o botão da linha acompanha a altura dos campos compactos ao lado */
.crm-admin-novo .secondary-btn { padding: 6px 12px; font-size: 13px; }

.crm-filtro select { width: auto; min-width: 160px; }

.crm-kanban {
  flex: 1;
  display: flex;
  gap: 12px;
  padding: 14px 16px;
  overflow-x: auto;
  overflow-y: hidden;
  align-items: stretch;
  min-height: 0;
}

.crm-col {
  display: flex;
  flex-direction: column;
  min-width: 264px;
  width: 264px;
  background: var(--surface-2);
  border: 1px solid var(--bd);
  border-radius: 10px;
  min-height: 0;
}

.crm-col-topo {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
  border-bottom: 1px solid var(--bd);
}
.crm-col-nome { font-size: 13px; font-weight: 600; }
.crm-col-contagem {
  font-size: 11.5px; font-weight: 600; color: var(--fg-2);
  background: var(--surface-3); border-radius: 20px; padding: 1px 8px;
}
.crm-col-soma { margin-left: auto; font-size: 11.5px; color: var(--fg-2); }

.crm-col-cards {
  flex: 1;
  overflow-y: auto;
  padding: 10px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  /* área de drop precisa existir mesmo com a coluna vazia, senão não há
     onde soltar o primeiro card */
  min-height: 60px;
}
.crm-col-cards.alvo { background: var(--brand-soft); }

.crm-card {
  background: var(--surface);
  border: 1px solid var(--bd);
  border-radius: 8px;
  padding: 10px;
  cursor: grab;
  box-shadow: var(--shadow-1);
}
.crm-card:hover { border-color: var(--bd-strong); }
.crm-card.arrastando { opacity: .45; cursor: grabbing; }
/* próximo passo vencido: a borda esquerda é o aviso, não uma cor de fundo que
   competiria com as etiquetas do rodapé */
.crm-card.atrasado { border-left: 3px solid var(--err); }

.crm-card-titulo { font-size: 13.5px; font-weight: 600; line-height: 1.3; }
.crm-card-contato {
  display: flex; align-items: center; gap: 5px;
  font-size: 12px; color: var(--fg-2); margin-top: 4px;
}
.crm-card-valor { font-size: 13px; font-weight: 600; color: var(--brand); margin-top: 5px; }
.crm-card-passo { font-size: 12px; color: var(--fg-2); margin-top: 6px; line-height: 1.35; }
.crm-card-rodape { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 8px; }

.crm-tag {
  display: inline-flex; align-items: center; gap: 3px;
  font-size: 10.5px; font-weight: 500; padding: 2px 7px; border-radius: 20px;
  background: var(--surface-3); color: var(--fg-2);
}
.crm-tag.ia-alto      { background: var(--ok-soft);    color: var(--ok); }
.crm-tag.ia-medio     { background: var(--warn-soft);  color: var(--warn); }
.crm-tag.ia-baixo,
.crm-tag.ia-sem_resposta { background: var(--surface-3); color: var(--fg-3); }
.crm-tag.ia-alerta    { background: var(--err-soft);   color: var(--err); }
.crm-tag.resp         { background: var(--brand-soft); color: var(--brand); }
.crm-tag.naolida      { background: var(--info-soft);  color: var(--info); }

.crm-vazio {
  padding: 32px 20px; text-align: center; color: var(--fg-2); font-size: 14px; line-height: 1.6;
}

/* ---- ficha da oportunidade ---- */
.crm-modal-contato { font-size: 13px; color: var(--fg-2); margin-bottom: 12px; }
.crm-janela-ok  { color: var(--ok); }
.crm-janela-off { color: var(--fg-3); }

/* Bloco da IA: superfície diferente para deixar óbvio que ali ninguém edita. */
.crm-ia-bloco {
  background: var(--surface-2);
  border: 1px dashed var(--bd-strong);
  border-radius: 8px;
  padding: 10px 12px;
  margin-bottom: 14px;
  font-size: 12.5px;
  line-height: 1.55;
  color: var(--fg-2);
}
.crm-ia-rotulo {
  display: flex; align-items: center; gap: 5px;
  font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .04em;
  color: var(--fg-3); margin-bottom: 6px;
}

.crm-form-linha { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
@media (max-width: 520px) { .crm-form-linha { grid-template-columns: 1fr; } }

.crm-acoes {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 18px;
}
.crm-acoes button { width: auto; }
/* .secondary-btn traz margin-top: 10px para quando é o único botão da coluna.
   Numa linha lado a lado isso desalinhava a base dos botões. */
.crm-acoes .secondary-btn { margin-top: 0; }

/* Salvar era um <button> sem classe nenhuma: caía no controle NATIVO — caixa
   branca sem texto visível no tema escuro (é o retângulo vazio do print).
   Mesmo visual dos primários do painel (#contact-save-btn e companhia), só sem
   o width:100% deles, porque aqui divide a linha com outros dois. */
#crm-salvar {
  padding: 9px 18px;
  background: var(--brand-solid);
  color: var(--on-brand);
  border: 1px solid var(--brand-solid);
  border-radius: 8px;
  font-size: 13.5px;
  font-weight: 600;
}
#crm-salvar:hover { background: var(--brand-solid-hover); border-color: var(--brand-solid-hover); }
#crm-salvar:disabled { opacity: .6; cursor: default; }

/* Excluir mantém a forma de secundário, mas em vermelho inteiro — borda azul
   com texto vermelho lia como erro de estilo, não como ação destrutiva. */
.crm-excluir { color: var(--err); border-color: var(--err-bd); }
.crm-excluir:hover { background: var(--err-soft); border-color: var(--err); }

.crm-historico { margin-top: 18px; }
.crm-hist-titulo {
  font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .04em;
  color: var(--fg-3); margin-bottom: 6px;
}
.crm-hist-linha {
  display: flex; justify-content: space-between; gap: 12px;
  font-size: 12px; color: var(--fg-2); padding: 4px 0;
  border-bottom: 1px solid var(--bd);
}
.crm-hist-linha span { color: var(--fg-3); white-space: nowrap; font-size: 11px; }

/* ---- CRM: funis, procedência e automação ---- */
/* Etapas terminais recebem um traço no topo da coluna: com vários funis, cada
   um com nomes próprios de etapa, a cor é o que diz "aqui fecha" sem depender
   de a pessoa ler "Ganho" ou "Descartado". */
.crm-col.tipo-ganho   .crm-col-topo { box-shadow: inset 0 2px 0 var(--ok); }
.crm-col.tipo-perdido .crm-col-topo { box-shadow: inset 0 2px 0 var(--err); }

/* Card cuja etapa ainda é da automação. Não é alerta — é aviso de que aquela
   posição pode mudar sozinha até alguém arrastar o card. */
.crm-tag.auto { background: var(--brand-soft); color: var(--fg-2); border: 1px dashed var(--brand-soft-bd); }

.crm-modal-origem {
  font-size: 12px;
  color: var(--fg-3);
  margin: -6px 0 14px;
  line-height: 1.5;
}
.crm-modal-origem a { color: var(--brand); }

/* Linha de histórico feita por automação: recuada e mais apagada, para a leitura
   separar de imediato o que o agente fez do que a equipe fez. */
.crm-hist-linha.auto { padding-left: 10px; border-left: 2px solid var(--bd-strong); opacity: .8; }

/* ---- CRM: administração de funis e etapas ---- */
.crm-admin-corpo {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.35fr);
  gap: 18px;
  margin: 14px 0;
}
@media (max-width: 720px) { .crm-admin-corpo { grid-template-columns: 1fr; } }

.crm-admin-titulo {
  font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .04em;
  color: var(--fg-3); margin-bottom: 8px;
}
.crm-admin-lista {
  border: 1px solid var(--bd);
  border-radius: 8px;
  max-height: 300px;
  overflow-y: auto;
  background: var(--surface);
}
.crm-admin-item {
  display: flex; align-items: center; gap: 6px;
  padding: 6px 8px;
  border-bottom: 1px solid var(--bd);
  font-size: 13px;
}
.crm-admin-item:last-child { border-bottom: none; }
/* o funil aberto no momento fica marcado por uma barra da marca, não por cor de
   fundo — a lista já é densa e fundo colorido competiria com as etiquetas */
.crm-admin-item.selecionado { box-shadow: inset 3px 0 0 var(--brand); background: var(--brand-soft); }

/* Nome e chave EMPILHADOS, não lado a lado: em linha, os dois competiam pela
   mesma largura e "Serviços Gabillaud" virava "S". Empilhado, cada um tem a
   linha inteira e o nome só reticencia se for muito longo mesmo. */
.crm-admin-escolher {
  flex: 1; min-width: 0;
  display: flex; flex-direction: column; align-items: flex-start; gap: 1px;
  background: none; border: none; padding: 0; width: auto;
  text-align: left; cursor: pointer; color: inherit; font: inherit;
}
.crm-admin-nome {
  max-width: 100%;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.crm-admin-item > .crm-admin-nome { flex: 1; min-width: 0; }
/* a chave é contrato com o n8n: fica à vista, em monoespaçado, e não é editável */
.crm-admin-chave {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 10.5px; color: var(--fg-3); white-space: nowrap;
}
.crm-admin-contagem {
  font-size: 10.5px; font-weight: 600; color: var(--fg-2);
  background: var(--surface-3); border-radius: 20px; padding: 1px 7px;
}
/* Especificidade de propósito: `.modal-body select { width: 100% }` (0-1-1) vence
   um `.crm-admin-tipo` solto (0-1-0), e o select esticava para a linha inteira.
   `.crm-admin-item .crm-admin-tipo` (0-2-0) ganha.
   `flex: none` + min-width param o encolhimento que mostrava "em ab" / "em abe". */
.crm-admin-item .crm-admin-tipo {
  width: auto;
  min-width: 116px;
  flex: none;
}

.crm-admin-mover { display: flex; flex-direction: column; }
.crm-admin-acao {
  background: none; border: none; width: auto; padding: 3px;
  color: var(--fg-2); cursor: pointer; line-height: 1;
}
.crm-admin-acao:hover:not(:disabled) { color: var(--brand); }
.crm-admin-acao:disabled { opacity: .3; cursor: default; }
.crm-admin-acao.perigo:hover { color: var(--err); }

.crm-admin-novo { display: flex; align-items: center; gap: 6px; margin-top: 10px; }
.crm-admin-novo input { flex: 1; min-width: 0; margin-bottom: 0; }
.crm-admin-novo select { width: auto; }
.crm-admin-novo button { width: auto; white-space: nowrap; }
/* mesma razão do .crm-acoes: numa linha, o margin-top do secundário desalinha */
.crm-admin-novo .secondary-btn { margin-top: 0; }
/* etiqueta da campanha no card: é o que identifica de qual disparo o lead veio */
.crm-tag.campanha { background: var(--surface-3); color: var(--fg-2); max-width: 160px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }