Polish streaming thinking traces

web/src/index.css

@@ -321,6 +321,97 @@ textarea {
   }
 }
 
+.streaming-assistant-slot {
+  display: grid;
+  min-width: 0;
+  min-height: 1.82em;
+  align-items: start;
+}
+
+.streaming-assistant-layer {
+  grid-area: 1 / 1;
+  min-width: 0;
+  transform-origin: top left;
+}
+
+.ephemeral-thinking-trace {
+  position: relative;
+  z-index: 1;
+  color: hsl(252 35% 88% / 0.8);
+  font-style: italic;
+  opacity: 0.78;
+  filter: saturate(0.72);
+  will-change: opacity, transform, filter;
+}
+
+.ephemeral-thinking-trace-enter {
+  animation: ephemeral-thinking-trace-enter 200ms cubic-bezier(0.2, 0.78, 0.24, 1) both;
+}
+
+.ephemeral-thinking-trace-exit {
+  pointer-events: none;
+  animation: ephemeral-thinking-trace-exit 220ms cubic-bezier(0.4, 0, 0.8, 0.28) both;
+}
+
+.streaming-assistant-answer {
+  position: relative;
+  z-index: 2;
+  animation: streaming-assistant-answer-enter 180ms cubic-bezier(0.2, 0.78, 0.24, 1) both;
+}
+
+@keyframes ephemeral-thinking-trace-enter {
+  from {
+    opacity: 0;
+    filter: saturate(0.72) blur(1px);
+    transform: translate3d(0, 0.32rem, 0);
+  }
+
+  to {
+    opacity: 0.78;
+    filter: saturate(0.72) blur(0);
+    transform: translate3d(0, 0, 0);
+  }
+}
+
+@keyframes ephemeral-thinking-trace-exit {
+  from {
+    opacity: 0.78;
+    filter: saturate(0.72) blur(0);
+    transform: translate3d(0, 0, 0);
+  }
+
+  to {
+    opacity: 0;
+    filter: saturate(0.72) blur(1px);
+    transform: translate3d(0, -0.32rem, 0);
+  }
+}
+
+@keyframes streaming-assistant-answer-enter {
+  from {
+    opacity: 0;
+    transform: translate3d(0, 0.18rem, 0);
+  }
+
+  to {
+    opacity: 1;
+    transform: translate3d(0, 0, 0);
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .ephemeral-thinking-trace-enter,
+  .ephemeral-thinking-trace-exit,
+  .streaming-assistant-answer {
+    animation: none;
+    transform: none;
+  }
+
+  .ephemeral-thinking-trace-exit {
+    opacity: 0;
+  }
+}
+
 .md-content {
   word-break: break-word;
 }