/* Barra "Digite uma mensagem" da seção de contato (2026.7/js/chat.js), no lugar do QR do
   WhatsApp desde 17/10/2026. Ela só abre a conversa: a página inteira, no estilo do WhatsApp
   Web, mora em /chat/. O formato é o da barra de lá (campo arredondado + botão redondo verde);
   as cores são as do painel de contato, para a barra parecer parte do `.lab-station`. */

.ct-chat {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 16px;
}

.ct-chat-bar {
  display: flex;
  align-items: flex-end;
  gap: 10px;
}

.ct-chat-text {
  flex: 1;
  min-width: 0;
  min-height: 46px;
  max-height: 140px;
  padding: 12px 18px;
  border: 1px solid #1d2f55;
  border-radius: 23px;
  background: #0a1022;
  color: inherit;
  font: inherit;
  font-size: 15px;
  line-height: 21px;
  resize: none;
  outline: none;
}
.ct-chat-text:focus { border-color: #3b6cf6; }
.ct-chat-text::placeholder { color: #8ea3c7; }

/* O verde do botão de enviar do WhatsApp: é o sinal de que a conversa continua lá. */
.ct-chat-send {
  flex: none;
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  border: 0;
  border-radius: 50%;
  background: #00a884;
  color: #fff;
  cursor: pointer;
}
.ct-chat-send:hover { filter: brightness(1.1); }

/* ── Estado da conversa: enviadas, respostas, WhatsApp online/offline ──────
   Três chips clicáveis (abrem a conversa). Entram em sequência; o LED pulsa quando online; o de
   respostas acende quando chegou algo que a pessoa ainda não viu. */
.ct-chat-link[hidden] { display: none; }
.ct-chat-strip {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.ct-chip {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 7px 12px;
  border: 1px solid #1d2f55;
  border-radius: 999px;
  background: #0a1022;
  color: #c9d6ee;
  font: 12px/1 "JetBrains Mono", monospace;
  letter-spacing: .02em;
  cursor: pointer;
  animation: ct-chip-in .45s cubic-bezier(.22, .68, .36, 1) both;
  transition: border-color .2s, transform .2s, box-shadow .2s, color .2s;
}
.ct-chip[hidden] { display: none; }
.ct-chip:nth-child(2) { animation-delay: .08s; }
.ct-chip:nth-child(3) { animation-delay: .16s; }
.ct-chip:hover, .ct-chip:focus-visible {
  border-color: #6fd6ff;
  color: #fff;
  transform: translateY(-2px);
  box-shadow: 0 6px 18px rgba(21, 57, 193, .35);
  outline: none;
}
@keyframes ct-chip-in { from { opacity: 0; transform: translateY(6px) scale(.96); } }

.ct-chip-ico { font-size: 13px; line-height: 1; }
.ct-chip-sent .ct-chip-ico { color: #6fd6ff; }
.ct-chip-replies .ct-chip-ico { color: #8ea3c7; }

/* Resposta não vista: o chip acende em verde e a etiqueta "nova" pulsa. */
.ct-chip-replies[data-unseen="true"] { border-color: #2fbf71; color: #e8fff1; box-shadow: 0 0 0 1px rgba(47, 191, 113, .25); }
.ct-chip-replies[data-unseen="true"] .ct-chip-ico { color: #3ddc84; }
.ct-chip-new {
  padding: 2px 7px;
  border-radius: 999px;
  background: #3ddc84;
  color: #04210f;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .08em;
  animation: ct-new 1.6s ease-in-out infinite;
}
.ct-chip-new[hidden] { display: none; }
@keyframes ct-new { 50% { transform: scale(1.08); box-shadow: 0 0 10px rgba(61, 220, 132, .7); } }

/* LED da ponte: verde pulsando online, vermelho offline, âmbar piscando enquanto verifica. */
.ct-led {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: #f5b942;
  box-shadow: 0 0 6px #f5b942;
  animation: ct-blink 1s steps(2, end) infinite;
}
.ct-chip-live[data-state="online"] .ct-led { background: #3ddc84; box-shadow: 0 0 8px #3ddc84; animation: ct-pulse 2.4s ease-in-out infinite; }
.ct-chip-live[data-state="online"] { color: #c8f7da; }
.ct-chip-live[data-state="offline"] .ct-led { background: #ff5c7a; box-shadow: 0 0 6px #ff5c7a; animation: none; }
.ct-chip-live[data-state="offline"] { color: #ffc2cd; }
@keyframes ct-pulse { 50% { box-shadow: 0 0 1px #3ddc84; } }
@keyframes ct-blink { 50% { opacity: .35; } }

@media (prefers-reduced-motion: reduce) {
  .ct-chip, .ct-chip-new, .ct-led { animation: none !important; }
  .ct-chip { transition: none; }
}

/* "como Ana · não é você?": quem está escrevendo, com o atalho para trocar o nome. */
.ct-chat-who {
  margin: 0;
  font-family: "JetBrains Mono", monospace;
  font-size: 11px;
  color: #8ea3c7;
}
.ct-chat-who:empty { display: none; }
.ct-chat-change {
  padding: 0;
  border: 0;
  background: none;
  color: #9fd8ff;
  font: inherit;
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 2px;
}
.ct-chat-change:hover { color: #fff3b0; }

.ct-chat-hint {
  margin: 0;
  min-height: 1em;
  font-family: "JetBrains Mono", monospace;
  font-size: 11px;
  color: #8ea3c7;
}
.ct-chat-hint:empty { display: none; }

@media (max-width: 640px) {
  .ct-chat { padding: 13px; }
}