/* O modal: o casco do modal do Nexus (C:\src\.claude\components\modal.md)
   com as cores e os cantos do app. Centralizado até o primeiro arrasto ou
   redimensionamento; daí em diante, onde a pessoa deixou. */

body.com-modal { overflow: hidden; }

.modal-fundo { position: fixed; inset: 0; z-index: 1300; background: rgba(15, 23, 42, .5); }

.modal {
  position: fixed; top: 50%; left: 50%; z-index: 1301;
  display: flex; flex-direction: column;
  width: min(var(--modal-largura, 560px), 94vw); height: var(--modal-altura, auto); max-height: 94vh;
  overflow: hidden; transform: translate(-50%, -50%);
  background: var(--cartao); color: var(--texto); border-radius: var(--raio);
  box-shadow: 0 24px 70px rgba(15, 23, 42, .35);
}
/* Entrar e sair, como no Nexus (frontend/src/lib/transicoes.ts): o fundo
   desbota em 150 ms e a caixa desce 18 px desbotando em 200 ms; ao fechar,
   o contrário. Anima `translate`, não `transform`, que é quem centraliza. */
@keyframes modal-desce { from { translate: 0 -18px; opacity: 0; } }
@keyframes modal-sobe { to { translate: 0 -18px; opacity: 0; } }
@keyframes modal-fundo-aparece { from { opacity: 0; } }
@keyframes modal-fundo-some { to { opacity: 0; } }
.modal--entra { animation: modal-desce .2s cubic-bezier(.33, 1, .68, 1) both; }
.modal-fundo { animation: modal-fundo-aparece .15s ease-out both; }
.modal-portal--saindo { pointer-events: none; }
.modal-portal--saindo .modal { animation: modal-sobe .2s cubic-bezier(.33, 1, .68, 1) both; }
.modal-portal--saindo .modal-fundo { animation: modal-fundo-some .15s ease-in both; }

.modal--sacode { animation: modal-sacode .36s cubic-bezier(.36, .07, .19, .97); }
@keyframes modal-sacode {
  0%, 100% { translate: 0 0; }
  15% { translate: -7px 0; }
  30% { translate: 6px 0; }
  45% { translate: -5px 0; }
  60% { translate: 4px 0; }
  75% { translate: -2px 0; }
}

/* --- Cabeçalho (arrasta), corpo (rola) e ações ---------------------------------- */
.modal-cabeca { flex: none; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 16px 16px 12px 20px; border-bottom: 1px solid var(--linha); cursor: move; touch-action: none; user-select: none; }
.modal-titulo { margin: 0; font-size: 17px; font-weight: 800; letter-spacing: -.02em; }
.modal-fecha { flex: none; width: 36px; height: 36px; border: 0; border-radius: 50%; background: transparent; color: var(--texto-fraco); font-size: 15px; line-height: 1; cursor: pointer; }
.modal-fecha:hover, .modal-fecha:focus-visible { background: var(--fundo); color: var(--texto); outline: 0; }
.modal-corpo { flex: 1 1 auto; min-height: 0; overflow: auto; padding: 14px 20px 18px; }
.modal-acoes { flex: none; display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; padding: 12px 20px 16px; border-top: 1px solid var(--linha); }

/* --- As alças: bordas finas e cantos maiores; só o canto de baixo à direita
   tem o L que avisa que dá pra puxar ---------------------------------------------- */
.modal-alca { position: absolute; touch-action: none; }
.modal-alca--e, .modal-alca--w { top: 0; bottom: 0; width: 6px; cursor: ew-resize; }
.modal-alca--n, .modal-alca--s { left: 0; right: 0; height: 6px; cursor: ns-resize; }
.modal-alca--e { right: 0; }
.modal-alca--w { left: 0; }
.modal-alca--n { top: 0; }
.modal-alca--s { bottom: 0; }
.modal-alca--se, .modal-alca--sw, .modal-alca--ne, .modal-alca--nw { z-index: 1; width: 16px; height: 16px; }
.modal-alca--se { right: 0; bottom: 0; cursor: nwse-resize; }
.modal-alca--nw { left: 0; top: 0; cursor: nwse-resize; }
.modal-alca--ne { right: 0; top: 0; cursor: nesw-resize; }
.modal-alca--sw { left: 0; bottom: 0; cursor: nesw-resize; }
.modal-alca--se::after { content: ""; position: absolute; right: 5px; bottom: 5px; width: 7px; height: 7px; border-right: 2px solid #9ca3af; border-bottom: 2px solid #9ca3af; border-bottom-right-radius: 3px; }
.modal-alca--se:hover::after { border-color: var(--texto-fraco); }

@media (prefers-reduced-motion: reduce) {
  /* duração perto de zero, nunca `animation: none`: com none a peça volta ao estado de antes da animação */
  .modal--entra, .modal--sacode, .modal-fundo, .modal-portal--saindo .modal, .modal-portal--saindo .modal-fundo { animation-duration: .01ms; }
}