/* P13: offline on the phone — a message waiting in the outbox (dimmed, with
   its state under it) and the line over a conversation read from the
   phone's encrypted copy. Amber still means "waits for you" only on a failed
   send; queued is quiet ink. */

.item.user.queued {
  flex-direction: column;
  align-items: flex-end;
  gap: 4px;
}

.item.user.queued .bubble {
  border: 1px dashed var(--c-line-strong);
  background: transparent;
  color: var(--c-ink-soft);
}

.item.user.queued[data-state="sending"] .bubble {
  opacity: 0.8;
}

.q-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 6px;
  max-width: 100%;
  color: var(--c-ink-faint);
  font-size: var(--text-xs);
  line-height: var(--leading-ui);
  text-align: right;
}

.q-dot {
  flex: none;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--c-ink-faint);
}

.item.user.queued[data-state="sending"] .q-dot {
  animation: pulse 1.2s var(--ease-out) infinite;
}

.item.user.queued[data-state="failed"] .q-meta {
  color: var(--c-danger);
}

.item.user.queued[data-state="failed"] .q-dot {
  background: var(--c-danger);
}

.q-act {
  min-height: 28px;
  padding: 0 var(--space-2);
  border: 1px solid var(--c-line-strong);
  border-radius: var(--radius-pill);
  background: var(--c-surface-raised);
  color: var(--c-ink);
  font-size: var(--text-xs);
}

.stale-note {
  position: sticky;
  top: 0;
  z-index: 2;
  margin: 0 auto var(--space-3);
  width: fit-content;
  max-width: calc(100% - var(--space-6));
  padding: 6px var(--space-3);
  border-radius: var(--radius-pill);
  background: var(--c-surface-sunken);
  color: var(--c-ink-muted);
  font-size: var(--text-xs);
  line-height: var(--leading-ui);
  text-align: center;
}