/* Two indicators share one 14px box. Three pulsing dots mean the site is waiting for the person (review, wallet or
   device prompt); the quiet rotating ring means Aera, the wallet transport or the blockchain is working. Compact
   controls show only the indicator. */
button.aera-transaction-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  max-inline-size: 100%;
  white-space: normal;
  cursor: progress;
}
/* Pending status must stay readable; unavailable actions keep their own dimming. */
button.aera-transaction-button:disabled {
  opacity: 1 !important;
  color: var(--text, #d4d4d4) !important;
  background: var(--terminal-control, var(--terminal-control)) !important;
  border-color: var(--terminal-rule, var(--terminal-rule)) !important;
}
.aera-transaction-label { min-inline-size: 0; overflow-wrap: anywhere; line-height: 1.35; }
.aera-transaction-indicator {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  block-size: 14px;
  box-sizing: border-box;
  vertical-align: middle;
}
.aera-transaction-spinner {
  inline-size: 14px;
  border: 1.5px solid var(--terminal-rule, rgba(242, 242, 242, 0.18));
  border-top-color: currentColor;
  border-radius: 50%;
  animation: aeraTransactionSpin 1s linear infinite;
}
/* Your turn: three dots pulse in sequence. Each dot keeps a resting presence so the group reads as a waiting cue. */
.aera-transaction-dots { gap: 3px; inline-size: 18px; }
.aera-transaction-dots i {
  display: block;
  flex: 0 0 4px;
  inline-size: 4px;
  block-size: 4px;
  border-radius: 50%;
  background: currentColor;
  opacity: 0.35;
  animation: aeraTransactionDots 1.2s ease-in-out infinite;
}
.aera-transaction-dots i:nth-child(2) { animation-delay: 0.2s; }
.aera-transaction-dots i:nth-child(3) { animation-delay: 0.4s; }
.aera-transaction-mark {
  inline-size: 14px;
  font: 700 0.75rem/1 Geist, sans-serif;
}
.aera-transaction-mark--unresolved { color: #e3b341; }
.aera-transaction-mark--done { color: var(--positive, #3ddc97); }
button.aera-transaction-button:is([data-transaction-phase="unavailable"], [data-transaction-phase="interrupted"]) { cursor: not-allowed; }
button.aera-transaction-button[data-transaction-wait="user"] { cursor: wait; }
/* Compact controls keep their normal geometry and show the indicator alone. */
button.aera-transaction-button--compact { gap: 0; padding: 0; }
button.aera-transaction-button--compact .aera-transaction-indicator { margin: 0 auto; }
.aera-transaction-announcement {
  position: absolute;
  inline-size: 1px;
  block-size: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}
@keyframes aeraTransactionSpin { to { transform: rotate(360deg); } }
@keyframes aeraTransactionDots {
  0%, 60%, 100% { opacity: 0.35; transform: translateY(0); }
  30% { opacity: 1; transform: translateY(-1.5px); }
}
@media (prefers-reduced-motion: reduce) {
  .aera-transaction-spinner { animation: none; }
  /* Static dots still read as "waiting for you": a graded trio instead of a uniform row. */
  .aera-transaction-dots i { animation: none; }
  .aera-transaction-dots i:nth-child(1) { opacity: 1; }
  .aera-transaction-dots i:nth-child(2) { opacity: 0.6; }
  .aera-transaction-dots i:nth-child(3) { opacity: 0.35; }
}