/* ── Tela Conversas: Live Chat ──────────────────────────────────── */
.inbox {
  display: flex;
  height: calc(100vh - 80px);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  overflow: hidden;
  box-shadow: var(--shadow-md);
  background: var(--panel-bg);
}

/* ── Lista de conversas ─────────────────────────────────────────── */
.inbox__lista {
  width: 300px;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  border-right: 1px solid var(--border);
  background: var(--panel-bg-hover);
}
.inbox__lista-topo {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 14px 16px;
  border-bottom: 1px solid var(--border);
}
.inbox__lista-titulo { font-size: 16px; font-weight: 600; }
.inbox__simular { font-size: 12px; padding: 5px 9px; }

.inbox__conversas { flex: 1; overflow-y: auto; }

.inbox__conversa {
  display: flex;
  gap: 10px;
  align-items: center;
  padding: 12px 16px;
  cursor: pointer;
  border-bottom: 1px solid var(--border);
  transition: background 0.12s ease;
}
.inbox__conversa:hover { background: var(--panel-bg-hover); }
.inbox__conversa--ativa { background: var(--accent-soft); box-shadow: inset 3px 0 0 var(--accent); }

.inbox__avatar {
  width: 42px; height: 42px; min-width: 42px;
  border-radius: 13px;
  background: linear-gradient(140deg, var(--accent-soft), rgba(19,192,138,0.16));
  border: 1px solid rgba(19,192,138,0.16);
  display: flex; align-items: center; justify-content: center;
  font-weight: 700; color: var(--accent-strong);
}
.inbox__conversa-info { flex: 1; min-width: 0; }
.inbox__conversa-linha1 {
  display: flex; justify-content: space-between; gap: 8px; align-items: baseline;
}
.inbox__conversa-nome {
  font-size: 14px; font-weight: 600;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.inbox__conversa-hora { font-size: 11px; color: var(--text-muted); flex-shrink: 0; }
.inbox__conversa-previa {
  display: flex; justify-content: space-between; gap: 8px; align-items: center; margin-top: 2px;
}
.inbox__conversa-texto {
  font-size: 13px; color: var(--text-muted);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.inbox__badge {
  background: var(--accent); color: #fff;
  font-size: 11px; font-weight: 700;
  min-width: 18px; height: 18px; padding: 0 5px;
  border-radius: 999px;
  display: inline-flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}

/* ── Tags (etapa + canal) no card da conversa ───────────────────── */
.inbox__conversa-tags {
  display: flex; flex-wrap: wrap; gap: 4px;
  margin-top: 4px;
}

/* Selo de setor: ainda emitido pela lista do modal Equipe (gerência) */
.inbox__setor {
  display: inline-flex; align-items: center;
  font-size: 10px; font-weight: 600;
  color: #fff;
  padding: 2px 7px;
  border-radius: 999px;
  white-space: nowrap;
  letter-spacing: 0.01em;
}

/* ── Contagem de conversas no topo ──────────────────────────────── */
.inbox__contagem {
  font-size: 11px; font-weight: 600;
  color: var(--text-muted);
  background: var(--bg);
  border: 1px solid var(--border);
  padding: 2px 8px; border-radius: 999px;
  white-space: nowrap; flex-shrink: 0;
}

/* ── Filtros do painel esquerdo: busca + conta + etapa + lidas ───── */
.inbox__filtros {
  padding: 10px 16px;
  border-bottom: 1px solid var(--border);
  display: flex; flex-direction: column; gap: 8px;
  background: var(--panel-bg-hover);
}
.inbox__busca {
  width: 100%;
  font: inherit; font-size: 13px;
  padding: 7px 10px;
  border: 1px solid var(--border-strong);
  border-radius: var(--r-md);
  background: var(--panel-bg);
  color: var(--text);
}
.inbox__busca:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-ring); }

.inbox__filtros-linha { display: flex; gap: 8px; }
.inbox__filtro-sel {
  flex: 1; min-width: 0;
  font: inherit; font-size: 12px;
  padding: 5px 8px;
  border: 1px solid var(--border-strong);
  border-radius: var(--r-md);
  background: var(--panel-bg);
  color: var(--text);
  cursor: pointer;
}
.inbox__filtro-sel:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-ring); }

.inbox__chips { display: flex; gap: 6px; }
.inbox__chip {
  font: inherit; font-size: 12px; font-weight: 600;
  padding: 4px 12px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--panel-bg);
  color: var(--text-muted);
  cursor: pointer;
  transition: background 0.14s ease, color 0.14s ease, border-color 0.14s ease;
}
.inbox__chip:hover { border-color: var(--border-strong); }
.inbox__chip.is-ativo { background: var(--accent-soft); color: var(--accent-strong); border-color: var(--accent); }

/* Selo da etapa do funil no card da conversa */
.inbox__etapa-selo {
  display: inline-flex; align-items: center;
  font-size: 10px; font-weight: 600;
  color: var(--accent-strong);
  background: var(--accent-soft);
  padding: 2px 7px; border-radius: 999px;
  white-space: nowrap;
}

/* ── Botão equipe ───────────────────────────────────────────────── */
#inbox-equipe {
  font-size: 12px; padding: 5px 9px; flex-shrink: 0;
}

/* ── Painel de chat ─────────────────────────────────────────────── */
.inbox__chat { flex: 1; display: flex; flex-direction: column; min-width: 0; background: var(--panel-bg); }
.inbox__vazio-chat {
  flex: 1; display: flex; align-items: center; justify-content: center;
  color: var(--text-muted); font-size: 14px;
}
.inbox__vazio-chat[hidden] { display: none; }
.inbox__ativa[hidden] { display: none; }
.inbox__ativa { flex: 1; display: flex; flex-direction: column; min-height: 0; }

.inbox__chat-topo {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 12px 18px;
  border-bottom: 1px solid var(--border);
}
.inbox__chat-nome { font-size: 15px; font-weight: 600; display: block; }
.inbox__chat-numero { font-size: 12px; color: var(--text-muted); }

/* Linha de contexto do lead no topo do chat: etapa, conta, tags, variáveis */
.inbox__chat-meta {
  display: flex; flex-wrap: wrap; gap: 5px;
  margin-top: 5px;
}
.inbox__chat-meta:empty { display: none; }
.inbox__chat-meta > span {
  font-size: 10.5px; font-weight: 600;
  padding: 2px 7px; border-radius: 999px;
  white-space: nowrap;
}
.inbox__meta-etapa { background: var(--accent-soft); color: var(--accent-strong); }
.inbox__meta-conta { background: rgba(37,99,235,0.14); color: #2563eb; }
.inbox__meta-tag   { background: var(--bg); border: 1px solid var(--border); color: var(--text-muted); }
.inbox__meta-var   { background: rgba(217,119,6,0.12); color: #d97706; font-weight: 500; }

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

/* Toggle da IA */
.inbox__ia-toggle { display: inline-flex; cursor: pointer; user-select: none; }
.inbox__ia-toggle input { position: absolute; opacity: 0; pointer-events: none; }
.inbox__ia-pill {
  font-size: 12px; font-weight: 600;
  padding: 4px 10px; border-radius: 999px;
  border: 1px solid var(--border-strong);
  background: var(--panel-bg); color: var(--text-muted);
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.inbox__ia-toggle input:checked + .inbox__ia-pill {
  background: rgba(19,192,138,0.14); color: #34d399; border-color: #a7f3d0;
}
.inbox__ia-toggle input:focus-visible + .inbox__ia-pill { outline: 2px solid var(--accent); outline-offset: 2px; }

.inbox__janela {
  font-size: 12px; font-weight: 600;
  padding: 4px 10px; border-radius: 999px;
  white-space: nowrap;
}
.inbox__janela--aberta { background: rgba(19,192,138,0.16); color: #34d399; }
.inbox__janela--fechada { background: rgba(217,119,6,0.16); color: #fbbf24; }

/* Mensagens */
.inbox__mensagens {
  flex: 1; overflow-y: auto;
  padding: 18px;
  display: flex; flex-direction: column; gap: 8px;
  background: var(--panel-bg-hover);
}
.inbox__msg {
  max-width: 72%;
  padding: 8px 12px;
  border-radius: 12px;
  font-size: 14px;
  line-height: 1.4;
  word-wrap: break-word;
  white-space: pre-wrap;
}
.inbox__msg-hora { font-size: 10px; color: var(--text-muted); margin-top: 3px; text-align: right; }
.inbox__msg--entrada {
  align-self: flex-start;
  background: var(--panel-bg);
  border: 1px solid var(--border);
  box-shadow: 0 1px 1px rgba(15, 23, 32, 0.05);
  border-bottom-left-radius: 4px;
}
.inbox__msg--saida {
  align-self: flex-end;
  background: #123a2c;
  border: 1px solid #b9f0af;
  border-bottom-right-radius: 4px;
}
.inbox__msg--falhou { background: rgba(220,38,38,0.15); border-color: #fecaca; }
.inbox__msg--falhou .inbox__msg-hora { color: #dc2626; }

/* Mídia recebida/enviada dentro do balão: foto, vídeo, áudio, documento */
.inbox__msg-midia {
  display: block;
  max-width: 240px; max-height: 320px;
  width: auto; height: auto;
  border-radius: 10px;
  margin-bottom: 4px;
  background: var(--bg);
}
.inbox__msg audio { display: block; max-width: 240px; margin-bottom: 4px; }
.inbox__msg-doc {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 13px; font-weight: 600;
  color: var(--accent-strong); text-decoration: none;
  padding: 6px 4px;
}
.inbox__msg-doc:hover { text-decoration: underline; }
.inbox__msg-texto { white-space: pre-wrap; word-wrap: break-word; }

/* Confirmação de entrega por mensagem. "aguardando" (aceito, sem confirmação)
   é neutro/âmbar — NÃO é sucesso; só entregue/lido ficam verdes. */
.inbox__msg-status { font-weight: 600; cursor: help; }
.inbox__msg-status--enviado,
.inbox__msg-status--pendente  { color: #d97706; }
.inbox__msg-status--entregue  { color: var(--accent-strong); }
.inbox__msg-status--lido      { color: #2563eb; }
.inbox__msg-status--falhou    { color: #dc2626; }

/* Composer */
.inbox__composer {
  display: flex; gap: 10px; align-items: flex-end;
  padding: 12px 16px;
  border-top: 1px solid var(--border);
}
.inbox__texto {
  flex: 1;
  font: inherit; font-size: 14px;
  padding: 11px 14px;
  border: 1px solid var(--border-strong);
  border-radius: 22px;
  background: var(--bg);
  resize: none;
  max-height: 120px;
}
.inbox__texto:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-ring); background: var(--panel-bg); }

.inbox__simular-aviso { font-size: 12px; color: var(--text-muted); margin-bottom: 4px; }

/* ── Modal Equipe ───────────────────────────────────────────────── */
.equipe__secao {
  margin-bottom: 24px;
}
.equipe__secao-titulo {
  font-size: 14px; font-weight: 600;
  margin: 0 0 12px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--border);
}

.equipe__item {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 7px 0;
  border-bottom: 1px solid var(--border);
}
.equipe__item:last-child { border-bottom: none; }

.equipe__nome {
  font-size: 13px; color: var(--text);
}

.equipe__vazio {
  font-size: 13px; color: var(--text-muted);
  margin: 8px 0;
}

#lista-setores,
#lista-atendentes {
  margin-bottom: 16px;
}

/* Passo do fluxo em andamento, no cabeçalho do chat */
.inbox__chat-fluxo {
  display: inline-block;
  margin-left: 8px;
  font-size: 11.5px;
  color: var(--accent-strong);
  background: var(--accent-soft);
  border-radius: 6px;
  padding: 2px 8px;
  vertical-align: middle;
}
.inbox__chat-fluxo[hidden] { display: none; }

/* Selo de canal (API vs QR) na lista de conversas */
.inbox__canal-selo {
  display: inline-block; font-size: 10.5px; font-weight: 600;
  border-radius: 5px; padding: 1px 6px;
}
.inbox__canal-selo--api { background: rgba(19,192,138,0.16); color: var(--accent-strong); }
.inbox__canal-selo--web { background: rgba(217,119,6,0.16); color: #fbbf24; }

/* Filtros de mensagem no chat: Todas / Enviadas / Recebidas (item 2/10). */
.inbox__msg-filtros {
  display: flex;
  gap: 6px;
  padding: 8px 16px 0;
}
.inbox__msg-filtro {
  font: inherit;
  font-size: 12px;
  font-weight: 600;
  padding: 4px 12px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--panel-bg);
  color: var(--text-muted);
  cursor: pointer;
  transition: background 0.14s ease, color 0.14s ease, border-color 0.14s ease;
}
.inbox__msg-filtro:hover { border-color: var(--border-strong); }
.inbox__msg-filtro.is-ativo { background: var(--accent-soft); color: var(--accent-strong); border-color: var(--accent); }
.inbox__msg-vazio { color: var(--text-muted); text-align: center; padding: 24px 16px; font-size: 13px; }