/* ==========================================================================
   ⭐ A FAIXA DO COPILOTO AO VIVO (17/09/2026)

   Mora entre o fio da conversa e a caixa de escrever. Tem que ser lida de
   relance por quem está atendendo três pessoas ao mesmo tempo: uma linha
   dizendo o que o paciente pediu, e no máximo três respostas curtas.

   Regras desta folha: só cor de token (nada de #hex solto), altura limitada
   (a conversa continua sendo a estrela) e tudo rolável no celular.
   ========================================================================== */

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

.cpv {
  border-top: 1px solid var(--linha2);
  background: var(--papel2);
  padding: 9px 20px 10px;
  flex: none;
  max-height: 43vh;
  overflow-y: auto;
}

.cpv-topo {
  display: flex;
  align-items: center;
  gap: 9px;
  flex-wrap: wrap;
}

.cpv-selo {
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--azul);
  background: var(--azul-suave);
  border-radius: 999px;
  padding: 3px 9px;
  flex: none;
}

.cpv-leu {
  font-size: 12.5px;
  color: var(--grafite);
  font-weight: 700;
}

.cpv-outros {
  font-size: 11.5px;
  color: var(--aco2);
}

.cpv-abrir {
  margin-left: auto;
  border: 0;
  background: none;
  color: var(--aco);
  font: inherit;
  font-size: 11.5px;
  text-decoration: underline;
  cursor: pointer;
  padding: 2px 4px;
}

.cpv-aviso {
  margin: 8px 0 0;
  font-size: 12px;
  line-height: 1.45;
  color: var(--carmim);
  background: var(--carmim-suave);
  border: 1px solid var(--carmim-borda);
  border-radius: 9px;
  padding: 7px 10px;
}

/* ⭐ 17/09/2026: "chegou mensagem nova" — o aviso que SUBSTITUIU a troca
   automática das sugestões. Ele ocupa uma linha e leva o botão junto, porque a
   ação é o ponto: quem lê decide a hora de trocar o que está na tela. */
.cpv-novo {
  margin: 8px 0 0;
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  font-size: 12px;
  line-height: 1.45;
  color: var(--ouro);
  background: var(--ouro-suave);
  border: 1px solid var(--ouro);
  border-radius: 9px;
  padding: 7px 10px;
}

.cpv-dica {
  margin: 8px 0 0;
  font-size: 11.5px;
  line-height: 1.45;
  color: var(--ouro);
  background: var(--ouro-suave);
  border-radius: 9px;
  padding: 6px 10px;
}

.cpv-lista {
  display: flex;
  gap: 9px;
  margin-top: 9px;
  align-items: stretch;
}

.cpv-sug {
  flex: 1 1 0;
  min-width: 0;
  border: 1px solid var(--linha);
  border-radius: 11px;
  background: var(--papel);
  padding: 9px 11px 8px;
  display: flex;
  flex-direction: column;
  gap: 7px;
}

.cpv-sug p {
  margin: 0;
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--grafite);
  flex: 1;
}

.cpv-sug footer {
  display: flex;
  align-items: center;
  gap: 8px;
  background: none;
  padding: 0;
  position: static;
}

.cpv-sug footer small {
  flex: 1;
  font-size: 10.5px;
  color: var(--aco2);
  text-transform: lowercase;
}

/* O "trocar o que escrevi?" precisa parecer outro botão: é uma pergunta. */
.cpv-sug .cpv-confirmar {
  background: var(--ouro-suave);
  color: var(--ouro);
  border-color: var(--ouro-borda);
}

.cpv-pe {
  display: flex;
  align-items: center;
  gap: 9px;
  margin-top: 9px;
}

.cpv-sem {
  margin: 0;
  flex: 1;
  font-size: 12px;
  color: var(--aco);
}

.cpv-erro {
  display: flex;
  gap: 9px;
  align-items: center;
  font-size: 12px;
  color: var(--aco);
}

.cpv-recolhido .cpv-topo {
  margin: 0;
}

/* --------------------------------------------------------------- celular */
@media (max-width: 720px) {
  .cpv {
    padding: 8px 12px 9px;
    max-height: 38vh;
  }
  /* Três colunas de 33% num celular é ilegível: vira pilha. */
  .cpv-lista {
    flex-direction: column;
  }
  .cpv-outros {
    display: none;
  }
}

/* --------------------------------------------------------------------------
   ⭐ 17/09/2026: a lista do SisOdonto que o fornecedor não libera para o nosso
   usuário. Fica visível e apagada ao mesmo tempo: a pessoa vê que ela existe,
   vê desde quando parou, e não confunde com lista atualizada.
   -------------------------------------------------------------------------- */
.siso-cartao.sem-acesso {
  opacity: 0.78;
  border-style: dashed;
}

.siso-selo-sem-acesso {
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ouro);
  background: var(--ouro-suave);
  border: 1px solid var(--ouro-borda);
  border-radius: 999px;
  padding: 2px 8px;
  vertical-align: middle;
  margin-left: 6px;
}