/* Canoe Design System 2.0 — conversation view motion layer.
   Scoped to the online chat view; preserves user bubble skins and existing layout. */

/* Entering the conversation: small, quiet offsets create hierarchy without moving
   the scroll container itself (fixed/absolute overlays inside it stay correctly placed). */
.view[data-view="talk"].active .talk-head{
  animation:dsTalkHeadIn 340ms var(--ds-ease-emphasized, cubic-bezier(.22,1,.36,1)) both;
}
.view[data-view="talk"].active .group-summary:not([hidden]),
.view[data-view="talk"].active .group-announcement:not([hidden]){
  animation:dsTalkMetaIn 320ms var(--ds-ease-emphasized, cubic-bezier(.22,1,.36,1)) both;
  animation-delay:35ms;
}
.view[data-view="talk"].active #talkBody{
  animation:dsTalkBodyIn 300ms ease-out both;
  animation-delay:35ms;
}
.view[data-view="talk"].active #talkFoot{
  animation:dsTalkDockIn 390ms var(--ds-ease-emphasized, cubic-bezier(.22,1,.36,1)) both;
  animation-delay:45ms;
}

@keyframes dsTalkHeadIn{
  from{opacity:0;transform:translate3d(0,-7px,0)}
  to{opacity:1;transform:translate3d(0,0,0)}
}
@keyframes dsTalkMetaIn{
  from{opacity:0;transform:translate3d(0,-5px,0)}
  to{opacity:1;transform:translate3d(0,0,0)}
}
@keyframes dsTalkBodyIn{from{opacity:0}to{opacity:1}}
@keyframes dsTalkDockIn{
  from{opacity:0;transform:translate3d(0,12px,0)}
  to{opacity:1;transform:translate3d(0,0,0)}
}

/* Only genuinely new messages receive this class from js/109-chat-motion.js.
   Existing history is never replayed on every render. */
#talkBody .msg.ds-message-enter{animation:none;will-change:auto}
@keyframes dsChatMessageIn{
  0%{opacity:0;transform:translate3d(0,10px,0) scale(.986)}
  72%{opacity:1;transform:translate3d(0,-1px,0) scale(1.002)}
  100%{opacity:1;transform:translate3d(0,0,0) scale(1)}
}

/* Message touch feedback is deliberately tiny so it does not compete with
   swipe-to-quote or long-press interactions. */
#talkBody .msg-bubble{
  transition:box-shadow 180ms ease,transform 180ms var(--ds-ease-standard, cubic-bezier(.2,.75,.25,1));
}
#talkBody .msg-avatar,
#talkBody .msg-avatar-initial{
  transition:transform 220ms var(--ds-ease-emphasized, cubic-bezier(.22,1,.36,1));
}
@media (hover:hover) and (pointer:fine){
  #talkBody .msg:not(.swiping):hover .msg-bubble{
    box-shadow:var(--ds-shadow-soft,0 2px 8px rgba(15,18,28,.045),0 8px 24px rgba(15,18,28,.035));
  }
  #talkBody .msg-avatar:hover,
  #talkBody .msg-avatar-initial:hover{transform:scale(1.035)}
}
#talkBody .msg:not(.swiping) .msg-bubble:not(.independent-card):active{transform:scale(.992)}

/* The glass composer responds to focus instead of staying visually static. */
#talkFoot.glass-chat-dock #talkInputRow{
  transform:translate3d(0,0,0);
  transition:transform 220ms var(--ds-ease-emphasized, cubic-bezier(.22,1,.36,1)),
             box-shadow 240ms ease,background-color 220ms ease;
}
#talkFoot.glass-chat-dock #talkInputRow:focus-within{
  transform:translate3d(0,0,0);
  box-shadow:0 10px 30px rgba(var(--tint-rgb),.105),0 2px 7px rgba(var(--tint-rgb),.045);
}
#talkFoot.glass-chat-dock #talkPlusBtn,
#talkFoot.glass-chat-dock #talkReplyBtn{
  transition:transform 220ms var(--ds-ease-emphasized, cubic-bezier(.22,1,.36,1)),
             color 180ms ease,background-color 180ms ease;
}
#talkFoot.glass-chat-dock #talkPlusBtn:active,
#talkFoot.glass-chat-dock #talkReplyBtn:active{transform:scale(.9)}
#talkFoot.glass-chat-dock #talkPlusBtn svg{
  transition:transform 300ms var(--ds-ease-emphasized, cubic-bezier(.22,1,.36,1));
}

/* Tool drawer: restrained stagger on entry, with no layout animation. */
#talkFoot.glass-chat-dock #talkPanel:not([hidden]) .dock-tool-grid>button{
  animation:dsDockToolIn 260ms var(--ds-ease-emphasized, cubic-bezier(.22,1,.36,1)) both;
  animation-delay:calc(var(--ds-tool-order, 0) * 22ms);
}
#talkPanel .dock-tool-grid>button:nth-child(1){--ds-tool-order:0}
#talkPanel .dock-tool-grid>button:nth-child(2){--ds-tool-order:1}
#talkPanel .dock-tool-grid>button:nth-child(3){--ds-tool-order:2}
#talkPanel .dock-tool-grid>button:nth-child(4){--ds-tool-order:3}
#talkPanel .dock-tool-grid>button:nth-child(5){--ds-tool-order:4}
#talkPanel .dock-tool-grid>button:nth-child(6){--ds-tool-order:5}
#talkPanel .dock-tool-grid>button:nth-child(7){--ds-tool-order:6}
#talkPanel .dock-tool-grid>button:nth-child(8){--ds-tool-order:7}
#talkPanel .dock-tool-grid>button:nth-child(9){--ds-tool-order:8}
#talkPanel .dock-tool-grid>button:nth-child(10){--ds-tool-order:9}
#talkPanel .dock-tool-grid>button:nth-child(11){--ds-tool-order:10}
#talkPanel .dock-tool-grid>button:nth-child(12){--ds-tool-order:11}
#talkPanel .dock-tool-grid>button:nth-child(13){--ds-tool-order:12}
#talkPanel .dock-tool-grid>button:nth-child(14){--ds-tool-order:13}
#talkPanel .dock-tool-grid>button:nth-child(15){--ds-tool-order:14}
#talkPanel .dock-tool-grid>button:nth-child(16){--ds-tool-order:15}
@keyframes dsDockToolIn{
  from{opacity:0;transform:translate3d(0,7px,0) scale(.97)}
  to{opacity:1;transform:translate3d(0,0,0) scale(1)}
}

/* Contextual bars and reading controls enter with a short, clear motion. */
#talkFoot .talk-quote-bar:not([hidden]),
#talkFoot .regen-pick:not([hidden]),
#talkSelectBar:not([hidden]){
  animation:dsTalkBarIn 220ms var(--ds-ease-emphasized, cubic-bezier(.22,1,.36,1)) both;
}
.chat-reading-nav:not([hidden]){
  animation:dsReadingNavIn 220ms var(--ds-ease-emphasized, cubic-bezier(.22,1,.36,1)) both;
}
@keyframes dsTalkBarIn{
  from{opacity:0;transform:translate3d(0,7px,0) scale(.99)}
  to{opacity:1;transform:translate3d(0,0,0) scale(1)}
}
@keyframes dsReadingNavIn{
  from{opacity:0;transform:translate3d(0,8px,0) scale(.96)}
  to{opacity:1;transform:translate3d(0,0,0) scale(1)}
}

@media (prefers-reduced-motion:reduce){
  .view[data-view="talk"].active .talk-head,
  .view[data-view="talk"].active .group-summary:not([hidden]),
  .view[data-view="talk"].active .group-announcement:not([hidden]),
  .view[data-view="talk"].active #talkBody,
  .view[data-view="talk"].active #talkFoot,
  #talkBody .msg.ds-message-enter,
  #talkFoot.glass-chat-dock #talkPanel:not([hidden]) .dock-tool-grid>button,
  #talkFoot .talk-quote-bar:not([hidden]),
  #talkFoot .regen-pick:not([hidden]),
  #talkSelectBar:not([hidden]),
  .chat-reading-nav:not([hidden]){animation:none!important;will-change:auto}
  #talkBody .msg-bubble,
  #talkBody .msg-avatar,
  #talkBody .msg-avatar-initial,
  #talkFoot.glass-chat-dock #talkInputRow,
  #talkFoot.glass-chat-dock #talkPlusBtn,
  #talkFoot.glass-chat-dock #talkReplyBtn{transition:none!important}
}

/* Sending triggers a list render. Historical rows must never replay msgIn. */
#talkBody .msg,
#talkBody .msg-aside,
#talkBody .msg-system,
#talkBody .msg-trans{animation:none!important;will-change:auto}