@layer components {
  .offline-indicator {
    position: fixed;
    left: 50%;
    bottom: calc(var(--space-4) + env(safe-area-inset-bottom));
    z-index: var(--z-toast);
    display: none;
    padding: var(--space-2) var(--space-4);
    border-radius: var(--r-full);
    background: var(--ink);
    color: var(--canvas);
    font-size: var(--text-xs);
    transform: translateX(-50%);
  }

  .offline-indicator.visible {
    display: block;
  }
}