/* ------------------------------------------------------------------
   A caixinha do "Gerar conexao" (js/conexao-pedido.js).

   E a mesma janela no feed, no perfil e no Marketplace — e nao um
   pedaco de HTML repetido em cada tela. Tres copias virariam tres
   desenhos diferentes da mesma coisa, e uma delas esqueceria o limite
   de caracteres.

   Por que existe uma caixinha e nao um clique direto
   (docs/ESPECIFICACAO-FEED-DA-HOME.md, secao 5.2): um pedido sem
   contexto e recusado sem culpa nenhuma. O recado e opcional de
   proposito — obrigar a escrever transformaria um clique em redacao, e
   a maioria desistiria no meio.
   ------------------------------------------------------------------ */

.conexao-overlay {
  position: fixed;
  inset: 0;
  z-index: 80;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
  /* Preto e nao a cor da marca: o veu precisa apagar o feed nos dois
     temas, e um verde translucido sobre fundo escuro quase nao escurece
     — o texto de tras continuava competindo com o da caixa. */
  background: rgb(0 0 0 / .6);
  opacity: 0;
  transition: opacity .15s ease;
}
.conexao-overlay.is-aberto { opacity: 1; }
.conexao-overlay[hidden] { display: none; }

.conexao-caixa {
  width: 100%;
  max-width: 28rem;
  max-height: calc(100dvh - 2rem);
  overflow-y: auto;
  padding: 1.5rem;
  border-radius: 1.25rem;
  /* `outline` e nao `outline-variant`: no tema escuro a caixa e o fundo
     velado quase se encostam, e a borda e o que separa os dois. */
  border: 1px solid rgb(var(--color-outline));
  background: rgb(var(--color-surface-container-lowest));
  box-shadow: 0 1.5rem 3.75rem -1rem rgb(0 0 0 / .5);
  transform: translateY(.75rem);
  transition: transform .15s ease;
}
.conexao-overlay.is-aberto .conexao-caixa { transform: none; }

.conexao-titulo {
  font-size: 1.125rem;
  font-weight: 700;
  color: rgb(var(--color-on-surface));
}

.conexao-ajuda {
  margin-top: .25rem;
  font-size: .8125rem;
  line-height: 1.35;
  color: rgb(var(--color-on-surface-variant));
}

/* "Sobre: Casa em Alphaville" — de qual anuncio o pedido saiu.
   Fundo proprio e nao so uma linha de texto: ela e o assunto do pedido,
   e precisa se separar do paragrafo de ajuda logo acima sem virar um
   segundo titulo. `secondary` e nao `primary` no rotulo, como no resto
   do sistema. */
.conexao-sobre {
  margin-top: .75rem;
  padding: .5rem .75rem;
  border-radius: .625rem;
  border: 1px solid rgb(var(--color-outline-variant));
  background: rgb(var(--color-surface-container-low));
  font-size: .8125rem;
  line-height: 1.35;
  color: rgb(var(--color-on-surface-variant));
}
.conexao-sobre strong { color: rgb(var(--color-on-surface)); }

.conexao-campo { margin-top: 1rem; }

.conexao-campo label {
  display: block;
  margin-bottom: .375rem;
  font-size: .8125rem;
  font-weight: 600;
  color: rgb(var(--color-on-surface));
}

.conexao-campo textarea {
  width: 100%;
  /* Tres linhas, e nao dez: a altura da caixa e um recado em si. Uma
     caixa grande pede um texto grande, e a conversa de verdade
     acontece no WhatsApp, depois do aceite. */
  min-height: 5.5rem;
  padding: .625rem .75rem;
  border-radius: .625rem;
  border: 1px solid rgb(var(--color-outline-variant));
  background: rgb(var(--color-surface-container-low));
  color: rgb(var(--color-on-surface));
  font-size: .875rem;
  line-height: 1.4;
  resize: vertical;
}
.conexao-campo textarea:focus {
  outline: none;
  border-color: rgb(var(--color-secondary));
  box-shadow: 0 0 0 3px rgb(var(--color-secondary) / .2);
}

/* O contador fica embaixo e a direita, junto do canto onde o texto
   termina de crescer. */
.conexao-contador {
  margin-top: .25rem;
  text-align: right;
  font-size: .75rem;
  font-variant-numeric: tabular-nums;
  color: rgb(var(--color-on-surface-variant));
}
/* Nos ultimos caracteres o numero muda de cor, antes de o limite
   chegar — avisar depois de travar a digitacao seria avisar tarde. */
.conexao-contador.is-perto { color: rgb(var(--color-error)); }

.conexao-erro {
  margin-top: .75rem;
  padding: .625rem .75rem;
  border-radius: .625rem;
  background: rgb(var(--color-error) / .12);
  color: rgb(var(--color-error));
  font-size: .8125rem;
  line-height: 1.35;
}
.conexao-erro[hidden] { display: none; }

.conexao-acoes {
  display: flex;
  justify-content: flex-end;
  gap: .5rem;
  margin-top: 1.25rem;
}

.conexao-btn {
  padding: .625rem 1rem;
  border-radius: .625rem;
  font-size: .875rem;
  font-weight: 600;
  cursor: pointer;
  transition: background-color .15s, opacity .15s;
}
.conexao-btn:focus-visible {
  outline: 2px solid rgb(var(--color-secondary));
  outline-offset: 2px;
}
.conexao-btn[disabled] {
  opacity: .6;
  cursor: progress;
}

.conexao-btn-secundario {
  background: rgb(var(--color-surface-container-low));
  color: rgb(var(--color-on-surface));
}
.conexao-btn-secundario:hover { background: rgb(var(--color-surface-container)); }

.conexao-btn-primario {
  background: rgb(var(--color-secondary));
  color: rgb(var(--color-on-secondary));
}
.conexao-btn-primario:hover { background: rgb(var(--color-secondary) / .88); }

/* A pagina de tras nao rola enquanto a caixa esta aberta: o feed
   deslizando por baixo do dialogo faz perder o lugar da leitura. */
body.tem-conexao-aberta { overflow: hidden; }

@media (prefers-reduced-motion: reduce) {
  .conexao-overlay,
  .conexao-caixa { transition: none; }
}