/* ==========================================================================
   ⭐ REVISAR (08/10/2026): outros jeitos de dizer o que a pessoa escreveu.

   O botão encosta no alto da caixa de escrever (posição absoluta) e só aparece
   com texto na caixa: ele não empurra a conversa enquanto a pessoa digita.
   A faixa das versões usa o mesmo desenho da faixa do copiloto (`.cpv`), para a
   recepção reconhecer de relance que é o mesmo tipo de ajuda.
   Só cor de token, como no resto do painel.
   ========================================================================== */

#cp-revisar:empty {
  display: none;
}

.compositor {
  position: relative;
}

.rev-chip {
  position: absolute;
  top: -13px;
  right: 22px;
  z-index: 2;
  border: 1px solid var(--azul);
  background: var(--papel);
  color: var(--azul);
  font: inherit;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.02em;
  border-radius: 999px;
  padding: 3px 12px;
  cursor: pointer;
  box-shadow: 0 1px 3px rgba(40, 30, 18, 0.12);
}
.rev-chip[hidden],
.compositor.com-mic .rev-chip {
  display: none;
}
.rev-chip:hover,
.rev-chip:focus-visible {
  background: var(--azul-suave);
  outline: none;
}

/* Enquanto ela revisa, a faixa do copiloto sai (volta ao fechar o Revisar). */
#painel-conversa.revisando #cp-vivo {
  display: none;
}

/* As versões são o MESMO recado dito de outro jeito: uma embaixo da outra, para comparar
   lendo de cima para baixo, com o "Usar" à direita de cada uma. */
.rev .cpv-lista {
  flex-direction: column;
  gap: 6px;
}
.rev .cpv-sug {
  flex: none;
  flex-direction: row;
  align-items: center;
  gap: 10px;
  padding: 7px 10px;
}
.rev-txt {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.rev-txt p {
  margin: 0;
}
.rev-txt small {
  font-size: 11px;
  color: var(--aco2);
}
.rev .cpv-sug .bt {
  flex: none;
}

.rev-ok {
  margin: 8px 0 0;
  font-size: 12px;
  color: var(--grafite);
}

.cpv-sug.rev-escolhida {
  border-color: var(--azul);
  box-shadow: 0 0 0 1px var(--azul) inset;
}

@media (max-width: 720px) {
  /* Alvo de dedo: maior no celular, e longe do canto onde mora o Enviar. Sobe o
     bastante para não encostar na caixa (o compositor do celular tem 10px de
     respiro em cima): flutua sobre a borda, como o botão "ir para o fim". */
  .rev-chip {
    top: -21px;
    right: 14px;
    font-size: 13px;
    padding: 6px 15px;
    line-height: 1.3;
  }
}