/* =============================================================
   CLIENTES — busca e lista de todo mundo
   ============================================================= */

/* ---------- campo de busca ---------- */
.busca{
  position:relative;
  display:flex;
  align-items:center;
  margin-bottom:var(--s3);
}
.busca input{
  padding-left:var(--s8);
  padding-right:var(--s8);
  background:var(--card);
  border-radius:var(--r-full);
}
.busca input::-webkit-search-cancel-button{display:none}

.busca .lupa{
  position:absolute;
  left:var(--s4);
  width:17px;height:17px;
  color:var(--fg-2);
  pointer-events:none;
}
.busca .lupa svg{width:100%;height:100%;display:block}

.busca .limpa{
  position:absolute;
  right:var(--s1);
  width:var(--tap);height:var(--tap);
  display:grid;place-items:center;
  border:none;
  background:none;
  color:var(--fg-2);
  cursor:pointer;
  border-radius:50%;
}
.busca .limpa:hover{color:var(--fg);background:var(--bg-sunk)}
.busca .limpa svg{width:15px;height:15px;display:block}
.busca .limpa[hidden]{display:none}

/* ---------- uma pessoa ---------- */
.pessoa{
  display:flex;
  align-items:stretch;
  gap:var(--s3);
  width:100%;
  text-align:left;
  font:inherit;
  color:inherit;
  cursor:pointer;
  background:none;
  border:none;
  border-bottom:1px solid var(--edge-2);
  padding:var(--s3) var(--s5);
  transition:background var(--t1) var(--ease);
}
.pessoa:last-child{border-bottom:none}
.pessoa:hover{background:var(--card-2)}
.pessoa:active{background:var(--bg-sunk)}

.pe-temp{
  width:4px;
  border-radius:var(--r-full);
  flex:none;
  background:var(--t-fria);
}
.pe-temp.t-quente{background:var(--t-quente)}
.pe-temp.t-morna {background:var(--t-morna)}
.pe-temp.t-fria  {background:var(--t-fria)}

.pe-info{flex:1;min-width:0;display:flex;flex-direction:column;gap:3px}

.pe-topo{
  display:flex;
  justify-content:space-between;
  align-items:baseline;
  gap:var(--s3);
}
.pe-nome{font-weight:600;font-size:var(--fs-md);letter-spacing:var(--ls-tight)}
.pe-quando{font-size:var(--fs-tiny);color:var(--fg-2);flex:none}

.pe-det{
  font-size:var(--fs-sm);
  color:var(--fg-2);
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

.pe-chips{display:flex;gap:var(--s1);flex-wrap:wrap;margin-top:2px}
.chip.ok   {background:var(--go-soft);  color:var(--go-fg);   font-weight:600}
.chip.falta{background:var(--warn-soft);color:var(--warn-fg); font-weight:600}
.chip.val  {background:var(--bg-sunk);  color:var(--fg);      font-weight:600}

/* =============================================================
   ADICIONAR QUEM JÁ É CLIENTE

   O campo de contexto é o mais importante da tela: é ele que faz o
   agente falar como quem já conhece a pessoa. Por isso é o maior —
   campo pequeno convida resposta curta, e resposta curta aqui
   significa agente sem memória.
   ============================================================= */

#cn-resumo{min-height:150px}

/* O exemplo tem quatro linhas de propósito: mostra o TIPO de coisa
   que vale escrever. Cortado no meio, ensina errado. */
#cn-resumo::placeholder{line-height:1.5}