.operations-selection-controls {
  align-items: flex-start;
  flex-direction: column;
  max-width: min(100%, 50rem);
}

.operations-actions {
  justify-content: flex-end;
}

.operations-actions button[data-operations-command="approve"]:not(:disabled) {
  border-color: transparent;
  background: var(--accent-strong);
  color: var(--on-accent);
}

.operations-actions button[data-operations-command="cancel"]:not(:disabled) {
  border-color: var(--warn-strong);
  color: var(--warn-strong);
}

.operations-paid-ack {
  padding: var(--space-2) var(--space-3);
  border-left: var(--rail-state) solid var(--warn-strong);
  background: var(--surface-soft);
}

.operations-paid-ack[hidden],
.operations-retry-choices[hidden] {
  display: none !important;
}

.operations-retry-choices {
  width: 100%;
  margin: 0;
  padding: 0;
  border: 0;
}

.operations-retry-choices legend {
  margin-bottom: var(--space-2);
  color: var(--muted);
  font-size: var(--text-label);
  font-weight: 700;
}

.operations-retry-choice-list {
  display: flex;
  gap: var(--space-2);
  flex-wrap: wrap;
}

.operations-retry-choice {
  padding: var(--space-2);
  border: 1px solid var(--line);
  border-radius: var(--radius-compact);
  background: var(--surface-soft);
}

.operations-approval-dialog {
  width: min(var(--approval-dialog-width), calc(100% - var(--space-5)));
  max-height: var(--approval-dialog-max-height);
  padding: var(--space-5);
  border: 1px solid var(--line);
  border-radius: var(--radius-inner);
  background: var(--modal-surface);
  color: var(--ink);
  box-shadow: var(--shadow-soft);
  overflow: hidden;
}

.operations-approval-dialog[open] {
  display: flex;
  flex-direction: column;
}

.operations-approval-dialog::backdrop {
  background: var(--modal-backdrop);
}

.operations-approval-body {
  min-height: 0;
  overflow: auto;
}

.operations-approval-header {
  margin-bottom: var(--space-2);
}

.operations-approval-header h2 {
  margin: 0;
  font-size: var(--text-section);
}

.operations-approval-previews {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-3);
  margin: var(--space-4) 0;
}

.operations-approval-preview {
  min-width: 0;
  margin: 0;
  padding: var(--space-3);
  border: 1px solid var(--line);
  border-radius: var(--radius-inner);
  background: var(--surface-soft);
}

.operations-approval-frame {
  display: grid;
  min-height: var(--approval-preview-min-height);
  place-items: center;
  overflow: hidden;
  border-radius: var(--radius-compact);
  background: var(--modal-frame);
}

.operations-approval-frame img {
  display: block;
  width: 100%;
  max-height: var(--approval-preview-max-height);
  object-fit: contain;
}

.operations-approval-preview figcaption {
  margin-top: var(--space-2);
  font-size: var(--text-ui);
  font-weight: 700;
  overflow-wrap: anywhere;
}

.operations-approval-status {
  min-height: var(--touch-target);
  margin: 0;
  color: var(--muted);
}

.operations-approval-confirm {
  margin: var(--space-3) 0;
}

.operations-approval-footer {
  position: sticky;
  z-index: 1;
  bottom: 0;
  flex: none;
  padding-top: var(--space-3);
  border-top: 1px solid var(--line);
  background: var(--modal-surface);
}

.operations-approval-actions {
  display: flex;
  justify-content: flex-end;
  gap: var(--space-2);
  flex-wrap: wrap;
}

.operations-approval-actions button {
  min-height: var(--touch-target);
  padding: var(--control-padding-compact) var(--control-padding);
  border: 1px solid var(--line);
  border-radius: var(--radius-inner);
  background: var(--surface-soft);
  color: var(--ink);
  font: inherit;
  font-weight: 700;
}

.operations-approval-dialog button:focus-visible,
.operations-approval-dialog input:focus-visible {
  outline: var(--outline-width) solid var(--focus-ring);
  outline-offset: var(--outline-offset);
}

.operations-approval-actions .operations-primary-action:not(:disabled) {
  border-color: transparent;
  background: var(--accent-strong);
  color: var(--on-accent);
}

@media (max-width: 720px) {
  .operations-selection-controls {
    max-width: none;
  }

  .operations-approval-dialog {
    width: var(--approval-dialog-mobile-width);
    max-height: var(--approval-dialog-mobile-max-height);
    padding: var(--space-3);
  }

  .operations-approval-previews {
    grid-template-columns: 1fr;
  }

  .operations-approval-actions,
  .operations-approval-actions button {
    width: 100%;
  }
}