[data-fui-comp="ui-optimistic-action"] {
  /* Inherits .ui-button base; override only what the optimistic flip needs. */
  position: relative;
  transition: background-color 120ms ease, color 120ms ease;
}
/* Committed state — slightly darker background to signal "done". */
[data-fui-comp="ui-optimistic-action"][data-state="committed"] {
  background: var(--color-success, #16A34A);
  color: var(--color-primary-fg, #FFFFFF);
  border-color: var(--color-success, #16A34A);
}
/* Pending state — same look as committed (optimistic) plus a subtle
   busy cursor while the RPC is in flight. */
[data-fui-comp="ui-optimistic-action"][data-state="pending"] {
  cursor: progress;
  background: var(--color-success, #16A34A);
  color: var(--color-primary-fg, #FFFFFF);
  border-color: var(--color-success, #16A34A);
}
/* Roll-back animation: a tiny shake when the server rejects the
   action. Pure CSS, respects prefers-reduced-motion. */
[data-fui-comp="ui-optimistic-action"][data-state="error"] {
  animation: ui-optimistic-action-shake 0.4s ease-in-out;
}
@keyframes ui-optimistic-action-shake {
  0%, 100% { transform: translateX(0); }
  20% { transform: translateX(-4px); }
  40% { transform: translateX(4px); }
  60% { transform: translateX(-3px); }
  80% { transform: translateX(3px); }
}
@media (prefers-reduced-motion: reduce) {
  [data-fui-comp="ui-optimistic-action"][data-state="error"] { animation: none; }
}