/* Undo send (undosend.js): an email waiting to go out, like Gmail's bar. One
 * quiet filled card in the reading column, aligned with the tool rows: who it
 * goes to, a countdown and Undo, then what came of it. No color but a
 * failure's; nothing floats or toasts. */

.transcript > .undo-card { margin-left: 36px; }
.undo-card {
  display: grid;
  gap: var(--sv-space-1);
  max-width: 34rem;
  padding: var(--sv-space-2) var(--sv-space-3) var(--sv-space-2) var(--sv-space-4);
  background: var(--sv-fill-2);
  border: 0;
  border-radius: calc(var(--sv-radius) * 1.5);
  font-size: var(--ui-text);
}
.undo-card[hidden] { display: none; }
.undo-what { color: var(--sv-ink-secondary); font-size: var(--ui-meta); overflow-wrap: anywhere; }
.undo-row { display: flex; align-items: center; justify-content: space-between; gap: var(--sv-space-2); min-height: 44px; }
.undo-status { color: var(--sv-ink); font-variant-numeric: tabular-nums; }
.undo-card .undo-button { min-height: 44px; min-width: 88px; justify-content: center; font-weight: 600; color: var(--sv-ink); }
.undo-card .undo-button[hidden] { display: none; }
.undo-card[data-state="failed"] .undo-status, .undo-card[data-state="unknown"] .undo-status { color: var(--sv-danger); }
.undo-error { margin: 0; color: var(--sv-danger); font-size: var(--ui-meta); }
.undo-error:empty { display: none; }

@media (max-width: 640px) {
  .transcript > .undo-card { margin-left: 0; }
  .undo-card { padding: var(--sv-space-2) var(--sv-space-3); }
}