/* =============================================================
   COM VOCÊ — conversas em que o agente está calado
   ============================================================= */

.pcard{
  display:grid;
  gap:var(--s2);
  width:100%;
  text-align:left;
  font:inherit;
  color:inherit;
  background:var(--card);
  border:1px solid var(--edge);
  border-left:3px solid var(--plum);
  border-radius:var(--r);
  padding:var(--s4);
  margin-bottom:var(--s3);
  cursor:pointer;
  box-shadow:var(--sh-1);
  transition:transform var(--t1) var(--ease),
             box-shadow var(--t2) var(--ease),
             border-color var(--t1) var(--ease);
}
.pcard:hover{box-shadow:var(--sh-2)}
.pcard:active{transform:scale(.985)}
.pcard.velha{border-left-color:var(--warn)}

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

/* a última coisa que a cliente escreveu — o gatilho da decisão */
.p-msg{
  font-size:var(--fs-sm);
  color:var(--fg-2);
  font-style:italic;
  line-height:1.5;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}

.p-pe{
  display:flex;
  align-items:center;
  gap:var(--s2);
  flex-wrap:wrap;
}
.p-cidade{
  font-size:var(--fs-xs);
  color:var(--fg-2);
  margin-left:auto;
}

.mot{
  display:inline-flex;
  align-items:center;
  font-family:'IBM Plex Mono',ui-monospace,monospace;
  font-size:var(--fs-micro);
  letter-spacing:var(--ls-mono);
  text-transform:uppercase;
  padding:4px 8px;
  border-radius:var(--r-xs);
  background:var(--plum-soft);
  color:var(--plum);
}
.mot.velho{background:var(--warn-soft);color:var(--warn-fg)}

/* =============================================================
   A CONVERSA QUE ACONTECEU NA MÃO

   O agente registra os dois lados enquanto está calado. Mostrar
   isso aqui é o que evita ele decidir a devolução sem lembrar o
   que combinou três dias atrás, pelo celular.
   ============================================================= */

#r-conversa{margin-top:var(--s4)}
#r-conversa .rot{
  font-family:'IBM Plex Mono',ui-monospace,monospace;
  font-size:var(--fs-micro);
  letter-spacing:var(--ls-label);
  text-transform:uppercase;
  color:var(--fg-2);
  margin-bottom:var(--s3);
}
.fio-mini{
  display:flex;
  flex-direction:column;
  gap:var(--s2);
  max-height:260px;
  overflow-y:auto;
}
.fio-mini .bal{
  max-width:86%;
  padding:var(--s2) var(--s3);
  border-radius:var(--r);
  font-size:var(--fs-sm);
  line-height:1.45;
}
/* Quem falou fica no lado, como no WhatsApp: ele reconhece a forma
   sem precisar ler um rótulo em cada balão. */
.fio-mini .ela{align-self:flex-start;background:var(--card-2);border:1px solid var(--edge-2)}
.fio-mini .nos{align-self:flex-end;background:var(--go-soft);border:1px solid var(--go-edge);color:var(--go-fg)}
.fio-mini .bal i{
  display:block;
  font-style:normal;
  font-size:var(--fs-micro);
  color:var(--fg-2);
  margin-top:3px;
}
.fio-mini .nos i{color:var(--go-fg);opacity:.85}