/* Eternal Evals motion language — shared, named transition recipes.
   Recipes own choreography only; each surface continues to own its geometry.

   layer-rise:        a temporary surface rises from the edge and returns to it.
   veil:              a scrim establishes and releases modal depth.
   conversation-bloom: one chat surface grows between rest, peek, and full.
   journey-bridge:    a short-lived bridge across document navigation.
*/

/* Named transition: layer-rise */
:where([data-ee-motion="layer-rise"]) {
  transform: translate3d(0, 105%, 0);
  visibility: hidden;
  pointer-events: none;
  transition:
    transform var(--ee-motion-layer, 320ms) var(--ee-ease-exit, cubic-bezier(0.4, 0, 1, 1)),
    visibility 0s linear var(--ee-motion-layer, 320ms);
}

:where([data-ee-motion="layer-rise"][data-ee-state="open"]) {
  transform: translate3d(0, 0, 0);
  visibility: visible;
  pointer-events: auto;
  transition-timing-function: var(--ee-ease-enter, cubic-bezier(0.16, 1, 0.3, 1)), linear;
  transition-delay: 0s;
}

/* Named transition: veil */
:where([data-ee-motion="veil"]) {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition:
    opacity var(--ee-motion-reveal, 180ms) var(--ee-ease-exit, cubic-bezier(0.4, 0, 1, 1)),
    visibility 0s linear var(--ee-motion-reveal, 180ms);
}

:where([data-ee-motion="veil"][data-ee-state="open"]) {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transition-timing-function: var(--ee-ease-enter, cubic-bezier(0.16, 1, 0.3, 1)), linear;
  transition-delay: 0s;
}

/* Named transition: conversation-bloom. Geometry and snap heights remain
   surface-owned; this recipe owns visibility and choreography. */
#ai-chat[data-ee-motion="conversation-bloom"] {
  transition:
    opacity var(--ee-motion-reveal, 180ms) var(--ee-ease-enter, cubic-bezier(0.16, 1, 0.3, 1)),
    transform var(--ee-motion-layer, 320ms) var(--ee-ease-enter, cubic-bezier(0.16, 1, 0.3, 1)),
    width var(--ee-motion-layer, 320ms) var(--ee-ease-enter, cubic-bezier(0.16, 1, 0.3, 1)),
    height var(--ee-motion-layer, 320ms) var(--ee-ease-enter, cubic-bezier(0.16, 1, 0.3, 1)),
    border-radius var(--ee-motion-reveal, 180ms) var(--ee-ease-standard, cubic-bezier(0.2, 0, 0, 1));
}

#ai-chat[data-ee-motion="conversation-bloom"][data-ee-state="open"] {
  transform: translateY(0) scale(1);
  opacity: 1;
  pointer-events: auto;
}

@media (max-width: 768px) {
  #ai-chat[data-ee-motion="conversation-bloom"] {
    transform: translateY(100%) !important;
    transition:
      transform var(--ee-motion-layer, 320ms) var(--ee-ease-enter, cubic-bezier(0.16, 1, 0.3, 1)),
      height var(--ee-motion-reveal, 180ms) var(--ee-ease-standard, cubic-bezier(0.2, 0, 0, 1)) !important;
  }

  #ai-chat[data-ee-motion="conversation-bloom"][data-ee-state="open"] {
    transform: translateY(0) !important;
    opacity: 1 !important;
  }

  body.chat-keyboard-open #ai-chat[data-ee-motion="conversation-bloom"] {
    transition: transform var(--ee-motion-layer, 320ms) var(--ee-ease-enter, cubic-bezier(0.16, 1, 0.3, 1)) !important;
  }
}

/* Named transition: journey-bridge */
:where([data-ee-motion="journey-bridge"]) {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition:
    opacity var(--ee-motion-reveal, 180ms) var(--ee-ease-enter, cubic-bezier(0.16, 1, 0.3, 1)),
    visibility 0s linear var(--ee-motion-reveal, 180ms);
}

:where([data-ee-motion="journey-bridge"][data-ee-state="open"]) {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transition-delay: 0s;
}

@media (prefers-reduced-motion: reduce) {
  :where([data-ee-motion="layer-rise"], [data-ee-motion="veil"], [data-ee-motion="journey-bridge"]) {
    transition-duration: 1ms, 0s;
    transition-delay: 0s;
  }

  #ai-chat[data-ee-motion="conversation-bloom"] {
    transition-duration: 1ms !important;
    transition-delay: 0s !important;
  }
}