/* Structural motion in the conversation panel is driven by one FLIP controller.
   Rows keep their keyed DOM identity while state queues, recency, expansion,
   filters, and archive operations change the layout around them. */

[data-conversation-layout-motion]{position:relative;z-index:6;will-change:transform,opacity}
[data-conversation-state-motion] > .chat-row-main{will-change:opacity}

.conversation-motion-ghost{
  box-sizing:border-box;overflow:hidden;transform-origin:center;contain:layout paint;
  box-shadow:0 12px 28px rgb(0 0 0 / 24%);will-change:transform,opacity;
}
.conversation-motion-ghost,.conversation-motion-ghost *{pointer-events:none!important}

/* Small state details interpolate too, so the row's glide never lands on a
   pill or alert that changed as a single-frame pop. */
.chat-pill{transition:border-color .26s ease,background-color .26s ease,color .26s ease,opacity .26s ease}
.chat-pill-alert{transform:scale(.65);transition:opacity .24s ease,transform .24s ease}
.chat-row.has-child-attention .chat-pill-alert{transform:scale(1)}
.chat-status{transition:color .24s ease,opacity .24s ease}

@media (prefers-reduced-motion:reduce){
  [data-conversation-layout-motion],[data-conversation-state-motion] > .chat-row-main{will-change:auto}
  .conversation-motion-ghost{display:none}
  .chat-pill,.chat-pill-alert,.chat-status{transition:none}
}

:root[data-v2-attention-motion="still"] .chat-pill,
:root[data-v2-attention-motion="still"] .chat-pill-alert,
:root[data-v2-attention-motion="still"] .chat-status{transition:none}