/* Connectivity notice is part of the shared appearance and mobile shell.
   --mobile-dock-clearance already accounts for the dock and safe area. */
.pwa-connection-status {
  position: fixed;
  z-index: var(--layer-toast);
  right: 50%;
  bottom: calc(var(--mobile-dock-clearance, 0px) + 12px);
  width: min(calc(100% - 24px), 520px);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 10px 14px;
  border: 1px solid var(--color-border);
  border-radius: 14px;
  background: var(--color-surface-elevated);
  color: var(--color-text);
  box-shadow: var(--shadow-md);
  transform: translateX(50%);
  font-size: .75rem;
  line-height: 1.7;
  text-align: center;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.pwa-connection-status[hidden] { display: none !important; }
.pwa-connection-status i { flex: 0 0 auto; color: var(--color-primary); }
@supports not ((backdrop-filter: blur(8px)) or (-webkit-backdrop-filter: blur(8px))) {
  .pwa-connection-status { background: var(--color-surface-elevated); }
}