/* ── 72.0-lite: deploy/offline buffer UX (offline.js) ───────────────────────── */

.offline-banner {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  margin: 0 0.75rem 0.35rem;
  padding: 0.45rem 0.9rem;
  border-radius: 0.75rem;
  font-size: 0.85rem;
  font-variant-numeric: tabular-nums; /* second counter ticks without jitter */
  background: oklch(var(--p) / 10%);
  color: oklch(var(--p) / 90%);
  border: 1px solid oklch(var(--p) / 25%);
}

.offline-banner.offline-banner-offline {
  background: oklch(var(--wa) / 10%);
  color: oklch(var(--wa) / 90%);
  border-color: oklch(var(--wa) / 25%);
}

/* Undelivered-message chip — a view of slot.pendingFrame on the user bubble */
.queued-chip {
  display: inline-block;
  margin-top: 0.3rem;
  padding: 0.1rem 0.55rem;
  border-radius: 1rem;
  font-size: 0.72rem;
  cursor: pointer;
  background: oklch(var(--wa) / 15%);
  color: oklch(var(--wa) / 90%);
  border: 1px solid oklch(var(--wa) / 30%);
}

.queued-chip:hover {
  background: oklch(var(--wa) / 25%);
}

/* "Updated ✓" toast after a recovered deploy */
.offline-toast {
  position: fixed;
  bottom: 5.5rem;
  left: 50%;
  transform: translateX(-50%);
  padding: 0.45rem 1rem;
  border-radius: 1rem;
  font-size: 0.85rem;
  background: oklch(var(--su) / 18%);
  color: oklch(var(--su));
  border: 1px solid oklch(var(--su) / 35%);
  z-index: 100;
  animation: offline-toast-fade 2.5s ease forwards;
}

@keyframes offline-toast-fade {
  0%   { opacity: 0; transform: translate(-50%, 0.5rem); }
  12%  { opacity: 1; transform: translate(-50%, 0); }
  80%  { opacity: 1; }
  100% { opacity: 0; }
}