/* ============================================================
   FEEDBACK — botão flutuante que abre o modal de envio. Fica à
   esquerda pra não sobrepor o launcher do Intercom (canto direito).
   ============================================================ */
.feedback-flutuante {
  position: fixed;
  left: 24px;
  bottom: 24px;
  z-index: 40;
}

.feedback-flutuante__gatilho {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 44px;
  padding: 0 18px;
  border-radius: 999px;
  border: none;
  background: var(--azul);
  color: var(--sobre-cor);
  font-size: 13px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.18);
}
.feedback-flutuante__gatilho:hover {
  background-color: var(--azul-hover);
}

/* ── Listagem admin ─────────────────────────────────────── */
/* Largura de coluna fixa (ver colgroup na view): numa tabela auto-layout
   o max-width do td não trava a coluna quando o conteúdo é uma palavra
   sem espaço — o navegador estica a coluna inteira antes de quebrar.
   Com as colunas fixas, só falta permitir a quebra dentro delas. */
.tabela--feedbacks {
  table-layout: fixed;
}

.feedback-titulo {
  font-weight: 600;
  color: var(--texto);
}
/* .tabela td já é "white-space: nowrap" com especificidade (classe+tag) —
   uma classe sozinha (.feedback-mensagem) empata em peso e perde para a
   regra mais específica independente da ordem no arquivo. .tabela
   td.feedback-mensagem sobe a especificidade pra vencer de verdade. */
.tabela td.feedback-mensagem,
.tabela td.feedback-celula-quebra {
  white-space: normal;
  overflow-wrap: anywhere;
  line-height: 1.5;
}
.feedback-mensagem p + p {
  margin-top: 4px;
}
/* Prévia de 1 linha na lista — o texto completo só aparece no modal de
   detalhe (clique na célula). Aplica direto no <p>: sobrepõe o
   white-space:normal herdado do td.feedback-mensagem sem precisar de
   mais especificidade (regra direta no elemento sempre vence herança). */
.feedback-mensagem-previa {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.feedback-clicavel {
  cursor: pointer;
}
.feedback-clicavel:hover .feedback-titulo {
  text-decoration: underline;
}

/* Select de status colorido (substitui chip + botão "Salvar": troca o
   valor já salva sozinho via auto-submit_controller). As cores espelham
   .chip--info/--alerta/--sucesso/--neutro (componentes/badges.css) pra
   ler igual em qualquer lugar do admin. select.chip-select sobe a
   especificidade sobre .filtro-select (min-width:180px, carrega depois
   em paginas/admin-metricas.css e empataria por ordem). */
select.chip-select {
  height: 32px;
  width: 100%;
  min-width: 0;
  border-radius: 8px;
  padding: 0 8px;
  font-size: 12.5px;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
}
.chip-select--novo {
  background: var(--azul-suave);
  color: var(--marca-texto);
  border: 1px solid var(--color-primary-border);
}
.chip-select--em_analise {
  background: var(--color-warning-soft);
  color: var(--color-warning);
  border: 1px solid var(--color-warning-border);
}
.chip-select--implementado {
  background: var(--sucesso-suave);
  color: var(--sucesso-texto);
  border: 1px solid var(--sucesso-borda);
}
.chip-select--recusado {
  background: var(--sup-hover);
  color: var(--txt-3);
  border: 1px solid var(--linha);
}

/* Toggle de visualização (Lista/Kanban) — de propósito não usa o
   componente .aba (layout.css): aquilo é navegação entre conteúdos
   diferentes, isto é a mesma coleção só exibida de outro jeito. Visual de
   segmented control, não de tab estrip. */
.visualizacao {
  display: inline-flex;
  background: var(--color-bg-subtle);
  border: 1px solid var(--color-border-light);
  border-radius: 8px;
  padding: 3px;
  gap: 2px;
  flex-shrink: 0;
}
.visualizacao__opcao {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 30px;
  padding: 0 12px;
  border-radius: 6px;
  border: none;
  background: transparent;
  color: var(--texto-suave);
  font-size: 13px;
  cursor: pointer;
}
.visualizacao__opcao--ativa {
  background: var(--sup);
  color: var(--texto);
  font-weight: 600 !important;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08);
}

/* Modal de detalhe: tamanho fixo (não cresce/encolhe com o tamanho da
   mensagem) — o corpo é que rola por dentro. flex:1 + min-height:0 no
   corpo é o que permite esse scroll dentro de uma altura fixa (sem
   min-height:0 um filho flex não encolhe abaixo do próprio conteúdo, e o
   scroll nunca entra em ação — ele simplesmente estoura o modal). Largura
   e altura ficam entre .modal-caixa--medalha (560) e .ap-modal-caixa--usuario
   (680) — a escala de modais "grandes" que já existe no admin.
   max-width (não width): a base .modal-caixa já tem max-width:420px, que
   sempre vence um width maior — é assim que .modal-caixa--larga faz, e é
   o motivo do modal não ter ficado mais largo antes desse ajuste. */
.modal-caixa--feedback {
  max-width: 600px;
  height: 640px;
}
.modal-caixa--feedback .modal-corpo {
  flex: 1;
  min-height: 0;
}
/* Select de status: agora mora no cabeçalho (ao lado do fechar), não
   precisa ocupar a largura toda (isso é coisa da coluna estreita da
   lista) nem ser tão alto quanto na tabela. */
.modal-caixa--feedback select.chip-select {
  width: auto;
  min-width: 150px;
  height: 30px;
}

/* Bloco de identidade (cliente): reaproveita .ap-card-cabecalho (mesmo
   padrão de destaque de nome usado em admin/usuarios/show), só que dentro
   do .modal-corpo — que já tem padding próprio. Margem negativa (mesmo
   truque de .modal-corpo .acoes-form em componentes/modais.css) estica o
   card até a borda do modal, pra a linha divisória ficar de ponta a
   ponta como no cabeçalho. Seletor combinado (duas classes) porque
   feedback.css carrega antes de admin-pessoas.css — precisa de mais
   especificidade pra vencer o gap/padding padrão do .ap-card-cabecalho. */
.ap-card-cabecalho.feedback-detalhe-identidade {
  margin: -20px -24px 0;
  padding: 20px 24px 16px;
  gap: 12px;
}
.feedback-detalhe-avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--azul);
  color: var(--sobre-cor);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  font-size: 14px;
  font-weight: 700;
}

/* Mensagem completa: preserva quebras de linha que o cliente digitou (a
   textarea do formulário aceita várias linhas). */
.feedback-detalhe-mensagem {
  white-space: pre-wrap;
  line-height: 1.6;
  color: var(--texto);
}

/* ── Kanban ─────────────────────────────────────────────── */
.kanban {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  overflow-x: auto;
  padding-bottom: 4px;
}

.kanban-coluna {
  flex: 1 0 260px;
  max-width: 320px;
  background: var(--color-bg-subtle);
  border: 1px solid var(--color-border-light);
  border-radius: 10px;
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.kanban-coluna__cabecalho {
  padding: 0 2px;
}

.kanban-coluna__contador {
  font-size: 12.5px;
  color: var(--texto-suave);
  font-weight: 600;
}

.kanban-coluna__cartoes {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-height: 60px;
  /* min-height garante alvo pra soltar um card mesmo com a coluna vazia */
}

.kanban-card {
  background: var(--sup);
  border: 1px solid var(--color-border-light);
  border-radius: 8px;
  padding: 10px 12px;
  cursor: grab;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
}
.kanban-card:active {
  cursor: grabbing;
}
.kanban-card--fantasma {
  opacity: 0.4;
}

.kanban-card__titulo {
  font-size: 13px;
  font-weight: 600;
  color: var(--texto);
  margin-bottom: 4px;
}

.kanban-card__mensagem {
  font-size: 12.5px;
  color: var(--texto-suave);
  line-height: 1.4;
  /* Prévia de 2 linhas — clicar no card abre o modal com o texto
     completo (ver feedback_detalhe_controller). */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.kanban-card__rodape {
  margin-top: 8px;
  gap: 8px;
}
.kanban-card__rodape span {
  font-size: 11px;
}
.kanban-card__rodape span:first-child {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Hover da opção Lista/Kanban que não está ativa */
.visualizacao__opcao { transition: color 0.12s, background 0.12s; }
.visualizacao__opcao:not(.visualizacao__opcao--ativa):hover {
  color: var(--texto);
  background: var(--sup-hover);
}