.realtime-sync-status {
  position: fixed;
  right: 16px;
  bottom: 16px;
  z-index: 1200;
  display: none;
  max-width: min(360px, calc(100vw - 32px));
  padding: 9px 12px;
  border: 1px solid #a9b8c7;
  border-radius: 10px;
  background: #ffffff;
  color: #102844;
  box-shadow: 0 8px 24px rgba(16, 40, 68, .2);
  font-size: 13px;
  font-weight: 700;
  line-height: 1.3;
  pointer-events: none;
}

.realtime-sync-status.is-visible {
  display: block;
}

.realtime-sync-status[data-kind="disconnected"],
.realtime-sync-status[data-kind="warning"] {
  border-color: #9b6a12;
  background: #fff8e8;
  color: #563900;
}

.realtime-sync-status[data-kind="recovered"],
.realtime-sync-status[data-kind="update"] {
  border-color: #2f7452;
  background: #eef9f3;
  color: #174a34;
}

@media (max-width: 980px) {
  .realtime-sync-status {
    right: 10px;
    bottom: calc(var(--workspace-bottom-nav-height, 64px) + env(safe-area-inset-bottom) + 10px);
    left: 10px;
    max-width: none;
    text-align: center;
  }
}

@media (prefers-reduced-motion: reduce) {
  .realtime-sync-status {
    scroll-behavior: auto;
  }
}