/* 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 { cursor: progress; }
button.aera-transaction-button:not(.aera-transaction-button--compact) {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  max-inline-size: 100%;
  white-space: normal;
}
/* 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: var(--network-label, #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; }
/* A wallet request unanswered for 15s: the button flashes mint twice, the order book's change flash, then rests, and
   repeats every 5s until the wallet answers. Outline and inset wash, because the pending fill and border above are
   !important and would win over keyframes. */
button.aera-transaction-button[data-transaction-attention] {
  outline: 1px solid rgb(var(--positive-rgb) / 0);
  outline-offset: -1px;
  animation: aeraTransactionAttention 5s linear infinite;
}
/* Compact controls keep their normal geometry and show the indicator alone: their own content stays in the flow,
   hidden, and the indicator sits centred over it. */
button.aera-transaction-button--compact { position: relative; }
button.aera-transaction-button--compact > .aera-transaction-indicator { position: absolute; inset: 0; margin: auto; }
.aera-transaction-hold { display: contents; visibility: hidden; }
.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 aeraTransactionAttention {
  0%, 10%, 12.8%, 22.8%, 100% { outline-color: rgb(var(--positive-rgb) / 0); box-shadow: inset 0 0 0 999px rgb(var(--positive-rgb) / 0); }
  1.6%, 14.4% { outline-color: rgb(var(--positive-rgb) / 1); box-shadow: inset 0 0 0 999px rgb(var(--positive-rgb) / .28); animation-timing-function: ease-out; }
}
@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; }
  /* The overdue request stays lit instead of flashing. */
  button.aera-transaction-button[data-transaction-attention] { animation: none; outline-color: var(--positive); box-shadow: inset 0 0 0 999px rgb(var(--positive-rgb) / .12); }
}