UI: индикатор загрузки истории чата

shine-UI/styles/components.css

@@ -4669,6 +4669,68 @@ html, body { overflow-x: hidden; }
   gap: 10px;
 }
 
+.dm-history-loader {
+  position: sticky;
+  top: 0;
+  z-index: 3;
+  display: flex;
+  justify-content: center;
+  pointer-events: none;
+  margin-bottom: -4px;
+  opacity: 0;
+  transform: translateY(-8px);
+  transition: opacity 160ms ease, transform 160ms ease;
+}
+
+.dm-history-loader[hidden] {
+  display: none;
+}
+
+.dm-history-loader.is-visible {
+  opacity: 1;
+  transform: translateY(0);
+}
+
+.dm-history-loader__pill {
+  display: inline-flex;
+  align-items: center;
+  gap: 10px;
+  min-height: 34px;
+  padding: 7px 14px;
+  border-radius: 999px;
+  border: 1px solid rgba(212, 175, 55, 0.24);
+  background: rgba(9, 15, 26, 0.92);
+  color: rgba(245, 226, 179, 0.96);
+  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.28);
+  backdrop-filter: blur(14px);
+  -webkit-backdrop-filter: blur(14px);
+}
+
+.dm-history-loader__label {
+  font-size: 12px;
+  font-weight: 600;
+  letter-spacing: 0.02em;
+}
+
+.dm-history-loader__spinner {
+  width: 16px;
+  height: 16px;
+  border-radius: 50%;
+  border: 2px solid rgba(255, 234, 186, 0.22);
+  border-top-color: rgba(242, 201, 92, 0.96);
+  box-shadow: 0 0 10px rgba(212, 175, 55, 0.18);
+  animation: dm-history-loader-spin 0.85s linear infinite;
+}
+
+@keyframes dm-history-loader-spin {
+  from {
+    transform: rotate(0deg);
+  }
+  to {
+    transform: rotate(360deg);
+  }
+}
+
 .dm-screen .bubble {
   max-width: 78%;
   padding: 11px 14px;