last

web/styles.css

@@ -100,21 +100,51 @@ aside,
   background: rgba(0, 0, 0, 0.3);
 }
 .native-pdf-loading {
+  display: none;
   position: absolute;
-  inset: 0;
-  display: grid;
-  place-items: center;
-  color: #aaa;
-  background: rgba(60, 60, 60, 0.8);
+  top: 18px;
+  left: 50%;
+  transform: translateX(-50%);
   z-index: 3;
-  font-size: 15px;
+  pointer-events: none;
+}
+.native-pdf-loading.is-visible {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 8px 18px;
+  border-radius: 8px;
+  background: rgba(0, 0, 0, 0.72);
+  color: #ddd;
+  font-size: 13px;
+  white-space: nowrap;
+}
+.native-pdf-loading.is-visible::before {
+  content: "";
+  width: 16px;
+  height: 16px;
+  border: 2px solid rgba(255, 255, 255, 0.25);
+  border-top-color: #fff;
+  border-radius: 50%;
+  animation: pdf-spin 0.7s linear infinite;
+  flex-shrink: 0;
+}
+@keyframes pdf-spin {
+  to {
+    transform: rotate(360deg);
+  }
 }
 .native-pdf-error {
+  display: none;
   position: absolute;
   inset: 0;
-  display: grid;
-  place-items: center;
   z-index: 3;
+}
+.native-pdf-error.is-visible {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
   background: rgba(50, 50, 50, 0.9);
   text-align: center;
   padding: 30px 20px;