/* Shared WEB motion only. Keep focus, requests and modal lifecycle with the app. */
@keyframes cg-surface-in { from { opacity: 0; translate: 0 14px; } to { opacity: 1; translate: 0 0; } }
@keyframes cg-overlay-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes cg-overlay-out { from { opacity: 1; } to { opacity: 0; } }

dialog {
  opacity: 0;
  translate: 0 10px;
  transition: opacity 160ms ease-out, translate 160ms ease-out, display 160ms allow-discrete, overlay 160ms allow-discrete;
}
dialog[open] { opacity: 1; translate: 0 0; transition-duration: 240ms; transition-timing-function: cubic-bezier(.2,.75,.25,1); }
dialog:not([open]) { pointer-events: none; }
dialog::backdrop { opacity: 0; transition: opacity 160ms ease-out, display 160ms allow-discrete, overlay 160ms allow-discrete; }
dialog[open]::backdrop { opacity: 1; }
@starting-style {
  dialog[open] { opacity: 0; translate: 0 14px; }
  dialog[open]::backdrop { opacity: 0; }
}
@supports not (transition-behavior: allow-discrete) {
  dialog[open] { animation: cg-surface-in 240ms cubic-bezier(.2,.75,.25,1); }
  dialog[open]::backdrop { animation: cg-overlay-in 200ms ease-out; }
}

/* Legacy desktop panels: animate mounting without intercepting remove/submit. */
.modal-bg:not([data-cg-motion-off]) { animation: cg-overlay-in 220ms ease-out; }
.modal-bg:not([data-cg-motion-off]) > .modal { animation: cg-surface-in 240ms cubic-bezier(.2,.75,.25,1); }

/* Only the grip captures a gesture. The form itself keeps native scrolling. */
.cg-sheet-grip { display: none !important; }
@media (max-width: 760px) {
  button.cg-sheet-grip {
    display: flex !important; align-items: center; justify-content: center;
    align-self: center; flex: 0 0 32px; width: 80px; min-width: 80px;
    height: 32px; min-height: 32px; padding: 0; margin: 0 auto 4px;
    border: 0; border-radius: 16px; background: transparent; color: inherit;
    box-shadow: none; touch-action: none; cursor: grab; user-select: none;
  }
  button.cg-sheet-grip::before { content: ''; width: 38px; height: 4px; border-radius: 4px; background: currentColor; opacity: .3; }
  button.cg-sheet-grip:focus-visible { outline: 2px solid currentColor; outline-offset: 1px; }
  [data-cg-dragging] { translate: 0 var(--cg-drag-y, 0px) !important; transition: none !important; }
}

/* RN Web already owns enter/exit and animationend. Preserve that lifecycle. */
[aria-modal="true"] > div { animation: cg-surface-in 240ms cubic-bezier(.2,.75,.25,1); }
[data-cg-modal-motion="in"] {
  animation: cg-overlay-in 240ms cubic-bezier(.2,.75,.25,1) both !important;
}
[data-cg-modal-motion="in"] > div > [aria-modal="true"] > div {
  animation: cg-surface-in 240ms cubic-bezier(.2,.75,.25,1);
}
[data-cg-modal-motion="out"] { animation: cg-overlay-out 160ms ease-out both !important; }

@media (prefers-reduced-motion: reduce) {
  dialog, dialog::backdrop { transition: none !important; translate: none !important; }
  dialog[open], dialog[open]::backdrop, .modal-bg, .modal-bg > .modal,
  [aria-modal="true"] > div, [data-cg-modal-motion], [data-cg-modal-motion] > div > [aria-modal="true"] > div {
    /* Do not use animation:none: RN Web requires animationend for focus/unmount. */
    animation-duration: 1ms !important;
    animation-delay: 0ms !important;
    animation-iteration-count: 1 !important;
    translate: none !important;
  }
}