/* --------------------------------------------------------------------------
   Movement — what arrives rises in, and nothing that is merely loaded does

   A question slides in from its side, an answer rises, a note fades. A
   conversation read back from the history does not animate (.is-still), and
   neither does the final copy of an answer already written on screen. All of
   it stops for prefers-reduced-motion.
   -------------------------------------------------------------------------- */

.msg-user      { animation: arrive-right .32s var(--ease-out) both; }
.msg-assistant { animation: arrive-up .38s var(--ease-out) both; }
.banner        { animation: arrive-fade .3s ease-out both; }
.msg.is-still  { animation: none; }

/* The follow-up questions, one after another. */
.next-question { animation-delay: calc(.08s + var(--i, 0) * .06s); }

/* The opened "How this was done". */
.flow-taken[open] > .flow,
.flow-taken[open] > .timebar { animation: arrive-fade .25s ease-out both; }

/* Waiting: where the answer will be, shimmering. */
.skeleton {
  display: grid;
  gap: 9px;
  margin-top: 14px;
  max-width: 560px;
}

.skeleton i {
  height: 10px;
  border-radius: var(--r-pill);
  background: linear-gradient(90deg,
    var(--border) 0%, color-mix(in srgb, var(--accent) 16%, var(--surface)) 50%, var(--border) 100%);
  background-size: 200% 100%;
  animation: shimmer 1.4s linear infinite;
}

.skeleton i:nth-child(2) { width: 86%; animation-delay: .12s; }
.skeleton i:nth-child(3) { width: 62%; animation-delay: .24s; }

/* A change applied: the card's edge glows green once, and its tick pops in
   with a ring breaking outward from it. */
.card-applied { animation: applied-glow 1.2s ease-out both; }

.card-applied .card-badge svg {
  border-radius: 50%;
  animation: applied-pop .45s cubic-bezier(.2, .9, .3, 1.4) both,
             applied-ring .9s ease-out .15s both;
}

/* A conversation landing at the top of the history. */
.history-row.is-fresh { animation: fresh-row 1.4s ease-out both; }

@keyframes arrive-up    { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@keyframes arrive-right { from { opacity: 0; transform: translateX(14px); } to { opacity: 1; transform: none; } }
@keyframes arrive-fade  { from { opacity: 0; } to { opacity: 1; } }
@keyframes shimmer      { from { background-position: 200% 0; } to { background-position: -200% 0; } }

@keyframes applied-glow {
  0%   { box-shadow: 0 0 0 0 color-mix(in srgb, var(--pos) 45%, transparent); }
  40%  { box-shadow: 0 0 0 6px color-mix(in srgb, var(--pos) 18%, transparent); }
  100% { box-shadow: 0 0 0 0 transparent; }
}

@keyframes applied-pop  { from { transform: scale(.3); opacity: 0; } to { transform: none; opacity: 1; } }

@keyframes applied-ring {
  from { box-shadow: 0 0 0 0 color-mix(in srgb, var(--pos) 55%, transparent); }
  to   { box-shadow: 0 0 0 10px transparent; }
}

@keyframes fresh-row {
  from { background: var(--accent-soft); transform: translateX(-4px); }
  30%  { transform: none; }
  to   { background: transparent; }
}

@media (prefers-reduced-motion: reduce) {
  .msg-user, .msg-assistant, .banner, .next-question, .card-applied,
  .card-applied .card-badge svg, .history-row.is-fresh,
  .flow-taken[open] > .flow, .flow-taken[open] > .timebar { animation: none; }
  .skeleton i { animation: none; }
  .btn-send:active:not([aria-disabled="true"]) { transform: none; }
}