.simulator-button {
  padding: 10px 15px;
  border: 1px solid var(--gh-border);
  border-radius: 10px;
  background: var(--gh-canvas);
  color: var(--gh-fg);
  font-weight: 800;
}

.simulator-button.primary {
  border-color: var(--simulator-accent);
  background: var(--simulator-accent);
  color: #fff;
}

.simulator-button {
  white-space: nowrap;
}

.simulator-button[data-step]:disabled {
  opacity: 0.45;
  cursor: default;
}

.simulator-button.primary {
  border-color: #27815a;
  background: #27815a;
  color: #fff;
  box-shadow: 0 2px 6px rgba(39, 129, 90, 0.2);
}

.simulator-button.primary:hover {
  border-color: #216f4e;
  background: #216f4e;
}

.simulator-save-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 16px;
}

.simulator-save-actions .simulator-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: auto;
  min-height: 42px;
  text-decoration: none;
}

.simulator-save-actions .primary {
  border-color: var(--color-primary);
  background: var(--color-primary);
  box-shadow: 0 2px 6px color-mix(in srgb, var(--color-primary) 24%, transparent);
}

.simulator-save-actions .primary:hover {
  border-color: color-mix(in srgb, var(--color-primary) 85%, #000);
  background: color-mix(in srgb, var(--color-primary) 85%, #000);
}

.simulator-save-actions .simulator-button:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.simulator-save-actions .simulator-button:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 3px;
}

@media (max-width: 768px) {
  .simulator-save-actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    container-type: inline-size;
  }

  .simulator-save-actions .simulator-button {
    width: 100%;
    min-width: 0;
    min-height: 44px;
    padding: 10px 4px;
    font-size: clamp(8px, 2.5vw, 13px);
    font-size: clamp(8px, 4cqi, 13px);
    line-height: 1.3;
  }
}

.simulator-floating-actions {
  position: fixed;
  right: max(24px, env(safe-area-inset-right));
  bottom: calc(64px + env(safe-area-inset-bottom, 0px));
  z-index: 80;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 8px;
  border: 1px solid var(--color-border);
  border-radius: var(--border-radius);
  background: var(--color-surface);
  box-shadow: 0 6px 24px rgb(0 0 0 / 16%);
}

.simulator-floating-actions[hidden] {
  display: none;
}

.simulator-floating-actions .simulator-button {
  min-width: 148px;
  min-height: 44px;
  margin: 0;
  font-size: var(--floating-button-font-size, inherit);
}

@media (max-width: 900px) {
  .simulator-floating-actions {
    --floating-safe-top: env(safe-area-inset-top, 0px);
    --floating-safe-bottom: env(safe-area-inset-bottom, 0px);
    right: max(12px, env(safe-area-inset-right));
    bottom: calc(56px + env(safe-area-inset-bottom, 0px));
    flex-direction: row;
    width: min(
      260px,
      calc(100vw - 24px - env(safe-area-inset-left, 0px) - env(safe-area-inset-right, 0px))
    );
    gap: 6px;
    padding: 6px;
    touch-action: none;
    user-select: none;
    -webkit-user-select: none;
    -webkit-touch-callout: none;
  }

  .simulator-floating-actions.is-dragging {
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-primary) 20%, transparent);
    cursor: grabbing;
  }

  .simulator-floating-actions .simulator-button {
    flex: 1 1 0;
    width: auto;
    min-width: 0;
    padding: 10px 8px;
    font-size: var(--floating-button-font-size, clamp(10px, 2.9vw, 13px));
  }
}