/* Nomear — o diálogo de dar nome, da comp da 0.9.0.
 *
 * Os valores são os da comp, e onde este arquivo e `design/SEELE.dc.html`
 * discordarem, ela vence.
 *
 * O véu tem `opacity` e não `rgba`: o fundo é o mesmo negro absoluto do resto,
 * e o que se quer é apagá-lo, não tingi-lo. */

.camada-nomear {
  position: fixed;
  inset: 0;
  z-index: 26;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 32px;
}

.camada-nomear::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--seele-negro-absoluto);
  opacity: 0.78;
}

/* `position: relative` para ficar sobre o véu, que é irmão dele no `::before`.
 * A moldura laranja é o que separa este diálogo dos painéis atrás: eles usam
 * `--seele-linha`, e a cor de identidade aqui diz «isto está esperando você». */
.nomear-caixa {
  position: relative;
  width: 100%;
  max-width: 480px;
  max-height: calc(100vh - 48px);
  overflow-y: auto;
  background: var(--seele-negro-painel);
  border: 1px solid var(--seele-linha-forte);
}

.nomear-cabeca {
  /* Fixo no alto da caixa que rola: o FECHAR fica sempre ao alcance. */
  position: sticky;
  top: 0;
  z-index: 1;
  padding: 16px 24px;
  border-bottom: 1px solid var(--seele-linha-forte);
  color: var(--seele-osso);
  background: var(--seele-negro-painel);
}

.nomear-titulo {
  margin: 0;
  font-family: var(--seele-display);
  font-weight: 900;
  font-size: 24px;
  letter-spacing: 0.08em;
}

.nomear-corpo {
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.nomear-campo {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.nomear-campo input { width: 100%; }

/* Vermelho, que o `07-estetica.md` reserva para erro — «se aparece, algo está
 * errado» — e imediatamente abaixo do campo, que é onde os olhos estão. */
.nomear-erro {
  margin: 0;
  font-size: 12px;
  line-height: 1.4;
  color: var(--seele-vermelho-alerta);
}

.nomear-acoes {
  display: flex;
  gap: 12px;
  justify-content: flex-end;
}

/* Sólido: é a ação principal do diálogo e a única que o fecha fazendo algo. */
.nomear-confirmar {
  min-height: 34px;
  padding: 0 16px;
  font: inherit;
  letter-spacing: 0.14em;
  color: var(--seele-negro-absoluto);
  background: var(--seele-laranja-nerv);
  border: 1px solid var(--seele-laranja-nerv);
  cursor: pointer;
}

.nomear-confirmar:hover:not([disabled]) {
  color: var(--seele-laranja-nerv);
  background: none;
}

/* Enquanto o servidor responde. `progress` e não `not-allowed`: o botão não
 * está proibido, está ocupado. */
.nomear-confirmar[disabled] {
  cursor: progress;
  opacity: 0.6;
}

/* ------------------------------------------------------------ seu perfil */

.perfil-caixa { max-width: 480px; }

.perfil-cabeca {
  display: flex;
  align-items: center;
  gap: 12px;
}

/* `line-height` próprio porque o título do perfil quebra linha. A pergunta do
   nome antes da primeira entrada («COMO OS OUTROS VÃO TE CHAMAR?») não cabe
   numa linha de 480px, e o título herdava os 16px de `base.css` com letra de
   24px: a segunda linha começava 22px antes de a primeira acabar. 1,15 dá 27,6px
   por linha, abaixo da altura do FECHAR ao lado — o cabeçalho de SEU PERFIL,
   numa linha só, fica com a altura de antes. */
.perfil-cabeca .nomear-titulo { flex: 1; line-height: 1.15; }

/* **As placas do cabeçalho sobre a capa** (D-capa-1; rascunho da API 6, §4):
   com a capa de quem usa no cabeçalho, o título e o FECHAR ficam sobre placas
   opacas da cor do fundo nativo da caixa, e o contraste é o de sem capa —
   medido em `bancada/capa.cjs` contra uma capa branca, uma preta e uma da cor
   da tinta. O título encolhe ao tamanho do texto, para a capa aparecer. */
.perfil-cabeca[data-com-capa] :where(.nomear-titulo, #perfil-fechar) {
  background-color: var(--seele-negro-painel);
}

.perfil-cabeca[data-com-capa] .nomear-titulo { flex: 0 1 auto; margin-right: auto; }

.perfil-imagem {
  display: flex;
  align-items: flex-start;
  gap: 16px;
}

/* A prévia: 72px, que é o dobro do avatar da lista de pessoas — grande o
   bastante para se ver o que se escolheu, pequena o bastante para caber ao
   lado do texto que explica o limite. Quadrada e de canto reto, como tudo. */
.perfil-previa {
  width: 72px;
  height: 72px;
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  border: 1px solid var(--seele-linha-forte);
  background: var(--seele-negro-absoluto);
  font-family: var(--seele-display);
  font-weight: 900;
  font-size: 28px;
  color: var(--seele-laranja-nerv);
}

.perfil-previa img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.perfil-imagem-texto {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
}

.perfil-imagem-acoes {
  display: flex;
  gap: 8px;
  margin-top: 4px;
}

/* O apelido é leitura, e o desenho diz isso: mesmo corpo do dado, sem moldura
   de campo. Uma caixa em volta prometeria que se digita ali. */
.perfil-apelido {
  margin: 0;
  font-family: var(--seele-display);
  font-weight: 700;
  font-size: 17px;
  letter-spacing: 0.06em;
  color: var(--seele-osso);
}

/* O pé do perfil: `CANCELAR` fantasma e `SALVAR` sólido, à direita, com os
   valores da comp. Ele é do apelido — a imagem já se aplicou quando se apertou
   `ESCOLHER`, e a prévia acima é a confirmação dela. */
.perfil-fim {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 8px;
  margin-top: 8px;
}

/* Em 390 px: margens menores até a janela, e o respiro interno ainda igual em
   todas as seções da caixa (cabeçalho, corpo, perfil), para a caixa caber sem
   perder o FECHAR nem as ações. */
@media (max-width: 520px) {
  .camada-nomear {
    padding: 12px;
  }

  .nomear-cabeca {
    padding: 12px 16px;
  }

  .nomear-corpo {
    padding: 16px;
  }

  .nomear-titulo {
    font-size: 20px;
  }
}


/* ------------------------------------------------ o perfil com a sala pessoal
 *
 * O PERFIL junta duas coisas: o formulário simples (imagem e apelido, com SALVAR e CANCELAR) e a sala pessoal (o código, RECEBER LIGAÇÕES, o
 * firewall e a agenda), que só existe no app. Sem a sala (o navegador), a caixa continua o diálogo de 480px. Com ela, a camada ocupa a JANELA
 * INTEIRA: o cabeçalho fixo e o corpo, que rola na própria linha, com o formulário numa coluna e a sala pessoal em cartões (o código e o receber; a
 * agenda) ao lado, e empilhados no celular. A voz da sala não é tocada: aqui só se desenha. O `:has()` troca o tamanho quando o app mostra a sala. */
.perfil-corpo { min-height: 0; }

#perfil:has(#perfil-sala:not([hidden])) {
  padding: 0;
  align-items: stretch;
  justify-content: stretch;
}

#perfil:has(#perfil-sala:not([hidden])) .perfil-caixa {
  max-width: none;
  max-height: none;
  height: 100%;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  overflow: hidden;
}

#perfil:has(#perfil-sala:not([hidden])) .perfil-cabeca {
  position: static;
  padding-inline: max(32px, env(safe-area-inset-left)) max(32px, env(safe-area-inset-right));
}

#perfil:has(#perfil-sala:not([hidden])) .perfil-corpo {
  overflow-y: auto;
  padding: 24px max(32px, env(safe-area-inset-right)) max(24px, env(safe-area-inset-bottom)) max(32px, env(safe-area-inset-left));
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 24px;
  align-items: start;
}

#perfil:has(#perfil-sala:not([hidden])) .perfil-cartao-eu {
  border: 1px solid var(--seele-linha);
  background: var(--seele-negro-absoluto);
}

#perfil:has(#perfil-sala:not([hidden])) .perfil-sala {
  padding: 0;
  border-top: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr));
  gap: 24px;
  align-items: start;
}

.perfil-cartao-codigo,
.perfil-cartao-agenda {
  display: flex;
  flex-direction: column;
  gap: var(--seele-e2);
}

.perfil-cartao-agenda .nota { max-width: var(--seele-leitura); }

/* O desktop largo: o formulário numa coluna estreita, e a sala pessoal ao lado, no resto da largura. */
@media (min-width: 1100px) {
  #perfil:has(#perfil-sala:not([hidden])) .perfil-corpo {
    grid-template-columns: minmax(320px, 420px) minmax(0, 1fr);
  }
}

@media (max-width: 520px) {
  #perfil:has(#perfil-sala:not([hidden])) .perfil-cabeca { padding-inline: max(16px, env(safe-area-inset-left)) max(16px, env(safe-area-inset-right)); }
  #perfil:has(#perfil-sala:not([hidden])) .perfil-corpo { padding: 16px max(16px, env(safe-area-inset-right)) max(16px, env(safe-area-inset-bottom)) max(16px, env(safe-area-inset-left)); gap: 16px; }
}

/* A AGENDA usa a altura útil. O teto antigo da lista (12rem, de quando ela era um bloco dentro de um diálogo de 480px) deixava o cartão com
   duas linhas e o resto da janela vazio. Abaixo de 1100px (e no celular) a página do perfil rola inteira e a lista cresce com ela, sem caixa
   interna presa; no desktop largo o cartão cresce até o fim da área e é a lista que rola dentro dele, só se passar disso. */
#perfil:has(#perfil-sala:not([hidden])) .perfil-agenda {
  max-height: none;
  overflow: visible;
}

@media (min-width: 1100px) {
  #perfil:has(#perfil-sala:not([hidden])) .perfil-corpo {
    overflow-y: hidden;
    grid-template-rows: minmax(0, 1fr);
    align-items: stretch;
  }

  #perfil:has(#perfil-sala:not([hidden])) .perfil-cartao-eu {
    align-self: start;
    max-height: 100%;
    overflow-y: auto;
  }

  #perfil:has(#perfil-sala:not([hidden])) .perfil-sala {
    min-height: 0;
    align-items: stretch;
  }

  #perfil:has(#perfil-sala:not([hidden])) .perfil-cartao-codigo,
  #perfil:has(#perfil-sala:not([hidden])) .perfil-cartao-agenda {
    min-height: 0;
  }

  /* O código e o receber têm a altura do que dizem; é a agenda que toma o resto da área. */
  #perfil:has(#perfil-sala:not([hidden])) .perfil-cartao-codigo { align-self: start; }

  #perfil:has(#perfil-sala:not([hidden])) .perfil-cartao-agenda .perfil-agenda {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
  }
}