/* O recado de envio recusado (07/10) -- app/views/erros_de_envio/pagina.html.erb,
   desenhado por BcService::RecusaNaBorda quando o arquivo e grande demais
   (413) ou o formulario nao deu para ler (400).

   O MESMO DESENHO das paginas de erro de public/ (as do Rails): tudo no
   centro, o numero grande e apagado, a frase em negrito e um link embaixo.
   Mora AQUI, e nao num `<style>` dentro da pagina como la, porque a CSP do
   app (style-src 'self') barra `<style>` e `style=""` em tudo que o Turbo
   desenha -- e e pelo Turbo que este recado chega.

   Aparece em dois lugares, e o desenho serve aos dois:
     1. como a TELA INTEIRA (foto de perfil, CSV do disparo, suporte);
     2. DENTRO da coluna da conversa, na inbox, no lugar da conversa aberta.
   Por isso o bloco `.erro-de-envio` nao pinta fundo nem cor de texto: herda
   os da tela em que caiu, clara ou escura. So a tela inteira (`body`) pinta
   o proprio fundo, como as paginas de public/. */

body.erro-de-envio-pagina {
  display: grid;
  place-items: center;
  min-height: 100dvh;
  background: #FFF;
  color: #261B23;
  color-scheme: light;
}

@media (prefers-color-scheme: dark) {
  body.erro-de-envio-pagina {
    background: #101010;
    color: #E0E0E0;
    color-scheme: dark;
  }
}

/* O turbo-frame e um elemento sem desenho proprio. Como bloco que ocupa o
   espaco que tiver, o recado fica no centro tanto da tela quanto da coluna. */
.erro-de-envio__quadro {
  display: grid;
  place-items: center;
  flex: 1 1 auto;
  width: 100%;
}

/* `margin: auto`: dentro da coluna da conversa quem manda no espaco e uma
   caixa flexivel em coluna (conversas.css), e e a margem automatica que poe
   o recado no meio dela. Na tela inteira o `body` ja centraliza. */
.erro-de-envio {
  display: grid;
  gap: 1em;
  place-items: center;
  margin: auto;
  padding: 2em;
  text-align: center;
  font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: clamp(1rem, 2.5vw, 1.5rem);
  line-height: 1.4;
}

.erro-de-envio p { margin: 0; }

/* O numero do status, grande e apagado, como o das paginas de public/. Pela
   opacidade, e nao por um cinza fixo: assim serve em fundo claro e escuro. */
.erro-de-envio__numero {
  font-size: 5em;
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.02em;
  opacity: .12;
}

.erro-de-envio__frase { max-width: 22em; }

.erro-de-envio__saida { font-size: 75%; }

.erro-de-envio__saida a {
  color: inherit;
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 0.0925em;
}

/* No telefone a inbox mostra a lista OU a conversa, e decide olhando se ha
   uma `.conversa` dentro do quadro (conversas.css, mesmo ponto de quebra).
   O recado entra no lugar da conversa: sem estas linhas o quadro ficaria
   escondido e a pessoa voltaria a ver so a lista, sem recado. */
@media (max-width: 760px) {
  .conversas:has(.erro-de-envio) .conversas__aberta { display: flex; flex: 1 1 auto; }
  .conversas:has(.erro-de-envio) .conversas__topo-coluna1,
  .conversas:has(.erro-de-envio) .conversas__lista { display: none; }
}