some changes

static/css/styles.css

@@ -355,6 +355,96 @@ textarea:focus {
   background: var(--danger);
 }
 
+.connection-notice {
+  position: absolute;
+  top: 64px;
+  left: 50%;
+  z-index: 18;
+  display: flex;
+  width: min(520px, calc(100% - 32px));
+  box-sizing: border-box;
+  align-items: center;
+  gap: 12px;
+  padding: 11px 14px;
+  border: 1px solid color-mix(in srgb, var(--danger) 48%, var(--border-strong));
+  border-radius: 12px;
+  background: color-mix(in srgb, var(--surface-strong, #11161e) 94%, var(--danger));
+  box-shadow: 0 16px 42px rgb(0 0 0 / 38%);
+  opacity: 0;
+  pointer-events: none;
+  transform: translate(-50%, -10px) scale(.98);
+  transition: opacity .2s ease, transform .2s ease, border-color .2s ease;
+}
+
+.connection-notice.is-visible {
+  opacity: 1;
+  transform: translate(-50%, 0) scale(1);
+}
+
+.connection-notice.is-restored {
+  border-color: color-mix(in srgb, var(--success) 58%, var(--border-strong));
+  background: color-mix(in srgb, var(--surface-strong, #11161e) 94%, var(--success));
+}
+
+.connection-notice__signal {
+  display: inline-flex;
+  width: 26px;
+  height: 26px;
+  align-items: center;
+  justify-content: center;
+  flex: 0 0 auto;
+  gap: 3px;
+  border-radius: 50%;
+  background: color-mix(in srgb, var(--danger) 18%, transparent);
+}
+
+.connection-notice.is-restored .connection-notice__signal {
+  background: color-mix(in srgb, var(--success) 18%, transparent);
+}
+
+.connection-notice__signal span {
+  width: 3px;
+  height: 10px;
+  border-radius: 3px;
+  background: var(--danger);
+  animation: connection-pulse .9s ease-in-out infinite;
+}
+
+.connection-notice__signal span:nth-child(2) {
+  animation-delay: .12s;
+}
+
+.connection-notice__signal span:nth-child(3) {
+  animation-delay: .24s;
+}
+
+.connection-notice.is-restored .connection-notice__signal span {
+  background: var(--success);
+  animation: none;
+}
+
+.connection-notice__content {
+  display: grid;
+  min-width: 0;
+  gap: 2px;
+}
+
+.connection-notice__content strong {
+  color: var(--text);
+  font-size: .84rem;
+}
+
+.connection-notice__content>span {
+  color: var(--muted);
+  font-size: .76rem;
+  line-height: 1.35;
+}
+
+@keyframes connection-pulse {
+  0%, 100% { transform: scaleY(.45); opacity: .48; }
+  50% { transform: scaleY(1); opacity: 1; }
+}
+
 .editor-layout {
   position: relative;
   display: grid;
@@ -369,6 +459,7 @@ textarea:focus {
 }
 
 .editor-panel {
+  position: relative;
   display: grid;
   grid-template-rows: auto minmax(0, 1fr) auto;
   min-width: 0;
@@ -4412,6 +4503,12 @@ dialog::backdrop {
 }
 
 @media (max-width: 760px) {
+  .connection-notice {
+    top: 76px;
+    width: calc(100% - 20px);
+    padding: 10px 12px;
+  }
+
   .pad-page .editor-toolbar {
     grid-template-columns: minmax(0, 1fr);
   }
@@ -4457,6 +4554,14 @@ dialog::backdrop {
   }
 }
 
+@media (prefers-reduced-motion: reduce) {
+  .connection-notice,
+  .connection-notice__signal span {
+    animation: none;
+    transition: none;
+  }
+}
+
 @media (max-width: 720px) {
   .pad-page #save-state {
     display: none;