/* ==========================================================================
   PRISMA · components/dialogo.css — DIÁLOGO (modal) e ENVIO DE ARQUIVO  (D-020 · brief etapa 5)
   --------------------------------------------------------------------------
   Nasceu do pedido da autora (20/09/2026, 00h06): as escolhas do pedido saem da abertura e vão para
   "outra parte", porque "a pessoa tinha outras coisas pra decidir" — e ela pode enviar um material que já tem.

   <dialog> NATIVO, de propósito: foco preso, Esc fecha, o resto da página fica inerte e o leitor de tela
   anuncia como diálogo — sem uma linha de script para isso.
     <dialog class="dialogo" aria-labelledby="…">
       <form method="dialog" class="dialogo-caixa"> .dialogo-cabeca · .dialogo-corpo · .dialogo-acoes </form>
     </dialog>
   MATERIAL (D-003, skill apple-design §12): vidro FROSTED — há texto por cima e o fundo é imprevisível — sobre um
   véu que escurece e desfoca de leve a página: "dim to focus".
   MOVIMENTO: materializa (opacidade + escala .97→1), 280ms, centro como origem (modal não nasce de gatilho).
   No celular vira folha que sobe do pé, com a curva de gaveta. Movimento reduzido: só opacidade.
   ========================================================================== */
.dialogo {
  border: 0; padding: 0; margin: auto; background: transparent; color: var(--text-primary);
  width: min(780px, calc(100vw - 32px)); max-width: none; max-height: min(88vh, 860px);
  border-radius: var(--radius-2xl); overflow: visible;
  opacity: 0; transform: scale(.97);
  transition: opacity var(--motion-slow) var(--easing-enter), transform var(--motion-slow) var(--easing-enter),
              overlay var(--motion-slow) allow-discrete, display var(--motion-slow) allow-discrete;
}
.dialogo[open] { opacity: 1; transform: none; }
@starting-style { .dialogo[open] { opacity: 0; transform: scale(.97); } }
.dialogo::backdrop {
  background-color: color-mix(in srgb, var(--background-deep) 0%, transparent);
  -webkit-backdrop-filter: blur(0); backdrop-filter: blur(0);
  transition: background-color var(--motion-slow) var(--easing-enter), backdrop-filter var(--motion-slow) var(--easing-enter),
              overlay var(--motion-slow) allow-discrete, display var(--motion-slow) allow-discrete;
}
.dialogo[open]::backdrop { background-color: color-mix(in srgb, var(--background-deep) 58%, transparent); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
@starting-style { .dialogo[open]::backdrop { background-color: transparent; backdrop-filter: blur(0); } }

.dialogo-caixa {
  display: grid; grid-template-rows: auto minmax(0, 1fr) auto; max-height: inherit; overflow: hidden;
  border-radius: inherit;
  background-color: var(--glass-tint-frosted);
  -webkit-backdrop-filter: blur(var(--glass-blur-frosted)) saturate(var(--glass-saturacao));
          backdrop-filter: blur(var(--glass-blur-frosted)) saturate(var(--glass-saturacao));
  box-shadow: inset 0 0 0 1px var(--border-glass), inset 0 1px 0 color-mix(in srgb, var(--text-on-destaque) 22%, transparent), var(--elev-modal);
}
.dialogo-cabeca { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--espaco-2) var(--espaco-4); align-items: start; padding: var(--espaco-7) var(--espaco-7) var(--espaco-4); }
.dialogo-titulo { margin: 0; font-size: var(--h3-size); font-weight: 500; letter-spacing: -0.03em; line-height: 1.2; }
.dialogo-nota { margin: 0; grid-column: 1; font-size: var(--body-sm-size); line-height: 1.55; color: var(--text-secondary); max-width: 58ch; }
.dialogo-fechar { grid-column: 2; grid-row: 1; }
.dialogo-corpo { overflow-y: auto; padding: var(--espaco-3) var(--espaco-7) var(--espaco-6); display: grid; gap: var(--espaco-5); align-content: start; grid-auto-rows: max-content; scrollbar-width: thin; }   /* max-content: item com overflow:hidden não pode encolher até sumir (a citação sumia) */
.dialogo-acoes { display: flex; justify-content: flex-end; align-items: center; gap: var(--espaco-3); padding: var(--espaco-4) var(--espaco-7) var(--espaco-6); border-top: 1px solid var(--border-subtle); }
.dialogo-grupo { display: grid; gap: var(--espaco-3); align-content: start; min-width: 0; margin: 0; padding: 0; border: 0; }
/* grupo de escolhas: cada .escolha já tem 44px de alvo de toque — sem respiro extra entre elas */
.dialogo-grupo:has(> .escolha) { gap: 0; }
.dialogo-grupo > .dialogo-grupo + .dialogo-grupo { margin-top: var(--espaco-3); }
.dialogo-grupo > legend, .dialogo-grupo-titulo { padding: 0; margin: 0 0 var(--espaco-1); font-size: var(--caption-size); font-weight: 500; color: var(--text-muted); }
.dialogo-colunas { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--espaco-6) var(--espaco-7); }
/* o pedido, repetido no alto: a pessoa confere o que escreveu antes de decidir o resto */
.dialogo-citacao { margin: 0; padding: var(--espaco-3) var(--espaco-4); border-radius: var(--radius-md); background: var(--surface-2); font-size: var(--body-sm-size); line-height: 1.55; color: var(--text-secondary);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.dialogo-citacao:empty { display: none; }

/* --- ENVIO — soltar ou escolher arquivo ------------------------------------------------------------------- */
.envio { display: grid; grid-template-columns: auto auto; justify-content: center; align-items: center; gap: var(--espaco-2) var(--espaco-4); padding: var(--espaco-4) var(--espaco-5); text-align: center;
  border-radius: var(--radius-lg); border: 1.5px dashed var(--border-strong); background: var(--surface-2);
  transition: border-color var(--motion-fast) var(--easing-standard), background-color var(--motion-fast) var(--easing-standard); }
.envio > .btn { justify-self: end; }   /* o botão não estica para encher a coluna */
.envio > .envio-texto { justify-self: start; }
.envio > .envio-arquivos, .envio > .envio-dica { grid-column: 1 / -1; justify-self: center; }
.envio[data-arrastando] { border-color: var(--border-focus); background: var(--accent-muted); }
.envio-texto { margin: 0; font-size: var(--body-sm-size); color: var(--text-secondary); }
.envio-dica { margin: 0; font-size: var(--caption-size); line-height: 1.5; color: var(--text-muted); max-width: 60ch; }
.envio-arquivos { display: flex; flex-wrap: wrap; gap: var(--espaco-2); justify-content: center; }
.envio-arquivos:empty { display: none; }

/* --- celular: folha que sobe do pé ---------------------------------------------------------------------------- */
@media (max-width: 720px) {
  .dialogo { margin: auto 0 0; width: 100vw; max-height: 92svh; border-radius: var(--radius-2xl) var(--radius-2xl) 0 0; transform: translateY(100%); opacity: 1;
             transition: transform var(--motion-gaveta) var(--easing-gaveta), overlay var(--motion-gaveta) allow-discrete, display var(--motion-gaveta) allow-discrete; }
  .dialogo[open] { transform: none; }
  @starting-style { .dialogo[open] { transform: translateY(100%); opacity: 1; } }
  .dialogo-colunas { grid-template-columns: minmax(0, 1fr); }
  .dialogo-cabeca, .dialogo-corpo, .dialogo-acoes { padding-inline: var(--espaco-5); }
  .dialogo-acoes { padding-bottom: calc(var(--espaco-5) + env(safe-area-inset-bottom, 0px)); }
  .dialogo-acoes .btn { flex: 1 1 0; }
}
@media (prefers-reduced-motion: reduce) {
  .dialogo, .dialogo[open] { transform: none; transition: opacity var(--motion-default) linear, overlay var(--motion-default) allow-discrete, display var(--motion-default) allow-discrete; }
  @starting-style { .dialogo[open] { opacity: 0; transform: none; } }
}